/* assets/css/home.css */

/* Home page only (loaded by index.php through $page['styles']). */

/* =========================================================
   Home: hero carousel
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--sigma-bg-hero);
}
/* The slides share one grid cell, so the hero is as tall as its tallest
   slide: at least today's height, taller only when long words need it
   (ruling 57), and a button is never clipped. */
.hero-track { display: grid; touch-action: pan-y; }
.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(420px, 60vh, 640px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease-out);
}
/* A picture slide fills its slide edge to edge, with no fade and no words
   (owner revision 2026-10-18). While "Where a click goes" is set the link
   covers the whole slide; the picture's alt text names it. */
.hero-photo { position: absolute; inset: 0; display: block; }
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.hero-picture-link { position: absolute; inset: 0; display: block; }
/* The owner's picture slides take the picture's own shape (2400 × 1000, 12:5) instead of a fixed height, so the
   whole picture shows at every width. On phones every slide takes one tall 4:5 frame (owner 2026-10-27): a phone
   picture fills it; a slide without one (.hero-slide--fill) shows its whole desktop picture in the middle over a
   blurred, enlarged copy of itself (hero.php), so nothing is cut off and every slide is the same height. */
.hero--pictures .hero-slide { min-height: 0; aspect-ratio: 12 / 5; }
.hero-photo-fill { display: none; }
@media (max-width: 767px) {
  .hero--phone-pictures .hero-slide { aspect-ratio: 4 / 5; }
  .hero-slide--fill .hero-photo-fill {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(22px) saturate(1.15) brightness(0.92);
    transform: scale(1.2);
    user-select: none;
    -webkit-user-drag: none;
  }
  .hero-slide--fill { overflow: hidden; }
  .hero-slide--fill .hero-photo img { object-fit: contain; }
  /* The arrows, dots and Pause sit under the tall frame on phones, so they never cover the picture (owner 2026-10-27). */
  .hero--pictures .hero-controls { position: static; width: max-content; max-width: 100%; margin: var(--space-2) auto; }
}
/* The picture covers the link's own box, so the focus ring is drawn on a layer above it, white and navy to show on any picture. */
.hero-picture-link:focus-visible { outline: none; }
.hero-picture-link:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 3px var(--sigma-white), inset 0 0 0 6px var(--sigma-navy);
  /* Invisible normally; Windows High Contrast turns it into a system-colour ring, as it drops box-shadows. */
  outline: 3px solid transparent;
  outline-offset: -6px;
}
/* A colour stage of the automatic slider (owner decision 2026-10-16): the
   colour's cover photo multiplied onto the shared 22% tint (.swatch-wash on
   the slide), centred, with no words (owner revision 2026-10-18). */
.hero-slide--stage { justify-content: center; }
.hero-stage {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}
.hero-stage-media { display: flex; justify-content: center; }
.hero-stage-media img { width: auto; max-width: 100%; height: 200px; object-fit: contain; }
@media (min-width: 768px) {
  .hero-stage-media img { height: auto; max-height: min(520px, 52vh); }
}
.hero-controls {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
}
.hero-btn,
.hero-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--sigma-navy);
}
.hero-btn:hover { background: var(--sigma-bg-section); }
.hero-dots { display: flex; }
.hero-dot { width: 28px; }
/* Six stages make the controls 320 px wide, more than a 320 px hero: below 400 px they span it and the dots narrow to 24 px (296 px in all), still 44 px tall. */
@media not all and (min-width: 400px) {
  .hero-controls { left: var(--space-2); right: var(--space-2); justify-content: center; }
  .hero-dot { width: 24px; }
}
.hero-dot span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--sigma-navy);
  transition: background var(--dur-fast) var(--ease-out);
}
.hero-dot[aria-current="true"] span { background: var(--sigma-navy); }
.hero-btn .icon-play,
.hero-btn[data-state="paused"] .icon-pause { display: none; }
.hero-btn[data-state="paused"] .icon-play { display: block; }

/* No slides yet: split hero, text on one side and a real product photo
   standing on a soft disc of its own colour on the other. */
.hero-split {
  background: var(--sigma-bg-hero);
  padding: clamp(40px, 7vw, 96px) 0;
}
/* Positioned (to paint above the blobs) but without a z-index: a stacking
   context here would stop the photo's multiply blend reaching the hero
   background, leaving a white box around it. */
.hero-split-inner {
  position: relative;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.hero-split-text { text-align: center; }
.hero-split-text h1 { margin-bottom: var(--space-3); }
.hero-split .display-tagline { margin-bottom: var(--space-3); }
.hero-lead {
  max-width: 34ch;
  margin: 0 auto var(--space-5);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--sigma-text-dark);
}
.hero-swatches { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.hero-swatches .dot { width: 22px; height: 22px; border: 2px solid var(--sigma-white); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.hero-actions .icon { width: 20px; height: 20px; }
.hero-split-media {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
}
.hero-split-disc {
  position: absolute;
  inset: 12% 2% 2%;
  border-radius: 50%;
  background: var(--sigma-bg-section);
  background: color-mix(in srgb, var(--swatch, var(--sigma-bg-section)) 30%, var(--sigma-white));
}
.hero-split-media img {
  position: relative;
  width: 78%;
  height: auto;
  /* Studio photos have a white background; multiply lets the disc show
     through it so the case appears to stand on its own colour. */
  mix-blend-mode: multiply;
}
@media (min-width: 960px) {
  .hero-split-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8); }
  .hero-split-text { text-align: left; }
  .hero-lead { margin-left: 0; }
  .hero-swatches,
  .hero-actions { justify-content: flex-start; }
  .hero-split--text .hero-split-inner { grid-template-columns: 1fr; }
  .hero-split--text .hero-split-text { text-align: center; }
  .hero-split--text .hero-lead { margin-left: auto; }
  .hero-split--text .hero-swatches,
  .hero-split--text .hero-actions { justify-content: center; }
}

