/* =========================================================
   IndoSultan — Internal page styles (loaded after styles.css)
   ========================================================= */

/* ------- Breadcrumb ------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 40px;
  margin-bottom: 48px;
}
.breadcrumb a { color: var(--ink-soft); transition: color .2s ease; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .here { color: var(--ink); }

/* ------- Page hero ------- */
.page-hero { padding-bottom: 24px; }
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}
.page-hero-grid:has(.page-hero-text:only-child) { grid-template-columns: 1fr; }
.page-hero-text { max-width: 40ch; }
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.page-eyebrow .rule { width: 36px; height: 1px; background: var(--gold); }
.page-title {
  font-size: clamp(38px, 5vw, 70px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
  padding-bottom: 0.12em;
}
.page-intro {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
}
.page-hero-media {
  height: 440px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.page-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}
.page-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15,15,18,0.35) 100%);
}

/* ------- Generic prose / two-col ------- */
.prose-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.prose-2 p, .prose p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 22px;
}
.prose .lead, .prose-2 .lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.prose .lead .it, .prose-2 .lead .it {
  font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); letter-spacing: -0.015em;
}

/* ------- Value / pillar grid ------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.pillar {
  background: var(--cream);
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}
.pillar .k {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 600; font-size: 23px;
  letter-spacing: -0.02em; color: var(--ink);
  line-height: 1.1;
}
.pillar p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin-top: auto; }

/* ------- Timeline ------- */
.timeline { border-top: 1px solid var(--rule-strong); }
.timeline-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.timeline-row .year {
  font-family: var(--font-display);
  font-weight: 600; font-size: 30px;
  letter-spacing: -0.02em; color: var(--gold);
}
.timeline-row h3 {
  font-family: var(--font-display);
  font-weight: 600; font-size: 22px;
  letter-spacing: -0.018em; color: var(--ink);
  margin-bottom: 8px;
}
.timeline-row p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }

/* ================= PRODUCT PAGE ================= */

/* at-a-glance bar */
.glance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.glance .cell {
  padding: 32px 28px;
  border-right: 1px solid var(--rule);
}
.glance .cell:last-child { border-right: none; }
.glance .k {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 12px;
}
.glance .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; letter-spacing: -0.018em; color: var(--ink); line-height: 1.2;
}
.glance .v .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); }

/* grades / spec table */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table caption {
  text-align: left;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: 18px;
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.spec-table thead th {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-strong);
}
.spec-table tbody th {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
}
.spec-table td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.spec-table tbody tr:hover { background: var(--cream-2); }

/* applications chips */
.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.app {
  background: var(--cream);
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.app .n {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--gold);
}
.app h4 {
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  letter-spacing: -0.015em; color: var(--ink);
}
.app p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

/* packaging — typographic format cards */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.pack {
  background: var(--cream);
  padding: 30px 26px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 160px;
}
.pack .idx {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; color: var(--gold);
}
.pack .label {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  letter-spacing: -0.018em; color: var(--ink); margin-top: auto;
}
.pack .sub { font-size: 14px; color: var(--ink-soft); }

/* product gallery — real product shots */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.gallery .shot {
  margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.gallery .shot img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 4px; background: #fff;
  border: 1px solid var(--rule);
}
.gallery figcaption { display: flex; flex-direction: column; gap: 3px; }
.gallery .code {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; color: var(--ink);
}
.gallery .meta {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}

/* other products strip */
.other-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.op-card {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background .2s ease, transform .2s ease;
  min-height: 180px;
}
.op-card:hover { background: var(--cream-2); transform: translateY(-3px); }
.op-card .n { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: var(--gold); }
.op-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin-top: auto; }
.op-card .go { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); display: inline-flex; gap: 8px; }
.op-card:hover .go { color: var(--gold); }

/* ================= CONTACT ================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.enquiry { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: 15px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 14px 16px;
  transition: border-color .2s ease;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.enquiry .submit {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  background: var(--ink); color: var(--cream);
  border-radius: 999px; font-size: 14px; letter-spacing: 0.01em;
  transition: background .2s ease, transform .2s ease;
}
.enquiry .submit:hover { background: var(--gold); transform: translateY(-1px); }
.contact-side { display: flex; flex-direction: column; gap: 36px; }
.contact-block h4 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 14px;
}
.contact-block .big {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  letter-spacing: -0.015em; color: var(--ink); line-height: 1.45;
}
.contact-block .big a { color: var(--ink); }
.contact-block .big a:hover { color: var(--gold); }
.contact-block .big .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); }
.map-embed {
  height: 280px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--rule); position: relative; background: var(--cream-2);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(1.05); }

/* ================= NEWS ================= */
.news-feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: stretch;
  margin-bottom: 24px;
}
.news-feature .media {
  border-radius: 4px; overflow: hidden; position: relative; min-height: 420px;
  background: var(--cream-2);
}
.news-feature .media img { width: 100%; height: 100%; object-fit: cover; }
.news-feature .body { display: flex; flex-direction: column; justify-content: center; }
.news-feature .meta {
  display: flex; gap: 14px; font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 20px;
}
.news-feature .meta .cat { color: var(--crimson); }
.news-feature h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.025em;
  color: var(--ink); margin-bottom: 22px;
}
.news-feature h2 .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); }
.news-feature p { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 50ch; margin-bottom: 28px; }

.news-list { border-top: 1px solid var(--rule-strong); }
.news-item {
  display: grid;
  grid-template-columns: 120px 120px 1fr 160px;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  transition: background .25s ease;
}
.news-item:hover { background: var(--cream-2); }
.news-item .thumb {
  width: 100px; height: 70px; border-radius: 3px; overflow: hidden; background: var(--cream-3);
}
.news-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-item .date { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.news-item h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.018em; color: var(--ink); line-height: 1.2; }
.news-item .cat { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); }
.news-item .go { justify-self: end; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); display: inline-flex; gap: 10px; align-items: center; }
.news-item:hover .go { color: var(--gold); }
.news-item .go .line { width: 28px; height: 1px; background: currentColor; }

/* ================= CAREER ================= */
.job-list { border-top: 1px solid var(--rule-strong); }
.job {
  display: grid;
  grid-template-columns: 1fr 200px 180px 60px;
  gap: 32px;
  padding: 34px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  transition: background .25s ease;
}
.job:hover { background: var(--cream-2); }
.job h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; color: var(--ink); }
.job .m { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); text-transform: uppercase; }
.job .arrow { justify-self: end; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule-strong); display: grid; place-items: center; transition: background .2s ease, color .2s ease, border-color .2s; }
.job:hover .arrow { background: var(--gold); color: var(--cream); border-color: var(--gold); }
.perks {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.perk { background: var(--cream); padding: 34px 28px; display: flex; flex-direction: column; gap: 12px; min-height: 170px; }
.perk .k { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.perk h4 { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); }
.perk p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-top: auto; }

/* ------- Responsive ------- */
@media (max-width: 1100px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero-media { height: 300px; }
  .prose-2 { grid-template-columns: 1fr; gap: 32px; }
  .pillars, .app-grid, .perks { grid-template-columns: 1fr 1fr; }
  .glance { grid-template-columns: 1fr 1fr; }
  .glance .cell:nth-child(2) { border-right: none; }
  .pack-grid, .other-products, .gallery { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .news-feature { grid-template-columns: 1fr; }
  .news-feature .media { min-height: 280px; }
  .news-item { grid-template-columns: 100px 1fr; }
  .news-item .date, .news-item .go { display: none; }
  .timeline-row { grid-template-columns: 80px 1fr; gap: 24px; }
  .job { grid-template-columns: 1fr 60px; }
  .job .m { display: none; }
}


/* =========================================================
   IndoSultan — Added templates: products index, brand page,
   long-form article, order-sample (loaded after the above)
   ========================================================= */

/* ----- Products index: line cards ----- */
.lines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.line-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  background: var(--cream);
  transition: transform .25s ease, box-shadow .25s ease;
}
.line-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(15,15,18,.28); }
.line-card .media { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--cream-2); }
.line-card .media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); }
.line-card .body { padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.line-card .n { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--gold); }
.line-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.02em; color: var(--ink); }
.line-card h3 .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); }
.line-card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.line-card .go { margin-top: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; gap: 12px; align-items: center; }
.line-card:hover .go { color: var(--gold); }
.line-card .go .line { width: 28px; height: 1px; background: currentColor; }

/* ----- Brand grid (products index) ----- */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.brand-card { background: var(--cream); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; min-height: 180px; transition: background .2s ease; }
.brand-card:hover { background: var(--cream-2); }
.brand-card .swatches { display: flex; gap: 6px; }
.brand-card .swatches i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.brand-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -.018em; color: var(--ink); }
.brand-card .type { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.brand-card .go { margin-top: auto; font-family: var(--font-sans); font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); }
.brand-card:hover .go { color: var(--gold); }

/* ----- Brand page: colour variants ----- */
.variants { display: flex; flex-wrap: wrap; gap: 30px; }
.variant { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.variant .dot { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 8px 18px -8px rgba(0,0,0,.35); }
.variant .vlabel { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

/* ----- Long-form article ----- */
.article-hero { max-width: 820px; }
.article-byline { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 20px; }
.article-byline .cat { color: var(--crimson); }
.article-figure { border-radius: 4px; overflow: hidden; aspect-ratio: 21/9; background: var(--cream-2); margin-bottom: 56px; }
.article-figure img { width: 100%; height: 100%; object-fit: cover; }
.article { max-width: 720px; margin: 0 auto; }
.article .lede { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 25px); line-height: 1.45; letter-spacing: -.015em; color: var(--ink); margin-bottom: 36px; }
.article .lede .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); }
.article p { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin-bottom: 24px; }
.article h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; color: var(--ink); margin: 48px 0 18px; }
.article h2 .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); }
.article ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 12px; }
.article li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.article li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.article .pull { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; color: var(--gold); border-left: 2px solid var(--gold); padding-left: 28px; margin: 40px 0; }

/* ----- Order-sample: steps ----- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 24px; }
.step { background: var(--cream); padding: 34px 28px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; }
.step .num { font-family: var(--font-serif); font-style: italic; font-size: 42px; color: var(--gold); line-height: 1; }
.step h4 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.015em; color: var(--ink); }
.step p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin-top: auto; }

@media (max-width: 1100px) {
  .brand-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .article-figure { aspect-ratio: 16/9; }
}


/* ----- Product-on-white imagery (hero + cards) ----- */
.page-hero-media.contain { background: var(--cream-2); }
.page-hero-media.contain img { object-fit: contain; padding: 32px; filter: none; }
.page-hero-media.contain::after { display: none; }
.line-card .media.contain { background: var(--cream-2); }
.line-card .media.contain img { object-fit: contain; padding: 22px; filter: none; }


/* ----- Soap Bars hub: brand range by category ----- */
.cat-block { margin-bottom: 56px; }
.cat-block:last-child { margin-bottom: 0; }
.cat-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.cat-head h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; color: var(--ink); }
.cat-head h3 .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); letter-spacing: -.015em; }
.cat-head .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.soap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.soap-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--cream); transition: transform .25s ease, box-shadow .25s ease; }
.soap-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -26px rgba(15,15,18,.30); }
.soap-card .pic { aspect-ratio: 1/1; background: var(--cream-2); display: grid; place-items: center; padding: 24px; overflow: hidden; }
.soap-card .pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.soap-card:hover .pic img { transform: scale(1.05); }
.soap-card .cap { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 7px; }
.soap-card .cap h4 { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.015em; color: var(--ink); }
.soap-card .cap .m { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.soap-card .cap .go { margin-top: 2px; font-family: var(--font-sans); font-size: 12px; letter-spacing: .03em; color: var(--ink-soft); }
.soap-card:hover .cap .go { color: var(--gold); }
@media (max-width: 1100px) { .soap-grid { grid-template-columns: 1fr 1fr; } }


/* =========================================================
   FIX: product cut-outs have white backgrounds — present them
   on clean white tiles so the background disappears (no more
   "white box on beige"). multiply blends any edge/halo away.
   ========================================================= */

/* Hero product panel (soap + product-webp brand heroes) */
.page-hero-media.contain { background: #ffffff; }
.page-hero-media.contain img { padding: 30px; mix-blend-mode: multiply; }

/* Soap Bars brand cards: clean white product cards */
.soap-card { background: #ffffff; box-shadow: 0 1px 2px rgba(15,15,18,.05); }
.soap-card .pic { background: #ffffff; aspect-ratio: 4 / 3; padding: 18px; }
.soap-card .pic img { mix-blend-mode: multiply; }
.soap-card .cap { background: #ffffff; border-top: 1px solid var(--rule); }

/* Products-index cards if any use contained product cut-outs */
.line-card .media.contain { background: #ffffff; }
.line-card .media.contain img { mix-blend-mode: multiply; }


/* Full-composition hero (e.g. mixed brand range): show entire image, never crop sides */
.page-hero-media.show-all { background: #e9e7e1; }
.page-hero-media.show-all img { object-fit: contain; mix-blend-mode: normal; }
.page-hero-media.show-all::after { display: none; }

/* =========================================================
   Phone breakpoint — internal pages (≤720px)
   ========================================================= */
.glance .cell, .field-row > * { min-width: 0; }

@media (max-width: 720px) {
  .page-hero-media { height: 240px; }
  .glance { grid-template-columns: 1fr 1fr; }
  .glance .v { font-size: 18px; }
  .pillars, .app-grid, .perks, .pack-grid, .other-products { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .brand-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .contact-grid { gap: 40px; }
  .spec-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .news-item { grid-template-columns: 64px 1fr; gap: 14px; }
  .timeline-row { grid-template-columns: 52px 1fr; gap: 16px; }
  .job { grid-template-columns: 1fr 36px; }
  .article p { font-size: 16px; }
}

@media (max-width: 430px) {
  .soap-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
}

/* ----- Sustainability: dark commitments band ----- */
.section.commit { background: var(--forest); position: relative; overflow: hidden; }
.section.commit .header h2 { color: var(--cream); }
.section.commit .header h2 .it { color: var(--gold-bright); }
.section.commit .section-marker .lbl { color: rgba(245,235,210,0.6); }
.section.commit .section-marker .rule { background: var(--gold-bright); }
.commit-pillars .pillar { background: rgba(255,255,255,0.04); border-color: rgba(245,235,210,0.14); }
.commit-pillars .pillar h3 { color: var(--cream); }
.commit-pillars .pillar p { color: rgba(245,235,210,0.72); }
.commit-pillars .pillar .k { color: var(--gold-bright); }
.section.commit .lead { color: rgba(245,235,210,0.88); }
.section.commit .prose p { color: rgba(245,235,210,0.72); }

/* News feature: image and headline are clickable */
.news-feature .media { display: block; }
.news-feature h2 a { transition: color .25s ease; }
.news-feature h2 a:hover .it { color: var(--gold-bright); }

/* Inner-page hero titles: italic accent words carry the gold,
   matching the homepage hero treatment */
.page-title .it { color: var(--gold); }

}

/* =========================================================
   Gold flow lines — faint engraved waves in the hero canvas,
   anchored behind the photo (no offset box; photo animates
   over a stable backdrop)
   ========================================================= */
.page-hero { position: relative; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 42%);
          mask-image: linear-gradient(90deg, transparent 8%, #000 42%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='560' viewBox='0 0 960 560'%3E%3Cpath d='M-20,70 C160,54 320,86 480,60 S800,86 980,64' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3Cpath d='M-20,112 C160,91 320,133 480,100 S800,133 980,104' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3Cpath d='M-20,154 C160,132 320,176 480,141 S800,176 980,145' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3Cpath d='M-20,196 C160,177 320,215 480,185 S800,215 980,189' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3Cpath d='M-20,238 C160,225 320,251 480,230 S800,251 980,233' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3Cpath d='M-20,280 C160,270 320,290 480,274 S800,290 980,276' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3Cpath d='M-20,322 C160,311 320,333 480,315 S800,333 980,317' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3Cpath d='M-20,364 C160,348 320,380 480,354 S800,380 980,358' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3Cpath d='M-20,406 C160,385 320,427 480,394 S800,427 980,398' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3Cpath d='M-20,448 C160,426 320,470 480,435 S800,470 980,439' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3Cpath d='M-20,490 C160,472 320,508 480,479 S800,508 980,483' fill='none' stroke='%23c99a45' stroke-opacity='0.16'/%3E%3C/svg%3E") no-repeat right -140px top 30px / 960px auto;
}
.page-hero .container { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .page-hero::before { background-size: 720px auto; background-position: right -200px top 10px; }
}

/* ----- Brand variants: real product photography (replaces colour dots) ----- */
.variant-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.vshot { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vshot .pic { background: #fff; border: 1px solid var(--rule); border-radius: 6px; aspect-ratio: 4/3; display: grid; place-items: center; padding: 18px; overflow: hidden; }
.vshot .pic img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.vshot:hover .pic img { transform: scale(1.06); }
.vshot figcaption { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
@media (max-width: 720px) { .variant-shots { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* =========================================================
   Warm product tiles — the client's renders are transparent,
   so they ride on warm paper with a soft contact shadow
   instead of clinical white (multiply was for the old
   white-background cutouts; it would tint pack whites now)
   ========================================================= */
.page-hero-media.contain,
.soap-card .pic,
.vshot .pic,
.line-card .media.contain {
  background: radial-gradient(120% 95% at 50% 18%, #fbf9f4 0%, #f1ebe0 62%, #e9e1d2 100%);
}
.page-hero-media.contain img,
.soap-card .pic img,
.vshot .pic img,
.line-card .media.contain img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 14px 16px rgba(74, 56, 28, 0.16));
}