/* ==========================================================================
   Italian Paws — shared stylesheet
   Brand system per official graphic charter: black / white / tan / taupe,
   with the Italian green + red used only as a thin accent (as in the logo).
   Typeface: Figerona (the brand's own family, all weights).
   ========================================================================== */

@font-face {
  font-family: "Figerona";
  src: url("../fonts/Figerona-Thin.woff2") format("woff2");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figerona";
  src: url("../fonts/Figerona-ExtraLight.woff2") format("woff2");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figerona";
  src: url("../fonts/Figerona-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figerona";
  src: url("../fonts/Figerona-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figerona";
  src: url("../fonts/Figerona-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figerona";
  src: url("../fonts/Figerona-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figerona";
  src: url("../fonts/Figerona-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figerona";
  src: url("../fonts/Figerona-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figerona";
  src: url("../fonts/Figerona-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* brand palette (exact values from the graphic charter) */
  --white: #ffffff;
  --black: #000000;
  --tan: #bfaf95;
  --taupe: #97876d;
  --green: #028b46;
  --red: #c72b37;

  /* semantic tokens used throughout this file */
  --cream: var(--white);
  --cream-2: #f7f4ef; /* subtle tan tint for alternating sections */
  --ink: var(--black);
  --ink-soft: #4a4642;
  --rust: var(--red);
  --rust-dark: #931f29;
  --gold: var(--taupe);
  --line: rgba(0, 0, 0, 0.12);
  --it-green: var(--green);
  --it-white: var(--white);
  --it-red: var(--red);

  --font-display: "Figerona", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Figerona", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --radius: 2px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Intentionally no global `scroll-behavior: smooth` here — with no
     in-page anchor links to smooth-scroll to, it served no purpose and
     caused a real bug: several browsers (notably iOS Safari) treat a
     fresh page navigation's "land at the top" as a scroll to animate
     rather than an instant jump when this is set site-wide, so new
     pages could open mid-scroll instead of at the top. The carousel
     keeps its own local `scroll-behavior: smooth` further down, which
     is unaffected. */
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; }

p { margin: 0 0 1em; color: var(--ink-soft); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust-dark);
  margin-bottom: 1em;
}

.eyebrow::before {
  content: "";
  width: 27px;
  height: 3px;
  background: linear-gradient(90deg, var(--it-green) 0 33.3%, var(--it-white) 33.3% 66.6%, var(--it-red) 66.6% 100%);
  flex: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.tricolor-rule {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--it-green) 0 33.3%, var(--it-white) 33.3% 66.6%, var(--it-red) 66.6% 100%);
  opacity: 0.9;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 2em;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
}

.btn-primary {
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover { background: var(--rust-dark); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--cream);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); }

.btn-outline-dark {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline-dark:hover { background: var(--ink); color: var(--cream); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.site-header.is-solid,
.site-header.menu-open {
  background: var(--cream);
  box-shadow: 0 1px 0 var(--line);
  padding: 14px 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}
.logo-mark {
  height: 56px;
  width: auto;
  display: block;
}
.logo-mark--dark { display: none; }

.site-header.is-solid .logo-mark--light,
.site-header.menu-open .logo-mark--light,
.page-header .logo-mark--light { display: none; }
.site-header.is-solid .logo-mark--dark,
.site-header.menu-open .logo-mark--dark,
.page-header .logo-mark--dark { display: block; }

.footer-logo-img {
  height: 64px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color 0.3s ease, opacity 0.2s ease;
  position: relative;
  padding: 4px 0;
}

.site-header.is-solid .nav-links a,
.site-header.menu-open .nav-links a,
.page-header .nav-links a { color: var(--ink); }

.nav-links a:hover { opacity: 0.65; }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--rust);
}

.nav-cta {
  border-color: currentColor;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cream);
  transition: all 0.25s ease;
}
.site-header.is-solid .menu-toggle span,
.site-header.menu-open .menu-toggle span,
.page-header .menu-toggle span { background: var(--ink); }

.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Page header (non-home pages, always solid) */
.page-header { background: var(--cream); box-shadow: 0 1px 0 var(--line); }
.page-header.is-solid { padding: 14px 0; }

/* ---------- Mobile nav ---------- */
@media (max-width: 899px) {
  .menu-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(340px, 82vw);
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    box-shadow: -8px 0 32px rgba(0,0,0,0.12);
  }
  .menu-open .main-nav { transform: translateX(0); }
  .nav-links {
    flex-direction: column;
    gap: 26px;
    margin-bottom: 36px;
  }
  .nav-links a { color: var(--ink) !important; font-size: 1.05rem; }
  .nav-cta { color: var(--ink) !important; border-color: var(--ink) !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,16,10,0.15) 0%, rgba(20,16,10,0.15) 40%, rgba(20,16,10,0.78) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 120px 0 76px;
  max-width: 760px;
}
.hero .eyebrow { color: var(--cream); }
.hero p.lede {
  color: rgba(246,241,231,0.88);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* small page hero for interior pages */
.page-hero {
  padding: 168px 0 72px;
  background: var(--cream-2);
  text-align: left;
}
.page-hero .container { max-width: 900px; }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-dark { background: var(--ink); color: var(--cream); }
.section-dark p { color: rgba(246,241,231,0.75); }
.section-dark .eyebrow { color: var(--gold); }
.section-alt { background: var(--cream-2); }

.section-head {
  max-width: 640px;
  margin: 0 0 48px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* value props */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.value-card { border-top: 1px solid var(--line); padding-top: 22px; }
.value-card .num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--rust);
  display: block;
  margin-bottom: 14px;
}
.value-card .value-icon {
  display: block;
  color: var(--gold); /* taupe — an outline accent instead of a solid brand color, so it reads as a quiet mark rather than competing with the tricolor accent used elsewhere */
  margin-bottom: 14px;
}
.value-card .value-icon svg { display: block; }
.value-card h3 { margin-bottom: 0.4em; }
.value-card p { margin: 0; }

/* story / split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius);
}
.split-media.wide img { aspect-ratio: 16/10; }

/* lifestyle carousel */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
}
.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 20px;
  margin: 0 auto;
  max-width: calc(var(--container) - 48px);
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 auto;
  width: 30%;
  scroll-snap-align: start;
}
.carousel-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius);
}
.carousel-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  z-index: 2;
}
.carousel-btn:hover { background: var(--ink); color: var(--cream); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-btn:disabled:hover { background: var(--cream); color: var(--ink); }

@media (max-width: 1023px) {
  .carousel-slide { width: 46%; }
}
@media (max-width: 767px) {
  .carousel { padding: 0 12px; gap: 6px; }
  .carousel-btn { width: 38px; height: 38px; }
  .carousel-slide { width: 78%; }
}

/* coming soon teaser (home) — same split-style layout as "A Different
   Kind of Care", but the photo always sits on the right. */
.teaser {
  border: 1px solid var(--line);
  background: var(--cream-2);
  border-radius: 4px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.teaser-media { order: 2; }
.teaser-media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius);
}
.teaser-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--rust);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* forms */
.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.field {
  flex: 1 1 220px;
  min-width: 0;
}
.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--ink-soft);
}
.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--rust);
}
.form-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 10px;
}
.form-success {
  display: none;
  background: #eef4ea;
  border: 1px solid #c3d8b8;
  color: #33502a;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  margin-top: 16px;
}
.form-success.show { display: block; }
.form-error {
  display: none;
  background: #f7e8e6;
  border: 1px solid #e2b3ad;
  color: #7a2e26;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  margin-top: 16px;
}
.form-error.show { display: block; }

/* coming soon full page */
.coming-soon {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--cream);
  text-align: center;
  overflow: hidden;
}
.coming-soon .hero-media img { object-position: center 35%; }
.coming-soon .hero-media::after {
  background: linear-gradient(180deg, rgba(20,16,10,0.55) 0%, rgba(20,16,10,0.72) 100%);
}
.coming-soon-content {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 760px;
  padding: 140px 24px 90px;
}
.coming-soon h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.coming-soon .eyebrow { justify-content: center; color: var(--cream); }
.coming-soon h1 { margin-bottom: 0.35em; }
.coming-soon .lede { margin: 0 auto 36px; max-width: 48ch; color: rgba(246,241,231,0.88); }
.notify-form {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.notify-form input {
  flex: 1 1 220px;
  padding: 15px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(246,241,231,0.4);
  background: rgba(246,241,231,0.08);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
}
.notify-form input::placeholder { color: rgba(246,241,231,0.6); }
.notify-form input:focus { outline: none; border-color: var(--cream); }
.notify-form button { flex: 0 0 auto; }

/* footer */
.site-footer {
  background: var(--ink);
  color: rgba(246,241,231,0.85);
  padding: 72px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(246,241,231,0.14);
}
.footer-logo {
  margin-bottom: 14px;
  display: inline-block;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a:hover { color: var(--cream); }

/* Social icons — kept in the site's own tonal palette (not each
   platform's official multicolor branding) so they read as part of
   the same restrained, editorial system as the rest of the page. The
   warm tan fills in on hover, echoing the accent used elsewhere. */
.social-icons { display: flex; gap: 12px; }
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(246,241,231,0.28);
  color: rgba(246,241,231,0.85);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.social-icons a:hover {
  background: var(--tan);
  border-color: var(--tan);
  color: var(--ink);
}
.social-icons--on-light a {
  border-color: var(--line);
  color: var(--ink-soft);
}
.social-icons--on-light a:hover {
  background: var(--taupe);
  border-color: var(--taupe);
  color: var(--white);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom .tricolor-rule { max-width: 60px; margin-top: 6px; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  max-width: 880px;
  margin: 0 auto;
  background: var(--ink);
  color: rgba(246,241,231,0.9);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.cookie-banner.show {
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(246,241,231,0.85);
}
.cookie-banner__text a {
  text-decoration: underline;
  color: var(--cream);
}
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.cookie-banner .btn {
  padding: 0.75em 1.4em;
  min-height: 40px;
  font-size: 0.76rem;
}
.cookie-banner .btn-primary { background: var(--cream); color: var(--ink); }
.cookie-banner .btn-primary:hover { background: #fff; }
.cookie-banner .btn-outline { color: var(--cream); border-color: rgba(246,241,231,0.5); }

@media (max-width: 767px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 22px 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .cookie-banner__actions { flex-direction: column; }
  .cookie-banner .btn { width: 100%; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .value-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}

@media (max-width: 767px) {
  .section { padding: 72px 0; }
  .page-hero { padding: 140px 0 56px; }
  /* A landscape photo filling a tall, narrow phone screen edge-to-edge
     gets cropped heavily left/right (object-fit: cover crops whichever
     dimension overflows). Shortening the hero on phones brings its
     shape closer to the photo's own, so noticeably more of the photo
     stays visible without losing the full-bleed look. min-height (not
     height) means it still grows to fit the text if needed on very
     short screens. */
  .hero, .coming-soon { min-height: 68vh; }
  .hero-content { padding: 110px 0 56px; }
  /* .coming-soon's own padding (140px/90px) was tall enough on its own
     to push the section past 68vh regardless of min-height, which
     defeated the crop fix above for the Products page hero photo. */
  .coming-soon-content { padding: 96px 24px 56px; }
  .coming-soon .lede { margin-bottom: 24px; }
  .value-grid { grid-template-columns: 1fr; gap: 30px; }
  .split, .split.reverse { grid-template-columns: 1fr; gap: 28px; }
  .split.reverse .split-media { order: 0; }
  .teaser { grid-template-columns: 1fr; padding: 32px 24px; text-align: left; gap: 28px; }
  .teaser-media { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* .notify-form input has flex: 1 1 220px for the desktop ROW layout,
     where 220px is a minimum WIDTH. Stacking the form into a COLUMN on
     mobile turns that same flex-basis into a height instead, rendering
     a 220px-tall email input. Reset it to a normal auto-height field. */
  .notify-form { flex-direction: column; }
  .notify-form input { flex: 0 0 auto; width: 100%; }
  .notify-form button { width: 100%; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .value-card { padding-top: 18px; }
}