/* =========================================================
   Home: Shop by colour, the compact colour stage (spec §2.6,
   owner revision 2026-10-15). The band is a soft tint of the
   chosen colour: 8%, at which every text colour on it passes AA
   whatever the colour (ruling 38). The photo panel takes the
   colour's wash (.swatch-wash). From 768 px the heading sits
   above the chips, beside the photo, so the band stays about
   340–360 px tall at 1024 px (ruling 36). No "section" class:
   Home's true-white rule must not reach it (ruling 31).
   ========================================================= */

.colour-stage {
  padding: var(--space-7) 0;
  background: var(--sigma-white);
  background: color-mix(in srgb, var(--swatch, var(--sigma-white)) 8%, var(--sigma-white));
  transition: background-color var(--dur-base) var(--ease-out);
}
.colour-stage-inner {
  display: grid;
  grid-template-areas: "head" "photo" "chips" "line" "cta";
  gap: var(--space-4);
}
.colour-stage-head { grid-area: head; }
.colour-stage-head h2 { margin: 0; font-size: 1.75rem; }
/* Pink would read 4.2:1 on the darkest tint; the darker pink keeps the eyebrow AA. */
.colour-stage .eyebrow { margin: 0 0 var(--space-1); color: var(--sigma-primary-dark); }
.colour-stage .section-sub { margin-top: var(--space-1); }
.colour-stage-photo {
  grid-area: photo;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.colour-stage-photo img {
  width: auto;
  max-width: 100%;
  height: 200px;
  object-fit: contain;
  transition: opacity 150ms var(--ease-out);
}
.colour-stage-photo.is-swapping img { opacity: 0; }
.stage-chips {
  grid-area: chips;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.stage-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-md);
  background: var(--sigma-white);
  color: var(--sigma-text-dark);
  font: 500 0.95rem/1.3 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.stage-chip:hover { border-color: var(--sigma-text-dark); }
.stage-chip.is-selected,
.stage-chip[aria-pressed="true"] { border-color: var(--sigma-black); box-shadow: 0 0 0 1px var(--sigma-black); }
.stage-chip-dot {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--swatch, var(--sigma-bg-hero));
  box-shadow: 0 0 0 1px var(--sigma-border);
}
.stage-chip-name { min-width: 0; overflow-wrap: anywhere; }
.colour-stage-line { grid-area: line; margin: 0; color: var(--sigma-text-dark); }
.colour-stage-cta { grid-area: cta; margin: 0; }
.colour-stage-cta .btn { white-space: normal; gap: 0.25em; }
@media (min-width: 768px) {
  .colour-stage { padding: var(--space-6) 0; }
  .colour-stage-inner {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "photo head" "photo chips" "photo line" "photo cta";
    gap: var(--space-3) var(--space-6);
    align-items: start;
  }
  .colour-stage-photo { height: 260px; }
  .colour-stage-photo img { height: 230px; }
  .stage-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .colour-stage-inner { grid-template-columns: 260px minmax(0, 1fr); }
  .colour-stage-photo { height: 280px; }
  .colour-stage-photo img { height: 250px; }
}

/* =========================================================
   Home: Featured luggage (spec §2.5). Without JavaScript every
   tab's panel shows, stacked under its own h3; one tab alone is
   the heading and its grid. On phones the grid has 2 columns,
   1 under 360 px.
   ========================================================= */

.featured-section,
.featured-panel { scroll-margin-top: var(--header-height); }
.featured-section:not(.is-tabbed) .featured-panel + .featured-panel { margin-top: var(--space-7); }
.featured-panel-title { margin: 0 0 var(--space-4); font-size: 1.25rem; }
/* With home/tabs.js: the tab list (WAI-ARIA tabs). On phones it scrolls
   sideways inside itself, never the page; a tab's focus ring is drawn
   inside it, so the scrolling list cannot clip it. */
.featured-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.featured-tab {
  flex: 0 0 auto;
  min-height: var(--touch);
  padding: 0 var(--space-5);
  border: 1px solid var(--sigma-border);
  border-radius: 999px;
  background: var(--sigma-white);
  color: var(--sigma-text-dark);
  font: 500 0.95rem/1.2 var(--font-ui);
  cursor: pointer;
}
.featured-tab:hover { border-color: var(--sigma-text-dark); }
.featured-tab[aria-selected="true"] { border-color: var(--sigma-navy); background: var(--sigma-navy); color: var(--sigma-white); }
.featured-tab:focus-visible { outline-offset: -4px; }
@media (max-width: 359px) {
  .featured-section .featured-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Home: Why Sigma, gallery, about, newsletter, blog, B2B strip
   ========================================================= */

.why-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.why-card {
  padding: var(--space-5);
  background: var(--sigma-white);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-md);
}
.why-card .icon { width: 32px; height: 32px; margin-bottom: var(--space-3); color: var(--sigma-primary); }
.why-card h3 { font-size: 1.1rem; }
.why-card p { margin: 0; }

.gallery-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 768px) {
  .gallery-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gallery-strip img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); }

