@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
  
:root {
  --navy:#001c4d;
  --green:#5fa819;
  --cream:#f3eee4;
  --white:#fff;
  --muted:#646464;
  --font:'Poppins',sans-serif;
  --radius:1.25rem;
  --page:80rem;
  --gutter:clamp(1.25rem,5vw,5rem);
  --space:clamp(4rem,7vw,7rem)}


* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth;
  scroll-padding-top:7rem}

body {
  margin:0;
  font-family:var(--font);
  background:var(--cream);
  color:var(--navy);
  font-size:1rem;
  line-height:1.65}

a {
  color:inherit;
  text-decoration:none}

button,input,select,textarea {
  font:inherit}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent}

button {
  cursor:pointer}

img {
  display:block;
  max-width:100%;
  height:auto}

button {
  border:0}

h1,h2,h3,p {
  margin:0}

p+p {
  margin-top:1.2rem}

h1 {
  font-size:clamp(3.5rem,6.7vw,6.4rem);
  font-weight:800;
  line-height:1.07;
  letter-spacing:-.06em}

h2 {
  font-size:clamp(2rem,3.3vw,3.2rem);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.04em}

h3 {
  font-size:1.3rem;
  line-height:1.35}

p {
  max-width:39rem}

p,.line-content {
  overflow-wrap:anywhere}

.container {
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--gutter)}

.navy {
  background:var(--navy);
  color:var(--cream)}

.cream {
  background:var(--cream);
  color:var(--navy)}

.green-text {
  color:var(--green)}

.eyebrow {
  display:block;
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.14em;
  margin-bottom:1.2rem}

.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(2rem,6vw,6rem)}

.two-col p {
  margin-block:1.5rem}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1rem 1.3rem;
  min-height:3.5rem;
  border-radius:.4rem;
  font-size:.875rem;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.025em;
  border:1px solid transparent;
  transition:transform .2s,background .2s}

.button span {
  font-size:1.25rem;
  font-weight:500}

.button:hover {
  transform:translateY(-3px)}

.green {
  background:var(--green);
  color:var(--navy)}

.navy-button {
  background:var(--navy);
  color:var(--cream)}

.outline-button {
  border-color:#ffffff70;
  background:transparent;
  color:var(--cream)}

:focus-visible {
  outline:3px solid var(--green);
  outline-offset:5px}

.button:focus-visible {
  outline-color:currentColor}

.header {
  background:var(--cream);
  position:relative;
  z-index:10}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.7rem;
  min-height:6.6rem}

.main-logo {
  width:7.3rem;
  flex-shrink:0}

.header nav {
  display:flex;
  align-items:center;
  gap:1.45rem}

.header nav a {
  font-size:.875rem;
  white-space:nowrap;
  font-weight:500;
  padding-block:.65rem;
  border-bottom:2px solid transparent}

.header nav a:hover,.header nav a[aria-current] {
  border-color:var(--green)}

.header .button {
  font-size:.75rem;
  gap:.8rem;
  min-height:3rem}

.menu-toggle {
  display:none}

.skip {
  position:absolute;
  top:-6rem;
  left:1rem;
  background:var(--cream);
  padding:1rem;
  z-index:30}

.skip:focus {
  top:1rem}

.hero {
  padding-top:4.5rem;
  overflow:hidden}

.hero-grid {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:3.5rem;
  align-items:center}

.hero h1 {
  margin-bottom:1.6rem}

.hero p {
  max-width:28rem;
  color:#f3eee4da}

.outline {
  -webkit-text-stroke:1.5px var(--cream);
  color:transparent}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:2rem}

