/* Gulshan Chemicals — site styles
   Layout: a photographic landing on the home page, then a spec-sheet system.
   Heavy expanded headings flush left on a wide grid, data set in mono inside
   ruled panels, sulfur yellow used sparingly, everything else indigo on cool paper. Buttons flip indigo to yellow on hover,
   the colour change indigo dye makes when sodium hydrosulfite reduces it. */
:root {
  color-scheme: light;
  --ink: #10173a;          /* indigo-black: text, dark bands */
  --ink-rgb: 16, 23, 58;   /* the same ink, for translucent washes */
  --indigo: #25348c;       /* denim indigo: links, buttons, rules */
  --indigo-tint: #e7eaf6;  /* pale indigo wash */
  --sulfur: #f4d51c;       /* sulfur yellow: the one loud colour */
  --paper: #f4f5f8;        /* cool page ground */
  --white: #ffffff;
  --line: #cdd2e2;         /* hairlines */
  --muted: #535b7b;        /* secondary text */
  --on-dark: #dfe3f3;      /* body text on ink */

  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
  --step-3: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  --step-4: clamp(2.3rem, 1.2rem + 4.6vw, 4.4rem);

  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 8vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
sub { font-size: 0.7em; line-height: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-stretch: 112%; font-weight: 750; line-height: 1.06; letter-spacing: -0.012em; text-wrap: balance; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.stack { display: flex; flex-direction: column; gap: 1.1em; }
.measure { max-width: 64ch; }

.eyebrow { font-family: var(--f-data); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.section--ink .eyebrow { color: var(--sulfur); }
.section--ink a:not(.btn) { color: var(--white); }
.section--ink a:not(.btn):hover { color: var(--sulfur); }
.h-page { font-size: var(--step-4); font-stretch: 116%; font-weight: 800; }
.h-section { font-size: var(--step-3); }
.h-sub { font-size: var(--step-2); }
.lead { font-size: var(--step-1); line-height: 1.5; max-width: 56ch; }
.muted { color: var(--muted); }
.formula { font-family: var(--f-body); font-weight: 500; white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.8em 1.25em; border: 2px solid var(--indigo); background: var(--indigo); color: var(--white); font-family: var(--f-display); font-stretch: 108%; font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.18s, color 0.18s, border-color 0.18s; }
.btn:hover, .btn:focus-visible { background: var(--sulfur); border-color: var(--ink); color: var(--ink); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--on-dark { background: var(--sulfur); border-color: var(--sulfur); color: var(--ink); }
.btn--on-dark:hover, .btn--on-dark:focus-visible { background: var(--white); border-color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.arrow { width: 1.05em; height: 0.75em; flex: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--f-display); font-stretch: 108%; font-weight: 650; text-decoration: none; border-bottom: 2px solid var(--sulfur); padding-bottom: 2px; color: var(--ink); }
.link-arrow:hover { border-bottom-color: var(--indigo); color: var(--indigo); }
.section--ink .link-arrow { color: var(--white); }
.section--ink .link-arrow:hover { color: var(--sulfur); border-bottom-color: var(--white); }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 36px; height: auto; }
.brand__name { display: flex; flex-direction: column; font-family: var(--f-display); font-stretch: 122%; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; }
.brand__sub { font-family: var(--f-data); font-stretch: 100%; font-weight: 400; font-size: 0.62rem; letter-spacing: 0.06em; margin-top: 5px; color: var(--muted); }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.nav a:not(.btn), .nav__label { font-family: var(--f-display); font-stretch: 106%; font-weight: 600; font-size: 0.98rem; color: var(--ink); text-decoration: none; background: none; border: 0; padding: 6px 0; cursor: pointer; }
.nav > a:not(.btn), .nav__label { border-bottom: 2px solid transparent; }
.nav > a:not(.btn):hover, .nav__group:hover .nav__label, .nav > a[aria-current="page"], .nav__group.is-current .nav__label { border-bottom-color: var(--sulfur); }
.nav .btn { color: var(--white); padding: 0.55em 1em; }
.nav .btn:hover, .nav .btn:focus-visible { color: var(--ink); }
.nav__group { position: relative; }
.nav__label::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.nav__menu { position: absolute; top: 100%; left: -16px; min-width: 250px; display: none; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--sulfur); padding: 8px 0; }
.nav .nav__menu a { padding: 9px 16px; font-weight: 500; border-bottom: 0; }
.nav__menu a:hover, .nav__menu a[aria-current="page"] { background: var(--indigo-tint); }
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu, .nav__group.is-open .nav__menu { display: flex; }
.nav-toggle { display: none; font-family: var(--f-display); font-stretch: 108%; font-weight: 650; font-size: 0.95rem; background: var(--white); color: var(--ink); border: 2px solid var(--ink); padding: 0.45em 0.9em; cursor: pointer; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; max-height: calc(100vh - 68px); overflow-y: auto; }
  .nav.is-open { display: flex; }
  .nav > a:not(.btn), .nav__label { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
  .nav__label { cursor: default; color: var(--muted); font-family: var(--f-data); font-stretch: 100%; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 0; padding-bottom: 2px; }
  .nav__label::after { display: none; }
  .nav__menu { position: static; display: flex; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 6px; min-width: 0; }
  .nav .nav__menu a { padding: 9px 0; }
  .nav .btn { margin-top: 16px; justify-content: center; padding: 0.8em 1em; }
}

/* Hero: full-width photograph with the headline over an indigo wash */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); }
.hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--ink-rgb), 0.95) 0%, rgba(var(--ink-rgb), 0.86) 46%, rgba(var(--ink-rgb), 0.36) 76%, rgba(var(--ink-rgb), 0.1) 100%); }
.hero__in { display: flex; flex-direction: column; justify-content: center; gap: 24px; min-height: clamp(480px, 74vh, 720px); padding-block: clamp(56px, 8vw, 96px); }
.hero__in > * { max-width: 760px; }
.hero .eyebrow { color: var(--sulfur); }
.hero h1 { color: var(--white); }
.hero .lead { color: var(--white); max-width: 660px; }
.hero__rule { width: 72px; height: 6px; background: var(--sulfur); }
.btn--line-light { background: transparent; color: var(--white); border-color: var(--white); }
.btn--line-light:hover, .btn--line-light:focus-visible { background: var(--white); border-color: var(--white); color: var(--ink); }
@media (max-width: 760px) {
  .hero::before { background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.86) 0%, rgba(var(--ink-rgb), 0.74) 100%); }
  .hero__in { min-height: 0; }
}
.factband { background: var(--white); border-bottom: 1px solid var(--line); }
.factband .facts { border-top: 0; }
.factband .facts div { padding-block: 26px; }
.hazard-rule { height: 10px; background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--sulfur) 10px 20px); }

