/* =========================================================
   YARIN IS — Interior Design Studio
   Colours, fonts and spacing live in :root. Change them here.
   ========================================================= */

:root {
  --ink: #141414;
  --paper: #F1F0EC;
  --paper-2: #E8E6E0;
  --plane: #E5E3DD;
  /* Brand colours from the YARIN IS logo. One per word: */
  --sun: #FCBF49;      /* CREATIVE   (official brand yellow) */
  --orange: #F77F00;   /* PERSONAL   (official brand orange) */
  --red: #D62828;      /* PRECISE    (official brand red) */
  --navy: #003049;     /* PASSIONATE (official brand navy, also the logo colour) */
  --cream: #EAE2B7;    /* brand cream, for the logo on dark backgrounds */
  --accent: var(--orange);      /* small details: dots, hovers */
  --accent-text: var(--navy);   /* coloured text that must stay readable */
  --grey: #6B6B66;
  --grey-2: #55554F;
  --text: #3A3A37;
  --muted: #9A9893;
  --line: #C9C7C0;

  --display: "Antonio", sans-serif;
  --body: "Archivo", sans-serif;

  --max: 1360px;
  --gutter: 40px;
  --hdr: 80px;     /* sticky header height: sections are measured to fit the screen below it */
  --section: clamp(32px, 7svh, 110px); /* minimum room above/below; each section is centred in a full screen */

  --ease-out: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-wipe: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* no grey/blue flash on tap (phones) */
a, button { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hdr); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img { display: block; max-width: 100%; }
a { color: var(--ink); }
a:hover { color: var(--accent-text); }
h1, h2, h3, p { margin: 0; }
i { font-style: normal; color: var(--accent); }

.container { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Background grid (drawn by script.js). The hero image edges sit exactly on its lines. */
.bg-grid {
  position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none;
  width: 100%; height: 0; overflow: visible;
  fill: none; stroke: #D6D3CB; stroke-width: 1;
  /* fade out towards the bottom, so the grid never ends with a hard edge */
  /* fades out softly on all four sides */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%),
                      linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%),
              linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
.bg-grid .arc { stroke-width: 1.6; transition: opacity .4s var(--ease-io); }
.bg-grid .arc.is-hidden { opacity: 0; }
.bg-grid .arc--orange { stroke: var(--orange); }
.bg-grid .arc--navy { stroke: var(--navy); }


/* ---------- Type helpers ---------- */
.label { font-size: 12px; letter-spacing: 3px; color: var(--grey); }
.label--dark { color: #8A8A84; }
.h2 { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 5vw, 76px); line-height: .95; }
.link-caps { font-size: 12px; letter-spacing: 2.5px; }
.rule { height: 1px; background: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none;
  padding: 18px 28px; font-size: 12px; letter-spacing: 2.5px; line-height: 1;
  transition: background .3s, color .3s, border-color .3s;
}
.btn--outline { border: 1px solid var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--dark { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn--dark:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(241, 240, 236, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.header__inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 20px; padding-bottom: 20px; }
.logo { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
/* Logo in the same ink as the headlines, one colour, so it reads as part of the type system */
/* The logo is an inline vector (see the <symbol> at the top of index.html); it takes its colour from 'color' */
/* Wordmark only (viewBox ratio 1345:257 ≈ 5.23:1) */
.logo__svg { display: block; height: 28px; width: 147px; transition: opacity .3s; }
.logo:hover { color: var(--ink); }
.logo:hover .logo__svg { opacity: .75; }

.nav { display: flex; align-items: center; gap: 32px; font-size: 12px; letter-spacing: 2.5px; }
.nav a:not(.btn) { text-decoration: none; transition: color .35s var(--ease-io), opacity .35s var(--ease-io); }
/* Hover: no underline; the other words step back to grey, the one under the cursor stays ink */
@media (hover: hover) {
  .nav:has(a:not(.btn):hover) a:not(.btn):not(:hover) { color: var(--grey); opacity: .55; }
}
.nav .btn { padding: 13px 20px; }
.menu-toggle { display: none; }

/* ---------- Hero ---------- */
/* One measure drives the whole hero: the image height (--hero-h). A grid row is a quarter of it.
   - each headline line is exactly one row tall
   - "YARIN IS" overlaps the bottom row of the image; the rotating word sits in the row below
   - the word list ends exactly at the image's bottom edge
   Height follows the screen so the whole headline fits above the fold. */
.hero {
  --hero-h: clamp(300px, min(calc((100vh - var(--hdr) - 64px) / 1.25), 44vw), 640px);
  --hero-h: clamp(300px, min(calc((100svh - var(--hdr) - 64px) / 1.25), 44vw), 640px);
  --row: calc(var(--hero-h) / 4);
  position: relative; display: flex; align-items: flex-start; gap: 40px;
  /* exactly one screen below the header: the hero is 1.25 image-heights tall, the rest is split above and below */
  min-height: calc(100svh - var(--hdr));
  padding-top: max(32px, calc((100svh - var(--hdr) - 1.25 * var(--hero-h)) / 2));
  padding-bottom: max(32px, calc((100svh - var(--hdr) - 1.25 * var(--hero-h)) / 2));
}
.hero__main { flex: 1 1 auto; min-width: 0; position: relative; }
.hero__media { position: relative; height: var(--hero-h); overflow: hidden; }
/* The corner under "YARIN IS" is cut out of the image itself (not covered by a box),
   so the background grid shows behind the headline. Size comes from the grid (--title-w, --row). */
.hero__img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--title-w, 0px) 100%, var(--title-w, 0px) calc(100% - var(--row)), 0 calc(100% - var(--row)));
}
.hero:not([style*="--title-w"]) .hero__img { clip-path: none; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s var(--ease-io);
}
.hero__img.is-active { opacity: 1; }
/* Pulled up by exactly one row, so the headline box's top edge is a grid line */
.hero__bottom { position: relative; display: flex; align-items: flex-start; gap: 0; margin-top: calc(var(--row) * -1); }
.hero__title {
  font-family: var(--display); font-weight: 700;
  /* each line box is 1.1em, so 1.1em = one row */
  font-size: calc(var(--row) / 1.1); line-height: 1.1; letter-spacing: -1px;
  background: transparent; padding: 0 8px 0 24px; min-width: 0;
  /* script.js snaps this width to whole grid columns (--title-w) */
  width: var(--title-w, auto); flex: 0 0 auto; box-sizing: border-box;
}
.hero__line { display: block; overflow: hidden; height: 1.1em; line-height: 1.1em; }
/* script.js centres the visible letters in each grid row (equal space above and below) */
.hero__line, .hero__reel { transform: translateY(var(--title-shift, 0px)); }
.hero__line-in { display: inline-block; animation: up 1.1s .2s var(--ease-wipe) both; }

/* The rotating word: a mask that shows one word at a time */
.hero__reel { display: block; overflow: hidden; height: 1.1em; line-height: 1.1em; font-weight: 200; }
.hero__reel-track { display: block; transition: transform .8s var(--ease-io); }
.hero__reel-track.no-anim { transition: none; }
.hero__word { display: block; height: 1.1em; line-height: 1.1em; padding-bottom: .6em; box-sizing: content-box; white-space: nowrap; }
.hero__word i { font-weight: 700; }
/* Each word's full stop in its own brand colour (5th = copy of the 1st) */
.hero__word:nth-child(1) i, .hero__word:nth-child(5) i { color: var(--sun); }
.hero__word:nth-child(2) i { color: var(--orange); }
.hero__word:nth-child(3) i { color: var(--red); }
.hero__word:nth-child(4) i { color: var(--navy); }

/* The two smaller lines start just below the image, one column to the right of the headline */
/* The two smaller lines fill the grid row under the image and are centred in it: equal space above and below */
.hero__intro { margin-top: var(--row); height: var(--row); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: var(--col, 40px); padding-left: 24px; }
/* Always exactly two lines: each line is kept on one row, and the size shrinks on small screens */
/* Size follows the width, but never more than the grid row allows (two lines + link + 16px air above and below) */
.hero__tagline { font-family: var(--display); font-size: var(--tagline-size, min(clamp(18px, 1.55vw, 26px), calc((var(--row) - 66px) / 2.4))); line-height: 1.2; letter-spacing: .5px; margin-bottom: 20px; }
.hero__tagline-line { display: block; white-space: nowrap; }
.hero__tagline-line--muted { color: var(--grey); }

/* Same height as the image, list pushed to the bottom: the last word ends on the image's bottom edge */
.hero__index { flex: 0 0 160px; height: var(--hero-h); padding-bottom: 14px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.hero__counter { font-family: var(--display); font-size: 13px; letter-spacing: 2px; color: var(--grey); margin-bottom: 16px; }
.hero__counter-current { color: var(--ink); }
.hero__index-btn {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--display); font-size: 18px; letter-spacing: 1px; color: var(--muted);
  transition: color .3s;
}
.hero__index-btn .bar { width: 12px; height: 1px; background: currentColor; transition: width .5s var(--ease-out); }
.hero__index-btn.is-active { color: var(--ink); }
.hero__index-btn.is-active .bar { width: 40px; }
.hero__index-btn[data-index="0"] .bar { background: var(--sun); }
.hero__index-btn[data-index="1"] .bar { background: var(--orange); }
.hero__index-btn[data-index="2"] .bar { background: var(--red); }
.hero__index-btn[data-index="3"] .bar { background: var(--navy); }

/* ---------- (01) Studio ---------- */
.studio { background: var(--paper-2); }
/* Every section is exactly one screen tall below the header, its content centred vertically.
   The last screen is shared: contact on top, footer below (--footer-h is set in script.js). */
.studio, .work, .services, .about, .contact {
  min-height: calc(100svh - var(--hdr)); display: flex; flex-direction: column; justify-content: center;
}
.studio > .container, .about > .container { width: 100%; }
.contact { min-height: calc(100svh - var(--hdr) - var(--footer-h, 0px)); }
.studio__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px; row-gap: clamp(32px, 7svh, 72px); padding-top: var(--section); padding-bottom: var(--section);
}
.studio__grid > .label { grid-column: 1 / span 3; }
.studio__statement {
  grid-column: 4 / span 9;
  font-family: var(--display); font-weight: 200; font-size: clamp(28px, min(3.8vw, 6svh), 56px); line-height: 1.12;
}
.studio__words { grid-column: 1 / -1; }
.studio__words > .label { margin-bottom: 20px; }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.value { position: relative; padding: clamp(22px, 3.8svh, 35px) 0 8px; }
/* The colour line draws in from the left, one column after the other */
.value::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease-wipe) calc(var(--d) + .15s), height .35s var(--ease-out);
}
.value.is-visible::before, html:not(.js) .value::before { transform: scaleX(1); }
.js .value.reveal { transition-delay: var(--d); }
.value i { display: inline-block; color: var(--c); transform-origin: 0 85%; transition: transform .4s var(--ease-out); }
.value > * { transition: opacity .4s var(--ease-io); }
/* Each principle in its own brand colour */
.value:nth-child(1) { --c: var(--sun); --d: 0s; }
.value:nth-child(2) { --c: var(--orange); --d: .1s; }
.value:nth-child(3) { --c: var(--red); --d: .2s; }
.value:nth-child(4) { --c: var(--navy); --d: .3s; }
/* Hover: the line thickens, the full stop grows, the other three step back */
@media (hover: hover) {
  .value:hover::before { height: 6px; }
  .value:hover i { transform: scale(1.6); }
  .values:hover .value:not(:hover) > * { opacity: .38; }
}
.value__num { font-family: var(--display); font-size: 14px; color: var(--grey); margin-bottom: 6px; }
.value__word { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.6svh, 40px); line-height: 1; margin-bottom: clamp(12px, 2.2svh, 20px); }
.value__text { color: var(--text); }

/* ---------- Section heads ---------- */
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.section__head .label { margin-bottom: 16px; }
.section__lead { max-width: 380px; color: var(--grey-2); }

/* ---------- (02) Work ----------
   One measure (--work-s) sets everything: the image is a square of that size, and the list is exactly
   as tall, split into equal rows, so its first line sits on the image's top edge and its last on the bottom. */
.work {
  /* the square image (and the list beside it) is also capped by the screen height, so the whole section fits below the header */
  --work-s: clamp(250px, min(36vw, calc(100svh - var(--hdr) - 2 * var(--section) - 178px)), 560px);
}
.work__layout { display: flex; gap: 56px; margin-top: 40px; align-items: flex-start; }
.work__list {
  flex: 1 1 auto; min-width: 0; height: var(--work-s);
  display: grid; grid-auto-rows: minmax(0, 1fr); border-top: 1px solid var(--line);
}
.project {
  display: flex; align-items: center; gap: 24px; flex-wrap: nowrap; white-space: nowrap;
  padding: 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--muted);
  transition: padding .5s var(--ease-out), color .3s;
}
.project:hover { padding-left: 16px; }
.project.is-active { color: var(--ink); }
.project__num { font-family: var(--display); font-size: 15px; width: 28px; }
/* Name size follows the row height, so four names always fit the image height */
.project__name { font-family: var(--display); font-weight: 700; font-size: min(clamp(36px, 4.6vw, 70px), calc(var(--work-s) / 4 * .48)); line-height: .95; }
/* The place code after the bar, lighter, like the Instagram highlights */
.project__code { font-weight: 200; }
.project__is {
  font-family: var(--display); font-weight: 200; font-size: min(clamp(28px, 3.4vw, 48px), calc(var(--work-s) / 4 * .34)); line-height: 1; color: var(--is-c, var(--accent-text));
  opacity: 0; transform: translateX(-16px); transition: opacity .4s, transform .5s var(--ease-out);
}
.project.is-active .project__is { opacity: 1; transform: none; }
.project__meta { margin-left: auto; flex-shrink: 0; font-size: 11px; letter-spacing: 2.5px; text-align: right; line-height: 1.7; }

.work__preview { flex: 0 0 var(--work-s); }
.work__media { position: relative; width: var(--work-s); aspect-ratio: 1 / 1; overflow: hidden; background: var(--plane); }
.work__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease-io); }
.work__img.is-active { opacity: 1; }

/* "In the making" panel for projects whose images aren't ready yet.
   Same language as the site: grid, one brand arc on its own cell, and the "is ___" line. */
.soon { background: var(--plane); container-type: inline-size; }
.soon__grid { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #D2CFC7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.soon__grid * { vector-effect: non-scaling-stroke; }
.soon__arc { stroke-width: 1.6; }
.soon--orange .soon__arc { stroke: var(--orange); }
.soon--navy .soon__arc { stroke: var(--navy); }
.soon__text { position: absolute; left: 7%; right: 7%; bottom: 7%; }
.soon__name { font-family: var(--display); font-weight: 700; font-size: 13cqw; line-height: .95; color: var(--ink); }
.soon__name span { font-weight: 200; }
.soon__is { font-family: var(--display); font-weight: 200; font-size: 7.5cqw; line-height: 1.1; color: var(--accent-text); margin-top: 1.5cqw; }
.soon--orange .soon__is i { color: var(--orange); }
.soon--navy .soon__is i { color: var(--navy); }
.soon__label { font-size: max(10px, 2.6cqw); letter-spacing: .3em; color: var(--grey); margin-top: 3.5cqw; }

/* ---------- Project gallery (lightbox) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--paper);
  padding: 14px var(--gutter) 14px;
  opacity: 0; transition: opacity .35s var(--ease-io);
}
.lightbox[hidden] { display: none; }
.lightbox:focus { outline: none; }
/* No focus ring after a mouse click; keyboard users still get it */
:focus:not(:focus-visible) { outline: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__bar { display: flex; align-items: center; gap: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lightbox__title { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; white-space: nowrap; }
.lightbox__title span { font-weight: 200; }
.lightbox__count { font-family: var(--display); font-size: 13px; letter-spacing: 2px; color: var(--grey); white-space: nowrap; }
.lightbox__close { margin-left: auto; white-space: nowrap; min-height: 40px; padding: 0 14px; border: 1px solid var(--ink); background: none; cursor: pointer; font-family: var(--body); font-size: 12px; letter-spacing: 2.5px; color: var(--ink); transition: background .3s, color .3s; }
.lightbox__close:hover { background: var(--ink); color: var(--paper); }
/* The image takes the whole stage; only narrow side strips are kept for the arrows */
.lightbox__stage { position: relative; min-height: 0; margin: 12px 0 10px; }
.lightbox__frame { position: absolute; inset: 0 72px; touch-action: pan-y; }
.lightbox__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s var(--ease-io); }
.lightbox__frame img.is-active { opacity: 1; }
.lightbox__frame .soon { position: absolute; inset: 0; margin: auto; height: 100%; max-width: 100%; aspect-ratio: 1 / 1; width: auto; }
/* Thin line arrows, no frame: they just slide a little on hover */
.lightbox__nav {
  position: absolute; top: 50%; z-index: 2; width: 64px; height: 64px; margin-top: -32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; color: var(--ink); opacity: .55;
  transition: opacity .3s, transform .4s var(--ease-out);
}
.lightbox__nav svg { width: 40px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; overflow: visible; }
.lightbox__nav svg * { vector-effect: non-scaling-stroke; }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--prev svg { transform: scaleX(-1); }
.lightbox__nav--next { right: 0; }
.lightbox__nav:hover, .lightbox__nav:focus-visible { opacity: 1; }
.lightbox__nav--prev:hover { transform: translateX(-4px); }
.lightbox__nav--next:hover { transform: translateX(4px); }
.lightbox__nav[hidden] { display: flex; visibility: hidden; }
.lightbox__meta { font-size: 12px; letter-spacing: 2.5px; color: var(--grey-2); text-align: center; }
body.has-lightbox { overflow: hidden; }

/* ---------- (03) Services ---------- */
/* Four cells of one grid, divided by hairlines. Each cell has a small grid tile
   with one brand-colour arc, the same language as the hero background */
.services__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-top: 24px;
}
.service { background: var(--paper); padding: clamp(24px, 5svh, 40px) 32px clamp(28px, 5.5svh, 44px); transition: background .4s var(--ease-io); }
.service:first-child { padding-left: 0; }
.service:last-child { padding-right: 0; }
.service__mark { display: block; width: clamp(44px, 8svh, 64px); height: clamp(44px, 8svh, 64px); overflow: visible; margin-bottom: clamp(20px, 4.5svh, 40px); }
.service__cell { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.service__arc {
  fill: none; stroke: var(--svc); stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-wipe) .25s;
}
.is-visible .service__arc, html:not(.js) .service__arc { stroke-dashoffset: 0; }
.service:hover .service__arc { stroke-width: 3; }
/* the cells stay put; only their content fades in, so no empty grey cell shows while scrolling */
.service__title { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 2.4vw, 38px); line-height: 1; text-transform: uppercase; margin: 0 0 clamp(8px, 2svh, 16px); }
.service__title span { display: block; font-weight: 200; }
.service__text { color: var(--text); margin: 0; max-width: 300px; }

/* ---------- (04) About ---------- */
.about { background: var(--ink); color: var(--paper); padding: var(--section) 0; }
.about__inner { display: flex; gap: 80px; align-items: center; }
.about__photo { position: relative; flex: 0 0 clamp(260px, min(32vw, calc(100svh - var(--hdr) - 2 * var(--section))), 440px); aspect-ratio: 1 / 1; margin: 0; }
/* The photo opens from the centre like an iris, then the arc draws around it */
.about__frame { position: absolute; inset: 4%; border-radius: 50%; overflow: hidden; clip-path: circle(0% at 50% 50%); transition: clip-path 1.5s var(--ease-wipe); }
.about__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.12); transition: transform 1.8s var(--ease-out); }
.about__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.about__arc {
  fill: none; stroke: var(--sun); stroke-width: .36;
  stroke-dasharray: 75.4 400; stroke-dashoffset: 75.4; /* a quarter of the circle (r 48) */ transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.4s var(--ease-wipe) .9s, transform 1.2s var(--ease-io);
}
.about__photo.is-visible .about__frame, html:not(.js) .about__frame { clip-path: circle(50% at 50% 50%); }
.about__photo.is-visible .about__frame img, html:not(.js) .about__frame img { transform: scale(1); }
.about__photo.is-visible .about__arc, html:not(.js) .about__arc { stroke-dashoffset: 0; }
/* Hover: the arc travels a quarter turn around the portrait, the photo leans in slightly */
@media (hover: hover) {
  .about__photo:hover .about__arc { transform: rotate(0deg); }
  .about__photo.is-visible:hover .about__frame img { transform: scale(1.04); transition-duration: .9s; }
}
.about__content { flex: 1 1 auto; min-width: 0; }
.about__content .label { margin-bottom: 16px; }
.about__title { margin-bottom: clamp(18px, 3.6svh, 36px); font-size: clamp(40px, min(5vw, 8.5svh), 76px); }
.about__accent { font-weight: 200; color: var(--sun); }
/* Title: each line rises out of its own mask */
.about__title .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.about__title .ln > span { display: inline-block; }
.js .reveal-lines .ln > span { transform: translateY(110%); transition: transform 1.1s var(--ease-out); }
.js .reveal-lines .ln + .ln > span { transition-delay: .12s; }
.js .reveal-lines.is-visible .ln > span { transform: none; }
.about__lead { font-size: clamp(16px, 2.3svh, 18px); line-height: 1.7; max-width: 620px; color: #E2E0DA; margin-bottom: 20px; }
.about__text { line-height: 1.7; max-width: 620px; color: #B9B7B0; margin-bottom: clamp(20px, 4svh, 40px); }
.about__creds::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #3A3A38; transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-wipe) .2s; }
.about__creds.is-visible::before, html:not(.js) .about__creds::before { transform: scaleX(1); }
.about__creds { position: relative; display: flex; gap: 40px; flex-wrap: wrap; padding-top: clamp(14px, 2.6svh, 24px); font-size: 12px; letter-spacing: 2.5px; color: #8A8A84; }

/* ---------- (05) Contact ---------- */
.contact { padding-top: clamp(16px, 4svh, 110px); padding-bottom: clamp(12px, 3svh, 64px); }
.contact > .label { margin-bottom: clamp(14px, 2.6svh, 24px); }
.contact__line {
  display: flex; align-items: baseline; gap: 0 28px; flex-wrap: wrap;
  font-family: var(--display); font-weight: 700; font-size: clamp(40px, min(9vw, 9.5svh), 148px); line-height: .9;
}
.contact__input {
  flex: 1 1 300px; min-width: 0; width: 100%;
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; outline: none;
  font-family: var(--display); font-weight: 200; font-size: inherit; line-height: .9; color: var(--accent-text);
  padding: 0 0 6px;
}
.contact__input::placeholder { color: #B8B6AF; }
.contact__input:focus { border-bottom-color: var(--orange); }
.contact__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; row-gap: 16px; margin-top: clamp(24px, 4.5svh, 48px); }
.contact__text { font-size: clamp(15px, 1.25vw, 18px); color: var(--text); } /* small enough to sit beside the buttons on laptops */
.contact__buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contact__buttons .link-caps { margin-left: 16px; }

/* ---------- Footer ---------- */
.footer { padding-top: 0; padding-bottom: clamp(14px, 3svh, 40px); font-size: 12px; letter-spacing: 2px; color: var(--grey-2); }
/* Thin line in the four brand colours, the studio's signature */
.footer__signature {
  height: 3px;
  background: linear-gradient(90deg, var(--sun) 0 25%, var(--orange) 25% 50%, var(--red) 50% 75%, var(--navy) 75% 100%);
}
/* Large logo as the sign-off of the page, full container width */
.footer .footer__logo { display: block; color: var(--ink); padding: clamp(14px, 3.5svh, 72px) 0 clamp(12px, 2.6svh, 48px); border-top: 1px solid var(--line); }
/* Footer logo as the colour signature: y a r i n across the brand colours, IS in ink (header logo stays ink) */
.footer__logo { --logo-y: var(--sun); --logo-a: var(--orange); --logo-r: var(--red); --logo-i: var(--navy); --logo-n: var(--navy); }
/* Logo letters rise one after the other when the footer comes into view (see the inline transforms in the symbol) */
.js .footer__logo--rise { --rise: 260px; }
.js .footer__logo--rise.is-visible { --rise: 0px; --rise-delay: .06s; }
/* Hover: the letters lift a little in a wave, as a quiet "back to top" */
@media (hover: hover) {
  .footer__logo--rise.is-visible:hover { --lift: -14px; --rise-delay: .04s; }
}
.footer__logo-svg { display: block; width: 100%; height: auto; aspect-ratio: 1345 / 257; overflow: visible; clip-path: inset(-40px 0 0 0); } /* bottom edge hides the rising letters; room above for the hover lift */
.footer__links { position: relative; display: flex; justify-content: space-between; gap: 12px 36px; flex-wrap: wrap; padding-top: clamp(12px, 2.4svh, 24px); }
.footer__links::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-wipe); }
.footer__logo.is-visible + .footer__links::before, html:not(.js) .footer__links::before { transform: scaleX(1); }
.footer__links > * { transition: color .35s var(--ease-io), opacity .35s var(--ease-io); }
.footer a { color: var(--grey-2); text-decoration: none; }
.footer a:hover { color: var(--ink); }
/* Same quiet hover as the menu: the rest of the row steps back */
@media (hover: hover) {
  .footer__links:has(a:hover) > :not(:hover) { opacity: .45; }
}

/* =========================================================
   Animations
   ========================================================= */
@keyframes up { from { transform: translateY(102%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.reveal-wipe-load { animation: wipe 1.4s var(--ease-wipe) both; }
.fade-in-load { animation: fade .9s .7s ease both; }

/* Scroll reveals: script.js adds .is-visible when an element enters the screen */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Statement: each word rises out of its own line mask, a few ms after the one before */
.js .reveal-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.js .reveal-words .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out) calc(var(--i) * 30ms); }
.js .reveal-words.is-visible .w > span { transform: none; }
/* The clip goes on the children, so the observed frame itself stays detectable */
.js .reveal-wipe > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease-wipe), opacity .7s var(--ease-io); }
.js .reveal-wipe.is-visible > * { clip-path: inset(0 0 0 0); }
.js .reveal-line { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-wipe); }
.js .reveal-line.is-visible { transform: scaleX(1); }
.js .project.reveal { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), padding .5s var(--ease-out), color .3s; }

@media (prefers-reduced-motion: reduce) {
  .js .footer__logo--rise { --rise: 0px; }
  .footer__links::before { transform: none; transition: none; }
  .about__frame, .about__frame img, .about__arc, .js .reveal-lines .ln > span, .about__creds::before { transition: none; }
  .about__frame { clip-path: none; } .about__frame img, .js .reveal-lines .ln > span { transform: none; }
  .about__arc { stroke-dashoffset: 0; } .about__creds::before { transform: none; }
  .js .reveal-words .w > span { transform: none; transition: none; }
  .value::before { transform: scaleX(1); transition: none; }
  .service__arc { stroke-dashoffset: 0; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .reveal-wipe > *, .js .reveal-line { opacity: 1; transform: none; clip-path: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
/* Narrower list column: hide the hover word and wrap the details, so every row keeps the same height */
@media (max-width: 1240px) {
  .project__is { display: none; }
  .project__meta { max-width: 150px; }
}

@media (max-width: 1100px) {
  /* still four columns here, just tighter, so each section stays one screen tall */
  .values { gap: 24px; }
  .value__text { font-size: 15px; line-height: 1.6; }
  .service { padding: 32px 18px 36px; }
  .service__title { font-size: 26px; }
  .service__mark { width: 52px; height: 52px; margin-bottom: 28px; }
  .about__inner { gap: 40px; }
  .about__photo { flex-basis: clamp(220px, calc(100svh - var(--hdr) - 2 * var(--section)), 300px); }
  .about__lead { font-size: 16px; }
  .about__text { font-size: 15px; }
}

/* Hero: stacked layout (headline, then the two lines, then the words) up to 1100px wide */
@media (max-width: 1100px) {
  .hero { flex-direction: column; justify-content: center; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
  .hero {
    --tf: clamp(44px, min(12vw, 10svh), 120px);
    --hero-h: clamp(180px, calc(100svh - var(--hdr) - 196px - 2.37 * var(--tf)), 560px);
  }
  .hero__title { font-size: var(--tf); width: auto; padding: 20px 24px 0 0; background: var(--paper); }
  .hero__bottom { margin-top: -64px; flex-direction: column; align-items: flex-start; }
  .hero__intro { max-width: none; margin: 20px 0 0; padding-left: 0; height: auto; display: block; }
  .hero__tagline { font-size: clamp(14px, 4.2vw, 22px); }
  .hero__index { height: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 18px; flex-basis: auto; }
  .hero__index { padding-bottom: 0; }
  .hero__counter { width: 100%; margin-bottom: 4px; }
  .hero__index-btn .bar { display: none; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; --section: clamp(56px, 9svh, 96px); --hdr: 84px; }
  .logo__svg { height: 24px; width: 126px; }
  .footer .footer__logo { padding: 48px 0 32px; }
  .footer__links { justify-content: flex-start; row-gap: 0; }
  .footer__links > * { padding: 11px 0; } /* 44px tap areas, the rows simply sit closer */
  .menu-toggle {
    display: block; min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); background: none;
    font-family: var(--body); font-size: 12px; letter-spacing: 2.5px; cursor: pointer; color: var(--ink);
  }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 22px;
    padding: 24px var(--gutter) 32px; background: var(--paper); border-bottom: 1px solid var(--ink);
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 10px 0; }
  /* Comfortable tap areas without changing the visual spacing */
  .logo { padding: 10px 0; margin: -10px 0; }
  .link-caps { display: inline-block; padding: 12px 0; margin: -12px 0; }


  .studio__grid { row-gap: 40px; }
  .studio__grid > .label, .studio__statement { grid-column: 1 / -1; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .work__layout { flex-direction: column-reverse; gap: 8px; }
  .work__preview { flex-basis: auto; width: 100%; padding-top: 24px; }
  .work__media { width: 100%; }
  .work__list { height: auto; grid-auto-rows: auto; }
  .project { padding: 24px 0; }
  .project__is { display: none; }
  /* details always on their own line under the name, so every row has the same rhythm */
  .project { row-gap: 6px; flex-wrap: wrap; align-items: baseline; }
  .project__meta { margin-left: 52px; width: 100%; text-align: left; }

  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service, .service:first-child, .service:last-child { padding: 36px 28px 40px; }
  .service:nth-child(odd) { padding-left: 0; }
  .service:nth-child(even) { padding-right: 0; }

  .about__inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .about__photo { flex-basis: auto; max-width: 440px; }

  .contact__buttons .btn { flex: 1 1 auto; text-align: center; }
  .lightbox__title { font-size: 22px; }
  .lightbox__bar { gap: 14px; }
  .lightbox__count { font-size: 11px; letter-spacing: 1.5px; }
  /* phones: image full width, arrows in a row underneath */
  .lightbox__frame { inset: 0 0 56px; }
  .lightbox__nav { top: auto; bottom: 0; margin-top: 0; width: 56px; height: 48px; }
  .lightbox__nav--prev { left: calc(50% - 64px); }
  .lightbox__nav--next { right: calc(50% - 64px); }
  .contact__buttons .link-caps { margin: 12px 0 0; }
}

@media (max-width: 360px) {
  /* the word list wraps to three lines on the narrowest phones: give the image that space back */
  .hero { --hero-h: clamp(148px, calc(100svh - var(--hdr) - 262px - 2.37 * var(--tf)), 560px); }
}

@media (max-width: 560px) {
  .values, .services__grid { grid-template-columns: 1fr; }
  .service, .service:nth-child(n) { padding: 32px 0 36px; }
  .service__mark { margin-bottom: 28px; }
}


/* Wide but short windows (small laptops): a little less air on the last screen so the full-width logo still fits */
@media (min-width: 1101px) and (max-height: 700px) {
  .contact > .label { margin-bottom: 10px; }
  .contact__bottom { margin-top: 16px; }
  .footer__links { padding-top: 10px; }
}