.hero .actions .store-button {
  background:transparent;
  color:var(--cream);
  border-color:#f3eee45c}

.asset-placeholder {
  aspect-ratio:1/1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:2rem;
  border:1px dashed #001c4d55;
  border-radius:var(--radius);
  color:var(--navy);
  background:var(--cream)}

.placeholder-kicker {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em}

.placeholder-use {
  font-size:clamp(3.5rem,7vw,7rem);
  line-height:.95;
  font-weight:900;
  letter-spacing:-.07em;
  opacity:.15}

.placeholder-use>span {
  color:var(--green)}

.placeholder-caption {
  font-size:.875rem;
  max-width:15rem}

.hero-image {
  aspect-ratio:4/4.6;
  border-radius:8rem 1.2rem 1.2rem 1.2rem;
  background:#f3eee4;
  transform:rotate(2deg)}

.benefits {
  display:grid;
  grid-template-columns:1fr 1.25fr 1.35fr;
  gap:2rem;
  margin-top:3.4rem;
  margin-bottom:3.5rem}

.benefits>div {
  display:flex;
  align-items:center;
  gap:1rem;
  border-left:1px solid #f3eee450;
  padding-left:1.6rem}

.benefits>div:first-child {
  border:0;
  padding-left:0}

.benefits strong {
  font-size:2.75rem;
  line-height:1.2;
  letter-spacing:-.05em}

.benefits span {
  font-size:.75rem;
  line-height:1.5;
  font-weight:500;
  letter-spacing:.08em}

.ticker {
  position:relative;
  overflow:hidden;
  background:var(--green);
  color:var(--navy);
  transform:rotate(-2deg);
  width:104%;
  margin-left:-2%;
  padding:1.05rem 0;
  white-space:nowrap;
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:.04em;
  text-align:center;
  margin-block:1.5rem}

.ticker i {
  font-style:normal;
  padding-inline:2rem}

.ticker-track {
  display:flex;
  width:max-content;
  animation:ulee-marquee 60s linear infinite;
  will-change:transform;
}
.ticker-group,.ticker-sequence {
  display:flex;
  flex-shrink:0;
  align-items:center;
}
.ticker-group { min-width:104vw; }
.ticker-sequence { flex-grow:1; justify-content:space-around; }
.ticker-sequence>span { flex-shrink:0; }
.ticker-toggle {
  position:absolute;
  right:3%;
  top:50%;
  transform:translateY(-50%);
  width:2.75rem;
  height:2.75rem;
  border-radius:.35rem;
  background:var(--green);
  color:var(--navy);
  border:1px solid var(--navy);
  font-size:1rem;
  line-height:1;
}
.ticker-toggle:focus-visible { outline-color:var(--navy); outline-offset:2px; }
.ticker:focus-within .ticker-track,
.ticker[data-paused="true"] .ticker-track,
.ticker[data-hidden="true"] .ticker-track { animation-play-state:paused; }
@media(hover:hover) {
  .ticker:hover .ticker-track { animation-play-state:paused; }
}
@keyframes ulee-marquee {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}
@media(max-width:650px) {
  .ticker-track { animation-duration:48s; }
}
@media(prefers-reduced-motion:reduce) {
  .ticker-track { animation:none; transform:none; width:100%; will-change:auto; }
  .ticker-group { min-width:0; width:100%; }
  .ticker-group+.ticker-group,
  .ticker-sequence+.ticker-sequence,
  .ticker-toggle { display:none; }
  .ticker-sequence { flex-wrap:wrap; justify-content:center; width:100%; padding-inline:1rem; gap:.5rem 0; }
}

.brands-section {
  padding-block:var(--space)}

.section-heading {
  margin-bottom:2.5rem}

.brand-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem}

.brand-card {
  display:flex;
  flex-direction:column;
  background:var(--cream);
  color:var(--navy);
  border-radius:var(--radius);
  padding:1.6rem;
  transition:transform .25s}

.brand-card:hover {
  transform:translateY(-7px)}

.card-top {
  display:flex;
  justify-content:space-between;
  font-size:.875rem}

.card-top span:last-child {
  font-size:1.4rem}

.brand-card img {
  height:12rem;
  width:100%;
  object-fit:contain;
  margin:1rem auto 2rem}

.brand-card h3 {
  margin-bottom:.8rem}

.brand-card p {
  font-size:.875rem;
  color:var(--muted);
  margin-bottom:2rem}

.card-link {
  display:flex;
  justify-content:space-between;
  font-weight:700;
  font-size:.75rem;
  border-top:1px solid #001c4d25;
  padding-top:1rem;
  margin-top:auto;
  gap:.7rem}

.center {
  text-align:center;
  margin-top:2.5rem}

.about-section {
  padding-block:var(--space)}

.about-section .asset-placeholder {
  background:var(--navy);
  color:var(--cream);
  border-color:transparent;
  aspect-ratio:4/4.2}

.about-section .placeholder-use {
  opacity:.3}

.cta {
  padding-block:var(--space);
  border-top:1px solid #001c4d1f}

.cta .compact {
  aspect-ratio:4/3.4;
  background:transparent}

.footer {
  background:var(--navy);
  color:var(--cream);
  padding-top:4rem}

.footer-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr 1.2fr;
  gap:3rem}

.footer-logo {
  display:block;
  background:var(--cream);
  padding:.8rem 1.1rem;
  width:9rem;
  border-radius:.7rem;
  margin-bottom:1.5rem}

.footer p {
  font-size:.875rem;
  color:#f3eee4b0}

.footer nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem 1.5rem;
  font-size:.875rem;
  align-content:start}

.phone {
  display:block;
  font-size:1.35rem;
  margin-bottom:.6rem;
  font-weight:600}

.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  margin-top:3rem;
  padding-block:1.8rem;
  border-top:1px solid #f3eee430}

.footer-bottom>span {
  font-size:.75rem;
  letter-spacing:.06em}

.footer-bottom strong {
  font-size:clamp(2rem,4vw,3.2rem);
  letter-spacing:-.05em}

.brand-hero {
  padding-block:var(--space)}

.brand-hero h1 {
  font-size:clamp(3.3rem,6vw,5.6rem)}

.brand-stage {
  background:var(--cream);
  border-radius:var(--radius);
  padding:3.5rem;
  aspect-ratio:1;
  display:grid;
  place-items:center}

.brand-stage img {
  max-height:23rem;
  object-fit:contain}

.lines-section {
  padding-block:var(--space)}

.lines {
  margin-top:3rem}

.line-card {
  border-bottom:1px solid #001c4d33}

.line-card:first-child {
  border-top:1px solid #001c4d33}

.line-card summary {
  display:flex;
  align-items:center;
  gap:1.7rem;
  list-style:none;
  cursor:pointer;
  padding:1.8rem .6rem;
  font-size:1.65rem;
  line-height:1.3}

.line-card summary::-webkit-details-marker {
  display:none}

.line-number {
  font-size:.8rem;
  width:1.7rem}

.line-material {
  margin-left:auto;
  font-size:1rem;
  color:var(--muted)}

.expand {
  font-size:1.8rem;
  width:2rem;
  text-align:center}

.line-card[open] .expand {
  transform:rotate(45deg)}

.line-content {
  padding:0 1rem 2rem 4rem;
  display:flex;
  gap:2rem;
  align-items:center;
  justify-content:space-between}

.line-content .eyebrow {
  margin-bottom:.5rem}

.line-content h3 {
  font-size:1.2rem}

.line-icon-slot {
  width:5rem;
  aspect-ratio:1;
  border:1px dashed #001c4d50;
  border-radius:.6rem;
  display:grid;
  place-items:center;
  font-size:.75rem;
  text-align:center;
  flex-shrink:0;
  color:var(--muted)}

.line-content>div:nth-child(2) {
  flex:1}

.editorial,.about-hero,.contact {
  padding-block:var(--space)}

.editorial h2 {
  margin-bottom:2rem}

.editorial-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
  margin-top:3rem}

.editorial-grid article {
  border-top:1px solid #001c4d40;
  padding-top:1.5rem}

.editorial-grid p {
  margin-top:1rem;
  color:var(--muted)}

.about-hero p {
  margin-top:2rem}

.contact-phone {
  display:inline-block;
  font-size:1.4rem;
  font-weight:600;
  border-bottom:2px solid var(--green)}

.contact-form {
  background:var(--white);
  padding:2.5rem;
  border-radius:var(--radius);
  display:flex;
  flex-direction:column}

.contact-form h2 {
  font-size:1.7rem}

.contact-form p {
  font-size:.875rem;
  margin:1rem 0}

.contact-form label {
  font-size:.875rem;
  font-weight:600;
  margin:1rem 0 .5rem}

input,select,textarea {
  width:100%;
  min-height:3.2rem;
  padding:.8rem;
  border:1px solid #001c4d40;
  border-radius:.35rem;
  background:var(--white);
  color:var(--navy)}

textarea {
  resize:vertical}

.contact-form .button {
  margin-top:1.5rem}

.small {
  font-size:.8rem!important;
  line-height:1.7}

.product-card {
  border:1px solid #001c4d30;
  margin-top:3rem}

.product-card h2 {
  font-size:1.4rem}

dialog {
  width:min(32rem,calc(100% - 2rem));
  padding:3rem 2rem;
  border:0;
  border-radius:var(--radius);
  background:var(--cream);
  color:var(--navy)}

dialog::backdrop {
  background:#001c4dcc}

dialog p {
  margin-block:1.5rem}

.dialog-close {
  position:absolute;
  right:1rem;
  top:.5rem;
  background:transparent;
  color:var(--navy);
  font-size:2rem;
  min-width:3rem;
  min-height:3rem}


@media(min-width:1000px) {
  .reverse>div:first-child {
  order:2}

.reverse>div:last-child {
  order:1}

}


@media(max-width:1100px) {
  .header-inner {
  gap:1rem}

.header nav {
  gap:.9rem}

.header nav a {
  font-size:.8rem}

.main-logo {
  width:6rem}

.hero-grid {
  gap:2rem}

.brand-card {
  padding:1.3rem}

.footer-grid {
  gap:2rem}

}


@media(max-width:950px) {
  .header-inner {
  min-height:5.4rem;
  flex-wrap:wrap;
  padding-block:1rem}

.menu-toggle {
  display:flex;
  gap:1rem;
  align-items:center;
  margin-left:auto;
  background:transparent;
  color:var(--navy);
  padding:.65rem;
  font-size:.875rem;
  min-height:2.8rem}

.header nav {
  display:none;
  order:3;
  flex-basis:100%;
  padding:1rem 0;
  flex-wrap:wrap}

.header nav.is-open {
  display:flex}

.header nav a {
  font-size:1rem;
  flex-basis:30%;
  padding:.8rem}

.hero-grid {
  grid-template-columns:1fr 1fr}

.hero .actions .button {
  width:100%}

.hero-image {
  aspect-ratio:3/4.5;
  padding:1.5rem}

.brand-grid {
  gap:.8rem}

.brand-card h3 {
  font-size:1.1rem}

.brand-card img {
  height:9rem}

.footer-grid {
  grid-template-columns:1fr 1fr}

.footer-grid>div:last-child {
  grid-column:1/-1}

.line-content {
  padding-left:1rem}

.two-col {
  gap:2.5rem}

.brand-stage {
  padding:2rem}

.editorial-grid {
  gap:1.5rem}

}


@media(max-width:650px) {
  :root {
  --space:4rem}

h1 {
  font-size:clamp(3.3rem,14vw,5rem)}

h2 {
  font-size:clamp(2rem,8vw,2.8rem)}

.header .button {
  font-size:.7rem;
  padding:.65rem .8rem;
  gap:.5rem}

.main-logo {
  width:5.5rem}

.header-inner {
  gap:.5rem}

.menu-toggle {
  gap:.5rem}

.hero {
  padding-top:2.8rem}

.hero-grid,.two-col {
  grid-template-columns:1fr}

.hero h1 {
  margin-bottom:1.4rem}

.hero .eyebrow {
  font-size:.75rem;
  letter-spacing:.09em}

.hero .actions .button {
  width:auto;
  flex:1}

.actions {
  gap:.6rem}

.actions .button {
  font-size:.75rem;
  padding:.85rem;
  gap:.5rem}

.hero-image {
  aspect-ratio:4/3.8;
  transform:none;
  border-radius:5rem 1rem 1rem 1rem}

.placeholder-use {
  font-size:5rem}

.benefits {
  grid-template-columns:1fr;
  gap:1rem;
  margin-block:2rem}

.benefits>div,.benefits>div:first-child {
  border:0;
  border-bottom:1px solid #f3eee430;
  padding:0 0 1rem;
  gap:1.5rem}

.benefits strong {
  width:7rem;
  font-size:2.5rem}

.benefits span {
  font-size:.8rem}

.ticker {
  font-size:.875rem;
  text-align:left;
  padding-block:.8rem}

.ticker i {
  padding-inline:1rem}

.brand-grid {
  grid-template-columns:1fr;
  gap:1.2rem}

.brand-card {
  padding:1.6rem}

.brand-card img {
  height:13rem}

.brand-card h3 {
  font-size:1.3rem}

.brand-card p {
  font-size:1rem}

.card-link {
  font-size:.875rem}

.about-section .asset-placeholder {
  aspect-ratio:4/3}

.about-section .two-col>div:last-child {
  order:-1}

.cta .compact {
  aspect-ratio:4/3}

.footer-grid {
  grid-template-columns:1fr;
  gap:2.5rem}

.footer-grid>div:last-child {
  grid-column:auto}

.footer nav {
  gap:.5rem}

.footer nav a {
  padding-block:.35rem}

.footer-bottom {
  align-items:start;
  flex-direction:column;
  gap:1rem}

.brand-hero h1 {
  font-size:3.4rem}

.brand-stage {
  aspect-ratio:4/3.6;
  padding:2.3rem}

.brand-stage img {
  max-height:17rem}

.line-card summary {
  display:grid;
  grid-template-columns:1.5rem 1fr 2rem;
  gap:.5rem 1rem;
  padding:1.4rem 0;
  font-size:1.4rem}

.line-material {
  grid-row:2;
  grid-column:2;
  margin-left:0;
  font-size:.875rem}

.expand {
  grid-column:3;
  grid-row:1/3}

.line-content {
  flex-wrap:wrap;
  gap:1rem;
  padding:0 0 1.5rem}

.line-content .button {
  width:100%}

.line-icon-slot {
  width:4.5rem}

.editorial-grid {
  grid-template-columns:1fr;
  gap:2rem}

.contact-form {
  padding:1.5rem}

.contact h1 {
  font-size:4rem}

.contact-form h2 {
  font-size:1.6rem}

.phone {
  font-size:1.25rem}

.product-card {
  margin-top:1rem}

}


@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}

*,*::before,*::after {
  transition:none!important;
  animation:none!important}

}


.asset-placeholder.has-image {
  padding:0;
  overflow:hidden;
  position:relative}

.asset-placeholder.has-image img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover}

/* Preserve the approved Hero slot; let the original transparent artwork breathe. */
.hero-image.has-image {
  background:transparent;
  border-color:transparent;
  border-radius:0;
  overflow:visible;
  transform:none;
}
.hero-image.has-image img {
  width:116%;
  max-width:none;
  left:-8%;
  object-fit:contain;
  object-position:center;
}
@media(max-width:950px) {
  .hero-image.has-image img { width:112%; left:-6%; }
}
@media(max-width:650px) {
  .hero-image.has-image img { width:100%; left:0; }
}

.line-icon-slot {
  object-fit:contain}

.hero-image .placeholder-kicker {
  padding-top:1.8rem}


.header nav a,.header .button,.card-link,.actions .button {
  font-size:.875rem}

.brand-card p {
  font-size:1rem}

@media(max-width:650px) {
  .main-logo {
  width:4.8rem}

.menu-toggle {
  padding:.5rem;
  font-size:.875rem}

.header .button {
  gap:.4rem;
  padding:.7rem .8rem}

.hero .actions .button {
  flex-basis:100%}

.header nav a {
  flex-basis:40%}

}

@media(max-width:370px) {
  .header-inner>.store-button {
  width:100%;
  justify-content:center}

.header nav {
  order:4}

.line-card summary {
  font-size:1.2rem}

}





/* Home: one continuous scene from the impact image to the institutional strip. */
.hero {
  padding-bottom:1.75rem;
  background:var(--navy);
  isolation:isolate;
}
.hero-grid { align-items:end; }
.hero .hero-image { z-index:1; }
.hero .hero-image.has-image img { object-position:center bottom; }
.hero .benefits {
  padding-inline:0;
  grid-template-columns:1fr 1fr 1fr;
  gap:1rem;
  margin-top:2rem;
  margin-bottom:4rem;
}
.hero .benefits>div {
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:.5rem;
  padding-left:1rem;
}
.hero .benefits>div:first-child { padding-left:0; }
.hero .benefits strong { font-size:2.5rem; }
.hero .benefits span { letter-spacing:.025em; font-size:.75rem; }
.hero .ticker {
  z-index:2;
  margin-top:-3.5rem;
  margin-bottom:0;
}
.institutional-benefits { position:relative; }
.institutional-benefits-grid {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2rem;
  margin-block:0;
  min-height:6.5rem;
  padding-block:1.5rem;
  align-items:center;
}
.institutional-benefits-grid li {
  display:flex;
  align-items:center;
  gap:1rem;
  min-width:0;
  font-size:.9375rem;
  line-height:1.5;
  font-weight:500;
}
.institutional-benefits-grid svg { color:var(--green); flex-shrink:0; width:2rem; height:2rem; }
.institutional-benefits-grid span { overflow-wrap:normal; word-break:normal; }
@media(max-width:1000px) {
  .institutional-benefits-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 2rem; }
}
@media(min-width:651px) and (max-width:950px) {
  .hero .benefits { grid-template-columns:1fr; gap:.75rem; }
  .hero .benefits>div,.hero .benefits>div:first-child {
    flex-direction:row; align-items:center; border:0; padding:0; gap:1rem;
  }
  .hero .benefits strong { width:6.5rem; flex-shrink:0; }
  .hero .hero-image { aspect-ratio:auto; height:100%; }
}
@media(max-width:650px) {
  .hero { padding-bottom:1rem; background:var(--navy); }
  .hero-grid { gap:1rem; }
  .hero .benefits { grid-template-columns:1fr; margin-top:2rem; margin-bottom:1rem; }
  .hero .benefits>div,.hero .benefits>div:first-child { flex-direction:row; align-items:center; padding:0 0 .75rem; gap:1.5rem; }
  .hero .benefits strong { width:7rem; }
  .hero .benefits span { font-size:.8rem; }
  .hero .ticker { margin-top:-2rem; transform:rotate(-1.4deg); }
  .institutional-benefits-grid { gap:1.5rem 1.25rem; padding-block:1.5rem; }
  .institutional-benefits-grid li { align-items:flex-start; flex-direction:column; gap:.65rem; font-size:.875rem; }
  .institutional-benefits-grid svg { width:1.75rem; height:1.75rem; }
}
@media(max-width:359px) {
  .institutional-benefits-grid { grid-template-columns:1fr; }
  .institutional-benefits-grid li { flex-direction:row; align-items:center; gap:1rem; }
}
@media(prefers-reduced-motion:reduce) {
  .hero .ticker { transform:none; }
}

@media(min-width:1101px) {
  .hero .hero-image.has-image img { width:126%; left:-10%; }
}
/* Tablet: stack the image instead of leaving an empty column above it. */
@media(min-width:651px) and (max-width:950px) {
  .hero-grid { grid-template-columns:1fr; gap:1.5rem; }
  .hero .actions .button { width:auto; }
  .hero .benefits { grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:1rem; }
  .hero .benefits>div { flex-direction:column; align-items:flex-start; }
  .hero .hero-image { aspect-ratio:1.1; height:auto; width:100%; max-width:42rem; justify-self:center; }
  .hero .hero-image.has-image img { width:100%; left:0; }
}


/* Compact blue opening; only the following principal section changes to cream. */
.hero-grid>div:first-child { padding-bottom:6rem; }
.institutional-benefits-grid { padding-block:1.2rem; }
.brands-section.cream .outline-button { color:var(--navy); border-color:var(--navy); }
@media(max-width:950px) {
  .hero-grid>div:first-child { padding-bottom:0; }
}
@media(max-width:1000px) {
  .institutional-benefits-grid { row-gap:1.2rem; }
}
@media(max-width:650px) {
  .institutional-benefits-grid { padding-block:1rem; row-gap:1rem; }
  .institutional-benefits-grid li { gap:.5rem; }
}

/* Home universes: light editorial accents, without changing shared cards. */
.brands-section .brand-card {
  position:relative;
  isolation:isolate;
  background:transparent;
  border-radius:0;
  transform:none;
}
.brands-section .brand-card::before {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  top:5.7rem;
  left:50%;
  width:10.5rem;
  height:8rem;
  background:var(--green);
  opacity:.065;
  border-radius:64% 36% 57% 43% / 42% 62% 38% 58%;
  transform:translateX(-50%) rotate(-12deg);
  transition:opacity 250ms ease,transform 250ms ease;
}
.brands-section .brand-card:nth-child(2)::before {
  border-radius:38% 62% 42% 58% / 61% 39% 61% 39%;
  transform:translateX(-50%) rotate(12deg);
}
.brands-section .brand-card:nth-child(3)::before {
  border-radius:55% 45% 35% 65% / 36% 57% 43% 64%;
}
.brands-section .brand-card img {
  height:13.5rem;
  margin:1rem auto .5rem;
  transition:transform 250ms ease;
}
.brands-section .card-top>span:first-child {
  display:inline-flex;
  align-items:center;
  gap:.65rem;
}
.brands-section .card-top>span:first-child::after {
  content:"";
  width:1.15rem;
  height:2px;
  background:var(--green);
  opacity:.55;
  transform-origin:left;
  transition:opacity 250ms ease,transform 250ms ease;
}
.brands-section .card-top>span:last-child,
.brands-section .card-link>span {
  display:inline-block;
  transition:transform 250ms ease,color 250ms ease;
}
.brands-section .center .button {
  transition:background-color 250ms ease,color 250ms ease,border-color 250ms ease;
}
.brands-section .brand-card:focus-visible::before { opacity:.13; }
.brands-section .brand-card:focus-visible .card-link>span { transform:translate(3px,-3px); }
.brands-section .center .button:focus-visible {
  background:var(--green);
  color:var(--navy);
  border-color:var(--green);
}
@media(hover:hover) and (pointer:fine) {
  .brands-section .brand-card:hover { transform:none; }
  .brands-section .brand-card:hover img { transform:scale(1.035); }
  .brands-section .brand-card:hover::before { opacity:.13; }
  .brands-section .brand-card:hover .card-top>span:first-child::after { opacity:1; transform:scaleX(1.2); }
  .brands-section .brand-card:hover .card-top>span:last-child,
  .brands-section .brand-card:hover .card-link>span { transform:translate(3px,-3px); color:var(--green); }
  .brands-section .center .button:hover { transform:none; background:var(--green); color:var(--navy); border-color:var(--green); }
}
@media(min-width:651px) and (max-width:950px) {
  .brands-section .brand-card { padding-inline:.8rem; }
  .brands-section .brand-card img { height:10.125rem; margin-bottom:.875rem; }
  .brands-section .brand-card::before { width:8rem; height:6.5rem; top:5rem; }
}
@media(max-width:650px) {
  .brands-section .brand-card img { height:14.625rem; margin-bottom:.375rem; }
  .brands-section .brand-card::before { top:6.5rem; width:11rem; height:9rem; }
}
@media(prefers-reduced-motion:reduce) {
  .brands-section .brand-card:hover img,
  .brands-section .brand-card:hover .card-top>span:last-child,
  .brands-section .brand-card:hover .card-link>span,
  .brands-section .brand-card:focus-visible .card-link>span { transform:none; }
}

