/* =========================================================
   Sanctum Apparel — inner pages (loaded after home.css; shares its tokens, nav and footer)
   Each page has its own layout; nothing here repeats the homepage.
   ========================================================= */

/* ---------- Page transition curtain ---------- */
.curtain { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: var(--linen); clip-path: inset(0 0 0 0); }
.curtain img { width: 214px; height: auto; max-width: 70vw; }   /* 50px tall: +40% then −10%; width-based so it never stretches */
.reduced .curtain { display: none; }

.pad { padding-block: var(--gap) 0; }   /* same gap as the homepage; sections never double up */
.masthead + .pad { padding-top: 0; }
.tone-linen { background: var(--linen); }
.tone-olive { background: var(--olive-deep); color: var(--linen); }
.kicker { margin: 0 0 20px; font: 500 .66rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--clay-ink); }
.tone-olive .kicker { color: rgba(234, 225, 208, .65); }
.title-m { margin: 0; font: 500 clamp(2rem, 3.4vw, 3.1rem)/1.08 var(--serif); letter-spacing: -.005em; }
:root { --charcoal: var(--olive); }   /* round icon buttons use the main olive (team feedback round 2) */
.title-m em, .title-l em { color: var(--olive); }
.head-row { display: grid; grid-template-columns: 7fr 5fr; gap: 24px clamp(32px, 6vw, 96px); align-items: start; margin-bottom: clamp(48px, 6vw, 80px); }
.head-row p:not(.kicker) { margin: 0; max-width: 30rem; color: var(--ink-soft); }
@media (max-width: 900px) { .head-row { grid-template-columns: 1fr; } }
.tone-olive .title-m em, .tone-olive .title-l em { color: var(--blush); }

/* ---------- Masthead (every inner page opens on paper, set like a magazine) ---------- */
.masthead { padding-top: clamp(140px, 19vh, 200px); padding-bottom: clamp(48px, 6vw, 88px); }
.masthead__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 32px clamp(32px, 6vw, 96px); align-items: start; }   /* same split and gap as every other heading/intro pair, so right-hand text lines up site-wide */
.title-l { margin: 0; font: 500 clamp(2.6rem, 5vw, 4.6rem)/.98 var(--serif); letter-spacing: -.02em; }
.masthead__lede { margin: 0; max-width: 28rem; color: var(--ink-soft); }
@media (max-width: 900px) { .masthead__grid { grid-template-columns: 1fr; } }

/* ---------- About: editorial column with drop cap ---------- */
.column { display: grid; grid-template-columns: 5fr 7fr; gap: 32px var(--col-gap); }
.column__text p { margin: 0 0 1.2em; max-width: 36ch; font: 500 clamp(1.45rem, 2.2vw, 2rem)/1.45 var(--serif); }
.column__text p:first-child::first-letter { float: left; margin: .08em .12em 0 0; font-size: 3.6em; line-height: .8; color: var(--olive); }
.column__text p + p { font: 400 1rem/1.75 var(--sans); color: var(--ink-soft); max-width: 40rem; }
@media (max-width: 900px) { .column { grid-template-columns: 1fr; } }

/* ---------- About: two city panels that widen on hover ---------- */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }   /* within the page width: heading and both photos fit a 1920x1080 screen */
.panel { position: relative; aspect-ratio: 1193 / 1319; overflow: hidden; color: var(--linen); isolation: isolate; }   /* the Tirupur photo's own proportions */
.panel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) sepia(.08); }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(38, 40, 33, .72) 0%, rgba(38, 40, 33, 0) 55%); }
.panel__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 3vw, 44px); }
.panel__tag { margin: 0 0 14px; font: 500 .64rem/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--cream); }
.panel h3 { margin: 0 0 12px; font: 500 clamp(2.4rem, 4.4vw, 4rem)/1 var(--serif); }
.panel p { margin: 0; max-width: 26rem; font-size: .95rem; color: rgba(234, 225, 208, .85); }
/* Hover: the panel you point at stays lit, the other dims; text lifts and a line draws in. No zoom, so the photos stay whole. */
.panel img { transition: filter .9s var(--ease); }
.panels:hover .panel:not(:hover) img { filter: saturate(.6) sepia(.08) brightness(.72); }
.panel__body { transition: transform .9s var(--ease-out); }
.panel:hover .panel__body { transform: translateY(-10px); }
.panel__tag { display: flex; align-items: center; }
.panel__tag::before { content: ""; width: 0; height: 1px; margin-right: 0; background: currentColor; transition: width .8s var(--ease-out), margin .8s var(--ease-out); }
.panel:hover .panel__tag::before { width: 36px; margin-right: 14px; }
@media (max-width: 800px) { .panels { grid-template-columns: 1fr; } }

/* ---------- About: ledger with a pinned heading ---------- */
.ledger { display: grid; grid-template-columns: 5fr 7fr; gap: 40px var(--col-gap); align-items: start; }
.ledger__head { position: sticky; top: 120px; }
.ledger__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ledger__list li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 6px 16px; padding: 30px 0; border-bottom: 1px solid var(--rule); }
.ledger__list b { grid-row: span 2; font: 500 2rem/1 var(--serif); font-style: italic; color: var(--clay); }
.ledger__list h3 { margin: 0; font: 500 1.5rem/1.2 var(--serif); }
.ledger__list p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
@media (max-width: 900px) { .ledger { grid-template-columns: 1fr; } .ledger__head { position: static; } }

/* ---------- Capabilities: the index (accordion rows) ---------- */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.index__item { border-bottom: 1px solid var(--rule); }
.index__row {
  width: 100%; display: grid; grid-template-columns: 4.5rem 1fr auto 48px; align-items: center; gap: 16px;
  padding: clamp(18px, 2vw, 26px) 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink);
}
.index__no { font: 500 .7rem/1 var(--sans); letter-spacing: .22em; color: var(--clay-ink); }
.index__title { font: 500 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--serif); letter-spacing: -.005em; transition: transform .7s var(--ease-out), color .4s; }
.index__row:hover .index__title, .is-open .index__title { transform: translateX(10px); color: var(--olive); font-style: italic; }
.index__where { font: 500 .66rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.index__plus { position: relative; width: 48px; height: 48px; border: 1px solid var(--rule); border-radius: 50%; transition: background .4s, border-color .4s, transform .6s var(--ease-out); }
.index__plus::before, .index__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: currentColor; translate: -50% -50%; }
.index__plus::after { rotate: 90deg; }
.is-open .index__plus { transform: rotate(45deg); background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }
.index__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease-out); }
.is-open .index__panel { grid-template-rows: 1fr; }
.index__inner { overflow: hidden; }
.index__content { display: grid; grid-template-columns: 4.5rem 5fr 6fr; gap: 16px clamp(24px, 4vw, 64px); padding-bottom: clamp(32px, 4vw, 52px); }
.index__content p { grid-column: 2; margin: 0; color: var(--ink-soft); max-width: 30rem; }
.tags { grid-column: 3; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 9px 14px; border: 1px solid var(--rule); font-size: .84rem; }
@media (max-width: 800px) {
  .index__row { grid-template-columns: 2.6rem 1fr 44px; }
  .index__where { display: none; }
  .index__plus { width: 44px; height: 44px; }
  .index__content { grid-template-columns: 1fr; }
  .index__content p, .tags { grid-column: 1; }
}

/* ---------- Capabilities: our product expertise — page-31 layout: one line, a tick, the number over the word ---------- */
.expertise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* each item draws its own stretch of the line, so every row reads as one continuous line */
.expertise li { position: relative; padding: 22px 16px 40px 0; border-top: 1px solid var(--olive); font: 500 clamp(1.15rem, 1.5vw, 1.4rem)/1.2 var(--serif); }
.expertise li::before { content: ""; position: absolute; left: 0; top: -1px; width: 1px; height: 10px; background: var(--olive); }
.expertise span { display: block; margin-bottom: 10px; font: 500 .62rem/1 var(--sans); letter-spacing: .22em; color: var(--accent); }
@media (max-width: 1100px) { .expertise { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .expertise { grid-template-columns: repeat(2, minmax(0, 1fr)); } .expertise li { padding-bottom: 30px; } }

/* ---------- Network ---------- */
.regions3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 80px); }
/* 2) delicate effects instead of lines: a fine line draws beside each region label; offices drift in; names warm on hover */
.regions3 h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 30px; font: 500 .66rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--clay-ink); }
.regions3 h3::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .6; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) .2s; }
.regions3.is-in h3::after, .reduced .regions3 h3::after { transform: scaleX(1); }
.office { margin: 0 0 30px; }
.office:last-child { margin-bottom: 0; }
.office b { display: block; margin-bottom: 6px; font: 500 1.9rem/1.1 var(--serif); transition: color .5s var(--ease), transform .7s var(--ease-out); }
.office:hover b { color: var(--olive); font-style: italic; transform: translateX(6px); }
.office span { font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 1000px) { .regions3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .regions3 { grid-template-columns: 1fr; } }
/* export markets: region label, then the countries as a quiet serif list */
.markets { display: grid; grid-template-columns: 7fr 5fr; gap: 40px var(--col-gap); }
.markets h3 { margin: 0 0 22px; font: 500 .66rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.markets__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; font: 500 clamp(1.6rem, 2.6vw, 2.3rem)/1.2 var(--serif); }
.markets__list li:not(:last-child)::after { content: "·"; margin: 0 .45em; color: var(--accent); }
@media (max-width: 800px) { .markets { grid-template-columns: 1fr; } }
.statement { padding-block: clamp(40px, 6vw, 80px); text-align: center; }
.statement p { margin: 0 auto; max-width: 24ch; font: 500 clamp(2rem, 4vw, 3.6rem)/1.1 var(--serif); }
.statement em { color: var(--olive); }

/* ---------- Standards: inspection sheet ---------- */
.sheet { display: grid; grid-template-columns: 5fr 7fr; gap: 40px var(--col-gap); align-items: start; }
.sheet__media { position: sticky; top: 110px; }
.sheet__img { aspect-ratio: 4 / 5; }
.sheet__note { margin: 22px 0 0; font: 500 1.35rem/1.35 var(--serif); font-style: italic; color: var(--olive-deep); max-width: 24ch; }
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.checks li { display: grid; grid-template-columns: 4.6rem 1fr 34px; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.checks__code { font: 500 .66rem/1 var(--sans); letter-spacing: .2em; color: var(--clay-ink); }
.checks__name { font: 500 clamp(1.35rem, 2vw, 1.7rem)/1.2 var(--serif); }
.checks svg { width: 34px; height: 34px; }
.checks circle { fill: none; stroke: var(--rule); stroke-width: 1; }
.checks path { fill: none; stroke: var(--olive); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .8s var(--ease-out) .15s; }
.checks li.is-checked path, .reduced .checks path { stroke-dashoffset: 0; }
@media (max-width: 900px) { .sheet { grid-template-columns: 1fr; } .sheet__media { position: static; } .sheet__img { aspect-ratio: 4 / 3; } }

/* ---------- Standards: responsible block on cream, principles as dark olive tags ---------- */
.duo { display: grid; grid-template-columns: 5fr 7fr; gap: 40px var(--col-gap); align-items: start; }
.duo p { max-width: 32rem; color: var(--ink-soft); margin: 28px 0 0; }
.woven { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.woven li { padding: 16px 22px; font: 500 1.2rem/1 var(--serif); color: var(--linen); background: var(--olive-deep); }
.duo small { display: block; margin-top: 28px; font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

/* ---------- Contact: olive intro beside the form, both starting on the same line ---------- */
/* columns: page edge · 7 parts · gap · 5 parts · page edge — the same lines as the .wrap grid below */
.split-screen { --edge: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  display: grid; grid-template-columns: var(--edge) minmax(0, 7fr) var(--col-gap) minmax(0, 5fr) var(--edge); }
.split-screen__panel, .split-screen__form { padding-block: clamp(150px, 20vh, 200px) clamp(64px, 8vw, 110px); }
.split-screen__panel { grid-column: 1 / 3; display: grid; grid-template-columns: subgrid; align-content: start; background: var(--olive); color: var(--cream); }
.split-screen__panel > * { grid-column: 2; padding-right: clamp(16px, 3vw, 48px); }
.split-screen__form { grid-column: 4 / 6; }
.split-screen__panel .title-l em { color: var(--cream); }
.split-screen__panel .masthead__lede { color: rgba(234, 225, 208, .8); margin-top: 28px; max-width: 28rem; }
.split-screen__form .enquiry { width: 100%; max-width: 560px; background: none; padding: 0; }
.split-screen__form .enquiry::before { display: none; }
@media (max-width: 900px) { .split-screen { grid-template-columns: 1fr; } .split-screen__panel, .split-screen__form { grid-column: auto; display: block; padding-inline: var(--gutter); } .split-screen__form { padding-top: 64px; } }

/* ---------- Contact: global presence (team guide) — India highlighted, international offices together; type and space only ---------- */
.presence { padding-bottom: var(--gap); }
.presence .head-row { margin-bottom: clamp(56px, 7vw, 96px); }
.presence__co { display: block; margin-bottom: 10px; font: 500 .66rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--olive); }
.presence__h { margin: 0 0 28px; }
.hq { display: grid; grid-template-columns: 7fr 5fr; gap: 48px var(--col-gap); }
.hq h3, .intl h3 { margin: 0 0 8px; font: 500 clamp(2rem, 3vw, 2.6rem)/1.05 var(--serif); }
.intl h3 { font-size: clamp(1.5rem, 2.1vw, 1.9rem); }
.hq__role { margin: 0 0 16px; font: 500 .64rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.hq__item address, .intl__where { margin: 0; font-style: normal; font-size: .95rem; line-height: 1.7; color: var(--ink-soft); }
.hq__time { margin: 14px 0 0; font: 500 .64rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.hq__reg { margin: 44px 0 clamp(72px, 9vw, 120px); font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.hq__reg span { margin-right: 14px; font: 500 .62rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--olive); }
.intl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
.intl .hq__role { margin-bottom: 10px; }
@media (max-width: 900px) { .hq { grid-template-columns: 1fr; } .intl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hq__reg span { display: block; margin: 0 0 6px; } }
@media (max-width: 480px) { .intl { grid-template-columns: 1fr; } }

/* ---------- Next page ---------- */
.next { position: relative; display: block; margin-top: var(--gap); border-top: 1px solid var(--rule); }
.next__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-block: clamp(72px, 10vw, 140px); }
.next__eyebrow { display: block; margin-bottom: 18px; font: 500 .66rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.next__title { margin: 0; font: 500 clamp(2.4rem, 5vw, 4.6rem)/1 var(--serif); letter-spacing: -.01em; transition: color .4s; }
.next__title em { color: var(--olive); }
.next:hover .next__title { color: var(--olive-deep); }
.next__arrow { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--rule); transition: background .4s, color .4s, border-color .4s; }
.next__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.next:hover .next__arrow { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }