:root {
  --ow-white: #ffffff;
  --ow-sky-100: #c8e8f6;
  --ow-sky-300: #74c7ef;
  --ow-aqua-500: #3abbdc;
  --ow-blue-600: #4a85a9;
  --ow-blue-700: #00618a;
  --ow-blue-900: #004259;

  --bg: #ffffff;
  --text: #0c202b;
  --muted: #4f6a77;
  --line: rgba(0, 66, 89, 0.14);
  --radius: 18px;

  /* Reserved height of the fixed header, used to keep hero copy clear of it. */
  --header-h: 132px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Myriad Pro", "MyriadPro-Regular", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

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

.container {
  width: min(1120px, 92vw);
  margin: 0 auto;
}

.section {
  padding: 110px 0;
}

.brand-accent {
  color: var(--ow-aqua-500);
  font-weight: 800;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ow-blue-700);
}

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

h1 {
  font-size: clamp(2.35rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 11ch;
}

h2 {
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

h3 {
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

p {
  color: var(--muted);
  line-height: 1.8;
  font-size: 1.02rem;
}

.section-lead {
  margin-top: 14px;
  max-width: 62ch;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    background 350ms ease,
    border-color 350ms ease;
}

.site-header:not(.is-scrolled) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(9px);
  border-bottom-color: rgba(0, 66, 89, 0.14);
}

.site-header:not(.is-scrolled) [data-logo-switch] {
  filter: brightness(0) invert(1);
}

.site-header.is-scrolled [data-logo-switch] {
  filter: none;
}

.nav-wrap {
  /* Header chrome keeps the same physical placement in EN and AR, so the
     language switch never jumps sides when the direction flips. */
  direction: ltr;
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 16px 0 18px;
}

.brand {
  grid-column: 2;
  justify-self: center;
}

.brand img {
  width: 148px;
  height: auto;
}

.site-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.site-nav a {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: color 160ms ease;
}

.site-header.is-scrolled .site-nav a {
  color: var(--text);
}

.site-nav a:hover {
  color: var(--ow-blue-700);
}

.site-header:not(.is-scrolled) .site-nav a:hover {
  color: rgba(255, 255, 255, 0.75);
}

.lang-switch {
  grid-column: 3;
  justify-self: end;
  /* EN always first, AR second — the pair never reorders. */
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lang-btn {
  min-width: 42px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 160ms ease;
}

.lang-btn.active {
  background: #fff;
  color: var(--ow-blue-900);
  border-color: #fff;
}

.site-header.is-scrolled .lang-btn {
  color: var(--text);
  border-color: rgba(0, 66, 89, 0.18);
  background: #fff;
}

.site-header.is-scrolled .lang-btn.active {
  background: var(--ow-blue-900);
  color: #fff;
  border-color: var(--ow-blue-900);
}

.hero {
  position: relative;
  min-height: 100vh;
  /* Dynamic viewport unit: avoids the mobile URL-bar height jump. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  /* Brand field the copy sits on; the photo occupies the other side.
     Held at or below #0f83b0 so white body copy keeps a 4.5:1 ratio. */
  background:
    radial-gradient(120% 100% at 6% 4%, rgba(18, 140, 186, 0.45), transparent 62%),
    linear-gradient(150deg, #00567a 0%, #0b7ba8 55%, #0f83b0 100%);
}

/* The cartons sit whole on the field. The element box matches the photo's
   aspect exactly (no letterbox), and all four edges are feathered so the
   photo's own backdrop melts into the field instead of reading as a
   pasted-in rectangle. The feather lands on empty backdrop, not product. */
.hero-media {
  position: absolute;
  top: 50%;
  inset-inline: auto 0;
  width: min(52%, 880px);
  aspect-ratio: 3 / 2;
  transform: translateY(-50%);
  z-index: 0;
  display: block;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 20%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 20%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  /* First value = top layer, composited over the one below it. The bottom
     layer must be `add`: `intersect` against an empty backdrop yields
     nothing and the photo disappears entirely. */
  -webkit-mask-composite: source-in, source-over;
  mask-composite: intersect, add;
}

html[dir="rtl"] .hero-media {
  -webkit-mask-image:
    linear-gradient(to left, transparent 0%, #000 20%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image:
    linear-gradient(to left, transparent 0%, #000 20%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Slight tint on the copy-facing side to settle the photo into the field. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 78, 108, 0.55) 0%,
    rgba(0, 78, 108, 0.18) 38%,
    rgba(0, 78, 108, 0) 70%
  );
}

html[dir="rtl"] .hero-media::after {
  background: linear-gradient(
    to left,
    rgba(0, 78, 108, 0.55) 0%,
    rgba(0, 78, 108, 0.18) 38%,
    rgba(0, 78, 108, 0) 70%
  );
}

/* Only a top darkening is needed now — the copy sits on the blue field. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 26, 37, 0.5) 0%, rgba(0, 26, 37, 0) 22%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 26, 37, 0.4), transparent);
}

.hero-inner {
  /* Gutter aligns the copy with the .container edge used further down. */
  --hero-inset: max(24px, calc((100vw - 1120px) / 2 + 60px));
  --hero-col: 32rem;
  position: relative;
  z-index: 2;
  width: 100%;
  /* max-width includes the gutter, so the text column keeps its measure. */
  max-width: calc(var(--hero-inset) + var(--hero-col) + 24px);
  /* Symmetric header allowance keeps the block optically centred. */
  padding-block: calc(var(--header-h) + 24px) calc(var(--header-h) + 24px);
  padding-inline: var(--hero-inset) 24px;
}

.hero-copy {
  max-width: var(--hero-col);
}

.hero-copy h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 15ch;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero-copy p {
  font-size: clamp(1rem, 0.98rem + 0.2vw, 1.06rem);
  line-height: 1.7;
  margin-top: 18px;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}

.hero .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.hero .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
}

.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.hero .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--ow-blue-900);
}

.hero .btn-primary:hover {
  background: var(--ow-sky-100);
  border-color: var(--ow-sky-100);
  color: var(--ow-blue-900);
}

.hero-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hero-scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(0, 30, 42, 0.5);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease;
}

.hero-scroll-cue:hover {
  color: #fff;
}

.hero-scroll-cue svg {
  width: 18px;
  height: 18px;
  animation: hero-cue-bob 2.2s ease-in-out infinite;
}

@keyframes hero-cue-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* Entrance: staggered fade-up, disabled under reduced-motion below. */
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy p,
.hero-actions,
.hero-scroll-cue {
  animation: hero-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-copy h1 {
  animation-delay: 80ms;
}

.hero-copy p {
  animation-delay: 160ms;
}

.hero-actions {
  animation-delay: 240ms;
}

.hero-scroll-cue {
  animation-delay: 420ms;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-scroll-cue {
  /* translateX centring must survive the keyframe transform. */
  animation-name: hero-rise-centered;
}

@keyframes hero-rise-centered {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.btn:focus-visible,
.site-nav a:focus-visible,
.lang-btn:focus-visible,
.hero-scroll-cue:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.site-header.is-scrolled .site-nav a:focus-visible,
.site-header.is-scrolled .lang-btn:focus-visible,
.section .btn:focus-visible {
  outline-color: var(--ow-blue-700);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 180ms ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  color: #fff;
  background: #0b2430;
  border: 1px solid #0b2430;
}

.btn-primary:hover {
  background: var(--ow-blue-700);
  border-color: var(--ow-blue-700);
}

.btn-ghost {
  color: var(--text);
  border: 1px solid var(--line);
  background: #fff;
}

.btn-ghost:hover {
  border-color: var(--ow-blue-700);
  color: var(--ow-blue-700);
}

.about {
  border-top: 1px solid var(--line);
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
  gap: clamp(48px, 5vw, 68px);
  align-items: center;
}

/* Carton sits to the inline-start of the Company Overview copy. */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 172px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.about-figure {
  display: block;
  position: relative;
  /* Needs an explicit width: a shrink-to-fit box holding a width:100% image
     resolves to zero. */
  width: 100%;
  /* Reach into the page gutter so the carton sits nearer the edge and away
     from the heading. Collapses to 0 once the container fills the viewport. */
  margin-inline-start: calc(-1 * clamp(0px, (100vw - 1120px) / 2 - 44px, 132px));
}

/* Soft pool of brand colour so the cutout does not float unanchored. */
.about-figure::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 116%;
  height: 30%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 66, 89, 0.16), transparent 100%);
  z-index: -1;
}

.about-figure img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(0, 66, 89, 0.18));
}

.about-main {
  display: grid;
  gap: 16px;
  max-width: 44rem;
  align-content: start;
}

.about-main h2 {
  font-size: clamp(1.22rem, 2vw, 1.72rem);
  line-height: 1.36;
  letter-spacing: -0.012em;
  max-width: 30ch;
  text-transform: none;
}

.about-side {
  display: grid;
  gap: 28px;
  width: min(100%, 30rem);
  justify-self: end;
  align-content: center;
  transform: translateY(18px);
}

.about-card {
  width: 100%;
  padding: 28px 30px;
  border-radius: 22px;
  border: 1px solid rgba(0, 66, 89, 0.12);
  background: linear-gradient(180deg, #f8fcfe, #eef6fa);
  box-shadow: 0 18px 40px rgba(0, 66, 89, 0.045);
}

.about-copy p {
  font-size: 1rem;
  line-height: 1.82;
}

.about-story {
  background:
    linear-gradient(135deg, rgba(200, 232, 246, 0.34), rgba(255, 255, 255, 0.96)),
    #fff;
}

.about-story .eyebrow {
  margin-bottom: 12px;
}

.about-story p:last-child {
  margin-top: 0;
  max-width: 34ch;
  line-height: 1.82;
}

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: start;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: #fff;
}

.panel h3 {
  color: var(--text);
}

.panel p {
  margin-top: 14px;
}

.panel ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.panel li {
  margin-bottom: 10px;
  line-height: 1.6;
  color: var(--muted);
}

.products {
  border-top: 1px solid var(--line);
}

.product-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.product-card {
  padding: 12px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 180ms ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card img {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.limited-edition {
  border-top: 1px solid var(--line);
}

.limited-edition-wrap {
  display: grid;
  gap: 18px;
}

.limited-subheading {
  margin-top: 0;
  font-weight: 700;
  color: var(--ow-blue-900);
}

.limited-banner {
  margin: 10px 0 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(0, 66, 89, 0.12);
  background: linear-gradient(180deg, #f8fcfe, #eef6fa);
  box-shadow: 0 18px 40px rgba(0, 66, 89, 0.05);
}

.limited-banner img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.limited-body {
  margin-left: auto;
  margin-right: auto;
  max-width: 62ch;
  text-align: center;
}

.layers {
  border-top: 1px solid var(--line);
}

.layers-wrap {
  display: grid;
  gap: 34px;
}

.layers-intro {
  display: grid;
  grid-template-columns: minmax(0, 60ch) minmax(180px, 280px);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.layers-logo-preview {
  display: grid;
  place-items: center;
  min-height: 140px;
  justify-self: start;
  transform: translateX(-18px);
}

.layers-logo-preview img {
  width: min(268px, 100%);
  height: auto;
  opacity: 0.9;
}

.layers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.layer-card {
  border-radius: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
}

.layer-card h3 {
  margin-bottom: 8px;
  color: var(--text);
}

.layer-card ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.layer-card li {
  margin-bottom: 10px;
  line-height: 1.6;
  color: var(--muted);
}

.layer-features-card {
  grid-column: 1 / -1;
}

.layer-features-card h3 {
  margin-bottom: 18px;
}

.feature-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

.feature-list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 66, 89, 0.1);
}

.feature-index {
  flex: 0 0 auto;
  min-width: 2ch;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ow-blue-700);
}

.feature-list-item p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text);
}

.feature-list-item:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  border-top: none;
}

.feature-list-item:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.feature-list-item:nth-child(3) {
  grid-column: 1;
  grid-row: 3;
}

.feature-list-item:nth-child(4) {
  grid-column: 2;
  grid-row: 1;
  border-top: none;
}

.feature-list-item:nth-child(5) {
  grid-column: 2;
  grid-row: 2;
}

.sustainability {
  border-top: 1px solid var(--line);
}

.sustainability::before {
  content: none;
}

.sustainability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.stats {
  display: grid;
  gap: 10px;
}

.stats article {
  border-radius: 14px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
}

.stats h3 {
  margin-bottom: 8px;
}

.merchandise-card {
  grid-column: 1 / -1;
  margin-top: 28px;
  padding: 36px 28px 32px;
  border-top: 1px solid rgba(12, 32, 43, 0.12);
  border-radius: 22px;
  border-right: 1px solid rgba(0, 66, 89, 0.12);
  border-bottom: 1px solid rgba(0, 66, 89, 0.12);
  border-left: 1px solid rgba(0, 66, 89, 0.12);
  background: linear-gradient(180deg, #f8fcfe, #eef6fa);
  box-shadow: 0 18px 40px rgba(0, 66, 89, 0.045);
  text-align: center;
}

.merchandise-card h3 {
  color: var(--text);
}

.merchandise-card .section-lead {
  margin-left: auto;
  margin-right: auto;
}

.merchandise-subheading {
  margin-top: 12px;
  font-weight: 700;
  color: var(--ow-blue-900);
}

.merchandise-image-wrap {
  display: flex;
  justify-content: center;
  margin: 26px 0 22px;
}

.merchandise-image {
  display: block;
  width: min(100%, 400px) !important;
  max-width: 400px !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 0;
  border: 1px solid rgba(0, 66, 89, 0.12);
  box-shadow: 0 18px 40px rgba(0, 66, 89, 0.08);
  background: #fff;
}

.mission-section {
  border-top: 1px solid var(--line);
}

.mission-section-grid {
  display: grid;
  gap: 24px;
}

/* Mirror of .about-intro: copy on the inline-start side, carton on the end. */
.mission-section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 188px);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.mission-intro-copy {
  max-width: 52rem;
}

.mission-figure {
  display: block;
  position: relative;
  /* Explicit width: a shrink-to-fit box holding a width:100% image is zero. */
  width: 100%;
  /* Anchored to the end edge so the negative margin below actually shifts it
     outward — a stretched item ignores it. */
  justify-self: end;
  /* Reaches into the page gutter, away from the heading. */
  margin-inline-end: calc(-1 * clamp(0px, (100vw - 1120px) / 2 - 44px, 132px));
}

.mission-figure::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 116%;
  height: 26%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 66, 89, 0.16), transparent 100%);
  z-index: -1;
}

.mission-figure img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(0, 66, 89, 0.18));
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mission-card,
.why-choose-card {
  border-radius: 16px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
}

.mission-card h3 {
  margin-bottom: 10px;
  color: var(--text);
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.why-item {
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fbfd, #edf6fa);
  border: 1px solid rgba(0, 66, 89, 0.1);
  color: var(--text);
  line-height: 1.55;
}

/* ── Gallery ──────────────────────────────────────────────────────────── */

.gallery {
  border-top: 1px solid var(--line);
  /* Tinted band: separates the photo mosaic from the white sections above
     without competing with the dark CTA that follows it. */
  background: linear-gradient(180deg, #f8fcfe 0%, #e9f4fa 52%, #f9fcfe 100%);
}

.gallery-wrap {
  display: grid;
  gap: clamp(30px, 4vw, 46px);
}

.gallery-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  gap: clamp(16px, 3vw, 44px);
  align-items: end;
}

.gallery-head h2 {
  max-width: 20ch;
}

.gallery-head .section-lead {
  margin-top: 0;
  max-width: 44ch;
}

.gallery-grid {
  --gallery-gap: clamp(10px, 1.1vw, 16px);
  display: grid;
  gap: var(--gallery-gap);
}

.gallery-row {
  display: flex;
  gap: var(--gallery-gap);
}

/* Each tile's width is grown in proportion to its own aspect ratio, so a row
   of mixed portrait/landscape photos resolves to one shared height with no
   cropping at all. --ar is the photo's width / height; it lives here rather
   than inline so the stacked layouts below can re-proportion the portrait. */
.gallery-item {
  --ar: 1.5;
  position: relative;
  flex: var(--ar) 1 0;
  min-width: 0;
  margin: 0;
}

.gallery-item-tall {
  --ar: 0.6667;
}

.gallery-trigger {
  position: relative;
  display: block;
  width: 100%;
  /* The tile's height is derived here rather than on the figure: the figure's
     width is always definite, so this never becomes circular — whereas a
     percentage height against a content-sized figure would be. */
  aspect-ratio: var(--ar);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 66, 89, 0.12);
  border-radius: 22px;
  /* Holding colour while the photo decodes. */
  background: #e3eff6;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 18px 40px rgba(0, 66, 89, 0.07);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease,
    border-color 300ms ease;
}

.gallery-trigger picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fractional overscan hides sub-pixel edge seams under the radius. */
  transform: scale(1.02);
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scrim the caption sits on. Kept off the upper half so faces stay clear. */
.gallery-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 38, 53, 0.74) 0%,
    rgba(0, 38, 53, 0.3) 26%,
    rgba(0, 38, 53, 0) 56%
  );
  opacity: 0.8;
  transition: opacity 400ms ease;
}

/* Shorter tiles give the caption less room, so the scrim reaches higher. */
.gallery-row-trio .gallery-trigger::after {
  background: linear-gradient(
    to top,
    rgba(0, 38, 53, 0.82) 0%,
    rgba(0, 38, 53, 0.4) 34%,
    rgba(0, 38, 53, 0) 70%
  );
}

.gallery-meta {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: 8px;
  padding: clamp(15px, 1.8vw, 24px);
  color: #fff;
  /* The button underneath owns every click. */
  pointer-events: none;
}

.gallery-meta::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--ow-aqua-500);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-index {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--ow-sky-100);
}

.gallery-caption {
  max-width: 34ch;
  font-size: clamp(0.9rem, 0.86rem + 0.22vw, 1.04rem);
  font-weight: 600;
  line-height: 1.45;
  text-shadow: 0 1px 14px rgba(0, 26, 37, 0.55);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-zoom {
  position: absolute;
  z-index: 2;
  top: 14px;
  inset-inline-end: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ow-blue-900);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
  transition:
    opacity 300ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-zoom svg {
  width: 18px;
  height: 18px;
}

.gallery-item:hover .gallery-trigger,
.gallery-item:focus-within .gallery-trigger {
  transform: translateY(-4px);
  border-color: rgba(0, 97, 138, 0.3);
  box-shadow: 0 26px 54px rgba(0, 66, 89, 0.17);
}

.gallery-item:hover .gallery-trigger img,
.gallery-item:focus-within .gallery-trigger img {
  transform: scale(1.07);
}

.gallery-item:hover .gallery-trigger::after,
.gallery-item:focus-within .gallery-trigger::after {
  opacity: 0.95;
}

.gallery-item:hover .gallery-zoom,
.gallery-item:focus-within .gallery-zoom {
  opacity: 1;
  transform: none;
}

.gallery-item:hover .gallery-meta::before,
.gallery-item:focus-within .gallery-meta::before {
  width: 54px;
}

.gallery-item:hover .gallery-caption,
.gallery-item:focus-within .gallery-caption {
  transform: translateY(-2px);
}

.gallery-trigger:focus-visible {
  outline: 3px solid var(--ow-blue-700);
  outline-offset: 3px;
}

/* Scroll reveal. The hidden state is only armed once the script is running,
   so the photos stay visible if JavaScript never loads. */
.gallery-grid.is-reveal-armed .gallery-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 720ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.gallery-grid.is-reveal-armed .gallery-item.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Lightbox ─────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vw, 30px);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 28, 40, 0.9);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 300ms ease;
}

.lightbox-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  opacity: 0;
  transform: scale(0.97) translateY(12px);
  transition:
    opacity 320ms ease,
    transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox.is-open .lightbox-backdrop {
  opacity: 1;
}

.lightbox.is-open .lightbox-shell {
  opacity: 1;
  transform: none;
}

.lightbox-bar {
  /* Counter start-side, close top-right in both languages — same reasoning as
     the site header chrome. */
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lightbox-counter {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.72);
}

.lightbox-btn {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  /* Dark base rather than a white veil: the controls sit over the photo, so
     they have to hold up against bright frames too. */
  background: rgba(0, 26, 38, 0.55);
  color: #fff;
  font: inherit;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    opacity 200ms ease;
}

.lightbox-btn:hover {
  background: rgba(0, 26, 38, 0.82);
  border-color: rgba(255, 255, 255, 0.7);
}

.lightbox-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.lightbox-btn svg {
  width: 20px;
  height: 20px;
}

.lightbox-close {
  width: 46px;
  height: 46px;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}

.lightbox-arrow svg {
  width: 24px;
  height: 24px;
}

.lightbox-prev {
  inset-inline-start: 8px;
}

.lightbox-next {
  inset-inline-end: 8px;
}

/* Chevrons follow reading order. */
html[dir="rtl"] .lightbox-arrow svg {
  transform: scaleX(-1);
}

.lightbox-figure {
  margin: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
  justify-items: center;
  align-content: center;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transition: opacity 240ms ease;
}

.lightbox.is-swapping .lightbox-figure img {
  opacity: 0;
}

.lightbox-caption {
  max-width: 56ch;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.98rem;
  line-height: 1.6;
}

body.has-lightbox {
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.evidence {
  border-top: 1px solid var(--line);
}

.evidence-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.evidence-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: #fff;
}

.evidence-card h3 {
  margin-bottom: 8px;
}

.mini-footprints,
.table-wrap,
.benchmarks {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 20px;
}

.footprint-list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.footprint-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7fbfd;
  border: 1px solid rgba(0, 66, 89, 0.1);
}

.footprint-item span {
  font-size: 0.85rem;
  color: var(--muted);
}

.footprint-item strong {
  font-size: 1rem;
  color: var(--ow-blue-700);
}

.data-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border: 1px solid rgba(0, 66, 89, 0.14);
  text-align: left;
  vertical-align: middle;
}

.data-table thead th {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #f5fafc;
}

.data-table tbody th {
  font-weight: 700;
}

.emissions-table thead th {
  background: linear-gradient(180deg, #ebf7fd, #ddf0fa);
  color: var(--ow-blue-900);
}

.emissions-table tbody tr:nth-child(odd) {
  background: #fbfdff;
}

.emissions-table tbody tr:nth-child(even) {
  background: #f4f9fc;
}

.emissions-table tbody th {
  background: #e9f6fd;
  color: var(--ow-blue-900);
}

.emissions-table td:nth-child(5),
.emissions-table th:nth-child(5) {
  background: #e9fced;
  color: #127536;
  font-weight: 800;
}

.bar-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.bar-card {
  border: 1px solid rgba(0, 66, 89, 0.1);
  border-radius: 10px;
  padding: 14px 12px;
  background: #f8fcff;
}

.bar-card p {
  min-height: 56px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.bar {
  margin-top: 10px;
  height: 130px;
  border-radius: 8px;
  border: 1px solid rgba(0, 66, 89, 0.12);
  background: linear-gradient(to top, rgba(0, 97, 138, 0.06), rgba(0, 97, 138, 0));
  display: flex;
  align-items: flex-end;
  padding: 4px;
}

.bar span {
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--ow-aqua-500), var(--ow-blue-700));
}