/* Fact row */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); margin: 0; }
.facts div { padding: 18px 20px 4px 0; min-width: 0; }
.facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.facts dt { font-family: var(--f-display); font-stretch: 116%; font-weight: 800; font-size: var(--step-2); line-height: 1.1; }
.facts dd { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div { padding: 16px 14px 14px 0; border-bottom: 1px solid var(--line); }
  .factband .facts div { padding-block: 18px; }
  .factband .facts div:nth-last-child(-n+2) { border-bottom: 0; }
  .facts div + div { padding-left: 0; border-left: 0; }
  .facts div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
}

/* Two-column blocks */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split--top { align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.split > * { min-width: 0; }
@media (max-width: 860px) { .split, .split--wide-left { grid-template-columns: minmax(0, 1fr); } }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }

/* Product cards */
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.product { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); background: var(--white); border: 1px solid var(--line); min-width: 0; }
.product__img { background: var(--indigo-tint); }
.product__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.product__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 2.4vw, 28px); min-width: 0; }
.product__body h3 { font-size: var(--step-2); }
.product__body .link-arrow { margin-top: auto; align-self: flex-start; }
.chip { align-self: flex-start; background: var(--sulfur); color: var(--ink); font-family: var(--f-body); font-weight: 500; font-size: 0.95rem; padding: 3px 10px; }
.mini-spec { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-family: var(--f-data); font-size: 0.82rem; }
.mini-spec dt { color: var(--muted); }
.mini-spec dd { margin: 0; }
@media (max-width: 1000px) { .products { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .product { grid-template-columns: minmax(0, 1fr); } .product__img img { aspect-ratio: 16 / 10; } }

/* Ruled data tables */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.uses th, .uses td, .spec th, .spec td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.uses thead th, .spec thead th { font-family: var(--f-data); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); padding-block: 10px; }
.uses tbody th { font-family: var(--f-display); font-stretch: 110%; font-weight: 700; font-size: 1.12rem; width: 24%; min-width: 150px; }
.uses td:last-child { width: 18%; min-width: 120px; padding-right: 0; }
.uses .formula { display: block; font-size: 0.9rem; }
@media (max-width: 720px) {
  /* On phones each industry becomes its own block: name, what the product does, then the products as tags */
  .uses, .uses tbody, .uses tbody tr, .uses tbody th, .uses tbody td { display: block; width: auto; min-width: 0; }
  .uses thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .uses tbody { border-top: 2px solid var(--ink); }
  .uses tbody tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .uses tbody th, .uses tbody td { padding: 0; border: 0; }
  .uses tbody th { width: auto; min-width: 0; font-size: 1.2rem; margin-bottom: 6px; }
  .uses tbody td:last-child { width: auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .uses .formula { display: inline-block; background: var(--indigo-tint); padding: 2px 9px; font-size: 0.88rem; }
}
.spec { font-variant-numeric: tabular-nums; min-width: 520px; }
.spec tbody th { font-weight: 500; }
.spec tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.spec td { font-family: var(--f-data); font-size: 0.95rem; }
.spec .num { text-align: right; padding-right: 0; padding-left: 16px; }
.spec td.num { font-weight: 500; font-size: 1.05rem; }
.spec__meta { display: none; font-family: var(--f-data); font-size: 0.78rem; font-weight: 400; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) {
  .spec { min-width: 0; }
  .spec .spec__col { display: none; }
  .spec__meta { display: block; }
  .spec thead th { letter-spacing: 0.04em; }
}

/* Property panel on product pages */
.props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; background: var(--white); border: 2px solid var(--ink); }
.props div { padding: 14px 18px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); min-width: 0; }
.props div:nth-child(3n) { border-right: 0; }
.props div:nth-last-child(-n+3) { border-bottom: 0; }
.props dt { font-family: var(--f-data); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.props dd .formula { font-size: 1.15rem; }
.props dd { margin: 4px 0 0; font-family: var(--f-data); font-weight: 500; font-size: 1.1rem; }
@media (max-width: 700px) {
  .props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .props div:nth-child(3n) { border-right: 1px solid var(--ink); }
  .props div:nth-child(2n) { border-right: 0; }
  .props div:nth-last-child(-n+3) { border-bottom: 1px solid var(--ink); }
  .props div:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Page header (inner pages) */
.page-head { background: var(--white); border-bottom: 1px solid var(--line); padding-block: clamp(36px, 5vw, 68px); }
.page-head__in { display: flex; flex-direction: column; gap: 18px; }
.crumbs { font-family: var(--f-data); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); }
.product-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.product-head__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--line); }
.product-head .formula-big { font-family: var(--f-display); font-stretch: 100%; font-weight: 550; font-size: var(--step-3); line-height: 1; background: var(--sulfur); align-self: flex-start; padding: 8px 14px; }
@media (max-width: 760px) { .product-head { grid-template-columns: minmax(0, 1fr); } .product-head__img { max-width: 280px; } }

