/* Colour Shift theme: loads after main.css on every page. */
:root { --ink-card: #0A0A0A; }
body { transition: none; }

/* ---------- Colour shift: sections hand their colour to the page ---------- */
.shift main > section, .shift main > .band { background: transparent; }
.shift .band { color: inherit; border-color: currentColor; }
.section--gold { background: #131313; color: var(--paper); }
.section--gold .label::before, .cta .label::before { background: var(--gold); }
.section--gold .section-top p:not(.label) { color: var(--grey-light); }
.section--gold .reach, .section--gold .reach div { border-color: var(--line); }
.section--gold .reach dd, .section--gold .lead { color: var(--grey-light); }
.site-footer { position: relative; background: var(--ink); color: var(--paper); }

/* While the page colour changes, text follows it, so nothing disappears */
.shift main > section:not(.stage) { color: inherit; }
.shift main > section:not(.stage) :is(p:not(.work-where):not(.alert), dd, dt, li, .row-desc, .row-num, .team-role, .team-num, .faq-body, .faq summary, .lead, .text-link, .label) { color: inherit; }
.shift main > section:not(.stage) .work-where { color: var(--gold); }
.shift .row-desc, .shift .team-num, .shift .row-num { opacity: .78; }
.shift .step-num, .shift .cities li { -webkit-text-stroke-color: currentColor; }
.shift .tech-tile svg, .shift .tech-tile span { color: inherit; }
.shift .tech-grid, .shift .tech-tile, .shift .rows, .shift .row, .shift .tiles, .shift .tile, .shift .team-list, .shift .team-row, .shift .faq, .shift .faq details, .shift .list, .shift .list li, .shift .reach, .shift .reach div { border-color: color-mix(in srgb, currentColor 22%, transparent); }

/* ---------- Header follows the section behind it ---------- */
.site-header { color: var(--paper); transition: color .35s, background-color .35s; }
.site-header.is-scrolled { background: var(--hbg, var(--ink)); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.site-header .logo b { color: inherit; }
.site-header .logo .arch { color: var(--gold); }
.site-header .nav a, .site-header .lang summary { color: inherit; }
.site-header .lang summary { border-color: currentColor; }
.site-header .menu-toggle { border-color: currentColor; }
.site-header .menu-toggle span { background: currentColor; }
.site-header[data-on="gold"] .logo .arch { color: var(--ink); }
.site-header[data-on="gold"] .btn--gold { background: var(--ink); color: var(--gold); }
.site-header[data-on="gold"] .nav a::after { background: var(--ink); }
.site-header.menu-open { background: var(--ink); color: var(--paper); }
.site-header.menu-open .logo .arch { color: var(--gold); }
@media (max-width: 1100px) { .site-header .nav a { color: var(--paper); } }

/* ---------- Type ---------- */
h2 { font-size: clamp(2.8rem, 9.4vw, 12rem); line-height: .88; letter-spacing: -.05em; word-spacing: .08em; }
.page-hero h1 { font-size: clamp(3rem, 11.4vw, 14rem); line-height: .86; letter-spacing: -.055em; max-width: none; }
.page-hero { border-bottom: 0; }
.big-text { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 2.5rem); line-height: 1.2; letter-spacing: -.02em; max-width: 36em; }
.statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px clamp(32px, 6vw, 96px); align-items: start; }
.statement .label { margin: .5em 0 0; }
@media (max-width: 860px) { .statement { grid-template-columns: 1fr; } .statement .label { margin: 0; } }
.included h2, .faq-wrap h2 { font-size: clamp(2.2rem, 4.3vw, 5.6rem); line-height: .94; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }

/* ---------- Hero stage ---------- */
.stage { position: relative; min-height: 100svh; overflow: hidden; color: var(--paper); }
.film { position: absolute; inset: 0; overflow: hidden; background: #000; clip-path: inset(33% 4% 33% 50%); will-change: clip-path; }
.film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.film video { opacity: 0; transition: opacity 1s; }
.film video.is-playing { opacity: 1; }
.stage .stage-title { position: absolute; inset: 0; z-index: 2; margin: 0; font-size: 14vw; line-height: .84; letter-spacing: -.055em; pointer-events: none; }
.stage .stage-title span { position: absolute; white-space: nowrap; will-change: transform; }
html[lang="fr"] .stage .stage-title { font-size: 11.8vw; }
.stage .l1 { left: var(--gutter); top: calc(var(--header-h) + 1svh); }
.stage .l2 { left: var(--gutter); top: 50%; margin-top: -3.2vw; font-size: 6.5vw; letter-spacing: -.035em; word-spacing: .12em; }
html[lang="fr"] .stage .l2 { font-size: 5.4vw; }
.stage .l3 { right: var(--gutter); bottom: 6svh; }
.stage-after { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 44px; z-index: 3; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.stage-after .lead { max-width: 34em; color: #fff; font-weight: 500; line-height: 1.25; }
.stage-after .btn-row { flex: none; padding-right: 72px; }
.has-stage .stage-after { opacity: 0; visibility: hidden; }
@media (max-width: 900px), (hover: none) {
  .stage { display: flex; flex-direction: column; gap: 20px; padding: calc(var(--header-h) + 16px) var(--gutter) 28px; justify-content: flex-end; }
  .film { position: relative; order: 2; inset: auto; clip-path: none; aspect-ratio: 16 / 10; width: 100%; flex: none; }
  .stage .stage-title { position: static; order: 1; font-size: 13.4vw; line-height: .9; }
  html[lang="fr"] .stage .stage-title { font-size: 11vw; }
  .stage .stage-title span { position: static; display: block; transform: none; }
  .stage .l2, html[lang="fr"] .stage .l2 { font-size: inherit; margin-top: 0; letter-spacing: inherit; word-spacing: normal; }
  .stage-after { position: static; order: 3; flex-direction: column; align-items: flex-start; }
  .stage-after .btn-row { padding-right: 0; }
}

/* ---------- Moving service names ---------- */
.band { padding-block: clamp(10px, 1.1vw, 18px); border-block: 1px solid currentColor; }
.band-track span { font-size: clamp(1.25rem, 2.6vw, 3rem); line-height: 1; letter-spacing: -.03em; gap: .6em; padding-right: .6em; }
.band-track span::after { background: currentColor; }

/* ---------- Projects: black cards on gold ---------- */
.home-work.section--gold .work-card, .home-work.section--gold .work-card:nth-child(even) { background: #1B1B1B; color: var(--paper); border: 1px solid var(--line); border-radius: 28px; }
.home-work.section--gold .work-info p:not(.work-where) { color: var(--grey-light); }
.home-work.section--gold .btn--line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.home-work.section--gold .btn--line { color: var(--paper); }
@media (max-width: 900px) { .home-work.section--gold .work-card { padding: 16px; } }

/* ---------- Service rows ---------- */
.row { grid-template-columns: 52px minmax(0, 1.6fr) minmax(0, 1fr) 52px; padding: clamp(12px, 1.3vw, 22px) 0; }
.row-title { font-size: clamp(1.8rem, 5.4vw, 7rem); transition: transform .5s var(--ease); }
@media (hover: hover) { .row:hover .row-title { transform: translateX(.3em); } }
@media (max-width: 860px) { .row { grid-template-columns: 34px minmax(0, 1fr) 44px; padding: 16px 0; } }

/* ---------- Team on off-white ---------- */
.section--paper .team-list, .section--paper .team-row { border-color: var(--line-dark); }
.section--paper .team-role { color: #4E4C47; }
.section--paper .team-row--founder .team-role { color: var(--ink); font-weight: 700; }
.section--paper .team-num { color: #6D6B65; }
.team-row--founder .team-name { font-size: clamp(2.3rem, 7.6vw, 10rem); line-height: .94; }
.team-name { font-size: clamp(1.7rem, 4vw, 5rem); }

/* ---------- Tool logo wall ---------- */
.tech-tile > a { color: inherit; }

/* ---------- Contact ---------- */
.cta h2 { font-size: clamp(5rem, 22vw, 28rem); line-height: .8; letter-spacing: -.07em; }
.cta-arch { opacity: .1; width: min(80vw, 1400px); right: -10vw; }

/* Boxes with their own background keep their own text colour */
.shift main > section:not(.stage) .callout, .shift main > section:not(.stage) .callout :is(p, li) { color: #1C1913; }
.shift main > section:not(.stage) .callout .label { color: #7A5900; }

/* Team heading: same format as the studio text */
.team .section-top { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px clamp(32px, 6vw, 96px); align-items: start; }
.team .section-top .label { grid-column: 1; margin-top: .5em; }
.team .section-top h2 { grid-column: 2; font-weight: 600; text-transform: none; font-size: clamp(1.25rem, 2vw, 2.5rem); line-height: 1.2; letter-spacing: -.02em; word-spacing: normal; }
@media (max-width: 860px) { .team .section-top { grid-template-columns: 1fr; } .team .section-top .label, .team .section-top h2 { grid-column: 1; margin-top: 0; } }
@media (max-width: 760px) { .team-row--founder .team-name { font-size: 7.2vw; } .team-name { font-size: 6.4vw; } }

/* Team cards: anonymous portraits until real photos are supplied */
.tm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(14px, 1.7vw, 30px); }
.tm-photo { aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: #1A1A1A; margin-bottom: 18px; }
.tm-photo svg { display: block; width: 100%; height: 100%; fill: #303030; transition: transform .9s var(--ease); }
.tm-card:hover .tm-photo svg { transform: scale(1.05); }
.tm-name { font-size: clamp(1.15rem, 1.6vw, 1.9rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.shift main > section:not(.stage) .tm-role, .tm-role { margin-top: 6px; color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: clamp(.72rem, .78vw, .92rem); letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 900px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shift main > section:not(.stage) .tm-grid .tm-card p.tm-role { color: var(--gold); }

/* Service rows: an image appears behind the text on hover, other rows fade back */
.row-float { position: fixed; left: 0; top: 0; z-index: 5; width: clamp(240px, 21vw, 400px); aspect-ratio: 3 / 4; margin: calc(clamp(240px, 21vw, 400px) * -.667) 0 0 calc(clamp(240px, 21vw, 400px) * -.5); overflow: hidden; border-radius: 16px; background: #000; pointer-events: none; visibility: hidden; will-change: transform; }
.row-float img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .35s; filter: grayscale(1) contrast(1.05) brightness(.82); }
.row-float img.on { opacity: 1; }
.has-preview .rows { position: relative; z-index: 6; }
.has-preview .row { transition: opacity .3s, color .25s; }
.has-preview .row::before { display: none; }
.has-preview .rows.is-hover .row { opacity: .22 !important; transition: opacity .3s !important; }
.has-preview .rows.is-hover .row.is-on { opacity: 1 !important; }
.has-preview .row:hover, .has-preview .row:hover .row-num, .has-preview .row:hover .row-desc { color: inherit; }
.has-preview .row:hover .row-arrow { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* No full-screen yellow: gold is an accent only */
.cta { background: #131313; color: var(--paper); border-top: 1px solid var(--line); }
.cta .contact-grid { border-top-color: var(--line); }
.cta .field label, .cta .chips legend, .cta .contact-aside dt { color: var(--grey-light); }
.cta .field input, .cta .field textarea, .cta .phone-wrap, .cta .phone-wrap input[type="tel"] { color: var(--paper); border-color: rgba(255, 255, 255, .28); }
.cta .field input::placeholder, .cta .field textarea::placeholder { color: rgba(255, 255, 255, .5); }
.cta .field input:focus, .cta .field textarea:focus, .cta .phone-wrap:focus-within { border-color: var(--gold); }
.cta .dial-btn { color: var(--paper); border-right-color: rgba(255, 255, 255, .28); }
.cta .dial-btn img { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25); }
.shift main > section:not(.stage) .cta-note, .cta .form-note { color: var(--grey-light); }
.cta .form-note a { color: var(--paper); text-decoration-color: var(--gold); }
.cta .contact-aside dd a { border-bottom-color: var(--gold); }
.cta .alert--ok { background: var(--gold); color: var(--ink); }
.cta-arch { color: var(--gold); opacity: .07; }
.curtain { background: var(--ink); }
.curtain svg { color: var(--gold); }
.post-card--cta { background: #1B1B1B; color: var(--paper); border: 1px solid var(--line); }

/* Phones skip the intro loader */
@media (max-width: 900px) { .loader { display: none; } }

/* ---------- Services page ---------- */
.sx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.sx-stage { display: none; }
.sx-list { grid-column: 1 / -1; }
.sx-group { padding-block: clamp(40px, 6vw, 96px) clamp(20px, 2.5vw, 40px); }
.sx-group h2 { font-size: clamp(2.2rem, 4.4vw, 5.6rem); line-height: .94; margin-top: 16px; }
.sx-intro { max-width: 34em; margin-top: 16px; }
.sx-item { display: block; padding-block: clamp(28px, 3.4vw, 56px); border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.sx-photo { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 14px; margin-bottom: 22px; background: #1B1B1B; }
.sx-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sx-num { display: block; color: var(--gold); font-family: var(--font-display); font-weight: 800; font-size: .88rem; letter-spacing: .1em; margin-bottom: 12px; }
.sx-item h3 { font-size: clamp(1.9rem, 3.6vw, 4.4rem); font-weight: 900; text-transform: uppercase; line-height: .96; letter-spacing: -.04em; transition: color .25s; }
.sx-item > p { max-width: 34em; margin-top: 14px; font-size: clamp(1.02rem, 1.2vw, 1.3rem); line-height: 1.4; }
.sx-incl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sx-incl li { padding: 7px 13px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 99px; font-size: .86rem; line-height: 1.2; }
.sx-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-family: var(--font-display); font-weight: 800; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; border-bottom: 2px solid var(--gold); padding-bottom: 4px; }
.sx-more svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.sx-item:hover h3 { color: var(--gold); }
.sx-item:hover .sx-more svg { transform: translateX(6px); }
.has-sx .sx-stage { display: block; position: sticky; top: calc(var(--header-h) + 16px); height: calc(100svh - var(--header-h) - 40px); overflow: hidden; border-radius: 20px; background: #1B1B1B; }
.has-sx .sx-stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1), transform 1.4s var(--ease); }
.has-sx .sx-stage img.on { clip-path: inset(0 0 0 0); transform: scale(1); z-index: 1; }
.has-sx .sx-list { grid-column: 2; }
.has-sx .sx-photo { display: none; }
.has-sx .sx-item { min-height: 62svh; display: flex; flex-direction: column; justify-content: center; opacity: .32; transition: opacity .45s; }
.has-sx .sx-item > * { flex: none; align-self: flex-start; }
.has-sx .sx-item.is-on { opacity: 1; }

/* The owner's hover images keep their own colours */
.row-float img[src*="-hover"] { filter: none; }
.row-float img[src*="seo-hover"] { object-fit: contain; }

/* ---------- Site-wide type scale and rhythm ---------- */
main .section { padding-block: clamp(64px, 7vw, 116px); }
main .section-top { margin-bottom: clamp(32px, 4vw, 60px); gap: 16px clamp(32px, 6vw, 96px); }
main h2 { font-size: clamp(1.9rem, 4.1vw, 4.6rem); line-height: 1; letter-spacing: -.03em; word-spacing: normal; }
main .team .section-top h2 { font-size: clamp(1.25rem, 2vw, 2.5rem); line-height: 1.2; letter-spacing: -.02em; }
main .faq-wrap h2 { font-size: clamp(1.7rem, 3vw, 3.2rem); margin-top: 16px; }
main .cta h2 { font-size: clamp(3rem, 8vw, 7.5rem); line-height: .92; letter-spacing: -.045em; }
main .cta { padding-block: clamp(64px, 7vw, 116px); }
main .row { padding: clamp(10px, 1vw, 16px) 0; grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1fr) 44px; }
main .row-title { font-size: clamp(1.35rem, 2.5vw, 2.8rem); line-height: 1; letter-spacing: -.03em; }
main .row-arrow { width: 44px; height: 44px; }
main .band { padding-block: 10px; }
main .band-track span { font-size: clamp(1rem, 1.7vw, 1.9rem); }
main .step-num { font-size: clamp(2.2rem, 3.4vw, 3.6rem); margin-bottom: 14px; }
main .cities { font-size: clamp(1.5rem, 2.8vw, 3rem); line-height: 1.02; letter-spacing: -.03em; }
main .morocco { margin-top: clamp(24px, 3vw, 44px); }
main .tile h3 { margin-top: 18px; }
main .tile { padding: clamp(20px, 2.2vw, 32px); }
main .tech-tile { aspect-ratio: 2 / 1; }
main .work-info h3 { font-size: clamp(1.5rem, 2.4vw, 2.6rem); }
.tm-role { font-size: clamp(.78rem, .82vw, .95rem); }
.footer-mark { font-size: 5.6cqi; margin-bottom: 24px; }

/* Hero */
.stage .film { clip-path: inset(27% 4% 25% 46%); }
.stage .stage-title { font-size: 8.8vw; line-height: .9; letter-spacing: -.045em; }
html[lang="fr"] .stage .stage-title { font-size: 8.2vw; }
.stage .l2, html[lang="fr"] .stage .l2 { font-size: 3.7vw; margin-top: -1.9vw; letter-spacing: -.03em; word-spacing: .08em; }
.stage .l1 { top: calc(var(--header-h) + 5.5svh); }
.stage .l3 { bottom: 7svh; }
.stage-tag { position: absolute; left: var(--gutter); top: calc(var(--header-h) + 1svh); z-index: 3; margin: 0; color: var(--paper); font-size: clamp(.68rem, .78vw, .86rem); }
.has-stage .stage-tag { will-change: opacity; }
@media (max-width: 900px), (hover: none) {
  .stage .film { clip-path: none; }
  .stage .stage-title, html[lang="fr"] .stage .stage-title { font-size: 11.6vw; line-height: .96; }
  html[lang="fr"] .stage .stage-title { font-size: 10.2vw; }
  .stage .l2, html[lang="fr"] .stage .l2 { font-size: inherit; margin-top: 0; letter-spacing: inherit; word-spacing: normal; }
  .stage-tag { position: static; order: 0; }
  main h2 { font-size: 8.2vw; }
  main .cta h2 { font-size: 15vw; }
  main .row { grid-template-columns: 30px minmax(0, 1fr) 40px; }
  main .row-title { font-size: 6.2vw; }
  main .row-arrow { width: 40px; height: 40px; }
  main .tech-tile { aspect-ratio: 16 / 10; }
}

/* ---------- Same type scale on inner pages ---------- */
main .page-hero { padding: calc(var(--header-h) + clamp(32px, 4.5vw, 72px)) 0 clamp(32px, 4vw, 60px); }
main .page-hero h1 { font-size: clamp(2.2rem, 5.6vw, 6rem); line-height: 1; letter-spacing: -.035em; margin: 18px 0 clamp(18px, 2.2vw, 32px); max-width: 22ch; }
main .included h2, main .chapter-head h2, main .sx-group h2, main .brief-cta h2 { font-size: clamp(1.7rem, 3vw, 3.2rem); line-height: 1; letter-spacing: -.03em; margin-top: 16px; }
main .sx-item h3, main .ppanel h3, main .svc-card--feature h3 { font-size: clamp(1.35rem, 2.5vw, 2.8rem); line-height: 1; letter-spacing: -.03em; }
main .reach--dark dt { font-size: clamp(1.2rem, 2.2vw, 2.2rem); }
main .next-case-title { font-size: clamp(1.7rem, 4.1vw, 4.6rem); line-height: 1; letter-spacing: -.03em; }
main .prose h2 { font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -.02em; }
main .not-found h1 { font-size: clamp(1.9rem, 4.1vw, 4.6rem); }
.page-hero h1.reveal, main .page-hero h1 { word-spacing: normal; }
@media (max-width: 900px) {
  main .page-hero h1 { font-size: 7.6vw; line-height: 1.04; }
  main .included h2, main .chapter-head h2, main .sx-group h2, main .brief-cta h2 { font-size: 7vw; }
  main .sx-item h3, main .ppanel h3, main .svc-card--feature h3 { font-size: 6.2vw; }
  main .next-case-title { font-size: 8.2vw; }
  main .prose h2 { font-size: 5.8vw; }
}

/* ---------- Short answer block on service pages ---------- */
.answer-body { display: grid; gap: 1.1em; font-size: clamp(1.05rem, 1.25vw, 1.3rem); line-height: 1.55; max-width: 62ch; }
.answer-body a { text-decoration: underline; text-underline-offset: .18em; }
.answer-body a:hover { color: var(--gold); }

/* ---------- Blog contact card on its dark background ---------- */
.post-card--cta:hover { background: #242424; }
.post-card--cta .post-cat { color: var(--gold); }
.post-card--cta p, .post-card--cta:hover h3, .post-card--cta .post-foot { color: var(--paper); }
.post-card--cta .row-arrow { border-color: rgba(244, 242, 237, .3); color: var(--paper); }
.post-card--cta:hover .row-arrow { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* ---------- Hero words keep the display style now the keyword line is the h1 ---------- */
.stage-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; }
.stage-tag { line-height: 1.6; }

/* ---------- Hero intro stays readable on bright video frames ---------- */
.has-stage .stage-after::before { content: ""; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); bottom: -44px; height: calc(100% + 150px); z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(10, 10, 10, .86), rgba(10, 10, 10, .62) 58%, rgba(10, 10, 10, 0)); }

/* ---------- Moving band: gold text only ---------- */
.band-track span { color: var(--gold); }
.band-track span::after { background: var(--paper); }

/* ---------- Process: a gold line runs through the steps ---------- */
.process.has-line li { position: relative; padding-top: 34px; }
.step-line { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: color-mix(in srgb, currentColor 14%, transparent); }
.process li:first-child .step-line { border-radius: 4px 0 0 4px; }
.process li:last-child .step-line { border-radius: 0 4px 4px 0; }
.step-line i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
@media (max-width: 900px) { .step-line { border-radius: 4px; } }

/* ---------- Projects: screens lift when the mouse is over them ---------- */
@media (hover: hover) and (pointer: fine) {
  .work-browser, .work-phone { transition: translate .7s cubic-bezier(.2, .8, .2, 1); }
  .work-card:hover .work-browser { translate: 0 -12px; }
  .work-card:hover .work-phone { translate: 0 -34px; }
}