/* Home institutional story: preserve its copy and image slot. */
.about-section .eyebrow {
  display:flex;
  align-items:center;
  gap:.75rem;
}
.about-section .eyebrow::before {
  content:"";
  width:1.35rem;
  height:3px;
  flex-shrink:0;
  background:var(--green);
  border-radius:2px;
}
.about-section .button {
  transition:background-color 250ms ease,color 250ms ease,border-color 250ms ease;
}
.about-section .button>span {
  display:inline-block;
  transition:transform 250ms ease;
}
.about-section .button:focus-visible {
  background:var(--green);
  color:var(--navy);
  border-color:var(--green);
}
@media(hover:hover) and (pointer:fine) {
  .about-section .button:hover {
    transform:none;
    background:var(--green);
    color:var(--navy);
    border-color:var(--green);
  }
  .about-section .button:hover>span { transform:translate(3px,-3px); }
}
@media(max-width:950px) {
  .about-section .two-col { grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .about-section .two-col>div { width:100%; max-width:38rem; justify-self:center; }
  .about-section .two-col>div:last-child { order:-1; }
}
@media(prefers-reduced-motion:reduce) {
  .about-section .button:hover>span { transform:none; }
}

/* Official creation photo: retain the complete portrait composition. */
.about-section .asset-placeholder.has-image {
  aspect-ratio:4/5;
  border-radius:var(--radius);
}
.about-section .asset-placeholder.has-image img {
  object-fit:cover;
  object-position:center;
}
@media(max-width:950px) {
  .about-section .two-col>div:last-child { order:0; }
}

/* Official Home CTA: keep every product visible in the transparent montage. */
.cta .compact.has-image {
  aspect-ratio:1;
  background:transparent;
  border:0;
  border-radius:0;
}
.cta .compact.has-image img {
  object-fit:contain;
  object-position:center;
}
/* Home footer: official white logo and a quieter, balanced closing band. */
.footer.footer-home { padding-top:4.5rem; }
.footer-home .footer-grid {
  grid-template-columns:1.15fr 1fr 1.15fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
}
.footer-home .footer-logo {
  width:11.5rem;
  max-width:100%;
  padding:0;
  background:transparent;
  border-radius:0;
  margin:0 0 1.5rem;
}
.footer-home .footer-logo img { display:block; width:100%; height:auto; }
.footer-home .footer-brand p { font-size:1.05rem; line-height:1.7; margin:0; color:var(--cream); }
.footer-home .footer-brand strong { font-weight:600; }
.footer-home .footer-brand p::before {
  content:"";
  display:block;
  width:2rem;
  height:3px;
  margin-bottom:1rem;
  background:var(--green);
  border-radius:2px;
}
.footer-home .eyebrow { margin-bottom:1.5rem; color:var(--cream); font-size:.75rem; }
.footer-home nav { gap:.55rem 1.4rem; }
.footer-home nav a { padding-block:.35rem; width:fit-content; text-underline-offset:.35em; }
.footer-home nav a:hover { color:var(--cream); text-decoration:underline; text-decoration-color:var(--green); }
.footer-home .phone { display:flex; align-items:center; gap:.8rem; font-size:clamp(1.1rem,1.7vw,1.45rem); white-space:nowrap; }
.footer-home .phone span { color:var(--green); transition:transform 250ms ease; }
.footer-home .phone:hover span { transform:translate(3px,-3px); }
.footer-home .footer-contact p { margin:1rem 0 0; line-height:1.7; color:var(--cream); }
.footer-home .footer-bottom { margin-top:3.5rem; padding-block:1.6rem; }
.footer-home .footer-bottom>span { font-size:.75rem; letter-spacing:0; line-height:1.8; color:var(--cream); }
@media(max-width:950px) {
  .footer-home .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .footer-home .footer-contact { grid-column:1/-1; }
}
@media(max-width:650px) {
  .footer.footer-home { padding-top:3rem; }
  .footer-home .footer-grid { grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .footer-home .footer-logo { width:10rem; }
  .footer-home .footer-grid>div:last-child { grid-column:auto; }
  .footer-home nav { grid-template-columns:1fr 1fr; gap:.4rem 1.5rem; }
  .footer-home nav a { min-height:44px; display:flex; align-items:center; padding-block:.5rem; }
  .footer-home .eyebrow { margin-bottom:1rem; }
  .footer-home .phone { font-size:1.3rem; }
  .footer-home .footer-bottom { margin-top:2.5rem; padding-block:1.5rem; }
}
@media(prefers-reduced-motion:reduce) {
  .footer-home .phone span { transition:none; }
  .footer-home .phone:hover span { transform:none; }
}