.bar-card strong {
  display: inline-block;
  margin-top: 8px;
  font-size: 1.05rem;
  color: var(--ow-blue-700);
}

.composition-layout {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  align-items: stretch;
}

.composition-layout .data-table {
  margin-top: 0;
}

.composition-source {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 66, 89, 0.14);
  border-radius: 12px;
  padding: 14px;
  background: #f8fcff;
}

.composition-bottle-stage {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 32%, rgba(200, 232, 246, 0.7), rgba(200, 232, 246, 0) 58%),
    #fff;
  outline: none;
}

.composition-bottle-stage:focus-visible {
  box-shadow: 0 0 0 3px rgba(58, 187, 220, 0.28);
}

.composition-bottle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.1);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
}

.composition-bottle.is-active {
  opacity: 1;
  transform: scale(1.15);
}

.composition-bottle[data-composition-bottle="en"] {
  object-position: center 45%;
}

.composition-bottle[data-composition-bottle="ar"] {
  object-position: center 56%;
}

.chart-controls {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chart-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 66, 89, 0.18);
  background: #fff;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.chart-btn.active {
  border-color: #14953b;
  background: #14953b;
  color: #fff;
}

.chart-note {
  margin-top: 10px;
  font-size: 0.86rem;
}

.active-chart {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.graph-item {
  border: 1px solid rgba(0, 66, 89, 0.1);
  border-radius: 10px;
  background: #f7fcf8;
  padding: 12px 10px;
  cursor: pointer;
}

.graph-item.is-active {
  border-color: #14953b;
  box-shadow: inset 0 0 0 1px #14953b;
}

.graph-label {
  min-height: 44px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.graph-track {
  margin-top: 8px;
  height: 132px;
  border: 1px solid rgba(0, 66, 89, 0.1);
  border-radius: 8px;
  background: linear-gradient(to top, rgba(20, 149, 59, 0.08), rgba(20, 149, 59, 0));
  display: flex;
  align-items: flex-end;
  padding: 4px;
}

.graph-fill {
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, #31c95f, #14953b);
  height: 0%;
  transition: height 420ms ease;
}

.graph-value {
  display: inline-block;
  margin-top: 8px;
  color: #14953b;
  font-weight: 800;
}

.cta {
  border-top: 1px solid var(--line);
  padding-top: 72px;
}

.cta-box {
  border-radius: 18px;
  padding: 52px 24px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--ow-blue-900), var(--ow-blue-700));
}

.cta-box h2 {
  text-transform: uppercase;
}

.cta-box p {
  margin: 14px auto 24px;
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.88);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.cta-actions .btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.cta-box .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
}

.cta-box .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.btn-whatsapp {
  color: #fff;
  background: #1da851;
  border: 1px solid #1da851;
}

.btn-whatsapp:hover {
  background: #178a41;
  border-color: #178a41;
}

.site-footer {
  margin-top: 90px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.footer-wrap {
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

/* Lets the paragraph + credit badge live in one markup group (for the
   mobile layout below) while acting as plain grid items on desktop. */
.footer-meta {
  display: contents;
}

.ow-footer-logo {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 124px;
}

.footer-wrap p {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  font-size: 0.9rem;
}

footer .footer-credit {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 66, 89, 0.1);
  border-radius: 999px;
  background: rgba(0, 66, 89, 0.03);
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

footer .footer-credit span {
  color: var(--muted);
}

footer .footer-credit img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 180px !important;
  max-height: 32px !important;
  object-fit: contain;
}

footer .ow-footer-logo {
  width: 124px !important;
  max-width: 124px !important;
  height: auto !important;
}

footer .footer-credit,
footer .footer-credit:visited {
  color: var(--muted);
  text-decoration: none !important;
}

footer .footer-credit:hover,
footer .footer-credit:focus-visible {
  text-decoration: none !important;
}

.limited-edition-wrap > .limited-body {
  justify-self: center;
}

.limited-edition-wrap > .merchandise-card {
  width: 100%;
}

.limited-edition-wrap > .merchandise-card .section-lead,
.limited-edition-wrap > .merchandise-card h3,
.limited-edition-wrap > .merchandise-card .eyebrow {
  text-align: center;
}

.limited-edition-wrap > .merchandise-card .merchandise-image-wrap {
  justify-content: center;
}

.limited-edition-wrap > .merchandise-card .merchandise-image {
  margin: 0 auto;
}

footer .footer-credit:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 66, 89, 0.16);
  background: rgba(0, 66, 89, 0.05);
}

/* --- Deployed credit badge: white chip with a blinking terminal cursor --- */
footer .footer-credit.credit-deployed {
  padding: 8px 18px 8px 16px;
  border: 1px solid rgba(0, 66, 89, 0.14);
  background: #ffffff;
  color: rgba(0, 66, 89, 0.72);
  box-shadow: 0 4px 14px rgba(0, 66, 89, 0.08);
  cursor: default;
}

footer .footer-credit.credit-deployed:hover {
  transform: none;
  border-color: rgba(0, 66, 89, 0.14);
  background: #ffffff;
}

.deployed-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.deployed-prompt {
  color: #ff5a1f !important;
}

.deployed-text {
  color: #004259 !important;
}

.deployed-cursor {
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-inline-start: 2px;
  border-radius: 2px;
  background: #ff5a1f;
  animation: deployed-blink 1.1s linear infinite;
}

@keyframes deployed-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deployed-cursor {
    animation: none;
  }
}

html[dir="rtl"] {
  font-size: 112.5%;
}

html[dir="rtl"] body {
  font-family: "Tajawal", "Myriad Pro", "Segoe UI", sans-serif;
}

/* Nav links still read right-to-left inside the LTR header row. */
html[dir="rtl"] .site-nav {
  direction: rtl;
}

html[dir="rtl"] .hero-copy,
html[dir="rtl"] .section h2,
html[dir="rtl"] .section p,
html[dir="rtl"] .panel h3,
html[dir="rtl"] .panel li,
html[dir="rtl"] .layer-card,
html[dir="rtl"] .stats article {
  text-align: right;
}

html[dir="rtl"] .panel ul {
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] .about-story {
  margin-right: auto;
}

html[dir="rtl"] .about-side {
  justify-self: start;
}

html[dir="rtl"] .about-main h2 {
  text-align: center;
}

html[dir="rtl"] .cta-box h2 {
  text-align: center;
}

html[dir="rtl"] .about-copy p,
html[dir="rtl"] .about-story p:last-child {
  text-align: justify;
}

html[dir="rtl"] .layer-card ul {
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] .feature-list-item {
  text-align: right;
  flex-direction: row-reverse;
}

html[dir="rtl"] .data-table th,
html[dir="rtl"] .data-table td {
  text-align: right;
}

@media (max-width: 980px) {
  :root {
    --header-h: 112px;
  }

  /* Two rows instead of three: brand + language on one line, nav below. */
  .nav-wrap {
    min-height: 0;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 12px 0 10px;
    gap: 10px;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .brand img {
    width: 112px;
  }

  .lang-switch {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  .hero-inner {
    max-width: 100%;
  }

  .hero-copy {
    max-width: 34rem;
  }

  .split,
  .about-layout,
  .sustainability-grid,
  .mission-vision-grid,
  .evidence-grid,
  .bar-grid,
  .active-chart {
    grid-template-columns: 1fr;
  }

  .composition-layout {
    grid-template-columns: 1fr;
  }

  .about-side {
    width: 100%;
    max-width: 36rem;
    justify-self: start;
    transform: none;
  }

  .about-intro {
    grid-template-columns: minmax(0, 164px) minmax(0, 1fr);
    align-items: center;
  }

  .mission-section-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 164px);
    align-items: center;
  }

  .composition-bottle-stage {
    height: clamp(300px, 78vw, 460px);
  }

  .layers-grid {
    grid-template-columns: 1fr;
  }

  .layers-intro {
    grid-template-columns: 1fr;
  }

  .layer-features-card {
    grid-column: auto;
  }

  .feature-list-grid {
    grid-template-columns: 1fr;
  }

  .feature-list-item:first-child {
    border-top: none;
  }

  .feature-list-item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .why-choose-grid {
    grid-template-columns: 1fr;
  }

  .footprint-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  /* Three across gets too small here: two up, then the last tile runs full
     width. The feature row is ratio-driven, so it keeps working as-is. */
  .gallery-row-trio {
    flex-wrap: wrap;
  }

  .gallery-row-trio .gallery-item {
    flex: 1 1 calc(50% - var(--gallery-gap));
  }
}

/* Phone / small tablet held upright: copy moves to the bottom and the photo
   stacks above it. Portrait only — stacking a 3:2 photo on a short landscape
   screen drops it straight on top of the headline. */
