/* ==========================================================================
   e⁻BioSkin — homepage
   Typographic & responsive refinement of the approved 1440 design.
   Palette, imagery, section order and copy are unchanged.
   Fluid values interpolate between a 360 px and a 1440 px viewport.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../assets/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../assets/fonts/alegreya-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../assets/fonts/alegreya-sans-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../assets/fonts/alegreya-sans-latin-ext-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* palette — unchanged from the approved design */
  --ivory: #F7F5F1;
  --mist: #EDF1F4;
  --navy: #17324A;
  --ink: #2E475C;
  --concept: #485F71;
  --on-concept: #F3EFE7;
  --on-concept-soft: #E6E1D8;
  --on-concept-label: #E3D8BA;
  --label: #7C6B45;
  --numeral: #A08A5A;
  --champagne: #C9B891;
  --hairline: rgba(23, 50, 74, 0.14);

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Alegreya Sans", "Gill Sans", "Seravek", "Segoe UI", sans-serif;

  /* type scale — 360 px → 1440 px */
  --t-display:   clamp(2.1875rem, 1.875rem + 1.3889vw, 3.125rem); /* 35 → 50  hero */
  --t-hero-sub:  clamp(1.1875rem, 1.0625rem + 0.5556vw, 1.5625rem); /* 19 → 25 */
  --t-h2:        clamp(1.875rem,  1.583rem + 1.296vw, 2.75rem);   /* 30 → 44 */
  --t-h2-quiet:  clamp(1.875rem,  1.583rem + 1.296vw, 2.75rem);   /* contact: same as h2 */
  --t-concept:   clamp(1.6875rem, 1.292rem + 1.759vw, 2.875rem);  /* 27 → 46 */
  --t-place:     clamp(1.7262rem, 1.4683rem + 1.1464vw, 2.5rem);   /* 27.6 → 40 Málaga */
  --t-year:      clamp(1.2833rem, 1.1278rem + 0.6913vw, 1.75rem);  /* 20.5 → 28 */
  --t-h3-lg:     clamp(1.625rem,  1.458rem + 0.741vw, 2.125rem);  /* 26 → 34 */
  --t-h3:        clamp(1.4375rem, 1.292rem + 0.648vw, 1.875rem);  /* 23 → 30 */
  --t-h3-sm:     clamp(1.375rem,  1.25rem + 0.556vw, 1.75rem);    /* 22 → 28 */
  --t-talk:      clamp(1.5625rem, 1.375rem + 0.833vw, 2.125rem);  /* 25 → 34 */
  --t-statement: clamp(1.75rem,   1.542rem + 0.926vw, 2.375rem);  /* 28 → 38 */
  --t-pull:      clamp(1.375rem,  1.292rem + 0.370vw, 1.625rem);  /* 22 → 26 */
  --t-row:       clamp(1.21875rem, 1.083rem + 0.602vw, 1.625rem); /* 19.5 → 26 */
  --t-row-n:     clamp(1.0625rem, 0.958rem + 0.463vw, 1.375rem);  /* 17 → 22 */
  --t-step-n:    clamp(2.5rem,    2.083rem + 1.852vw, 3.75rem);   /* 40 → 60 */
  --t-email:     clamp(1.5rem,    1.25rem + 1.111vw, 2.25rem);    /* 24 → 36 */
  --t-lead:      clamp(1.15625rem, 1.104rem + 0.231vw, 1.3125rem);/* 18.5 → 21 */
  --t-body:      clamp(1.09375rem, 1.052rem + 0.185vw, 1.21875rem);/* 17.5 → 19.5 */
  --t-small:     clamp(1.03125rem, 1.010rem + 0.093vw, 1.09375rem);/* 16.5 → 17.5 */
  --t-label:     clamp(0.78125rem, 0.760rem + 0.093vw, 0.84375rem);/* 12.5 → 13.5 */
  --t-brand:     clamp(1.5rem,    1.354rem + 0.648vw, 1.9375rem); /* 24 → 31 */

  /* space */
  --gutter: clamp(1.5rem, 7.2vw, 6.5rem);           /* 24 → 104 at 1440 */
  --maxw: 77rem;                                    /* 1232 px content */
  --col-gap: clamp(1.5rem, 2.2vw, 2rem);
  --section-y: clamp(5.5rem, 3.1rem + 10.6vw, 11rem);/* 88 → 176 */
  --label-gap: clamp(1.125rem, 0.95rem + 0.78vw, 1.75rem); /* eyebrow → title */
  --rule-w: 2.5rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--navy); }
a:hover { color: #0f2334; }
a:focus-visible { outline: 1px solid var(--navy); outline-offset: 6px; }

/* inline text link in running copy: same colour as the text, champagne underline
   (the site's existing link accent, as on the email address) */
.text-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--champagne);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.3s ease;
}
.text-link:hover { color: inherit; text-decoration-color: currentColor; }
.text-link:focus-visible { outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

/* electron superscript in the wordmark — values from the original */
.e-sup {
  position: relative; top: -0.68em;
  vertical-align: baseline;
  font-size: 0.56em; line-height: 0;
  margin: 0 0.05em 0 0.03em;
  letter-spacing: 0;
}
.nw { white-space: nowrap; }

/* line-break helpers: desktop composition vs. narrow composition */
.br-m { display: none; }

/* ---------- Shared typographic roles ---------- */
.serif { font-family: var(--serif); }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
}

.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.body { font-size: var(--t-body); line-height: 1.62; color: var(--ink); text-wrap: pretty; }
.small { font-size: var(--t-small); line-height: 1.6; color: var(--ink); text-wrap: pretty; }

.rule {
  display: block;
  width: var(--rule-w);
  height: 0;
  border-top: 1px solid var(--champagne);
}

.head { display: flex; flex-direction: column; gap: var(--label-gap); }

/* body column top aligned with the first line of the heading beside it */
.align-to-title { padding-top: calc(var(--t-label) * 1.3 + var(--label-gap)); }

.section { padding-block: var(--section-y); }
.bg-ivory { background: var(--ivory); }
.bg-mist { background: var(--mist); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}

/* ==========================================================================
   Hero — positioning
   ========================================================================== */
.hero {
  position: relative;
  height: clamp(36rem, 56.667vw, 60rem);   /* 816 at 1440, as designed */
  overflow: hidden;
  background: #b9c3cc;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero__inner {
  position: relative;
  padding-top: clamp(1.75rem, 1.1rem + 2.9vw, 3.3125rem);  /* 28 → 53 */
}
.brand {
  font-family: var(--sans);
  font-size: var(--t-brand);
  font-weight: 400;
  letter-spacing: 0.055em;
  line-height: 1;
  height: 1em;                       /* same box as the former text logo: the headline does not move */
  padding-top: 0.17em;               /* places the wordmark baseline on the former text baseline */
}
/* Reconstructed e⁻BioSkin wordmark (SVG traced from the approved PNG master).
   Baseline sits where the former text baseline was (0.8em); viewBox baseline = 88.5/90. */
.wordmark {
  display: block;
  height: 0.64em;
  width: auto;
}
.hero .wordmark {
  height: 0.585em;
  margin-top: 0.0541em;              /* (0.64 − 0.585) × 88.5/90: keeps the same baseline */
}
.hero h1 {
  margin-top: clamp(0.75rem, 0.6rem + 0.4vw, 0.875rem);
  max-width: 13em;
  font-family: var(--serif);
  font-weight: 450;
  font-size: var(--t-display);
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.hero .rule { margin-top: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.hero__sub {
  margin-top: 0.875rem;
  max-width: 22em;
  font-size: var(--t-hero-sub);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.012em;
}

/* ==========================================================================
   01 The Studio — identity
   ========================================================================== */
.studio__head { grid-column: 1 / span 5; }
.studio__body {
  grid-column: 7 / span 5;
  max-width: 35rem;
  display: flex; flex-direction: column;
  gap: 1.3em;
}
.studio__body > * { font-size: var(--t-lead); }
.conviction { display: flex; flex-direction: column; gap: 0.3rem; }
.pull {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-pull);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--navy);
  text-wrap: balance;
}
/* the conviction is the turning point of the column: one extra measure of
   space after it lets the closing paragraph stand apart without a rule */
.studio__close { margin-top: 1.3em; }

/* ==========================================================================
   02 What We Do — services
   ========================================================================== */
.focus__areas { margin-top: clamp(3.5rem, 2.4rem + 4.8vw, 6.5rem); }
.focus__area { display: flex; flex-direction: column; gap: clamp(1rem, 0.85rem + 0.6vw, 1.375rem); }
.focus__area:nth-child(1) { grid-column: 1 / span 5; }
.focus__area:nth-child(2) { grid-column: 7 / span 5; }
.focus__area .h3 { font-size: var(--t-h3); line-height: 1.2; }
.focus__area .body { font-size: var(--t-body); max-width: 33em; }

.working { margin-top: clamp(4.5rem, 3.2rem + 5.6vw, 8.5rem); }
.working__title {
  grid-column: 1 / span 4;
  padding-top: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  font-size: var(--t-h3-lg);
  line-height: 1.18;
}
.working__list-wrap {
  grid-column: 6 / span 7;
  --n-gap: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);
}
.rows {
  border-top: 1px solid var(--hairline);
}
.row {
  display: flex;
  align-items: baseline;
  gap: var(--n-gap);
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  border-bottom: 1px solid var(--hairline);
}
.row__n {
  flex: 0 0 auto;
  width: calc(var(--t-row-n) * 1.65);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-row-n);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--numeral);
}
.row__t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-row);
  line-height: 1.35;
  color: var(--navy);
  text-wrap: balance;
}
.working__note {
  margin-top: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  padding-left: calc(var(--t-row-n) * 1.65 + var(--n-gap));
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}

/* ==========================================================================
   03 Our Approach — method
   ========================================================================== */
.approach__intro { align-items: end; }
.approach__head { grid-column: 1 / span 6; }
.approach__lead { grid-column: 8 / span 5; max-width: 30rem; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 5.5vw, 5rem);
  margin-top: clamp(4rem, 2.8rem + 5vw, 7rem);
  padding-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  border-top: 1px solid var(--hairline);
  counter-reset: none;
}
.step { display: flex; flex-direction: column; gap: 1.25rem; }
.step:nth-child(2) { padding-top: clamp(1.5rem, 2.8vw, 2.5rem); }
.step:nth-child(3) { padding-top: clamp(3rem, 5.6vw, 5rem); }
.step__n {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-step-n);
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--numeral);
}
.step .h3 { font-size: var(--t-h3-sm); line-height: 1.2; }
.step .body { max-width: 20em; }

.approach__close { margin-top: clamp(5rem, 3.6rem + 6vw, 10.5rem); }
.approach__close-inner {
  grid-column: 5 / span 8;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}
.statement {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-statement);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ==========================================================================
   04 From Science to Concept — bridge
   ========================================================================== */
.concept {
  background: var(--concept);
  color: var(--on-concept);
  padding-block: clamp(6.5rem, 3.7rem + 12.4vw, 12.5rem);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.concept .wrap { display: flex; flex-direction: column; align-items: center; }
.concept .eyebrow { color: var(--on-concept-label); }
.concept__title {
  margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  max-width: 18.5em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-concept);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--on-concept);
  text-wrap: balance;
}
.concept .rule {
  width: 2rem;
  border-top-color: rgba(201, 184, 145, 0.7);
  margin-block: clamp(2rem, 1.6rem + 1.6vw, 3rem);
}
.concept__text {
  max-width: 30em;
  font-size: var(--t-lead);
  line-height: 1.72;
  color: var(--on-concept-soft);
  text-wrap: pretty;
}
.concept__text + .concept__text { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }

/* ==========================================================================
   05 Featured Science — credibility
   ========================================================================== */
.science__head { grid-column: 1 / span 4; }
.place {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-place);
  line-height: 1;
  letter-spacing: -0.02em;
}
.year {
  margin-top: calc(var(--label-gap) * -1 + 1.125rem);  /* 18 px below the place name, as designed */
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-year);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}
.science__body {
  grid-column: 6 / span 6;
  max-width: 38.75rem;
  display: flex; flex-direction: column;
  gap: clamp(1.125rem, 0.95rem + 0.7vw, 1.625rem);
}
.science__meta { line-height: 1.55; letter-spacing: 0.16em; }
.talk {
  font-size: var(--t-talk);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.authors { font-size: var(--t-small); }
.science__body .rule { margin-top: 0.5rem; }
.format { font-size: var(--t-small); letter-spacing: 0.02em; }

/* ==========================================================================
   06 Contact — invitation
   ========================================================================== */
.contact__head { grid-column: 1 / span 5; }
.contact__title {
  font-size: var(--t-h2-quiet);
  line-height: 1.1;
  letter-spacing: -0.018em;
}
.contact__head .lead { max-width: 24em; }
.contact__body {
  grid-column: 8 / span 5;
  display: flex; flex-direction: column;
  gap: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}
.contact__body .body { max-width: 28em; }
.email {
  align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: 0.32em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-email);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--champagne);
  padding: 0.22em 0;
  transition: border-color 0.3s ease;
}
.email:hover { border-bottom-color: var(--navy); }
/* the arrow is drawn: neither typeface contains U+2192, so the text arrow
   fell back to a system font with a different weight and height */
.email__arrow {
  width: 0.66em; height: 0.66em;
  flex: none;
  transform: translateY(0.02em);
}
.contact__place { letter-spacing: 0.16em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--mist);
  border-top: 1px solid rgba(23, 50, 74, 0.16);
}
.footer .wrap {
  min-height: clamp(5.5rem, 4.6rem + 3.7vw, 7.5rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding-block: 1.5rem;
}
.footer__brand {
  font-size: clamp(1.25rem, 1.2rem + 0.19vw, 1.375rem);
  letter-spacing: 0.055em;
  line-height: 1;
  height: 1em;                       /* same box as the former text logo: footer layout unchanged */
  padding-top: 0.17em;               /* same wordmark sizing and baseline as the hero */
}
.footer__copy { font-size: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem); color: var(--ink); }

/* ==========================================================================
   Laptop (≤ 1180): keep the grid, widen narrow columns
   ========================================================================== */
@media (max-width: 1279px) {
  .hero { height: max(56.667vw, 40rem); }
  .hero__img { object-position: 0% 50%; }
}

@media (max-width: 1180px) {
  .studio__head { grid-column: 1 / span 6; }
  .studio__body { grid-column: 7 / span 6; }
  .focus__area:nth-child(1) { grid-column: 1 / span 6; }
  .focus__area:nth-child(2) { grid-column: 7 / span 6; }
  .working__title { grid-column: 1 / span 4; }
  .working__list-wrap { grid-column: 5 / span 8; }
  .approach__lead { grid-column: 7 / span 6; }
  .science__head { grid-column: 1 / span 4; }
  .science__body { grid-column: 5 / span 8; }
  .contact__head { grid-column: 1 / span 6; }
  .contact__body { grid-column: 7 / span 6; }
  .approach__close-inner { grid-column: 4 / span 9; }
}

/* ==========================================================================
   Tablet & below (≤ 900): single editorial column, composed — not shrunk
   ========================================================================== */
@media (max-width: 900px) {
  .hero { height: clamp(36rem, 82svh, 52rem); }
  .hero__img { object-position: 9% 50%; }

  .grid { display: flex; flex-direction: column; align-items: stretch; }
  .align-to-title { padding-top: 0; }

  .studio__body { margin-top: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); max-width: 34rem; }

  .focus__areas { gap: clamp(3rem, 2.6rem + 2vw, 4rem); }
  .focus__area .body { max-width: 34rem; }

  .working__title { padding-top: 0; }
  .working__list-wrap { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

  .approach__intro { align-items: stretch; }
  .approach__lead { margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); max-width: 34rem; }

  /* the three steps become a vertical sequence: numeral beside its title */
  .steps {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
    row-gap: 0;
    padding-top: 0;
  }
  .step {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);  /* fallback */
    grid-template-columns: subgrid;
    align-items: baseline;
    row-gap: 0.625rem;
    padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    border-bottom: 1px solid var(--hairline);
  }
  .step:nth-child(2), .step:nth-child(3) { padding-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
  .step:last-child { border-bottom: 0; padding-bottom: 0; }
  .step__n { grid-row: 1; grid-column: 1; font-size: clamp(2rem, 1.7rem + 1.4vw, 2.75rem); min-width: 1.45em; }
  .step .h3 { grid-row: 1; grid-column: 2; }
  .step .body { grid-row: 2; grid-column: 2; max-width: 30rem; }

  .approach__close { margin-top: clamp(4rem, 3.2rem + 3.6vw, 6rem); }

  .science__body { margin-top: clamp(2.5rem, 2rem + 2.2vw, 3.5rem); max-width: 34rem; }

  .contact__body { margin-top: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); }
}

/* ==========================================================================
   Phone (≤ 600): hero recomposed for portrait
   ========================================================================== */
@media (min-width: 601px) and (max-width: 900px) {
  .approach__close-inner { margin-left: 25%; }
}

@media (max-width: 600px) {
  .br-d { display: none; }
  .br-m { display: inline; }

  .hero { height: clamp(34rem, 88svh, 44rem); }
  .hero__img { object-position: 9% 50%; }    /* keeps the warm, light-filled left of the image behind the type */
  .hero h1 { line-height: 1.1; letter-spacing: -0.012em; }
  /* Optical easing for the narrowest phones: 94% of the display size at
     ≤ 390 px, blending linearly back to the full size by 430 px.
     Continuous at both joins, so there is no size step. */
  .hero h1 {
    font-size: min(
      var(--t-display),
      max(calc(var(--t-display) * 0.94), calc(0.44727rem + 6.7014vw))
    );
  }
  .hero__sub { max-width: 17em; line-height: 1.5; }

  .h2 { line-height: 1.15; letter-spacing: -0.01em; }
  .studio__body { gap: 1.25em; }
  .working__list-wrap { --n-gap: 1rem; }
  .eyebrow { letter-spacing: 0.16em; }
  .concept__title { line-height: 1.24; }
  .concept__text { line-height: 1.68; }
  .footer .wrap { padding-block: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .email, .text-link { transition: none; }
}