/* In-page section nav */
.subnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 69px); z-index: 10; background: var(--ink); }
.subnav__in { display: flex; gap: 4px 26px; overflow-x: auto; }
.subnav a { color: var(--on-dark); text-decoration: none; font-family: var(--f-display); font-stretch: 106%; font-weight: 600; font-size: 0.93rem; padding: 13px 0; white-space: nowrap; border-bottom: 3px solid transparent; }
.subnav a:hover, .subnav a.is-active { color: var(--white); border-bottom-color: var(--sulfur); }
.anchor { scroll-margin-top: 130px; }

.band-img img { width: 100%; height: clamp(180px, 30vw, 380px); object-fit: cover; }

/* Application columns */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.cols-3 > div { padding: 20px 24px 8px 0; min-width: 0; }
.cols-3 > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.cols-3 h3 { font-size: 1.2rem; margin-bottom: 10px; }
.cols-3 ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 800px) {
  .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .cols-3 > div, .cols-3 > div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* Packaging note and caution panel */
.note { background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--indigo); padding: 18px 22px; }
.note .eyebrow { display: block; margin-bottom: 6px; }
.note p { font-size: var(--step-1); font-weight: 500; }
.caution { background: var(--sulfur); color: var(--ink); }
.caution__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); padding: clamp(22px, 3.5vw, 40px); }
.caution__body > div { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.caution h3 { font-size: var(--step-2); }
@media (max-width: 760px) { .caution__body { grid-template-columns: minmax(0, 1fr); } }

/* Values, story, lists */
.values { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--sulfur); }
.values li { padding: 16px 0; border-bottom: 1px solid rgba(223, 227, 243, 0.25); font-size: var(--step-1); line-height: 1.4; color: var(--white); }
.timeline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 24px; margin: 0; border-top: 2px solid var(--ink); }
.timeline dt, .timeline dd { padding-block: 18px; border-bottom: 1px solid var(--line); margin: 0; }
.timeline dt { font-family: var(--f-display); font-stretch: 116%; font-weight: 800; font-size: var(--step-2); line-height: 1.1; }
.photo img { width: 100%; object-fit: cover; }
.photo--tall img { aspect-ratio: 4 / 3; }
.collage { max-width: 440px; margin-inline: auto; }