@media (max-width: 820px) and (orientation: portrait) {
  .hero {
    align-items: flex-end;
  }

  /* Phones stack it: cartons across the top, copy on the field below. */
  .hero-media,
  html[dir="rtl"] .hero-media {
    top: calc(var(--header-h) - 8px);
    inset-inline: 0;
    width: 100%;
    height: auto;
    transform: none;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 82%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 82%, transparent 100%);
  }

  .hero-media::after,
  html[dir="rtl"] .hero-media::after {
    background: linear-gradient(
      to bottom,
      rgba(0, 78, 108, 0.28) 0%,
      rgba(0, 78, 108, 0.05) 45%,
      rgba(0, 78, 108, 0.45) 100%
    );
  }

  .hero::after {
    content: none;
  }

  .hero-inner {
    padding-block: calc(var(--header-h) + 16px) clamp(40px, 9vw, 64px);
    padding-inline: 22px;
  }

  .hero-copy h1 {
    font-size: clamp(2rem, 8.2vw, 2.9rem);
    max-width: 16ch;
  }

  .hero-copy p {
    margin-top: 14px;
    max-width: 40ch;
  }

  /* Bottom-anchored copy would collide with the cue. */
  .hero-scroll-cue {
    display: none;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 78px 0;
  }

  h1 {
    max-width: 13ch;
  }

  .site-header {
    position: fixed;
  }

  .site-nav {
    gap: 14px;
  }

  /* Full-width primary, paired ghosts: never overflows a 320px viewport. */
  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Stretch so a wrapped label does not leave sibling buttons short. */
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 26rem;
  }

  .hero-actions .btn {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }

  .hero-actions .btn:first-child {
    grid-column: 1 / -1;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  /* Cartons stay beside their headings, just smaller. */
  .about-intro {
    grid-template-columns: minmax(0, clamp(88px, 26vw, 132px)) minmax(0, 1fr);
    gap: clamp(16px, 4vw, 24px);
    align-items: center;
  }

  .mission-section-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(88px, 26vw, 132px));
    gap: clamp(16px, 4vw, 24px);
    align-items: center;
  }

  .footprint-list {
    grid-template-columns: 1fr;
  }

  /* Phones: one photo per row, full width. */
  .gallery-row {
    flex-direction: column;
  }

  /* A wrapping column sizes its line from the items instead of the container,
     which collapses the tiles — one line only here. */
  .gallery-row-trio {
    flex-wrap: nowrap;
  }

  .gallery-row .gallery-item,
  .gallery-row-trio .gallery-item {
    /* Height now comes from the tile's own aspect ratio, not from growing
       along the column's main axis. */
    flex: 0 0 auto;
  }

  /* A true 2:3 frame would run most of a phone screen tall. */
  .gallery-item-tall {
    --ar: 0.8;
  }

  .gallery-trigger {
    border-radius: 18px;
  }

  .lightbox-arrow {
    width: 44px;
    height: 44px;
  }

  .lightbox-arrow svg {
    width: 20px;
    height: 20px;
  }

  .footer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 0;
    gap: 10px;
  }

  .footer-wrap .ow-footer-logo {
    order: 1;
  }

  .footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    order: 2;
  }

  .footer-wrap p {
    justify-self: auto;
    font-size: 0.7rem;
  }

  .footer-wrap .footer-credit {
    justify-self: auto;
  }

  .footer-wrap .footer-credit.credit-deployed {
    padding: 6px 10px;
  }

  .footer-wrap .deployed-badge {
    font-size: 0.76rem;
    gap: 4px;
  }

  .footer-wrap .deployed-cursor {
    width: 5px;
    height: 12px;
  }
}

@media (max-width: 400px) {
  :root {
    --header-h: 106px;
  }

  .brand img {
    width: 100px;
  }

  .site-nav a {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .hero-copy h1 {
    font-size: clamp(1.85rem, 8.6vw, 2.4rem);
  }
}

/* Landscape phones: cap hero height so the copy is not pushed off-screen. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    min-height: auto;
  }

  /* Back to side-by-side: there is no vertical room to stack here. */
  .hero-media,
  html[dir="rtl"] .hero-media {
    top: 50%;
    inset-inline: auto 0;
    width: 46%;
    height: auto;
    transform: translateY(-50%);
  }

  .hero-inner {
    padding-block: calc(var(--header-h) + 12px) 36px;
  }

  .hero-scroll-cue {
    display: none;
  }
}

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

  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy p,
  .hero-actions,
  .hero-scroll-cue,
  .hero-scroll-cue svg {
    animation: none;
  }

  .btn:hover {
    transform: none;
  }

  .gallery-grid.is-reveal-armed .gallery-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .gallery-trigger,
  .gallery-trigger img,
  .gallery-caption,
  .gallery-meta::before,
  .lightbox-backdrop,
  .lightbox-shell {
    transition: none;
  }

  .gallery-item:hover .gallery-trigger,
  .gallery-item:focus-within .gallery-trigger {
    transform: none;
  }

  .gallery-item:hover .gallery-trigger img,
  .gallery-item:focus-within .gallery-trigger img {
    transform: scale(1.02);
  }

  .lightbox-shell {
    transform: none;
  }
}