/* The brand story: the pink-to-burgundy band (white text 5.0:1 at its lightest), the picture left of the words from 960 px. */
.brand-story {
  padding: clamp(40px, 6vw, 90px) 0;
  background: linear-gradient(120deg, var(--sigma-primary), var(--sigma-burgundy));
  color: var(--sigma-white);
}
.brand-story-inner { display: grid; gap: var(--space-6); align-items: center; }
.brand-story-text { max-width: 760px; }
.brand-story:not(.has-picture) .brand-story-text { margin: 0 auto; text-align: center; }
@media (min-width: 960px) {
  .brand-story.has-picture .brand-story-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
}
.brand-story-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.brand-story .eyebrow,
.brand-story h2,
.brand-story p,
.brand-story .section-link { color: var(--sigma-white); }
.brand-story-text > p:not(.eyebrow) { font-size: 1.1rem; }
/* The blue focus ring would not show on pink. */
.brand-story :focus-visible { outline-color: var(--sigma-white); }

/* The newsletter band (decision 74): navy with the faint suitcase pattern in
   white, faint enough that white text keeps well above AA over it; an
   envelope in a yellow circle; the field and Subscribe joined in one
   rounded white group, whose yellow outline shows focus and a refused
   address on the navy. */
.newsletter { --watermark-colour: var(--sigma-white); --watermark-opacity: 0.05; }
.newsletter .container { max-width: 720px; text-align: center; }
.newsletter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--sigma-yellow);
  color: var(--sigma-navy);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--sigma-yellow) 18%, transparent);
}
.newsletter-icon .icon { width: 28px; height: 28px; }
.newsletter-form { margin-top: var(--space-5); text-align: left; }
.newsletter-field label {
  display: block;
  margin: 0 0 var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--sigma-white);
}
.newsletter-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px;
  background: var(--sigma-white);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
.newsletter-group input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 1rem;
  color: var(--sigma-text-dark);
}
.newsletter-group input:focus-visible { outline: none; }
.newsletter-group:has(input:focus-visible),
.newsletter-group:has(input[aria-invalid="true"]) { outline: 3px solid var(--sigma-yellow); outline-offset: 3px; }
.newsletter-group .btn { flex-shrink: 0; min-height: 48px; padding: 0 var(--space-5); border-radius: 999px; }
.form-status { min-height: 1.6em; margin: var(--space-3) 0 0; font-family: var(--font-ui); font-weight: 500; }
.newsletter .form-status[data-state="success"] { color: var(--sigma-yellow); }
.newsletter .form-status[data-state="error"] { color: var(--error-bg); }
.newsletter .newsletter-note { font-size: 0.85rem; margin: 0; }

.post-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.post-card h3 { font-size: 1.1rem; }
.post-date { margin: 0; font-size: 0.85rem; }

.b2b-strip .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.b2b-strip h2 { margin-bottom: var(--space-2); }
.b2b-strip p { margin: 0; }


/* =========================================================
   Home: features strip (verified features only, from the CMS;
   refinements spec §3; owner revision 2026-10-18): a pink band
   (--sigma-primary), the features in one row from 1024 px, 3 × 2
   from 600 px, 2 × 3 below; white line icons in white-outlined
   squares and white words (5.0:1 on the pink), white dividers in
   the one row
   ========================================================= */

.section.features-strip { padding: var(--space-6) 0; }
.section-pink { background: var(--sigma-primary); color: var(--sigma-white); }
/* The neutral bands home_band_plan() makes white are true white, so a run of
   neutral bands reads as white and grey (--sigma-bg-section) rather than
   the page's light grey beside a grey nearly like it (home redesign ruling
   21). Bands of another kind (the pink features strip among them) keep
   their own colour. */
#main > .section:not(.section-alt, .section-navy, .section-burgundy, .section-pink) { background: var(--sigma-white); }
.features-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
}
@media (min-width: 600px) {
  .features-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .features-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
  .feature + .feature { border-left: 1px solid color-mix(in srgb, var(--sigma-white) 35%, transparent); }
}
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2);
  text-align: center;
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--sigma-white);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--sigma-white) 14%, transparent);
  color: var(--sigma-white);
}
.feature-icon .icon { width: 28px; height: 28px; }
.feature-label {
  max-width: 16ch;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--sigma-white);
}

/* =========================================================
   Home: Shop by model (spec §2.8; larger cards since decision 74,
   2026-10-24): one card per model washed in its cover colour
   (--swatch on the card), the photo large on a stronger tint with
   a soft light behind it, stacked on phones and side by side from
   768 px; from 1100 px the photo stands left of the words inside
   each card.
   ========================================================= */

/* A panel with no photo shows the same light tint a photo panel shows (the
   shared .swatch-wash is the full-strength colour, for places with no photo
   at all), so a model or colour without a photo is not a solid block. */
.hero-slide--stage.swatch-wash,
.colour-stage-photo.swatch-wash,
.model-tile-media.swatch-wash {
  background-color: var(--sigma-bg-hero);
  background-color: color-mix(in srgb, var(--swatch, var(--sigma-bg-hero)) 22%, var(--sigma-white));
  background-image: none;
}
.model-cards { display: grid; gap: var(--space-5); }
.model-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--sigma-white);
  background: color-mix(in srgb, var(--swatch, var(--sigma-white)) 8%, var(--sigma-white));
  border: 1px solid var(--sigma-border);
  border-color: color-mix(in srgb, var(--swatch, var(--sigma-border)) 22%, var(--sigma-white));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.model-tile .model-tile-media.swatch-wash {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--swatch, var(--sigma-bg-hero)) 26%, var(--sigma-white));
  background-image: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--sigma-white) 72%, transparent), transparent 64%);
}
.model-tile-media img { width: auto; max-width: 92%; height: 272px; object-fit: contain; }
/* The luggage outline of a model with no photo yet, in its own colour; decorative. */
.model-tile-media .media-placeholder { width: 34%; height: 70%; color: var(--swatch, var(--sigma-text-light)); opacity: 0.55; }
.model-tile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-5);
  overflow-wrap: anywhere;
}
.model-tile-body > * { margin: 0; }
.model-tile h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); }
.model-tile-desc { font-size: 0.95rem; line-height: 1.5; }
.model-tile-range { font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.4; color: var(--sigma-text-medium); }
.model-tile-dots { display: flex; gap: 6px; }
.model-tile-dots .dot { width: 18px; height: 18px; box-shadow: 0 0 0 2px var(--sigma-white), 0 0 0 3px var(--sigma-border); }
.model-tile .price { font-size: 1.35rem; }
.model-tile-cta { gap: 2px; margin-top: var(--space-2); padding: 10px 18px 10px 22px; white-space: normal; }
.model-tile-cta .icon { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .model-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .model-tile { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: stretch; }
  .model-tile .model-tile-media.swatch-wash { height: auto; min-height: 340px; }
  .model-tile-media img { height: 300px; }
  .model-tile-body { justify-content: center; padding: var(--space-6) var(--space-5); }
}

/* =========================================================
   Home: find your size (spec §2.10; refinements spec §2; a soft
   blue band since decision 74, 2026-10-24). The sizes stand side
   by side on one floor line drawn across the row, each picture as
   tall as its inches say against the tallest (--size-h, from the
   server: 20 : 24 : 28). The row is a size container, so the
   stage height (--stage-h) follows the room each size has: the
   tallest picture (4:5) always fits whole. No height ruler: the
   photos' empty space above the handle kept marks off the
   suitcases' tops (owner review 2026-10-24). Under the
   floor a white card per size; its one link, "Shop <size>",
   covers the whole item (the shared .stretched-link), so the
   owner's lines are not read as part of the link's name.
   ========================================================= */

/* As specific as Home's true-white rule, so the band keeps its tint wherever the owner places it. */
#main > .section.sizes-band {
  background: var(--sigma-bg-light);
  background: color-mix(in srgb, var(--sigma-blue) 8%, var(--sigma-white));
}
.sizes-band { --watermark-colour: var(--sigma-blue); --watermark-opacity: 0.08; }
.size-scale {
  --size-gap: var(--space-3);
  /* One size's column, then the stage: a 4:5 picture of the tallest size fills the column's width, at most 19rem. */
  --size-col: calc((100cqi - 2 * var(--size-gap)) / 3);
  --stage-h: min(19rem, calc(var(--size-col) * 1.25));
  position: relative;
  container-type: inline-size;
}
.size-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--size-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The floor line across the row. */
.size-grid::before {
  content: "";
  position: absolute;
  top: calc(var(--stage-h) - 1px);
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sigma-blue) 45%, var(--sigma-white));
}
.size-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  border-radius: var(--radius-lg);
  color: var(--sigma-text-dark);
  text-align: center;
}
/* "Shop <size>" covers the item (the shared .stretched-link), so the item shows its focus ring, as the featured cards do. */
.size-card:focus-within { outline: 3px solid var(--sigma-navy); outline-offset: 4px; }
.size-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 12rem;
  height: var(--stage-h);
}
.size-stage > span { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: calc(var(--size-h, 1) * 100%); }
.size-stage img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  transition: transform var(--dur-base) var(--ease-out);
}
/* The product photo's white studio ground takes the band's tint; the owner's own size pictures are shown as they are. */
.size-photo img { mix-blend-mode: multiply; }
.size-stage > .size-visual { width: auto; max-width: 100%; aspect-ratio: 1 / 1; color: var(--sigma-blue); }
.size-visual .icon { width: 100%; height: 100%; }
.size-card:hover .size-stage img { transform: translateY(-4px); }

.size-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-2);
  background: var(--sigma-white);
  border: 1px solid color-mix(in srgb, var(--sigma-blue) 16%, var(--sigma-white));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.size-info > * { margin: 0; }
.size-card:hover .size-info { box-shadow: var(--shadow-md); }
.size-info .offer-price { justify-content: center; }
.size-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.size-cta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: auto;
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--sigma-primary-dark);
}
.size-cta .icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.size-card:hover .size-cta .icon { transform: translateX(3px); }
.size-guide { display: grid; gap: var(--space-1); font-size: 0.9rem; }
.size-guide div { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-2); }
.size-guide dt { font-family: var(--font-ui); font-weight: 500; color: var(--sigma-text-dark); }
.size-guide dd { margin: 0; color: var(--sigma-text-medium); }
@media (prefers-reduced-motion: reduce) {
  .size-card:hover .size-stage img,
  .size-card:hover .size-cta .icon { transform: none; }
}
/* On a phone each line explains itself: its term is still read aloud, but not shown. */
@media (max-width: 767px) {
  .size-guide dt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* Phones: the price, MRP and badge stack in the narrow cards. */
@media (max-width: 599px) {
  .size-info .offer-price { flex-direction: column; align-items: center; }
  .size-info .offer-mrp { justify-content: center; font-size: 0.8rem; }
  .size-info .price { font-size: 1rem; }
  .size-cta { font-size: 0.85rem; }
  .size-cta .icon { display: none; }
}
@media (min-width: 600px) {
  .size-scale { --size-gap: var(--space-5); }
  .size-info { padding: var(--space-5) var(--space-4); }
  .size-name { font-size: 1.2rem; }
}

/* =========================================================
   Home: shop by journey (spec §2.11). 4:5 cards, the title over
   a dark fade at the bottom, solid under the words (white on
   --scrim-dark reads 9.6:1 even over a white picture). Phones: a
   row that scrolls sideways inside the section (the page never
   does); 2 columns from 768 px, 3 from 1024 px. A neutral band:
   Home's true-white rule colours it white after Find your size.
   ========================================================= */

.journey-row {
  display: flex;
  gap: var(--space-4);
  /* Room for the focus ring inside the scrolling row; the container's own padding absorbs the 8 px either side. */
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-2) var(--space-2) var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.journey-row > li { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
.journey-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--sigma-bg-section);
  color: var(--sigma-white);
}
.journey-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.journey-title {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-8) var(--space-4) var(--space-4);
  background: linear-gradient(to top, var(--scrim-dark) calc(100% - var(--space-8)), transparent);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--sigma-white);
}
.journey-card:hover .journey-title,
.journey-card:focus-visible .journey-title { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
  .journey-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 1024px) {
  .journey-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   Home: how it works (decision 74, 2026-10-24): a warm yellow tint
   with the faint suitcase pattern in yellow; each step a coloured
   circle (its icon, its number in a yellow bubble) over a white
   card, joined to the next by a dotted travel path: down the
   circles on phones, across them from 768 px. The numbers and the
   path are decorative; the <ol> gives the order.
   ========================================================= */

/* As specific as Home's true-white rule, so the band keeps its tint wherever the owner places it. */
#main > .section.how-band {
  background: var(--sigma-bg-light);
  background: color-mix(in srgb, var(--sigma-yellow) 11%, var(--sigma-white));
}
.how-band { --watermark-colour: var(--sigma-yellow); --watermark-opacity: 0.3; }
.how-head { justify-content: center; text-align: center; }
.how-head .section-sub { margin-inline: auto; }
.steps {
  --marker: 72px;
  --step-gap: var(--space-6);
  display: grid;
  gap: var(--step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--marker) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.step-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--marker);
  height: var(--marker);
  border-radius: 50%;
  background: var(--sigma-primary);
  color: var(--sigma-white);
  box-shadow: 0 0 0 6px var(--sigma-white), var(--shadow-md);
}
.step-marker .icon { width: 30px; height: 30px; }
.step:nth-child(2) .step-marker { background: var(--sigma-blue); }
.step:nth-child(3) .step-marker { background: var(--sigma-navy); }
.step-number {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sigma-yellow);
  box-shadow: 0 0 0 3px var(--sigma-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--sigma-black);
}
/* The travel path to the next step: round dots in the primary pink. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--marker) + 12px);
  bottom: calc(12px - var(--step-gap));
  left: calc(var(--marker) / 2 - 3px);
  width: 6px;
  background-image: radial-gradient(circle, var(--sigma-primary) 2.5px, transparent 3px);
  background-size: 6px 14px;
  background-repeat: repeat-y;
  background-position: center top;
}
.step-card {
  padding: var(--space-4) var(--space-5);
  background: var(--sigma-white);
  border: 1px solid color-mix(in srgb, var(--sigma-yellow) 35%, var(--sigma-white));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.step-card h3 { margin: 0 0 var(--space-1); font-size: 1.15rem; }
.step-card p { margin: 0; }
@media (min-width: 768px) {
  .steps { --step-gap: var(--space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; justify-items: center; gap: var(--space-5); text-align: center; }
  .step-card { width: 100%; padding: var(--space-5); }
  .step:not(:last-child)::after {
    top: calc(var(--marker) / 2 - 3px);
    bottom: auto;
    left: calc(50% + var(--marker) / 2 + 14px);
    width: calc(100% + var(--step-gap) - var(--marker) - 28px);
    height: 6px;
    background-size: 14px 6px;
    background-repeat: repeat-x;
    background-position: left center;
  }
}

/* =========================================================
   Home: Shop with confidence (decision 71; it was the trust & service
   strip): the brand's soft pink tint with a faint pattern of suitcases
   and wheels, the heading, one white card per true service point (each
   only while it is true). Phones: two cards to a row, a card left alone
   in its row and Talk to us across the row; the picture on top, cropped
   shorter. From 600 px the cards sit in one centred row that wraps (each
   at most 270 px). With a picture from 960 px: the picture left (4:5, at
   most 440 px) and the heading and cards, two to a row, on the right
   ========================================================= */

/* As specific as Home's true-white rule above and later, so it wins over that and the band plan's .section-alt: the band keeps its own
   tint wherever the owner places it. */
#main > .section.trust-strip {
  background: var(--sigma-bg-light);
  background: color-mix(in srgb, var(--sigma-primary) 6%, var(--sigma-white));
}
/* The faint suitcase pattern: the shared .has-watermark (style.css) in the primary pink. */
.trust-strip { --watermark-colour: var(--sigma-primary); --watermark-opacity: 0.07; }
.trust-inner { display: grid; gap: var(--space-6); }
.trust-heading { margin: 0 0 var(--space-6); text-align: center; }

/* A definite width, so the height cap crops the picture instead of narrowing it (aspect-ratio would carry the cap over to an auto width). */
.trust-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 320px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.trust-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* A flex row: a card alone in its row grows across it, so an odd count never leaves a hole. */
.trust-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-card {
  display: flex;
  flex: 1 1 calc(50% - var(--space-4) / 2);
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  overflow-wrap: anywhere;
  background: var(--sigma-white);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.trust-card-support { flex-basis: 100%; }
.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--sigma-bg-section);
  background: color-mix(in srgb, var(--sigma-primary) 12%, var(--sigma-white));
  color: var(--sigma-primary);
}
/* Each point its own accent from the locked colours; yellow takes the dark gold text token, as yellow on its wash would not read. */
.trust-card-cod .trust-icon { background: var(--sigma-bg-section); background: color-mix(in srgb, var(--sigma-yellow) 24%, var(--sigma-white)); color: var(--success-text); }
.trust-card-upi .trust-icon { background: var(--sigma-bg-section); background: color-mix(in srgb, var(--sigma-blue) 14%, var(--sigma-white)); color: var(--sigma-blue); }
.trust-card-payments .trust-icon { background: var(--sigma-bg-section); background: color-mix(in srgb, var(--sigma-navy) 10%, var(--sigma-white)); color: var(--sigma-navy); }
.trust-card-delivery .trust-icon { background: var(--sigma-bg-section); background: color-mix(in srgb, var(--sigma-taupe) 14%, var(--sigma-white)); color: var(--sigma-taupe); }
.trust-card-support .trust-icon { background: var(--sigma-bg-section); background: color-mix(in srgb, var(--sigma-burgundy) 12%, var(--sigma-white)); color: var(--sigma-burgundy); }
.trust-title { margin: 0 0 var(--space-1); font-size: 1.05rem; color: var(--sigma-text-dark); }
.trust-line { margin: 0; font-size: 0.92rem; color: var(--sigma-text-medium); }
a.trust-line {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--sigma-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.trust-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0; }
.trust-actions .btn { min-height: var(--touch); padding: 8px 14px; }
.trust-actions .icon { width: 18px; height: 18px; }
@media (min-width: 600px) {
  .trust-card,
  .trust-card-support { flex: 1 1 160px; max-width: 270px; }
}
@media (min-width: 960px) {
  .trust-strip.has-picture .trust-inner {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: center;
  }
  .trust-strip.has-picture .trust-media { aspect-ratio: 4 / 5; max-height: none; }
  .trust-strip.has-picture .trust-heading { text-align: left; }
  .trust-strip.has-picture .trust-card,
  .trust-strip.has-picture .trust-card-support { flex: 1 1 calc(50% - var(--space-4) / 2); max-width: none; }
}

/* =========================================================
   Home: help band (call / WhatsApp): the rhythm's yellow band,
   with black text (10.7:1) and the faint suitcase pattern in
   black (decision 74). Each button a pill with its icon in a
   white circle: WhatsApp pink, each phone navy (white text 5.0:1
   and 14.6:1). Words left and buttons right from 960 px; with
   the owner's square picture, the picture left of both from
   768 px and above them on phones (cropped shorter).
   ========================================================= */

.help-band {
  --watermark-colour: var(--sigma-black);
  --watermark-opacity: 0.06;
  padding: clamp(40px, 6vw, 72px) 0;
  background: var(--sigma-yellow);
  color: var(--sigma-black);
}
.help-band-inner { display: grid; gap: var(--space-5); align-items: center; }
.help-band h2 { color: var(--sigma-black); margin-bottom: var(--space-2); }
.help-band p { color: var(--sigma-black); margin: 0; font-size: 1.05rem; }
/* The blue focus ring would read 2.7:1 on yellow. */
.help-band :focus-visible { outline-color: var(--sigma-black); }
/* A definite width, so the height cap crops the picture instead of narrowing it. */
.help-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 280px;
  overflow: hidden;
  border: 6px solid var(--sigma-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.help-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.help-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.help-btn {
  display: inline-flex;
  flex: 1 1 220px;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 6px 22px 6px 6px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--sigma-white);
  text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.help-btn:hover { box-shadow: var(--shadow-md); }
.help-btn-whatsapp { background: var(--sigma-primary); }
.help-btn-whatsapp:hover { background: var(--sigma-primary-dark); }
.help-btn-call { background: var(--sigma-navy); }
.help-btn-call:hover { background: var(--sigma-black); }
.help-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sigma-white);
}
.help-btn-whatsapp .help-btn-icon { color: var(--sigma-primary); }
.help-btn-call .help-btn-icon { color: var(--sigma-navy); }
.help-btn-icon .icon { width: 22px; height: 22px; }
.help-btn-text { display: flex; flex-direction: column; }
.help-btn-label { font-weight: 500; font-size: 0.78rem; color: var(--on-navy-muted); }
@media (min-width: 768px) {
  .help-band.has-picture .help-band-inner {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-areas: "media body" "media actions";
    align-content: center;
    gap: var(--space-4) var(--space-7);
  }
  .help-band.has-picture .help-media { grid-area: media; aspect-ratio: 1 / 1; max-height: none; align-self: center; }
  .help-band.has-picture .help-body { grid-area: body; align-self: end; }
  .help-band.has-picture .help-actions { grid-area: actions; align-self: start; }
  .help-band.has-picture .help-btn { flex: 0 1 auto; }
}
@media (min-width: 960px) {
  .help-band:not(.has-picture) .help-band-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); }
  .help-band:not(.has-picture) .help-actions { justify-content: flex-end; max-width: 720px; }
  .help-band:not(.has-picture) .help-btn { flex: 0 1 auto; }
}

/* =========================================================
   Home: Travel with Sigma (hand-picked posts + follow links; no
   embeds), just above the footer: the posts run edge to edge
   ========================================================= */

.social-band:has(> .social-strip) { padding-bottom: 0; }
.social-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}
/* From 768 px the posts sit in one row of sixths: six fill it edge to edge, fewer stay square and centred. */
@media (min-width: 768px) {
  .social-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% / 6); justify-content: center; }
}
.social-post {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--sigma-bg-section);
}
.social-post:focus-visible { outline-offset: -4px; }
.social-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.social-post:hover img { transform: scale(1.05); }
.social-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sigma-white);
  color: var(--sigma-navy);
  box-shadow: var(--shadow-sm);
}
.social-badge .icon { width: 18px; height: 18px; }
.social-follow { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.social-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--sigma-white);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.social-follow-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.social-follow-btn .icon { width: 20px; height: 20px; }
/* Brand-token colours, not platform colours; white text passes AA on both. */
.social-instagram { background: linear-gradient(45deg, var(--sigma-primary), var(--sigma-burgundy)); }
.social-facebook { background: var(--sigma-blue); }

/* =========================================================
   Home: bulk & corporate orders band (dark, like the newsletter; it
   takes no neutral band). Positioned to paint above its blobs.
   ========================================================= */

.bulk-band-inner { position: relative; display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 960px) {
  .bulk-band-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); }
}
.bulk-band .eyebrow { margin-bottom: var(--space-2); color: var(--sigma-yellow); }
.bulk-band h2 { margin-bottom: var(--space-3); }
.bulk-band p { max-width: 62ch; }
.bulk-band .bulk-band-lead { font-size: 1.05rem; color: var(--sigma-white); }
.bulk-band .bulk-dots { margin-top: var(--space-1); }
/* With the corporate picture (Homepage → Banners; spec §2.13): from 960 px the words and buttons on the left, the picture (4:3) on the right. */
.bulk-band-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
@media (min-width: 960px) {
  .bulk-band.has-picture .bulk-band-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "text media" "actions media" "teaser teaser";
    align-items: start;
  }
  .bulk-band.has-picture .bulk-band-text { grid-area: text; }
  .bulk-band.has-picture .bulk-actions { grid-area: actions; }
  .bulk-band.has-picture .bulk-band-media { grid-area: media; align-self: center; }
  .bulk-band.has-picture .industry-teaser { grid-area: teaser; }
}
/* "For the luggage industry" (spec §2.13): the teaser spans the band under its words (and its picture); its cards stack on phones. */
.industry-teaser { grid-column: 1 / -1; margin-top: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--sigma-graphite); }
.industry-teaser h3 { margin: 0 0 var(--space-2); font-size: 1.35rem; }
.industry-teaser .industry-intro { margin: 0; }
.industry-cards { display: grid; gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .industry-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.industry-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-5); border: 1px solid var(--sigma-graphite); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.industry-card h4 { margin: 0; font-size: 1.1rem; color: var(--sigma-white); }
.industry-card p { margin: 0; }
.industry-card .btn { margin-top: auto; align-self: flex-start; white-space: normal; }

/* =========================================================
   Home: campaign banners 1 and 2 (spec §2.7; rulings 40, 44).
   Phones: the photo first (4:5), the words below on a solid band
   of the place's tone. From 768 px the photo fills the band at
   the hero's height and the words sit on the solid half of a
   fade from the tone, on the chosen side. No "section" class:
   Home's true-white rule must not reach it (ruling 31).
   ========================================================= */

.campaign-banner { position: relative; overflow: hidden; background: var(--banner-tone); color: var(--sigma-white); }
.campaign-banner--black { --banner-tone: var(--sigma-black); }
.campaign-banner--burgundy { --banner-tone: var(--sigma-burgundy); }
.campaign-banner-media { display: block; }
.campaign-banner-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.campaign-banner-body { padding: var(--space-6) 0 var(--space-7); background: var(--banner-tone); }
.campaign-banner h2 { margin: 0 0 var(--space-3); color: var(--sigma-white); }
/* Pink reads 4.2:1 on black and 2.5:1 on burgundy; yellow passes on both (10.8:1, 7.2:1). */
.campaign-banner .eyebrow { margin: 0 0 var(--space-2); color: var(--sigma-yellow); }
.campaign-banner-line { margin: 0 0 var(--space-5); max-width: 46ch; font-size: 1.1rem; color: var(--on-navy-muted); }
.campaign-banner .btn { white-space: normal; }
/* The blue focus ring would read 2.7:1 on burgundy. */
.campaign-banner :focus-visible { outline-color: var(--sigma-white); }
@media (min-width: 768px) {
  /* The hero's height is the least: the body grows with long words (headline 120, line 200 characters), so the button is never clipped. */
  .campaign-banner { display: flex; min-height: clamp(420px, 60vh, 640px); }
  .campaign-banner-media { position: absolute; inset: 0; }
  .campaign-banner-media img { height: 100%; aspect-ratio: auto; }
  .campaign-banner-body {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    padding: var(--space-6) 0;
    background: linear-gradient(to right, var(--banner-tone) 0%, var(--banner-tone) 50%, transparent 85%);
  }
  .campaign-banner--right .campaign-banner-body { background: linear-gradient(to left, var(--banner-tone) 0%, var(--banner-tone) 50%, transparent 85%); }
  .campaign-banner-inner { display: flex; width: 100%; }
  .campaign-banner--right .campaign-banner-inner { justify-content: flex-end; }
  /* At most 44% of the container: with the container's own offset the words end before the fade starts (50% of the band). */
  .campaign-banner-text { max-width: 44%; }
}

/* =========================================================
   Home: the feature story (spec §2.9; rulings 85–87). A navy
   band: the words, one model's photo with a numbered dot on each
   real part (a 44 px target around a 26 px pink mark with a
   white ring: the white number on pink reads 5.0:1, the ring
   15:1 on navy), and a card per feature. Phones and tablets: the
   cards are a row that scrolls sideways inside the section (the
   page never does). From 960 px without JavaScript: the words
   beside the photo, every card in a grid under them; with it
   (home/showcase.js) the feature list, the photo and the detail
   panel take three columns. The cards and the panel sit on a
   faint white wash; where color-mix() is unsupported they show
   the band's navy.
   ========================================================= */

.showcase { scroll-margin-top: var(--header-height); }
.showcase .eyebrow { margin-bottom: var(--space-2); color: var(--sigma-yellow); }
.showcase-inner { display: grid; gap: var(--space-5); }
.showcase-head h2 { margin-bottom: 0; }
/* The photo fills the figure's width and the figure takes the photo's height, so the dots' percentages are the photo's. */
.showcase-figure { position: relative; width: min(100%, 360px); margin: 0 auto; }
.showcase-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.showcase-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  text-decoration: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.showcase-dot-number,
.showcase-number {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sigma-primary);
  color: var(--sigma-white);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
}
.showcase-dot-number { border: 3px solid var(--sigma-white); }
/* A yellow ring with a black one outside it: visible on the navy band and on any photo. */
.showcase-dot:focus-visible { outline: 3px solid var(--sigma-yellow); outline-offset: 0; box-shadow: 0 0 0 6px var(--sigma-black); }
.showcase-cards {
  display: flex;
  gap: var(--space-4);
  /* Room for a focus ring inside the scrolling row; the container's own padding absorbs the 8 px either side. */
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-2) var(--space-2) var(--space-3);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.showcase-card,
.showcase-panel {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--sigma-white) 18%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sigma-white) 6%, transparent);
}
.showcase-card { flex: 0 0 min(78%, 280px); scroll-snap-align: start; scroll-margin-top: var(--header-height); }
.showcase-closeup img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: var(--space-3); border-radius: var(--radius-md); }
.showcase-label { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: 1.1rem; }
.showcase-label a { display: inline-flex; align-items: center; min-height: var(--touch); color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.showcase-label a:focus-visible { outline: 3px solid var(--sigma-white); outline-offset: 2px; }
.showcase-line { margin: 0; }
/* The list and the panel show only with the script (home/showcase.js marks the section .is-interactive), from 960 px. */
.showcase-list,
.showcase-panel { display: none; }
.showcase-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--sigma-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.showcase-item:hover { background: color-mix(in srgb, var(--sigma-white) 10%, transparent); }
/* White on this pink wash over navy reads about 11.7:1. */
.showcase-item[aria-pressed="true"] { background: color-mix(in srgb, var(--sigma-primary) 35%, transparent); }
.showcase-item:focus-visible { outline: 3px solid var(--sigma-white); outline-offset: 2px; }
/* The pressed dot: yellow with a black ring and number (yellow alone reads 1.8:1 on a white photo; the black ring 18.9:1). */
.showcase-dot[aria-pressed="true"] .showcase-dot-number { border-color: var(--sigma-black); background: var(--sigma-yellow); color: var(--sigma-black); }
@keyframes showcase-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sigma-primary) 70%, transparent); }
  70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--sigma-primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sigma-primary) 0%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .showcase-dot:not([aria-pressed="true"]) .showcase-dot-number { animation: showcase-pulse 2s infinite; }
}
@media (min-width: 960px) {
  .showcase-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--space-6); }
  .showcase-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; overflow: visible; }
  .showcase.is-interactive .showcase-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); }
  .showcase.is-interactive .showcase-cards { display: none; }
  .showcase.is-interactive .showcase-list { display: grid; gap: var(--space-1); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
  .showcase.is-interactive .showcase-panel { display: block; }
}

/* =========================================================
   Home: the second photo on hover (owner decision 2026-10-16;
   rulings 103–105): Featured luggage's cards, Shop by model's
   cards and the colour stage's photo. home/hover-photo.js builds
   the colour's second product photo in the photo's box on the
   first hover and marks the box ready once it is decoded. It lies
   over the first photo in the same box under the same size rules
   (absolutely placed: nothing shifts) and crossfades with it while
   the card (the stage: its photo) is hovered, only where the
   pointer can hover; at once under reduced motion (style.css cuts
   every transition); hidden from screen readers.
   ========================================================= */

[data-hover-photo] { position: relative; }
.hover-photo {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.featured-card-media > img,
.model-tile-media > img { transition: opacity var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  [data-hover-card]:hover .is-hover-ready > .hover-photo,
  .is-hover-ready[data-hover-card]:hover > .hover-photo { opacity: 1; }
  [data-hover-card]:hover .is-hover-ready > img:not(.hover-photo),
  .is-hover-ready[data-hover-card]:hover > img:not(.hover-photo) { opacity: 0; }
}