/* CSR */
.csr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 2px solid var(--ink); }
.csr-list li { padding: 18px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.csr-list h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: 6px; }
.csr-list p { color: var(--muted); }
@media (max-width: 760px) { .csr-list { grid-template-columns: minmax(0, 1fr); } }
/* Photo carousel: a swipeable full-width banner with arrows, dots and slow autoplay */
.carousel { position: relative; background: var(--ink); }
.carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -3px; }
.carousel__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.carousel__slide img { width: 100%; height: clamp(210px, 34.4vw, 520px); object-fit: cover; }
.carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 46px; height: 46px; padding: 0; background: var(--white); color: var(--ink); border: 2px solid var(--ink); cursor: pointer; transition: background-color 0.18s; }
.carousel__btn:hover, .carousel__btn:focus-visible { background: var(--sulfur); }
.carousel__btn svg { width: 20px; height: 14px; }
.carousel__btn--prev { left: var(--gutter); }
.carousel__btn--next { right: var(--gutter); }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 8px; }
.carousel__dots button { width: 30px; height: 26px; padding: 10px 0; border: 0; background: var(--white); background-clip: content-box; opacity: 0.6; cursor: pointer; }
.carousel__dots button[aria-current="true"] { background-color: var(--sulfur); opacity: 1; }
@media (max-width: 640px) {
  .carousel__btn { width: 38px; height: 38px; }
  .carousel__btn--prev { left: 8px; }
  .carousel__btn--next { right: 8px; }
  .carousel__dots button { width: 22px; }
}
@media (prefers-reduced-motion: reduce) { .carousel__btn { transition: none; } }
.partners { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.partners a { display: flex; align-items: center; justify-content: center; height: 120px; padding: 18px; background: var(--white); border: 1px solid var(--line); }
.partners a:hover { border-color: var(--indigo); }
.partners img { max-height: 100%; width: auto; object-fit: contain; }
@media (max-width: 900px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } .partners a { height: 100px; } }

/* Commitment cards */
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.card-photo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card-photo img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.card-photo h3 { font-size: var(--step-2); }
.card-photo .link-arrow { align-self: flex-start; }
@media (max-width: 760px) { .cards-2 { grid-template-columns: minmax(0, 1fr); } }

/* Practices (environment) */
.practices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 2px solid var(--ink); }
.practices li { padding: 18px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.practices h3 { font-size: 1.2rem; margin-bottom: 6px; }
@media (max-width: 700px) { .practices { grid-template-columns: minmax(0, 1fr); } }

/* Contact */
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.office { background: var(--white); border: 2px solid var(--ink); display: flex; flex-direction: column; min-width: 0; }
.office__head { padding: 14px 20px; border-bottom: 2px solid var(--ink); background: var(--sulfur); }
.office__head h2 { font-size: var(--step-2); }
.office__body { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.office address { font-style: normal; font-size: var(--step-1); line-height: 1.45; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.kv dt { font-family: var(--f-data); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.office .link-arrow { align-self: flex-start; margin-top: auto; }
@media (max-width: 760px) { .offices { grid-template-columns: minmax(0, 1fr); } }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--f-data); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--muted); border-radius: 0; padding: 0.7em 0.8em; width: 100%; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--indigo); outline-offset: 0; border-color: var(--indigo); }
.form__status { grid-column: 1 / -1; background: var(--indigo-tint); border-left: 6px solid var(--indigo); padding: 14px 18px; }
@media (max-width: 620px) { .form { grid-template-columns: minmax(0, 1fr); } }

/* Call to action band and footer */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.site-footer { background: var(--ink); color: var(--on-dark); border-top: 1px solid rgba(223, 227, 243, 0.2); font-size: 0.95rem; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--sulfur); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1.3fr 1.3fr; gap: 32px; padding-block: 52px 36px; }
.footer-grid > div { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid h2 { font-family: var(--f-data); font-stretch: 100%; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sulfur); margin-bottom: 4px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-grid address { font-style: normal; line-height: 1.5; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); font-family: var(--f-display); font-stretch: 122%; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-brand img { width: 34px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px 26px; border-top: 1px solid rgba(223, 227, 243, 0.2); font-family: var(--f-data); font-size: 0.78rem; color: #aab1cf; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--sulfur); color: var(--ink); padding: 8px 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }