/* ==========================================================================
   ORA International - components
   Buttons, hero, banners, cards, product listing and detail, filters,
   counters, tabs, forms, bands.

   Component anatomy and rhythm follow the nchme.com reference; the colour,
   imagery treatment and product-specific pieces are ORA's.
   ========================================================================== */

/* ------------------------------------------------------------- buttons --
   One button system for the whole site. Each variant only sets five custom
   properties (fill, text, border, hover fill, hover text); layout, type,
   depth, hover, focus, active and disabled behaviour live once in .btn.

     .btn            navy primary
     .btn-gold       gold primary (the conversion button)
     .btn-outline    navy outline, for secondary actions on light ground
     .btn-light      white, for navy bands
     .btn-ghost-light  outline on dark ground, the secondary hero action
     .btn-sm         compact size
     .link-more      text link with an animated arrow (below)

   Hover: the hover fill wipes in from the left (transform only) while the
   button rises 2px - two effects, nothing else moves. Selected main CTAs also
   carry a slow attention ring (see .btn-gold in .hero-actions / .cta-actions);
   it is paused on hover and focus and switched off for reduced motion. */

:root {
  --btn-h: 52px;
  --btn-h-sm: 42px;
  --btn-radius: 3px;
  --btn-dur: 0.4s;
}

.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  --btn-bd: var(--navy);
  --btn-fill: var(--gold);
  --btn-fg-hover: var(--navy-deep);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 14px 34px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(6, 31, 59, 0.14);
  transition: transform var(--btn-dur) var(--ease), box-shadow var(--btn-dur) var(--ease),
    color 0.3s var(--ease), border-color 0.3s var(--ease);
}

/* Hover fill, wiped in from the left. Sits under the label (z-index -1 inside
   the button's own stacking context) and animates transform only. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--btn-fill);
  color: var(--btn-fg-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(6, 31, 59, 0.5);
}

.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(6, 31, 59, 0.2);
  transition-duration: 0.12s;
}

.btn:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 4px;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--navy-deep);
  --btn-bd: var(--gold);
  --btn-fill: var(--navy);
  --btn-fg-hover: var(--white);
}

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  --btn-bd: var(--navy);
  --btn-fill: var(--navy);
  --btn-fg-hover: var(--white);
  box-shadow: none;
}

.btn-light {
  --btn-bg: var(--white);
  --btn-fg: var(--navy);
  --btn-bd: var(--white);
  --btn-fill: var(--gold);
  --btn-fg-hover: var(--navy-deep);
}

.btn-ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.55);
  --btn-fill: var(--white);
  --btn-fg-hover: var(--navy);
  box-shadow: none;
}

.btn-sm {
  min-height: var(--btn-h-sm);
  padding: 10px 24px;
  font-size: 12px;
  letter-spacing: 1.7px;
}

.btn svg {
  flex: none;
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  transition: transform 0.3s var(--ease);
}

.btn:hover svg,
.btn:focus-visible svg { transform: translateX(4px); }

/* Attention ring for the selected main CTAs only: a hairline gold outline that
   breathes outward and fades, roughly every four seconds. transform + opacity
   only, so it never repaints layout. */
.hero-actions .btn-gold::after,
.cta-actions .btn-gold::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -2;
  border: 1px solid var(--gold-light);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: btn-ring 4.2s var(--ease) 1.6s infinite;
}

.hero-actions .btn-gold:hover::after,
.hero-actions .btn-gold:focus-visible::after,
.cta-actions .btn-gold:hover::after,
.cta-actions .btn-gold:focus-visible::after { animation: none; }

@keyframes btn-ring {
  0%   { opacity: 0.7; transform: scale(1); }
  55%  { opacity: 0;   transform: scale(1.08, 1.34); }
  100% { opacity: 0;   transform: scale(1.08, 1.34); }
}

/* Full-width buttons on phones: keep the ring inside the gutter. */
@media (max-width: 480px) {
  @keyframes btn-ring {
    0%   { opacity: 0.7; transform: scale(1); }
    55%  { opacity: 0;   transform: scale(1.03, 1.3); }
    100% { opacity: 0;   transform: scale(1.03, 1.3); }
  }
}

/* No hover on touch: keep the colour change, drop the lift. */
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: 0 1px 2px rgba(6, 31, 59, 0.14); }
  .btn-outline:hover, .btn-ghost-light:hover { box-shadow: none; }
  .btn:active { transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn svg { transition: none; }
  .btn:hover, .btn:focus-visible, .btn:active { transform: none; }
  .btn::after { animation: none !important; display: none; }
}

/* Text link with a gold chevron - used on cards. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.link-more svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  transition: transform 0.25s var(--ease);
}

.link-more {
  position: relative;
  padding-bottom: 3px;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

/* Hairline underline that draws in from the left on hover/focus. */
.link-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}

.link-more:hover::after,
.link-more:focus-visible::after { transform: scaleX(1); }

.link-more:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; }

.link-more:hover {
  color: var(--navy);
}

.link-more:hover svg {
  transform: translateX(4px);
}

/* ---------------------------------------------------------- home hero -- */

.hero {
  position: relative;
  display: flex;
  box-sizing: border-box;
  min-height: 70vh;
  min-height: 70svh;
  overflow: hidden;
  background: var(--navy-deep);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s var(--ease);
}

@media (max-width: 768px) {
  .hero-slide {
    background-position: 62% center;
  }
}

.hero-slide.is-active {
  opacity: 1;
}

/* Navy scrim: keeps the copy and the white nav legible over every slide. */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 31, 59, 0.86) 0%,
      rgba(6, 31, 59, 0.68) 42%,
      rgba(6, 31, 59, 0.16) 78%,
      rgba(6, 31, 59, 0.04) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex: 1;
  width: 100%;
  padding-top: calc(var(--header-h-stuck) + 55px);
  padding-bottom: 60px;
}

.hero-copy {
  max-width: 620px;
}

.hero-copy .eyebrow {
  color: var(--gold-light);
}

.hero-copy h1 {
  margin: 0;
  font-size: 62px;
  font-weight: 300;
  line-height: 1.08;
  color: var(--white);
}

.hero-copy h1 strong {
  display: block;
  font-weight: 600;
  color: var(--white);
}

.hero-copy h1 .gold {
  color: var(--gold-light);
}

.hero-copy p {
  margin-top: 22px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.82);
}

.hero-copy p+p {
  margin-top: 14px;
}

.hero-channels {
  margin-top: 26px;
}

.hero-channels-title {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--gold-light);
}

.hero-channels-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-channels-list li {
  padding: 7px 14px;
  border-radius: var(--btn-radius);
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(6, 31, 59, 0.35);
  font-size: 14px;
  line-height: 1.3;
  color: var(--white);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(6, 31, 59, 0.4);
  color: var(--white);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.hero-nav:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}

.hero-nav svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
}

.hero-prev {
  left: 18px;
  border-radius: 50%;
}

.hero-next {
  right: 18px;
  border-radius: 50%;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 3;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.hero-dots button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 2px solid var(--gold-light);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}

.hero-dots button[aria-current="true"] {
  background: var(--gold-light);
}

/* -------------------------------------------------------- page banner -- */

.page-banner {
  position: relative;
  padding: calc(var(--header-h) + 18px) 0 26px;
  background: var(--navy-deep) center/cover no-repeat;
  text-align: center;
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 31, 59, 0.88), rgba(6, 31, 59, 0.74));
}

.page-banner .container {
  position: relative;
  z-index: 2;
}

.page-banner h1 {
  margin: 0;
  font-size: 38px;
  color: var(--white);
}

.page-banner p {
  max-width: 640px;
  margin: 8px auto 0;
  color: rgba(255, 255, 255, 0.78);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.breadcrumb li+li::before {
  content: "/";
  margin-right: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
}

.breadcrumb a:hover {
  color: var(--gold-light);
}

.breadcrumb [aria-current="page"] {
  color: var(--gold-light);
}

/* ------------------------------------------------------ category cards -- */

.cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}

.cat-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-alt);
}

.cat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.cat-card:hover .cat-media img {
  transform: scale(1.05);
}

/* Beauty card only: cross-fading image slideshow inside .cat-media. */
.cat-media--slideshow {
  position: relative;
}

.cat-media--slideshow .cat-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease), transform 0.6s var(--ease);
}

.cat-media--slideshow .cat-slide.is-active {
  opacity: 1;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cat-media--slideshow .cat-slide {
    transition: none;
  }
}

.cat-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px 26px 30px;
}

.cat-body h3 {
  margin-bottom: 10px;
  font-size: 21px;
  letter-spacing: 1.4px;
}

.cat-body h3 a {
  color: inherit;
}

.cat-body h3 a:hover {
  color: var(--gold-ink);
}

.cat-body p {
  font-size: 14.5px;
}

.cat-body .link-more {
  margin-top: auto;
  padding-top: 18px;
}

.cat-count {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* ------------------------------------------------------- product cards -- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}

/* Square media well. Product shots are rendered on their own studio sweep,
   so they are contained rather than cropped - `cover` would slice the pack. */
.product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-alt);
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease);
}

.product-card:hover .product-media img {
  transform: scale(1.06);
}

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 12px;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.product-badge--new {
  background: var(--navy);
  color: var(--white);
}

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 26px;
}

.product-cat {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.product-card h3 {
  margin-bottom: 8px;
  font-size: 18px;
  letter-spacing: 0.9px;
}

.product-card h3 a {
  color: inherit;
}

.product-card h3 a:hover {
  color: var(--gold-ink);
}

.product-card p {
  font-size: 14px;
}

.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.product-size {
  font-family: var(--font-head);
  font-size: 12.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--body);
}

/* ------------------------------------------------------ product filters -- */

.toolbar {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
  padding: 26px;
  margin-bottom: 30px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}

.toolbar .field label {
  margin-bottom: 7px;
}

.toolbar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.result-count {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
}

.result-count strong {
  color: var(--gold-ink);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--gold);
  color: var(--gold-ink);
}

.chip svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2.6;
  fill: none;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 4px;
  margin-bottom: 42px;
  padding: 0;
  list-style: none;
}

.filter-bar button {
  padding: 9px 18px;
  border: 1px solid transparent;
  background: none;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.filter-bar button:hover {
  color: var(--gold-ink);
  border-color: var(--line);
}

.filter-bar button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.empty-state {
  padding: 56px 24px;
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}

.empty-state h3 {
  font-size: 22px;
}

.empty-state svg {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  stroke: var(--gold);
  stroke-width: 1.5;
  fill: none;
}

.empty-state .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.empty-state p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.coming-soon {
  padding: 64px 24px;
  background: var(--white);
}

.coming-soon h2 {
  margin: 0 0 14px;
}

/* ------------------------------------------------------ product detail -- */

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.gallery-main {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  overflow: hidden;
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.gallery-thumbs button {
  width: 84px;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  transition: border-color 0.25s var(--ease);
}

.gallery-thumbs button[aria-current="true"],
.gallery-thumbs button:hover {
  border-color: var(--gold);
}

.gallery-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.product-detail h1 {
  font-size: 36px;
}

.spec-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.spec-list div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.spec-list dt {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
}

.spec-list dd {
  margin: 0;
}

.tick-list {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
}

.tick-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  font-size: 14.5px;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 5px 13px;
  background: var(--navy-soft);
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--navy);
}

/* -------------------------------------------------------- brand cards -- */

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

.brand-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.brand-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Partner brands render as a supplied logo where one exists, or a typographic
   plate - the wordmark is the brand's own name, and it doubles as the heading -
   where it doesn't. A fixed height rather than aspect-ratio: without
   overflow:hidden backing it, aspect-ratio is only a preference a tall child
   can override, which is how a near-square or portrait logo used to end up
   inflating its own card taller than its row-mates (the same issue, and the
   same fix, as the channel plates on /channels/). 152px matches this card's
   previous organic height at its usual ~380px width, so existing wordmark-only
   cards render identically; only a logo whose natural need exceeds it scales
   down via object-fit: contain (declared below) to fit. */
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 152px;
  overflow: hidden;
  padding: 20px 18px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.brand-mark {
  margin: 0;
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.2;
  transition: color 0.25s var(--ease);
}

.brand-card:hover .brand-mark {
  color: var(--gold-ink);
}

.brand-logo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 26px;
  height: 2px;
  background: var(--gold);
  opacity: 0.55;
  transform: translateX(-50%);
  transition: width 0.3s var(--ease), opacity 0.3s var(--ease);
}

.brand-card:hover .brand-logo::after {
  width: 48px;
  opacity: 1;
}

/* Reserved slot for a brand whose logo has not been supplied yet. */
.brand-card--soon {
  background: #fbfcfd;
  border-style: dashed;
}

.brand-card--soon .brand-logo {
  flex-direction: column;
  gap: 12px;
  background: #fbfcfd;
}

.brand-card--soon .brand-mark {
  color: var(--navy-mid);
  opacity: 0.75;
}

.brand-soon {
  padding: 4px 12px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--white);
}

.brand-card--soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

.brand-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}

/* Only rendered when brand.logo supplies an image plate, so the name still
   reads as the card's heading - the wordmark plate already carries it. */
.brand-name {
  margin: 0 0 4px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
}

.brand-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 10px;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.brand-body p {
  font-size: 14.5px;
}

.brand-body .link-more {
  margin-top: auto;
  padding-top: 18px;
}

/* ------------------------------------------------------- feature cards -- */

.feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}

.feature-card h3 {
  font-size: 19px;
  letter-spacing: 1.2px;
}

.feature-card h3 a {
  color: inherit;
}

.feature-card h3 a:hover {
  color: var(--gold-ink);
}

.feature-card p {
  font-size: 14.5px;
}

.feature-card .link-more {
  margin-top: auto;
  padding-top: 18px;
}

/* Vision / Mission cards: icon on the left and the heading on the same line,
   centred in the space beside the icon (a matching empty column on the right
   keeps it on the card's centre line); the description sits below, left-aligned. */
.feature-card--center {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 60px;
  align-items: center;
  align-content: start;
  column-gap: 12px;
  row-gap: 18px;
  padding: 32px 32px 36px;
}

.feature-card--center .feature-icon {
  grid-column: 1;
  margin-bottom: 0;
}

.feature-card--center h3 {
  grid-column: 2;
  margin: 0;
  text-align: center;
}

.feature-card.feature-card--center p {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
}

.feature-card--center p.lead { color: var(--body); }

@media (max-width: 900px) {
  .feature-card--center {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    padding: 28px 22px 30px;
  }
  .feature-card--center .feature-icon { width: 52px; height: 52px; }
  .feature-card--center h3 { font-size: 17px; letter-spacing: 1px; }
}

@media (max-width: 480px) {
  .feature-card--center {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    column-gap: 8px;
    row-gap: 14px;
    padding: 26px 22px 28px;
  }
  .feature-card--center .feature-icon { width: 48px; height: 48px; }
  .feature-card--center .feature-icon svg { width: 22px; height: 22px; }
  .feature-card--center h3 { font-size: 17px; letter-spacing: 1px; }
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  background: var(--navy-soft);
  color: var(--navy);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.feature-card:hover .feature-icon {
  background: var(--gold);
  color: var(--navy-deep);
}

.feature-icon svg {
  width: 27px;
  height: 27px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.section-ink .feature-card,
.section-navy .feature-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.section-ink .feature-card p,
.section-navy .feature-card p {
  color: rgba(255, 255, 255, 0.76);
}

.section-ink .feature-icon,
.section-navy .feature-icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold-light);
}

/* Distribution channel card's example platforms - generic, not a claim that
   any specific brand sells through any specific one of them. */
.channel-examples {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Numbered service card - the step index replaces the icon. */
.step-card {
  position: relative;
  padding-top: 40px;
}

.step-index {
  position: absolute;
  top: 26px;
  right: 26px;
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: var(--navy-soft);
}

.step-card:hover .step-index {
  color: var(--gold-soft);
}

/* ----------------------------------------------------- application tiles -- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 330px;
  padding: 32px;
  background: var(--navy-deep) center/cover no-repeat;
  overflow: hidden;
  color: var(--white);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 31, 59, 0.15) 30%, rgba(6, 31, 59, 0.9) 100%);
  transition: background 0.35s var(--ease);
}

.tile:hover::before {
  background: linear-gradient(180deg, rgba(6, 31, 59, 0.35) 10%, rgba(6, 31, 59, 0.94) 100%);
}

.tile-body {
  position: relative;
  z-index: 2;
}

.tile h3 {
  margin-bottom: 8px;
  font-size: 22px;
  color: var(--white);
  letter-spacing: 1.3px;
}

.tile p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.82);
}

.tile .link-more {
  margin-top: 16px;
  color: var(--gold-light);
}

.tile .link-more:hover {
  color: var(--white);
}

/* ----------------------------------------------------------- counters -- */

.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 20px;
  text-align: center;
}

.counter-value {
  display: block;
  font-family: var(--font-head);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
}

.counter-label {
  display: block;
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}

.section-ink .counter-value,
.section-navy .counter-value {
  color: var(--gold-light);
}

.section-ink .counter-label,
.section-navy .counter-label {
  color: rgba(255, 255, 255, 0.86);
}

/* -------------------------------------------------------------- media -- */

.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.media-split img {
  width: 100%;
}

.media-split.is-reversed .media-split-text {
  order: 2;
}

.media-frame {
  position: relative;
}

/* Offset gold rule behind the image - the ORA accent applied to the
   reference's plain media block. */
.media-frame::before {
  content: "";
  position: absolute;
  left: -18px;
  bottom: -18px;
  width: 58%;
  height: 58%;
  border-left: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  z-index: 0;
}

.media-frame img {
  position: relative;
  z-index: 1;
}

/* "Three letters. Three values." artwork: the picture carries no baked-in
   text. OWNERSHIP / RELATIONSHIPS / AMBITION are live HTML laid over the
   terrace in the three letter columns, sized in container units so they stay
   sharp and keep their proportions at every width. */
.values-art {
  position: relative;
  container-type: inline-size;
}

.values-art img {
  display: block;
  width: 100%;
  height: auto;
}

.values-art-labels {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  z-index: 2;
}

.values-art-labels li {
  position: absolute;
  top: 74.4%;
  transform: translateX(-50%);
  padding-top: 4.2cqw;
  font-family: var(--font-head);
  font-size: 9px;
  font-size: max(8px, 2.9cqw);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f3e9d8;
  text-shadow: 0 1px 8px rgba(3, 14, 30, 0.55);
}

.values-art-labels li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4.4cqw;
  height: 2px;
  background: var(--gold-light);
  transform: translateX(-50%);
}

.values-art-labels li:nth-child(1) { left: 17.3%; }
.values-art-labels li:nth-child(2) { left: 50%; }
.values-art-labels li:nth-child(3) { left: 82.7%; }

/* ------------------------------------------------------- project cards -- */

.project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}

.project-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-alt);
}

.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.project-card:hover .project-media img {
  transform: scale(1.05);
}

.project-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 24px 28px;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.project-card h3 {
  margin-bottom: 10px;
  font-size: 19px;
  letter-spacing: 1px;
}

.project-card h3 a {
  color: inherit;
}

.project-card h3 a:hover {
  color: var(--gold-ink);
}

.project-card p {
  font-size: 14.5px;
}

.project-card .link-more {
  margin-top: auto;
  padding-top: 18px;
}

/* ---------------------------------------------------------- news cards -- */

.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.news-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-alt);
}

.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.news-card:hover .news-media img {
  transform: scale(1.05);
}

.news-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

.news-card h3 {
  margin-bottom: 10px;
  font-size: 18.5px;
  letter-spacing: 0.9px;
}

.news-card h3 a {
  color: inherit;
}

.news-card h3 a:hover {
  color: var(--gold-ink);
}

.news-card p {
  font-size: 14.5px;
}

.news-card .link-more {
  margin-top: auto;
  padding-top: 18px;
}

/* ------------------------------------------------------------ timeline -- */

.timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 34px;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}

.timeline li {
  position: relative;
  padding-bottom: 34px;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 6px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: var(--white);
}

.timeline h3 {
  margin-bottom: 6px;
  font-size: 19px;
  letter-spacing: 1.1px;
}

.timeline-year {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2.2px;
  color: var(--gold-ink);
}

.timeline p {
  font-size: 14.5px;
}

/* --------------------------------------------------------------- tabs -- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.tabs button {
  padding: 13px 26px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.tabs button:hover {
  color: var(--gold-ink);
}

.tabs button[aria-selected="true"] {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel ul {
  padding-left: 18px;
}

.tab-panel li {
  margin-bottom: 10px;
}

/* ------------------------------------------------------------- values -- */

.value-item+.value-item {
  margin-top: 30px;
}

.value-item h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 18px;
  letter-spacing: 1.2px;
}

.value-item h3 span {
  font-size: 15px;
  color: var(--gold-ink);
}

.progress {
  height: 6px;
  margin-bottom: 12px;
  background: var(--line);
  overflow: hidden;
}

.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 1.1s var(--ease);
}

.value-item p {
  font-size: 14.5px;
}

/* -------------------------------------------------------------- forms -- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2136' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(173, 140, 105, 0.16);
  outline: none;
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field-error {
  margin-top: 6px;
  font-size: 13px;
  color: #b3341f;
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: #b3341f;
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  grid-column: 1 / -1;
}

.field-check input {
  width: auto;
  margin-top: 4px;
}

.field-check label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--body);
}

.form-status {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  font-size: 14px;
  color: var(--ink);
}

.form-status[hidden] {
  display: none;
}

/* Shown when a real submission fails: same box, the site's error red. */
.form-status.is-error {
  border-left-color: #b3341f;
  background: #fbeeeb;
}

.form-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  color: var(--body);
}

/* ------------------------------------------------------- office cards -- */

.office-card {
  height: 100%;
  padding: 32px 28px;
  border: 1px solid var(--line);
  background: var(--white);
}

.office-card h3 {
  font-size: 19px;
  letter-spacing: 1.1px;
}

.office-card p {
  font-size: 14.5px;
}

.office-card dl {
  margin: 18px 0 0;
  font-size: 14.5px;
}

.office-card dt {
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.office-card dd {
  margin: 0 0 14px;
}

/* ------------------------------------------------------------ cta band -- */

.cta-band {
  padding: 72px 0;
  background: var(--navy-deep);
  text-align: center;
}

.cta-band h2 {
  color: var(--white);
  font-size: 34px;
}

.cta-band p {
  max-width: 660px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.76);
}

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

/* --------------------------------------------------- global presence band -- */

.world-band {
  position: relative;
  padding: 96px 0;
  background: var(--navy);
  overflow: hidden;
  color: var(--white);
}

.world-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/hero/slide-3.jpg") center/cover no-repeat;
  opacity: 0.4;
}

.world-band .container {
  position: relative;
  z-index: 2;
}

.world-band h2 {
  color: var(--white);
  font-size: 40px;
  max-width: 480px;
}

.world-band p {
  max-width: 460px;
  color: rgba(255, 255, 255, 0.84);
}

.region-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 46px;
}

.region-card {
  padding: 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.region-card h3 {
  margin-bottom: 6px;
  font-size: 15px;
  letter-spacing: 1.8px;
  color: var(--gold-light);
}

.region-card p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------- distribution channels -- */

/* The Brands page: a sticky category bar, then one section per distribution
   channel. Each entry is the same .brand-card used by "Brands we represent" on
   the distribution pages, so hover, framing and rhythm match site-wide. */

/* ------------------------------------------------------- category bar -- */

.channel-nav {
  position: sticky;
  top: var(--header-h-stuck);
  z-index: 20;
  background: var(--navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Centred when the five chips fit, scrolled from the left when they do not:
   a max-content width capped at the container gives both without the clipped
   first item that `justify-content: center` causes inside a scroller. */
.channel-nav ul {
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.channel-nav ul::-webkit-scrollbar {
  display: none;
}

.channel-nav a {
  display: block;
  padding: 16px 20px;
  border-bottom: 3px solid transparent;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.channel-nav a:hover {
  color: var(--white);
}

.channel-nav a.is-current {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

/* An anchor jump lands the section's top edge exactly on the bar's bottom
   edge, and the section's own padding then carries the heading clear of it. */
.channel-section {
  /* +2px of slack: the bar's rendered height moves by a fraction of a pixel
     with the type, and the section edge should never tuck under it. */
  scroll-margin-top: calc(var(--header-h-stuck) + var(--channel-bar-h) + 2px);
}

/* Deeper than a standard section: after a jump this padding is the whole of
   the whitespace between the bar and the channel title. */
.section.channel-section {
  padding-top: 64px;
}

/* ---------------------------------------------------- channel section -- */

.channel-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: start;
  max-width: 820px;
  margin-bottom: 46px;
}

.channel-head-index {
  font-family: var(--font-head);
  font-size: 58px;
  font-weight: 600;
  line-height: 0.9;
  color: var(--navy-soft);
}

.section-alt .channel-head-index {
  color: #e2e7ee;
}

.channel-head h2 {
  margin-bottom: 10px;
}

.channel-head .lead {
  margin: 0;
}

/* ---------------------------------------------- channel section heads --
   Image-free editorial row, identical for all five channels:
   [ 01 / 4 platforms ]  |  [ Channel name ]  [ Description + link ]
   Typography, a hairline above and below, a short gold accent under the name
   and a quiet hover state carry the design. Phones stack the same parts. */
.cx {
  display: grid;
  grid-template-columns: 148px minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 44px;
  align-items: start;
  margin-bottom: 32px;
  padding: 26px 20px 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease);
}

.cx:hover { background: rgba(9, 49, 90, 0.035); }

.cx-index {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 24px;
  border-right: 1px solid var(--line);
}

.cx-num {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: #b7c4d6;
  transition: color 0.35s var(--ease);
}

.cx:hover .cx-num { color: var(--gold-ink); }

.cx-meta {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2.2px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.cx-title {
  margin: 0;
  font-size: clamp(26px, 1.2vw + 20px, 36px);
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.15;
  color: var(--navy);
}

.cx-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 14px;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}

.cx:hover .cx-title::after { width: 64px; }

.cx-side { min-width: 0; }

.cx-desc {
  max-width: 480px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.cx-link { margin-top: 14px; }

@media (max-width: 900px) {
  .cx {
    grid-template-columns: 1fr;
    row-gap: 12px;
    margin-bottom: 24px;
    padding: 20px 4px 22px;
  }

  .cx-index {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    padding-right: 0;
    border-right: 0;
  }

  .cx-num { font-size: 22px; }
  .cx-title::after { margin-top: 10px; }
  .cx-desc { max-width: 520px; font-size: 15px; }
  .cx-link { margin-top: 10px; }
  .cx:hover { background: none; }
  .cx:hover .cx-title::after { width: 32px; }
}

@media (max-width: 480px) {
  .cx-meta { font-size: 12px; letter-spacing: 2px; }
  .cx-desc { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx, .cx-num, .cx-title::after { transition: none; }
}

/* --------------------------------------------------------- brand grid -- */

/* A capped track width rather than a fixed column count: every tile is the
   same size in all five channels however many entries a channel has, rows fill
   with as many as fit, and a short last row centres instead of trailing off to
   the left. */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 258px));
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.channel-item {
  display: flex;
}

.channel-item>.brand-card {
  width: 100%;
}

/* On this page the plate is the whole point of the card, so it is deeper than
   on the distribution grid and the body carries only the channel. The logo
   area's own height is set further down, where the fixed-height rule that
   replaces this aspect-ratio lives. */
.brand-card--channel .brand-mark {
  font-size: 18px;
  letter-spacing: 1.9px;
}

.brand-card--channel .brand-body {
  align-items: center;
  padding: 15px 16px 17px;
  text-align: center;
}

.brand-card--channel .brand-name {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy);
}

.brand-card--channel .brand-meta {
  margin: 0;
  justify-content: center;
}

.brand-card--channel .link-more {
  padding-top: 14px;
}

/* A supplied logo is contained, never stretched or cropped, whatever its
   ratio - so a wordmark plate and a logo plate sit at the same size. */
.brand-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.35s var(--ease);
}

.brand-card:hover .brand-logo img {
  transform: scale(1.04);
}

/* Channel logos carry a per-logo --logo-w (channels.json) sized by optical
   weight - a wide wordmark and a square mark cover a similar area - and stay
   inside the fixed plate via max-width/max-height. */
.brand-card--channel .brand-logo img[style*="--logo-w"] {
  width: var(--logo-w);
  height: auto;
}

/* One fixed-height card system for every channel on this page - originally
   built for Pharmacy Chain alone, then generalised here once the same
   problem turned out to exist in the other four: Carrefour and Spinneys in
   Modern Trade are similarly square/tall marks, "Noon Minutes"/"Now Now" wrap
   to two lines the same way "Super Care" does, "Landmark Group" is a two-line
   name outside Pharmacy Chain too. All of it traces back to the same root
   cause - .brand-logo's aspect-ratio has no overflow:hidden behind it, so a
   tall child overrides it instead of being constrained by it, and nothing
   then equalises the row: a card's height comes from its own content, not
   from the grid.
   -
   The fix is a hard-capped logo area plus reserved space for the text below
   it, applied to every .brand-card--channel rather than one category:
     - .brand-logo: a fixed height + overflow:hidden replaces the soft
       aspect-ratio. object-fit: contain (declared above) still holds inside
       it, so nothing that already fit is touched - a wide wordmark or a
       normal logo renders exactly as before. Only a mark whose natural need
       exceeds the fixed height (Aster's circle, Carrefour, Spinneys) scales
       down to fit, the same way any future outsized logo here would. 200px
       comfortably fits a two-line wordmark ("Noon Minutes") without clipping
       it, with generous room to spare for the many single-line logos inside it.
     - .brand-name: reserves two lines' height, so a long name wrapping
       ("Super Care", "Landmark Group") can't push its card past a one-line
       neighbour's.
     - .brand-body: a matching min-height so the wordmark-only cards (Marina,
       Med 7, MedX, Now Now, Geant - the logo IS the plate's only content, no
       separate name element to reserve space in) land at the same total card
       height as an image-bearing one, re-centred once that slack is added. */
.brand-card--channel .brand-logo {
  aspect-ratio: auto;
  height: 200px;
  overflow: hidden;
}

/* Logo-only card: white card and plate, no text row beneath the logo. */
.brand-card--channel,
.brand-card--channel .brand-logo {
  background-color: #ffffff !important;
}

.brand-card--channel .brand-logo {
  border-bottom: 0;
}

/* The gold accent dash under the logo is the only non-white mark on a logo-only
   card: hidden at rest, still animates in on hover (.brand-card:hover rule). */
.brand-card--channel .brand-logo::after {
  opacity: 0;
}

.brand-card--channel:hover .brand-logo::after {
  opacity: 1;
}

/* Two channel cards carry their brand's own yellow as the card surface. The
   PNGs for these two have transparent padding so the colour reaches the edges;
   the doubled class outranks the white rule above in every state. */
.brand-card--channel.brand-card--noon,
.brand-card--channel.brand-card--noon .brand-logo {
  background-color: #FCE818 !important;
}

.brand-card--channel.brand-card--noon-minutes,
.brand-card--channel.brand-card--noon-minutes .brand-logo {
  background-color: #F1E107 !important;
}

.brand-card--channel.brand-card--instashop,
.brand-card--channel.brand-card--instashop .brand-logo {
  background-color: #EA047E !important;
}

/* Every other channel card stays #ffffff via the shared rule above. */

.brand-card--channel .brand-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

.brand-card--channel .brand-body {
  justify-content: center;
  min-height: 111px;
}

/* ------------------------------------------------------------- notices -- */

/* Marks the placeholder company details so they are obvious in the page,
   not just in the source. */
.placeholder-note {
  padding: 14px 18px;
  margin-bottom: 26px;
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  font-size: 13.5px;
  color: var(--ink);
}
/* ------------------------------------------------- brand portfolio cards --
   "Brands we represent": one card per brand - a portfolio composition of the
   brand's range, the official logo, the category and a link out to the brand.
   Scoped to [data-brand-grid] so the channel-logo cards above are untouched. */

[data-brand-grid] .brand-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  transition: opacity 0.16s var(--ease);
}

[data-brand-grid] .brand-grid.is-leaving { opacity: 0; }

[data-brand-grid] .filter-bar {
  gap: 4px 6px;
  margin-bottom: 46px;
  padding-bottom: 0;
}

[data-brand-grid] .filter-bar button {
  position: relative;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  font-size: 12.5px;
  letter-spacing: 1.9px;
  white-space: nowrap;
}

[data-brand-grid] .filter-bar button:hover {
  border-color: var(--gold);
  color: var(--navy);
}

[data-brand-grid] .filter-bar button[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(6, 31, 59, 0.18);
}

[data-brand-grid] .filter-bar button:focus-visible,
.pf-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.pf-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  animation: pf-in 0.5s var(--ease) both;
  animation-delay: var(--pf-delay, 0ms);
  transition: border-color 0.3s var(--ease), box-shadow 0.35s var(--ease),
    transform 0.35s var(--ease);
}

@keyframes pf-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.pf-card:hover,
.pf-card:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 22px 44px rgba(6, 31, 59, 0.14);
  transform: translateY(-6px);
}

.pf-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-alt);
}

.pf-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.pf-card:hover .pf-media img,
.pf-card:focus-visible .pf-media img { transform: scale(1.06); }

.pf-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.pf-card:hover .pf-media::after,
.pf-card:focus-visible .pf-media::after { transform: scaleX(1); }

.pf-category {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 28px);
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--navy);
  backdrop-filter: blur(4px);
}

.pf-plate {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid var(--line);
}

.pf-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 18px 28px;
}

/* Logos are sized by optical weight, not one shared width: brands.json carries a
   per-logo --logo-w (computed from the trimmed artwork's aspect ratio so every
   mark covers a similar area), and max-width keeps it inside the zone. */
.pf-logo img {
  display: block;
  width: var(--logo-w, 160px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.pf-wordmark {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-align: center;
  color: var(--navy);
}

.pf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 13px 20px 15px;
  border-top: 1px solid var(--line);
  background: #fbfcfd;
}

.pf-note {
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.pf-cta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-ink);
  transition: color 0.25s var(--ease);
}

.pf-cta svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  transition: transform 0.3s var(--ease);
}

.pf-card:hover .pf-cta,
.pf-card:focus-visible .pf-cta { color: var(--navy); }

.pf-card:hover .pf-cta svg,
.pf-card:focus-visible .pf-cta svg { transform: translate(3px, -3px); }

@media (max-width: 1024px) {
  [data-brand-grid] .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 640px) {
  /* One column; the filter row scrolls sideways instead of wrapping into rows. */
  [data-brand-grid] .brand-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  [data-brand-grid] .filter-bar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1) 30px;
    padding: 2px var(--gutter) 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-brand-grid] .filter-bar::-webkit-scrollbar { display: none; }
  [data-brand-grid] .filter-bar li { flex: none; scroll-snap-align: start; }
  [data-brand-grid] .filter-bar button { padding: 10px 16px; font-size: 12px; letter-spacing: 1.4px; }

  .pf-logo { height: 84px; }
  .pf-foot { padding: 12px 16px 14px; }
}

@media (max-width: 360px) {
  .pf-note { font-size: 11px; }
  .pf-cta { letter-spacing: 1.2px; }
}

/* Touch screens have no hover: keep the lift/zoom off and let the persistent
   "Explore Brand" row do the work; a tap gives press feedback instead. */
@media (hover: none) {
  .pf-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .pf-card:hover .pf-media img { transform: none; }
  .pf-card:active { border-color: var(--gold); box-shadow: 0 10px 24px rgba(6, 31, 59, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-card, .pf-media img, .pf-cta svg, .pf-media::after { animation: none; transition: none; }
  .pf-card:hover, .pf-card:focus-visible { transform: none; }
  .pf-card:hover .pf-media img, .pf-card:focus-visible .pf-media img { transform: none; }
}

/* Icon / arrow controls sit on dark ground (hero, drawer, search): give the
   keyboard focus ring the lighter gold so it stays visible there. */
.hero-nav:focus-visible,
.icon-btn:focus-visible,
.mobile-nav-close:focus-visible,
.search-close:focus-visible,
.to-top:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* ------------------------------------------ channels: "Our reach" --
   Left: eyebrow, heading, one paragraph and the five channels as an editorial
   index. Right: a staggered board of ORA portfolio imagery with a caption bar
   that follows the selected channel (name, platform count and that channel's
   own platform logos). The selected channel lights one tile of the board.
   Phones put the visual between the introduction and the index. */
.channel-reach { overflow: hidden; }

.reach-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "head visual"
    "list visual";
  column-gap: 72px;
  align-content: center;
  align-items: start;
}

.reach-head { grid-area: head; }
.reach-list { grid-area: list; }
.reach-visual { grid-area: visual; align-self: center; }

.reach-head h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 1.6vw + 14px, 32px);
  font-weight: 500;
  letter-spacing: 1.6px;
  line-height: 1.2;
}

.reach-head p {
  max-width: 470px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.reach-list {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.reach-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: baseline;
  padding: 16px 6px 16px 20px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}

.reach-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease);
}

.reach-num {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--gold-ink);
}

.reach-name {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}

.reach-count {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--body);
  transition: color 0.3s var(--ease);
}

.reach-item:hover,
.reach-item:focus-visible,
.reach-item.is-active {
  padding-left: 26px;
  background: rgba(9, 49, 90, 0.04);
}

.reach-item:hover::before,
.reach-item:focus-visible::before,
.reach-item.is-active::before { transform: scaleY(1); }

.reach-item:hover .reach-name,
.reach-item:focus-visible .reach-name,
.reach-item.is-active .reach-name { color: var(--navy); font-weight: 600; }

.reach-item.is-active .reach-count { color: var(--gold-ink); }

.reach-item:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; }

/* Visual: staggered board + caption bar, with the ORA gold corner behind it. */
.reach-visual {
  position: relative;
  width: 100%;
  max-width: 720px;
  justify-self: end;
}

.reach-visual::before {
  content: "";
  position: absolute;
  left: -16px;
  bottom: -16px;
  width: 46%;
  height: 46%;
  border-left: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}

.reach-board {
  position: relative;
  aspect-ratio: 6 / 5;
  background: var(--navy-deep);
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.reach-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(201, 169, 107, 0.2), rgba(201, 169, 107, 0) 70%),
    linear-gradient(160deg, #0b3a6b 0%, #061f3b 100%);
}

.reach-tile {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: 0;
  filter: brightness(0.82) saturate(0.85);
  transition: transform 0.6s var(--ease), filter 0.5s var(--ease), outline-color 0.4s var(--ease);
}

.reach-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reach-tile--1 { left: 4%;  top: 6%;  width: 58%; height: 50%; }
.reach-tile--2 { left: 66%; top: 6%;  width: 30%; height: 27%; }
.reach-tile--3 { left: 66%; top: 37%; width: 30%; height: 27%; }
.reach-tile--4 { left: 4%;  top: 62%; width: 28%; height: 32%; }
.reach-tile--5 { left: 35%; top: 62%; width: 27%; height: 32%; }
.reach-tile--6 { left: 66%; top: 68%; width: 30%; height: 26%; }

.reach-tile.is-lit {
  z-index: 2;
  filter: none;
  outline: 2px solid var(--gold-light);
  outline-offset: 5px;
  transform: scale(1.025);
}

.reach-captions {
  display: grid;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 3px 3px;
}

.reach-cap {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 18px 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}

.reach-cap.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.reach-cap-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.reach-cap-kicker {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.reach-cap-name {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--navy);
}

.reach-cap-link { margin-top: 4px; font-size: 11.5px; }

.reach-cap-logos { display: flex; flex-wrap: wrap; gap: 8px; }

.reach-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
}

.reach-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 960px) {
  .reach-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "visual"
      "list";
    row-gap: 34px;
  }

  .reach-visual { justify-self: center; max-width: 640px; }
  .reach-list { margin-top: 0; }
  .reach-head p { max-width: 560px; }
}

@media (max-width: 520px) {
  .reach-visual::before { left: -10px; bottom: -10px; }
  .reach-cap { padding: 14px 16px; }
  .reach-cap-name { font-size: 17px; }
  .reach-logo { width: 62px; height: 30px; }
  .reach-item { grid-template-columns: 38px minmax(0, 1fr) auto; padding-right: 2px; }
  .reach-name { font-size: 16px; }
  .reach-count { font-size: 11px; letter-spacing: 0.8px; }
}

@media (prefers-reduced-motion: reduce) {
  .reach-tile, .reach-item, .reach-item::before, .reach-cap { transition: none; }
  .reach-tile.is-lit { transform: none; }
}

/* ----------------------------------------------- contact: Cognito embed --
   The enquiry form is Cognito's official seamless embed (form 121). It renders
   in the page (with Cognito's own 'protect-css' rules, hence !important), so the
   site's look is applied here, scoped to .cognito-embed: the same labels,
   inputs, focus ring and button as the original custom form. */
.cognito-embed { min-width: 0; width: 100%; }

.cognito-embed form.cog-cognito.cog-form {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
}

.cognito-embed .cog-form__container,
.cognito-embed .cog-form__content,
.cognito-embed .cog-wrapper { padding: 0 !important; background: transparent !important; box-shadow: none !important; }

.cognito-embed .cog-label {
  margin-bottom: 8px !important;
  font-family: var(--font-head) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}

.cognito-embed .cog-asterisk { color: var(--gold-ink) !important; }

.cognito-embed form.cog-cognito .el-input__inner,
.cognito-embed form.cog-cognito .el-textarea__inner {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  line-height: 1.68 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background-color: var(--white) !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.cognito-embed form.cog-cognito .el-textarea__inner { min-height: 150px !important; resize: vertical; }

.cognito-embed form.cog-cognito .el-input__inner:focus,
.cognito-embed form.cog-cognito .el-textarea__inner:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(173, 140, 105, 0.16) !important;
  outline: none !important;
}

.cognito-embed form.cog-cognito .el-input__inner::placeholder,
.cognito-embed form.cog-cognito .el-textarea__inner::placeholder { color: var(--muted) !important; }

.cognito-embed form.cog-cognito .cog-checkable,
.cognito-embed form.cog-cognito .cog-checkable * ,
.cognito-embed form.cog-cognito .el-checkbox__label {
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  color: var(--ink) !important;
}

.cognito-embed form.cog-cognito .el-button.cog-button--submit {
  min-height: var(--btn-h, 52px) !important;
  padding: 14px 34px !important;
  border: 1px solid var(--navy) !important;
  border-radius: var(--btn-radius, 3px) !important;
  background: var(--navy) !important;
  color: var(--white) !important;
  font-family: var(--font-head) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.cognito-embed form.cog-cognito .el-button.cog-button--submit .cog-button__text {
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

.cognito-embed form.cog-cognito .el-button.cog-button--submit:hover,
.cognito-embed form.cog-cognito .el-button.cog-button--submit:focus-visible {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--navy-deep) !important;
}