
/* =========================================================
   CSR GLOBAL
========================================================= */

.csr-page {
  background: #f3f0e7;
  color: #064c3f;
}

.csr-page main {
  width: 100%;
  overflow: hidden;
}

.csr-page *,
.csr-page *::before,
.csr-page *::after {
  box-sizing: border-box;
}

.csr-reveal {
  opacity: 1;
  transform: translateY(32px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.csr-reveal.csr-visible {
  opacity: 1;
  transform: translateY(0);
}

.csr-image-reveal {
  opacity: 1;
  transform: translateY(35px) scale(0.985);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.csr-image-reveal.csr-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.csr-image-reveal img {
  transition:
    transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.6s ease;
}

.csr-image-reveal:hover img {
  transform: scale(1.025);
}


/* =========================================================
   HERO
========================================================= */

.csr-hero {
  position: relative;
  min-height: calc(100vh - 90px);
  padding: 42px var(--side, 5%) 80px;
  overflow: hidden;

  background: #f3f0e7;
}

.csr-hero-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.csr-hero-word {
  position: absolute;

  right: -2vw;
  top: 50%;

  transform: translateY(-50%);

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(180px, 25vw, 430px);
  font-weight: 400;
  font-style: italic;

  line-height: 0.7;
  letter-spacing: -0.08em;

  color: rgba(6, 76, 63, 0.035);

  pointer-events: none;
  user-select: none;
}

.csr-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding-bottom: 18px;
  margin-bottom: 58px;

  border-bottom: 1px solid rgba(6, 76, 63, 0.16);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.19em;
}

.csr-hero-top span:first-child {
  color: #df6337;
}

.csr-hero-top span:last-child {
  color: rgba(6, 76, 63, 0.55);
}

.csr-hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.88fr) minmax(420px, 1.12fr);

  gap: clamp(55px, 7vw, 120px);

  align-items: center;
}

.csr-hero-copy {
  position: relative;
  z-index: 3;
}

.csr-eyebrow {
  display: block;

  margin-bottom: 26px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.2em;

  color: #df6337;
}

.csr-hero h1 {
  max-width: 720px;

  margin: 0;

  font-size: clamp(72px, 7.4vw, 128px);
  line-height: 0.82;

  letter-spacing: -0.065em;
  font-weight: 500;

  color: #064c3f;
}

.csr-hero h1 em {
  display: block;

  margin-top: 12px;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;

  color: #df6337;
}

.csr-hero-intro {
  max-width: 520px;

  margin: 42px 0 0;

  font-size: 14px;
  line-height: 1.8;

  color: #65746f;
}

.csr-hero-note {
  display: flex;
  align-items: flex-start;

  gap: 18px;

  margin-top: 45px;
}

.csr-hero-note>span {
  width: 40px;
  height: 40px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(6, 76, 63, 0.2);
  border-radius: 50%;

  font-size: 8px;
  font-weight: 700;

  color: #df6337;
}

.csr-hero-note p {
  margin: 3px 0 0;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #064c3f;
}


/* HERO IMAGE */

.csr-hero-image {
  position: relative;

  width: 100%;
  height: clamp(400px, 48vh, 520px);

  margin: 0;
  overflow: hidden;

  background: #ddd7cb;
}

.csr-hero-image::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(to bottom,
      transparent 55%,
      rgba(2, 30, 25, 0.52) 100%);

  pointer-events: none;
}

.csr-hero-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.csr-hero-image figcaption {
  position: absolute;

  z-index: 2;

  left: 28px;
  right: 28px;
  bottom: 25px;

  display: flex;
  justify-content: space-between;

  gap: 20px;

  color: #ffffff;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.16em;
}


/* =========================================================
   SHARED SECTION INDEX
========================================================= */

.csr-section-index {
  display: flex;
  align-items: center;

  gap: 22px;

  padding-bottom: 18px;
  margin-bottom: 60px;

  border-bottom: 1px solid rgba(6, 76, 63, 0.16);
}

.csr-section-index span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border: 1px solid rgba(6, 76, 63, 0.18);
  border-radius: 50%;

  font-size: 8px;
  font-weight: 700;

  color: #df6337;
}

.csr-section-index span:last-child {
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.2em;

  color: #064c3f;
}


/* =========================================================
   INTRO
========================================================= */

.csr-intro {
  padding: 115px var(--side, 5%) 130px;

  background: #f3f0e7;
}

.csr-intro-inner {
  width: 100%;
  max-width: 1600px;

  margin: 0 auto;
}

.csr-intro-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr) minmax(320px, 0.9fr);

  gap: clamp(70px, 10vw, 170px);

  align-items: start;
}

.csr-intro-heading>span {
  display: block;

  margin-bottom: 18px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.18em;

  color: #df6337;
}

.csr-intro-heading h2 {
  max-width: 760px;

  margin: 0;

  font-size: clamp(60px, 7vw, 112px);
  line-height: 0.88;

  letter-spacing: -0.06em;
  font-weight: 500;

  color: #064c3f;
}

.csr-intro-heading h2 em {
  display: block;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;

  color: #df6337;
}

.csr-intro-copy {
  padding-top: 10px;
}

.csr-intro-copy p {
  max-width: 570px;

  margin: 0 0 24px;

  font-size: 14px;
  line-height: 1.85;

  color: #65746f;
}

.csr-intro-copy .csr-intro-lead {
  margin-bottom: 28px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 2vw, 32px);
  line-height: 1.35;

  color: #064c3f;
}


/* =========================================================
   EVERYDAY CARE — DARK SECTION
========================================================= */

.csr-care {
  position: relative;

  padding: 105px var(--side, 5%) 120px;

  background: #064c3f;

  color: #f3f0e7;
}

.csr-care-inner {
  width: 100%;
  max-width: 1600px;

  margin: 0 auto;
}

.csr-section-index-light {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.csr-section-index-light span:first-child {
  border-color: rgba(255, 255, 255, 0.2);

  color: #df6337;
}

.csr-section-index-light span:last-child {
  color: rgba(243, 240, 231, 0.75);
}

.csr-care-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr) minmax(300px, 0.75fr);

  gap: 80px;

  align-items: end;

  margin-bottom: 70px;
}

.csr-care-heading h2 {
  max-width: 950px;

  margin: 0;

  font-size: clamp(58px, 6.5vw, 105px);
  line-height: 0.9;

  letter-spacing: -0.06em;
  font-weight: 500;

  color: #f3f0e7;
}

.csr-care-heading h2 em {
  display: block;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;

  color: #df6337;
}

.csr-care-heading>p {
  max-width: 460px;

  margin: 0 0 8px;

  font-size: 13px;
  line-height: 1.8;

  color: rgba(243, 240, 231, 0.66);
}


/* CARE GALLERY */

.csr-care-gallery {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr) minmax(260px, 0.65fr);

  grid-template-rows:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  width: 100%;
  height: 500px;
  min-height: 0;
}

.csr-care-gallery figure {
  position: relative;

  margin: 0;

  overflow: hidden;

  background: #173f37;
}

.csr-care-gallery img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.csr-care-main {
  grid-row: 1 / 3;
}

.csr-care-main::after,
.csr-care-small::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(to bottom,
      transparent 55%,
      rgba(1, 25, 20, 0.7));

  pointer-events: none;
}

.csr-care-gallery figcaption {
  position: absolute;

  z-index: 2;

  left: 24px;
  right: 24px;
  bottom: 22px;

  color: #ffffff;
}

.csr-care-gallery figcaption span {
  display: block;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.17em;

  color: #df6337;
}

.csr-care-gallery figcaption p {
  max-width: 330px;

  margin: 10px 0 0;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.3;

  color: #ffffff;
}


/* CARE VALUES */

.csr-care-values {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  margin-top: 70px;

  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.csr-care-value {
  min-height: 220px;

  padding: 28px;

  border-right: 1px solid rgba(255, 255, 255, 0.16);

  transition:
    background 0.35s ease,
    transform 0.35s ease;
}

.csr-care-value:last-child {
  border-right: 0;
}

.csr-care-value:hover {
  background: rgba(255, 255, 255, 0.045);
}

.csr-care-value>span {
  display: block;

  margin-bottom: 50px;

  font-size: 8px;
  font-weight: 700;

  color: #df6337;
}

.csr-care-value h3 {
  margin: 0 0 12px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 400;

  color: #f3f0e7;
}

.csr-care-value p {
  max-width: 220px;

  margin: 0;

  font-size: 12px;
  line-height: 1.65;

  color: rgba(243, 240, 231, 0.58);
}


/* =========================================================
   VETERINARY CARE
========================================================= */

.csr-vet {
  padding: 115px var(--side, 5%) 130px;

  background: #f3f0e7;
}

.csr-vet-inner {
  width: 100%;
  max-width: 1600px;

  margin: 0 auto;
}

.csr-vet-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr) minmax(300px, 0.9fr);

  gap: 80px;

  align-items: end;

  margin-bottom: 70px;
}

.csr-vet-heading h2 {
  max-width: 900px;

  margin: 0;

  font-size: clamp(60px, 7vw, 110px);
  line-height: 0.88;

  letter-spacing: -0.06em;
  font-weight: 500;

  color: #064c3f;
}

.csr-vet-heading h2 em {
  display: block;

  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;

  color: #df6337;
}

.csr-vet-copy>span {
  display: block;

  margin-bottom: 16px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.18em;

  color: #df6337;
}

.csr-vet-copy p {
  max-width: 500px;

  margin: 0;

  font-size: 13px;
  line-height: 1.8;

  color: #65746f;
}


/* VET GALLERY */

.csr-vet-gallery {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr) minmax(0, 0.65fr);

  grid-template-rows:
    repeat(2, 235px);

  gap: 12px;

  width: 100%;
}

.csr-vet-image {
  position: relative;

  margin: 0;

  overflow: hidden;

  background: #e2ddd2;
}

.csr-vet-image-large {
  grid-row: 1 / 3;
}

.csr-vet-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.csr-vet-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(to bottom,
      transparent 60%,
      rgba(2, 31, 25, 0.48));

  pointer-events: none;
}

.csr-vet-image figcaption {
  position: absolute;

  z-index: 2;

  left: 22px;
  bottom: 20px;
}

.csr-vet-image figcaption span {
  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.17em;

  color: #ffffff;
}


/* =========================================================
   WORKPLACE CULTURE / COMPASSION
========================================================= */

.csr-culture {
  position: relative;

  padding: 125px var(--side, 5%);

  overflow: hidden;

  background: #e7e0d3;
}

.csr-culture-bg {
  position: absolute;

  left: -1vw;
  bottom: -4vw;

  font-size: clamp(110px, 18vw, 320px);
  font-weight: 600;

  line-height: 0.7;
  letter-spacing: -0.08em;

  color: rgba(6, 76, 63, 0.035);

  pointer-events: none;
}

.csr-culture-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1450px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(400px, 0.95fr) minmax(0, 1.05fr);

  gap: clamp(70px, 9vw, 150px);

  align-items: center;
}

.csr-culture-image {
  position: relative;

  width: 100%;
  height: 500px;

  overflow: hidden;

  background: #d9d3c8;
}

.csr-culture-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.csr-culture-image-number {
  position: absolute;

  top: 22px;
  left: 22px;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #df6337;

  color: #ffffff;

  font-size: 8px;
  font-weight: 700;
}

.csr-culture-content h2 {
  max-width: 700px;

  margin: 0;

  font-size: clamp(58px, 6vw, 100px);
  line-height: 0.88;

  letter-spacing: -0.06em;
  font-weight: 500;

  color: #064c3f;
}

.csr-culture-content h2 em {
  display: block;

  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;

  color: #df6337;
}

.csr-culture-content>p {
  max-width: 530px;

  margin: 38px 0 0;

  font-size: 14px;
  line-height: 1.85;

  color: #65746f;
}

.csr-culture-content blockquote {
  position: relative;

  max-width: 600px;

  margin: 50px 0 0;
  padding: 28px 0 0 35px;

  border-top: 1px solid rgba(6, 76, 63, 0.17);

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.45;
  font-style: italic;

  color: #064c3f;
}

.csr-culture-content blockquote::before {
  content: "“";

  position: absolute;

  left: 0;
  top: 24px;

  font-size: 42px;
  line-height: 1;

  color: #df6337;
}


/* =========================================================
   RESPONSIBILITY NOTICE
========================================================= */

.csr-notice {
  padding: 115px var(--side, 5%);

  background: #064c3f;

  color: #f3f0e7;
}

.csr-notice-inner {
  width: 100%;
  max-width: 1400px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 150px minmax(0, 1fr);

  gap: 70px;
}

.csr-notice-number {
  width: 105px;
  height: 105px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-style: italic;

  color: #df6337;
}

.csr-notice-label {
  display: block;

  margin-bottom: 25px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.2em;

  color: #df6337;
}

.csr-notice-content h2 {
  max-width: 900px;

  margin: 0;

  font-size: clamp(62px, 7vw, 112px);
  line-height: 0.88;

  letter-spacing: -0.06em;
  font-weight: 500;

  color: #f3f0e7;
}

.csr-notice-content h2 em {
  display: block;

  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;

  color: #df6337;
}

.csr-notice-lead {
  max-width: 620px;

  margin: 38px 0 35px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.5;

  color: rgba(243, 240, 231, 0.9);
}

.csr-notice-warning {
  max-width: 900px;

  display: grid;

  grid-template-columns: 48px minmax(0, 1fr);

  gap: 22px;

  padding: 28px;

  border: 1px solid rgba(223, 99, 55, 0.55);

  background: rgba(223, 99, 55, 0.08);
}

.csr-notice-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #df6337;

  color: #ffffff;

  font-size: 17px;
  font-weight: 700;
}

.csr-notice-warning p {
  margin: 0;

  font-size: 14px;
  line-height: 1.75;

  color: rgba(243, 240, 231, 0.82);
}

.csr-notice-warning strong {
  color: #ffffff;
}

.csr-notice-small {
  max-width: 700px;

  margin: 25px 0 0 70px;

  font-size: 11px;
  line-height: 1.7;

  color: rgba(243, 240, 231, 0.5);
}


/* =========================================================
   PHOTO MANIFESTO
========================================================= */

.csr-manifesto {
  position: relative;

  min-height: 650px;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  background: #052f28;
}

.csr-manifesto-image,
.csr-manifesto-overlay {
  position: absolute;
  inset: 0;
}

.csr-manifesto-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.csr-manifesto-overlay {
  z-index: 1;

  background:
    linear-gradient(90deg,
      rgba(2, 32, 26, 0.9) 0%,
      rgba(2, 32, 26, 0.58) 48%,
      rgba(2, 32, 26, 0.15) 100%),
    linear-gradient(to top,
      rgba(2, 32, 26, 0.7),
      transparent 50%);
}

.csr-manifesto-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1100px;

  padding:
    120px var(--side, 5%) 95px;
}

.csr-manifesto-label {
  display: block;

  margin-bottom: 25px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.2em;

  color: #df6337;
}

.csr-manifesto-content h2 {
  max-width: 950px;

  margin: 0;

  font-size: clamp(65px, 7vw, 115px);
  line-height: 0.88;

  letter-spacing: -0.06em;
  font-weight: 500;

  color: #ffffff;
}

.csr-manifesto-content h2 em {
  display: block;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;

  color: #df6337;
}

.csr-manifesto-content p {
  max-width: 540px;

  margin: 38px 0 0;

  font-size: 14px;
  line-height: 1.8;

  color: rgba(255, 255, 255, 0.72);
}

.csr-manifesto-side {
  position: absolute;

  z-index: 3;

  right: 28px;
  top: 50%;

  transform:
    translateY(-50%) rotate(90deg);

  transform-origin: center;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.25em;

  color: rgba(255, 255, 255, 0.55);
}


/* =========================================================
   FINAL CLOSING
========================================================= */

.csr-closing {
  padding: 105px var(--side, 5%) 115px;

  background: #f3f0e7;
}

.csr-closing-inner {
  width: 100%;
  max-width: 1600px;

  margin: 0 auto;
}

.csr-closing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding-bottom: 20px;
  margin-bottom: 70px;

  border-bottom: 1px solid rgba(6, 76, 63, 0.17);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.19em;

  color: #064c3f;
}

.csr-closing-top span:first-child {
  color: #df6337;
}

.csr-closing-title {
  display: flex;
  flex-direction: column;

  width: 100%;
}

.csr-closing-line {
  display: block;

  font-size: clamp(62px, 8vw, 135px);
  line-height: 0.86;

  letter-spacing: -0.065em;
  font-weight: 500;

  color: #064c3f;
}

.csr-closing-line:nth-child(2) {
  margin-left: 7vw;
}

.csr-closing-line:nth-child(3) {
  margin-left: 14vw;
}

.csr-closing-line-orange {
  color: #df6337;
}

.csr-closing-line-serif {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
}

.csr-closing-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;

  margin-top: 75px;
  padding-top: 28px;

  border-top: 1px solid rgba(6, 76, 63, 0.17);
}

.csr-closing-bottom p {
  max-width: 520px;

  margin: 0;

  font-size: 13px;
  line-height: 1.75;

  color: #65746f;
}

.csr-closing-link {
  width: 230px;
  height: 65px;

  flex-shrink: 0;

  padding: 0 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #064c3f;

  color: #f3f0e7;

  text-decoration: none;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.14em;

  transition:
    background 0.35s ease,
    transform 0.35s ease;
}

.csr-closing-link:hover {
  background: #df6337;

  transform: translateY(-4px);
}

.csr-closing-link span:last-child {
  font-size: 20px;

  transition: transform 0.35s ease;
}

.csr-closing-link:hover span:last-child {
  transform: translateX(5px);
}


/* =========================================================
   STAGGERED REVEAL
========================================================= */

.csr-care-value:nth-child(2) {
  transition-delay: 0.08s;
}

.csr-care-value:nth-child(3) {
  transition-delay: 0.16s;
}

.csr-care-value:nth-child(4) {
  transition-delay: 0.24s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .csr-hero {
    min-height: auto;

    padding-top: 40px;
  }

  .csr-hero-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .csr-hero-copy {
    max-width: 760px;
  }

  .csr-hero h1 {
    font-size: clamp(70px, 11vw, 105px);
  }

  .csr-hero-image {
    height: 650px;
  }


  /* INTRO */

  .csr-intro-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .csr-intro-copy {
    max-width: 650px;

    margin-left: auto;
  }


  /* CARE */

  .csr-care-heading {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .csr-care-heading>p {
    max-width: 600px;
  }

  .csr-care-gallery {
    min-height: 620px;

    grid-template-columns:
      minmax(0, 1.2fr) minmax(240px, 0.8fr);
  }

  .csr-care-values {
    grid-template-columns: repeat(2, 1fr);
  }

  .csr-care-value:nth-child(2) {
    border-right: 0;
  }

  .csr-care-value:nth-child(1),
  .csr-care-value:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }


  /* VET */

  .csr-vet-heading {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .csr-vet-copy {
    max-width: 620px;

    margin-left: auto;
  }


  /* CULTURE */

  .csr-culture-inner {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .csr-culture-image {
    width: min(650px, 85%);

    height: 650px;
  }

  .csr-culture-content {
    max-width: 760px;

    margin-left: auto;
  }


  /* NOTICE */

  .csr-notice-inner {
    grid-template-columns: 100px 1fr;

    gap: 45px;
  }

  .csr-notice-number {
    width: 80px;
    height: 80px;

    font-size: 24px;
  }


  /* CLOSING */

  .csr-closing-line:nth-child(2),
  .csr-closing-line:nth-child(3) {
    margin-left: 0;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  /* GLOBAL */

  .csr-reveal {
    transform: translateY(20px);
  }


  /* HERO */

  .csr-hero {
    padding:
      28px 18px 65px;
  }

  .csr-hero-word {
    display: none;
  }

  .csr-hero-top {
    align-items: flex-start;

    margin-bottom: 42px;

    font-size: 7px;
    line-height: 1.5;
  }

  .csr-hero-top span:last-child {
    max-width: 160px;

    text-align: right;
  }

  .csr-eyebrow {
    margin-bottom: 20px;

    font-size: 7px;
  }

  .csr-hero h1 {
    font-size: clamp(58px, 18vw, 82px);

    line-height: 0.84;
  }

  .csr-hero h1 em {
    margin-top: 8px;
  }

  .csr-hero-intro {
    margin-top: 30px;

    font-size: 13px;
    line-height: 1.7;
  }

  .csr-hero-note {
    margin-top: 32px;
  }

  .csr-hero-image {
    height: 500px;
  }

  .csr-hero-image figcaption {
    left: 16px;
    right: 16px;
    bottom: 16px;

    display: block;

    font-size: 7px;
  }

  .csr-hero-image figcaption span {
    display: block;

    margin-top: 5px;
  }


  /* SECTION INDEX */

  .csr-section-index {
    margin-bottom: 42px;
  }

  .csr-section-index span:first-child {
    width: 30px;
    height: 30px;

    font-size: 7px;
  }

  .csr-section-index span:last-child {
    font-size: 7px;
  }


  /* INTRO */

  .csr-intro {
    padding:
      75px 18px 80px;
  }

  .csr-intro-heading>span {
    font-size: 8px;
  }

  .csr-intro-heading h2 {
    font-size: clamp(53px, 15vw, 72px);
  }

  .csr-intro-copy .csr-intro-lead {
    font-size: 23px;
  }

  .csr-intro-copy p {
    font-size: 13px;
    line-height: 1.75;
  }


  /* CARE */

  .csr-care {
    padding:
      75px 18px 80px;
  }

  .csr-care-heading {
    margin-bottom: 45px;
  }

  .csr-care-heading h2 {
    font-size: clamp(50px, 14vw, 70px);
  }

  .csr-care-heading>p {
    font-size: 12.5px;
  }

  .csr-care-gallery {
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: auto;

    gap: 9px;

    min-height: 0;
  }

  .csr-care-main,
  .csr-care-small {
    grid-row: auto;
  }

  .csr-care-main {
    height: 480px;
  }

  .csr-care-small {
    height: 310px;
  }

  .csr-care-gallery figcaption {
    left: 17px;
    right: 17px;
    bottom: 16px;
  }

  .csr-care-gallery figcaption p {
    font-size: 18px;
  }

  .csr-care-values {
    grid-template-columns: 1fr;

    margin-top: 50px;
  }

  .csr-care-value {
    min-height: 180px;

    padding: 24px 4px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .csr-care-value:last-child {
    border-bottom: 0;
  }

  .csr-care-value>span {
    margin-bottom: 32px;
  }

  .csr-care-value h3 {
    font-size: 25px;
  }


  /* VET */

  .csr-vet {
    padding:
      75px 18px 80px;
  }

  .csr-vet-heading {
    margin-bottom: 45px;
  }

  .csr-vet-heading h2 {
    font-size: clamp(52px, 15vw, 72px);
  }

  .csr-vet-copy p {
    font-size: 12.5px;
  }

  .csr-vet-gallery {
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: auto;

    gap: 9px;
  }

  .csr-vet-image-large {
    grid-row: auto;
  }

  .csr-vet-image {
    height: 320px;
  }

  .csr-vet-image-large {
    height: 470px;
  }


  /* CULTURE */

  .csr-culture {
    padding:
      80px 18px;
  }

  .csr-culture-bg {
    display: none;
  }

  .csr-culture-inner {
    gap: 50px;
  }

  .csr-culture-image {
    width: 100%;
    height: 480px;
  }

  .csr-culture-content h2 {
    font-size: clamp(50px, 14vw, 70px);
  }

  .csr-culture-content>p {
    margin-top: 28px;

    font-size: 13px;
    line-height: 1.75;
  }

  .csr-culture-content blockquote {
    margin-top: 35px;
    padding-left: 28px;

    font-size: 21px;
  }


  /* NOTICE */

  .csr-notice {
    padding:
      75px 18px 80px;
  }

  .csr-notice-inner {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .csr-notice-number {
    width: 62px;
    height: 62px;

    font-size: 20px;
  }

  .csr-notice-content h2 {
    font-size: clamp(52px, 15vw, 72px);
  }

  .csr-notice-lead {
    margin-top: 28px;

    font-size: 20px;
  }

  .csr-notice-warning {
    grid-template-columns: 38px minmax(0, 1fr);

    gap: 15px;

    padding: 20px 17px;
  }

  .csr-notice-icon {
    width: 36px;
    height: 36px;
  }

  .csr-notice-warning p {
    font-size: 12px;
    line-height: 1.65;
  }

  .csr-notice-small {
    margin:
      20px 0 0;

    font-size: 10px;
  }


  /* MANIFESTO */

  .csr-manifesto {
    min-height: 760px;
  }

  .csr-manifesto-overlay {
    background:
      linear-gradient(to top,
        rgba(2, 32, 26, 0.94) 0%,
        rgba(2, 32, 26, 0.68) 55%,
        rgba(2, 32, 26, 0.18) 100%);
  }

  .csr-manifesto-content {
    padding:
      80px 18px 65px;
  }

  .csr-manifesto-content h2 {
    font-size: clamp(52px, 15vw, 74px);
  }

  .csr-manifesto-content p {
    font-size: 12.5px;
  }

  .csr-manifesto-side {
    display: none;
  }


  /* CLOSING */

  .csr-closing {
    padding:
      75px 18px 80px;
  }

  .csr-closing-top {
    margin-bottom: 50px;

    font-size: 7px;
  }

  .csr-closing-line {
    font-size: clamp(50px, 14vw, 72px);

    line-height: 0.9;
  }

  .csr-closing-line+.csr-closing-line {
    margin-top: 12px;
  }

  .csr-closing-bottom {
    display: block;

    margin-top: 55px;
  }

  .csr-closing-bottom p {
    font-size: 12.5px;
  }

  .csr-closing-link {
    width: 100%;

    margin-top: 30px;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .csr-hero h1 {
    font-size: 56px;
  }

  .csr-hero-image {
    height: 440px;
  }

  .csr-care-main {
    height: 420px;
  }

  .csr-care-small {
    height: 270px;
  }

  .csr-vet-image-large {
    height: 420px;
  }

  .csr-culture-image {
    height: 430px;
  }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .csr-reveal,
  .csr-image-reveal,
  .csr-image-reveal img,
  .csr-closing-link,
  .csr-closing-link span {
    transition: none !important;
  }

  .csr-reveal,
  .csr-image-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* JS-enhanced reveal: content remains visible if JS is unavailable. */
html.js .csr-reveal { opacity:0; transform:translateY(32px); }
html.js .csr-reveal.csr-visible { opacity:1; transform:translateY(0); }
html.js .csr-image-reveal { opacity:0; transform:translateY(35px) scale(.985); }
html.js .csr-image-reveal.csr-visible { opacity:1; transform:translateY(0) scale(1); }

html,body{overflow-x:hidden;}
