@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Mono:wght@400;500&display=swap');

:root {
  --paper: #f5f5f5;
  --black: #000;
  --ink: #151515;
  --muted: #5c5c5c;
  --green: #36503f;
  --lime: #f8fa8d;
  --white: #fff;
  --line: rgba(0,0,0,.19);
  --wrap: min(100% - 3.75rem, 81.25rem);
  --display: clamp(3.1rem, 5.45vw, 5rem);
  --h2: clamp(2.25rem, 3.25vw, 3.75rem);
  --h3: clamp(1.45rem, 1.8vw, 2.05rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Inter Tight", Arial, sans-serif; font-size: 1rem; line-height: 1.42; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img, video { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-shell { overflow: clip; }
.container { width: var(--wrap); margin: 0 auto; }
.eyebrow { margin: 0 0 1.1rem; color: inherit; font-family: "DM Mono", monospace; font-size: .68rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.eyebrow--lime { color: var(--lime); }
.section { padding: clamp(5rem, 9vw, 9rem) 0; }
.section--tight { padding: clamp(3.75rem, 7vw, 6.5rem) 0; }
.section--about-intro { padding-bottom: clamp(1.8rem, 3vw, 2.75rem); }
.section--about-film { padding-top: clamp(1.8rem, 3vw, 2.75rem); }
.display { margin: 0; font-size: var(--display); font-weight: 500; line-height: .97; letter-spacing: -.065em; }
.heading { margin: 0; font-size: var(--h2); font-weight: 500; line-height: .99; letter-spacing: -.058em; }
.copy { margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.48; }
.copy + .copy { margin-top: 1rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .75rem; font-size: 1rem; font-weight: 600; }
.link-arrow::after { content: "↗"; font-size: 1.08rem; transition: transform .25s ease; }
.link-arrow:hover::after { transform: translate(.22rem,-.22rem); }
.btn { min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: .82rem 1.15rem; border: 1px solid transparent; font-size: 1rem; font-weight: 600; line-height: 1; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.btn:hover { transform: translateY(-.18rem); }
.btn::after { content: "↗"; font-size: .98rem; }
.btn--lime { color: var(--black); background: var(--lime); }
.btn--light { color: var(--black); background: var(--white); }
.btn--green { color: var(--lime); background: var(--green); }
.btn--outline { color: inherit; border-color: currentColor; background: transparent; }

/* Navigation */
.site-header { position: absolute; z-index: 20; inset: 0 0 auto; min-height: 5.38rem; color: var(--white); }
.site-header--light { position: relative; color: var(--black); background: var(--paper); border-bottom: 1px solid var(--line); }
.nav { width: var(--wrap); min-height: 5.38rem; margin: 0 auto; display: flex; align-items: center; gap: 1.7rem; }
.brand { flex: 1 1 auto; display: grid; gap: .24rem; align-content: center; min-width: 12rem; font-size: 1rem; font-weight: 600; letter-spacing: normal; line-height: 1; }
.brand span { display: block; white-space: nowrap; }
.brand small { display: block; margin: 0; font-family: "DM Mono", monospace; font-size: .5rem; font-weight: 500; letter-spacing: .02em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 1.65rem; }
.nav-links a { display: inline-flex; align-items: center; gap: .36rem; font-size: 1rem; font-weight: 600; }
.nav-links a:hover { color: var(--lime); }
.site-header--light .nav-links a:hover { color: var(--green); }
.nav-links a[aria-current="page"]::after { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: var(--lime); }
.site-header--light .nav-links a[aria-current="page"]::after { background: var(--green); }
.nav-cta { flex: 0 0 auto; min-width: 10.2rem; }
.studio-entry-button { flex: 0 0 auto; min-height: 2.55rem; padding: .52rem .78rem; border: 1px solid var(--lime); color: var(--black); background: var(--lime); font: 600 .76rem/1 "DM Mono", monospace; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
.studio-entry-button:hover { color: var(--white); background: var(--green); }
.site-header--light .studio-entry-button { color: var(--white); background: var(--green); border-color: var(--green); }
.site-header--light .studio-entry-button:hover { color: var(--green); background: var(--lime); border-color: var(--lime); }
.nav-toggle { display: none; width: 2.9rem; height: 2.9rem; align-items: center; justify-content: center; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.nav-toggle i, .nav-toggle::before, .nav-toggle::after { display: block; width: 1.55rem; height: 1px; background: currentColor; content: ""; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle i { margin: .4rem 0; }
body.menu-open .nav-toggle::before { transform: translateY(.45rem) rotate(45deg); }
body.menu-open .nav-toggle i { opacity: 0; }
body.menu-open .nav-toggle::after { transform: translateY(-.45rem) rotate(-45deg); }
.mobile-menu { position: fixed; z-index: 19; inset: 0; display: none; background: var(--green); color: var(--white); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu__inner { min-height: 100%; width: var(--wrap); margin: 0 auto; padding: 8.6rem 0 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.mobile-menu nav { display: grid; gap: .6rem; }
.mobile-menu nav a { font-size: clamp(2.5rem, 11vw, 4.3rem); font-weight: 500; line-height: .96; letter-spacing: -.07em; }
.mobile-menu__meta { color: rgba(255,255,255,.68); font-size: .95rem; }

/* Footer */
.site-footer { background: var(--white); color: var(--muted); }
.footer-top { width: var(--wrap); margin: 0 auto; padding: 5.8rem 0 4.3rem; display: grid; grid-template-columns: 1.1fr 1fr .82fr; gap: 3rem; }
.footer-brand { color: var(--green); font-size: 1.78rem; font-weight: 600; letter-spacing: -.075em; line-height: .93; }
.footer-brand > span { display: block; }
.footer-brand small { display: block; margin-top: .6rem; color: var(--muted); font-family: "DM Mono", monospace; font-size: .6rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.footer-title { margin: 0 0 1rem; color: var(--green); font-family: "DM Mono", monospace; font-size: .68rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 2rem; }
.footer-links a:hover { color: var(--green); }
.footer-subscribe { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid rgba(54,80,63,.35); }
.footer-subscribe span { min-width: 0; padding: .6rem 0; }
.footer-subscribe b { align-self: center; font-size: 1.2rem; }
.footer-bottom { width: var(--wrap); margin: 0 auto; padding: 1.15rem 0 1.5rem; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); color: #777; font-family: "DM Mono", monospace; font-size: .64rem; }
.footer-company, .footer-legal { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; }
.footer-legal { justify-content: flex-end; }
.footer-legal a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2rem; transition: color .2s ease, text-decoration-color .2s ease; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--green); text-decoration-color: currentColor; }

/* Legal information */
.legal-page { max-width: 58rem; }
.legal-page .heading { max-width: 14ch; }
.legal-updated { margin: .9rem 0 0; color: var(--muted); font: .66rem "DM Mono", monospace; letter-spacing: .03em; text-transform: uppercase; }
.legal-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.legal-section h2 { margin: 0 0 1rem; color: var(--green); font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.04em; }
.legal-section h3 { margin: 1.5rem 0 .55rem; font-size: 1.08rem; font-weight: 600; }
.legal-section p, .legal-section li { color: var(--muted); font-size: 1.02rem; line-height: 1.58; }
.legal-section p { margin: 0 0 1rem; }
.legal-section ul { margin: .6rem 0 1rem; padding-left: 1.2rem; }
.legal-section a { color: var(--green); text-decoration: underline; text-underline-offset: .18rem; }
.legal-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 2rem; margin: 1.4rem 0 0; }
.legal-facts div { padding-top: .85rem; border-top: 1px solid var(--line); }
.legal-facts span { display: block; margin-bottom: .22rem; color: var(--muted); font: .64rem "DM Mono", monospace; letter-spacing: .03em; text-transform: uppercase; }
.legal-facts strong { font-size: 1rem; font-weight: 500; }

/* Home: same layout rhythm as Areto Home Two */
.home-hero-wrap { position: relative; z-index: 1; }
.home-hero { position: relative; min-height: min(56.8rem, 100svh); overflow: hidden; color: var(--white); background: var(--black); }
.home-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .66; filter: saturate(.82) contrast(1.04); }
.home-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.53) 46%, rgba(0,0,0,.16) 100%), linear-gradient(0deg, rgba(0,0,0,.44), transparent 52%); }
.home-hero__inner { position: relative; z-index: 2; width: var(--wrap); min-height: min(56.8rem,100svh); margin: 0 auto; padding: 10.7rem 0 3.5rem; display: grid; grid-template-columns: minmax(0, .88fr) minmax(18rem, .45fr); gap: 3rem; align-items: center; }
.hero-copy { align-self: center; max-width: 34rem; }
.hero-copy .display { max-width: 11.5ch; }
.hero-copy .btn { margin-top: 1.65rem; }
.hero-side { align-self: end; display: grid; gap: 2.25rem; justify-self: end; width: min(100%, 23.5rem); }
.hero-side__text { margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 1.24; letter-spacing: -.034em; }
.hero-keywords { display: grid; gap: .65rem; padding: 0; margin: 0; list-style: none; counter-reset: item; }
.hero-keywords li { display: flex; gap: .8rem; align-items: center; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.4); font-family: "DM Mono", monospace; font-size: .67rem; text-transform: uppercase; }
.hero-keywords li::before { content: "0" counter(item); counter-increment: item; color: var(--lime); }
.hero-orb { position: absolute; z-index: 4; left: 50%; bottom: -3.15rem; width: 6.2rem; height: 6.2rem; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: var(--lime); box-shadow: 0 0 0 1px rgba(0,0,0,.08); font-size: 1.7rem; transform: translateX(-50%); }

.focus-intro { display: grid; grid-template-columns: .62fr 1fr; gap: 5rem; align-items: end; }
.focus-intro .heading { max-width: 12ch; }
.focus-intro__copy { max-width: 43rem; }
.focus-intro__copy .btn { margin-top: 1.65rem; }
.focus-cards { margin-top: 5.2rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.65rem; }
.focus-card { position: relative; min-height: 25rem; overflow: hidden; color: var(--white); background: var(--black); }
.focus-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.02) 65%); }
.focus-card :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.focus-card:hover :is(img, video) { transform: scale(1.04); }
.focus-card__content { position: relative; z-index: 1; min-height: 25rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: end; }
.focus-card__number { position: absolute; top: 1.45rem; left: 1.45rem; color: var(--lime); font-family: "DM Mono", monospace; font-size: .76rem; }
.focus-card h3 { max-width: 11ch; margin: 0; font-size: 2.3rem; font-weight: 500; line-height: .92; letter-spacing: -.07em; }
.focus-card p { max-width: 25rem; margin: 1rem 0 1.35rem; color: rgba(255,255,255,.82); font-size: .99rem; }
.focus-card .link-arrow { font-size: .95rem; }

.solutions { display: grid; grid-template-columns: .84fr 1.16fr; gap: 3.6rem; align-items: start; }
.solutions__visual { position: sticky; top: 2rem; min-height: 39.75rem; overflow: hidden; background: var(--black); }
.solutions__visual :is(img, video) { width: 100%; height: 100%; min-height: 39.75rem; object-fit: cover; }
.solutions__visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg,rgba(0,0,0,.56),transparent 48%); }
.solutions__visual span { position: absolute; z-index: 1; right: 1.5rem; bottom: 1.4rem; color: var(--lime); font-family: "DM Mono", monospace; font-size: .68rem; }
.solutions__content { padding: .15rem 0; }
.solutions__lead { max-width: 42rem; margin: 1.1rem 0 3rem; color: var(--muted); font-size: 1.1rem; }
.solutions-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.solution-item { min-height: 15.6rem; padding: 1.55rem .8rem 1.4rem 0; border-bottom: 1px solid var(--line); }
.solution-item:nth-child(odd) { padding-right: 2rem; border-right: 1px solid var(--line); }
.solution-item:nth-child(even) { padding-left: 2rem; }
.solution-item h3 { margin: 0; font-size: 1.55rem; font-weight: 500; letter-spacing: -.055em; }
.solution-item p { margin: .72rem 0 1.2rem; color: var(--muted); font-size: .98rem; }

.strategy { background: var(--paper); }
.strategy-heading { max-width: 45rem; margin: 0 auto 4rem; text-align: center; }
.strategy-rail { display: grid; grid-template-columns: .82fr 1.18fr; overflow: hidden; color: var(--white); background: var(--green); }
.strategy-rail__copy { min-height: 28rem; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.strategy-rail__copy h3 { max-width: 10ch; margin: 0; font-size: 3rem; font-weight: 500; line-height: .93; letter-spacing: -.07em; }
.strategy-rail__copy p { max-width: 25rem; margin: 1rem 0 0; color: rgba(255,255,255,.82); }
.strategy-rail__image { min-height: 28rem; }
.strategy-rail__image :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.strategy-points { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.strategy-point { border-top: 1px solid var(--line); padding-top: 1rem; }
.strategy-point span { display: block; color: var(--green); font-family: "DM Mono", monospace; font-size: .7rem; }
.strategy-point h3 { margin: .65rem 0 0; font-size: 1.32rem; font-weight: 500; letter-spacing: -.045em; }
.strategy-point p { margin: .55rem 0 0; color: var(--muted); font-size: .95rem; }

.metrics { padding: 4.4rem 0; color: var(--white); background: var(--black); }
.metrics__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 4rem; align-items: center; }
.metrics__grid .heading { max-width: 11ch; }
.metric-list { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; }
.metric { min-height: 12rem; padding: 1.2rem; background: rgba(255,255,255,.06); }
.metric strong { display: block; color: var(--lime); font-size: clamp(2.75rem,4vw,4.1rem); font-weight: 500; line-height: .88; letter-spacing: -.08em; }
.metric span { display: block; margin-top: 1.3rem; color: rgba(255,255,255,.8); font-size: .98rem; }

.statement-panel { position: relative; min-height: 44rem; display: grid; align-items: end; overflow: hidden; color: var(--white); background: var(--black); }
.statement-panel :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.statement-panel::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.12)),linear-gradient(0deg,rgba(0,0,0,.64),transparent 55%); }
.statement-panel__content { position: relative; z-index: 1; width: var(--wrap); margin: 0 auto; padding: 4rem 0; display: grid; grid-template-columns: .9fr 1fr; gap: 4rem; align-items: end; }
.statement-panel h2 { max-width: 10ch; margin: 0; font-size: clamp(3.2rem,5.5vw,5.7rem); font-weight: 500; line-height: .9; letter-spacing: -.08em; }
.statement-panel p { max-width: 31rem; margin: 0; color: rgba(255,255,255,.88); font-size: 1.25rem; font-weight: 500; line-height: 1.25; letter-spacing: -.035em; }
.partner-band { color: var(--white); background: var(--green); }
.partner-band__inner { width: var(--wrap); margin: 0 auto; padding: 4.3rem 0; display: grid; grid-template-columns: .87fr 1.13fr; gap: 3rem; align-items: center; }
.partner-band .heading { max-width: 10ch; }
.partner-band p { max-width: 38rem; margin: 0; color: rgba(255,255,255,.82); font-size: 1.08rem; }
.partner-band .btn { margin-top: 1.55rem; }

/* Interior pages: matching About Two / Service Two planes */
.interior-hero { position: relative; min-height: 43rem; display: grid; align-items: end; overflow: hidden; color: var(--white); background: var(--black); }
.interior-hero :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .65; }
.interior-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.08) 62%); }
.interior-hero__content { position: relative; z-index: 1; width: var(--wrap); margin: 0 auto; padding: 8.8rem 0 3.6rem; }
.interior-hero__content .display { max-width: 11ch; }
.interior-hero__content p:not(.eyebrow) { max-width: 45rem; margin: 1.3rem 0 0; color: rgba(255,255,255,.85); font-size: 1.13rem; }
.experience { display: grid; grid-template-columns: .74fr 1.26fr; gap: 4.8rem; align-items: center; }
.experience__number { position: relative; min-height: 27rem; display: grid; place-content: center; overflow: hidden; color: var(--white); background: var(--green); }
.experience__number::after { position: absolute; inset: 0; content: ""; opacity: .25; background: radial-gradient(circle at 40% 50%,var(--lime),transparent 24%),linear-gradient(135deg,transparent 0 45%,rgba(255,255,255,.2) 45% 46%,transparent 46%); }
.experience__number strong { position: relative; z-index: 1; color: var(--lime); font-size: clamp(5rem,9vw,9.5rem); font-weight: 500; line-height: .8; letter-spacing: -.1em; }
.experience__number span { position: relative; z-index: 1; margin-top: 1.1rem; font-family: "DM Mono", monospace; font-size: .7rem; text-align: center; text-transform: uppercase; }
.experience__content .heading { max-width: 12ch; }
.experience__content .copy { max-width: 38rem; margin-top: 1.4rem; }
.impact-list { margin-top: 3.6rem; border-top: 1px solid var(--line); }
.impact-list > div { display: grid; grid-template-columns: 4rem .7fr 1.3fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.impact-list span { color: var(--green); font-family: "DM Mono", monospace; font-size: .75rem; }
.impact-list h3 { margin: 0; font-size: 1.2rem; font-weight: 600; letter-spacing: -.045em; }
.impact-list p { margin: 0; color: var(--muted); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.story-card { min-height: 34rem; overflow: hidden; color: var(--white); background: var(--black); }
.story-card__image { height: 19rem; overflow: hidden; }
.story-card__image :is(img, video) { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.story-card:hover :is(img, video) { transform: scale(1.04); }
.story-card__body { min-height: 15rem; padding: 1.6rem; display: flex; flex-direction: column; align-items: start; }
.story-card__body h3 { max-width: 12ch; margin: 0; font-size: 2.2rem; font-weight: 500; line-height: .94; letter-spacing: -.07em; }
.story-card__body p { margin: 1rem 0 1.5rem; color: rgba(255,255,255,.77); }
.story-card__body .link-arrow { margin-top: auto; }
.capability-strip { color: var(--white); background: var(--green); }
.capability-strip__inner { width: var(--wrap); margin: 0 auto; padding: 5.1rem 0; display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; }
.capability-strip__inner .heading { max-width: 12ch; }
.capability-tags { display: flex; flex-wrap: wrap; align-content: start; gap: .7rem; }
.capability-tags span { padding: .55rem .7rem; border: 1px solid rgba(255,255,255,.42); font-size: .9rem; }

.service-intro { max-width: 62rem; margin: 0 auto 4rem; text-align: center; }
.service-intro .heading { max-width: 15ch; margin: 0 auto; }
.service-intro--left { margin-left: 0; margin-right: 0; text-align: left; }
.service-intro--left .heading,
.service-intro--left .section-lead { margin-left: 0; margin-right: 0; }
.service-accordion { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 3rem .74fr 1.26fr auto; gap: 1.2rem; align-items: center; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.service-row__number { color: var(--green); font-family: "DM Mono", monospace; font-size: .75rem; }
.service-row h2 { margin: 0; font-size: clamp(1.75rem,2.75vw,2.8rem); font-weight: 500; line-height: .95; letter-spacing: -.065em; }
.service-row p { max-width: 32rem; margin: 0; color: var(--muted); }
.service-row .link-arrow { font-size: .9rem; white-space: nowrap; }
.solutions-grid-dark { display: grid; grid-template-columns: repeat(4,1fr); color: var(--white); background: var(--black); }
.solutions-grid-dark article { min-height: 20rem; padding: 1.5rem; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.23); }
.solutions-grid-dark article:last-child { border-right: 0; }
.solutions-grid-dark span { color: var(--lime); font-family: "DM Mono", monospace; font-size: .72rem; }
.solutions-grid-dark h3 { margin: auto 0 0; font-size: 1.82rem; font-weight: 500; line-height: .95; letter-spacing: -.06em; }
.solutions-grid-dark p { margin: .8rem 0 0; color: rgba(255,255,255,.72); font-size: .95rem; }
.project-list { border-top: 1px solid var(--line); }
.project-row { display: grid; grid-template-columns: .6fr 1.4fr; gap: 3rem; padding: 3rem 0; border-bottom: 1px solid var(--line); }
.project-row__meta { color: var(--green); font-family: "DM Mono", monospace; font-size: .7rem; line-height: 1.65; text-transform: uppercase; }
.project-row__body { display: grid; grid-template-columns: 1fr .75fr; gap: 2.5rem; align-items: start; }
.project-row h2 { margin: 0; font-size: clamp(2rem,3.2vw,3.4rem); font-weight: 500; line-height: .94; letter-spacing: -.07em; }
.project-row p { margin: 0; color: var(--muted); }
.project-row :is(img, video) { grid-column: 1/-1; width: 100%; height: 22rem; margin-top: .6rem; object-fit: cover; }
.contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 5rem; }
.contact-grid .heading { max-width: 10ch; }
.contact-detail { padding: 1rem 0 1.25rem; border-top: 1px solid var(--line); }
.contact-detail:first-of-type { margin-top: 2.5rem; }
.contact-detail h3 { margin: 0 0 .5rem; font-family: "DM Mono", monospace; font-size: .7rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.contact-detail p { margin: 0; color: var(--muted); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-content: start; }
.field { display: grid; gap: .5rem; }
.field--wide { grid-column: 1/-1; }
.field label { color: var(--green); font-family: "DM Mono", monospace; font-size: .67rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--ink); outline: 0; color: var(--ink); background: transparent; }
.field textarea { min-height: 9rem; resize: vertical; }
.form-note { grid-column: 1/-1; margin: 0; color: var(--muted); font-size: .9rem; }
.form-success { grid-column: 1/-1; margin: 0; color: var(--green); font-weight: 600; }

/* Editorial depth added to the existing Areto design system */
.copy-stack { max-width: 42rem; }
.copy-stack .copy + .copy { margin-top: 1rem; }
.section-lead { max-width: 49rem; margin: 1.25rem auto 0; color: var(--muted); font-size: 1.08rem; line-height: 1.5; }
.service-intro .section-lead { max-width: 49rem; }
.video-story { display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; color: var(--white); background: var(--black); }
.video-story__media { min-height: 0; aspect-ratio: 16 / 9; display: grid; place-items: center; background: #000; }
.video-story__media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-story__content { min-height: 0; padding: clamp(2rem,4.2vw,4rem); display: flex; flex-direction: column; justify-content: space-between; }
.video-story__content .heading { max-width: 9ch; }
.video-story__content .copy { max-width: 28rem; color: rgba(255,255,255,.78); }
.video-story__content .eyebrow { margin-bottom: 1.1rem; }
.video-story__caption { margin: 2rem 0 0; color: var(--lime); font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .03em; text-transform: uppercase; }
.video-story--full { grid-template-columns: 1fr; }
.video-story--full .video-story__content { min-height: 0; display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.video-story--full .video-story__content .heading { max-width: 10ch; }
.video-story--full .video-story__media { width: 100%; aspect-ratio: 16 / 9; }
.video-story__header { margin: 0 0 clamp(1.15rem, 2vw, 1.6rem); padding-top: .85rem; border-top: 1px solid var(--line); }
.video-story__header .eyebrow { margin: 0; }
.video-story--film { display: block; }
.video-story--film .video-story__media { position: relative; width: 100%; aspect-ratio: 2 / 1; }
.video-story--film .video-story__media :is(img, video) { object-fit: cover; object-position: center; }
.video-story--film .video-story__media::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.27) 52%, rgba(0,0,0,.16)), linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.11) 56%, rgba(0,0,0,.17)); }
.video-story__label { position: absolute; z-index: 1; left: clamp(1.4rem, 3.2vw, 3.1rem); bottom: clamp(1.4rem, 3.2vw, 3.1rem); max-width: min(31rem, calc(100% - 2.8rem)); color: var(--white); }
.video-story__label .eyebrow { margin-bottom: .58rem; }
.video-story__title { max-width: 19ch; margin: 0; font-size: clamp(1.05rem, 1.65vw, 1.38rem); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.holding-statement { display: grid; gap: 2.2rem; padding: clamp(2rem, 4.2vw, 4rem); color: var(--white); background: var(--black); border-top: 1px solid rgba(255,255,255,.2); }
.holding-statement__copy { max-width: 59rem; margin: 0; color: rgba(255,255,255,.82); font-size: clamp(1.08rem, 1.55vw, 1.3rem); line-height: 1.42; letter-spacing: -.018em; }
.holding-statement .video-story__caption { margin: 0; }

.project-showcase { background: var(--paper); }
.project-showcase__heading { display: grid; grid-template-columns: .7fr 1.3fr; gap: 4rem; align-items: end; margin-bottom: 3.4rem; }
.project-showcase__heading .heading { max-width: 10ch; }
.project-showcase__heading .copy { max-width: 39rem; }
.project-showcase__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.project-card { position: relative; min-height: 31rem; overflow: hidden; color: var(--white); background: var(--black); }
.project-card :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.project-card:hover :is(img, video) { transform: scale(1.04); }
.project-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.12) 70%); }
.project-card__body { position: relative; z-index: 1; min-height: 31rem; padding: 1.55rem; display: flex; flex-direction: column; justify-content: end; }
.project-card__number { position: absolute; top: 1.4rem; left: 1.5rem; color: var(--lime); font-family: "DM Mono", monospace; font-size: .72rem; }
.project-card__label { margin: 0 0 .55rem; color: var(--lime); font-family: "DM Mono", monospace; font-size: .67rem; letter-spacing: .03em; text-transform: uppercase; }
.project-card h3 { max-width: 12ch; margin: 0; font-size: clamp(1.85rem,2.35vw,2.55rem); font-weight: 500; line-height: .92; letter-spacing: -.07em; }
.project-card p { margin: .95rem 0 1.35rem; color: rgba(255,255,255,.79); font-size: .98rem; }

.project-row__copy { min-width: 0; }
.project-row__copy h2 { max-width: 12ch; }
.project-row__copy .copy { max-width: 42rem; margin-top: 1.05rem; }
.project-row__facts { border-top: 1px solid var(--line); }
.project-row__facts div { padding: .72rem 0; border-bottom: 1px solid var(--line); }
.project-row__facts span { display: block; margin-bottom: .25rem; color: var(--green); font-family: "DM Mono", monospace; font-size: .64rem; letter-spacing: .03em; text-transform: uppercase; }
.project-row__facts strong { display: block; color: var(--ink); font-size: .98rem; font-weight: 500; line-height: 1.28; }
.project-note { max-width: 58rem; margin: 2.1rem auto 0; color: var(--muted); font-size: .91rem; line-height: 1.48; }
.project-note strong { color: var(--ink); }

.group-note { max-width: 53rem; margin: 1.35rem auto 0; color: rgba(255,255,255,.78); font-size: 1.06rem; line-height: 1.5; }
.ecosystem-list { margin-top: 2rem; display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem 2rem; border-top: 1px solid rgba(255,255,255,.35); }
.ecosystem-list div { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.ecosystem-list strong { display: block; color: var(--lime); font-family: "DM Mono", monospace; font-size: .69rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.ecosystem-list span { display: block; margin-top: .25rem; color: rgba(255,255,255,.76); font-size: .95rem; }

.holding-principles { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 3rem; color: var(--white); background: var(--black); }
.holding-principles article { min-height: 17.5rem; padding: 1.5rem; border-right: 1px solid rgba(255,255,255,.22); display: flex; flex-direction: column; }
.holding-principles article:last-child { border-right: 0; }
.holding-principles span { color: var(--lime); font-family: "DM Mono", monospace; font-size: .7rem; }
.holding-principles h3 { margin: auto 0 0; font-size: 1.6rem; font-weight: 500; line-height: .95; letter-spacing: -.06em; }
.holding-principles p { margin: .75rem 0 0; color: rgba(255,255,255,.72); font-size: .94rem; }

/* The original globe film is retained as a restrained international-reach section. */
.global-reach { padding: clamp(5rem, 9vw, 9rem) 0; overflow: hidden; color: var(--white); background: var(--black); }
.global-reach__intro { display: grid; grid-template-columns: .82fr 1.18fr; gap: 4rem; align-items: end; padding-bottom: 3.25rem; }
.global-reach__intro .heading { max-width: 11ch; }
.global-reach__intro > p { max-width: 39rem; margin: 0; color: rgba(255,255,255,.76); font-size: 1.08rem; line-height: 1.5; }
.reach-ticker { border-top: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); overflow: hidden; }
.reach-ticker__track { width: max-content; display: flex; will-change: transform; animation: reach-ticker-flow 36s linear infinite; }
.reach-ticker__set { display: flex; flex: 0 0 auto; }
.reach-location { width: clamp(12.5rem, 18vw, 18rem); min-height: 8.15rem; padding: 1.15rem 1.45rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.24); }
.reach-location span { color: rgba(255,255,255,.56); font-family: "DM Mono", monospace; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.reach-location strong { max-width: 13ch; color: var(--lime); font-size: clamp(1.25rem,1.75vw,1.7rem); font-weight: 500; line-height: .96; letter-spacing: -.055em; }
.global-reach__globe { position: relative; min-height: clamp(29rem, 52vw, 46rem); margin-top: clamp(3rem, 7vw, 6rem); overflow: hidden; background: #030403; isolation: isolate; }
.global-reach__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.05); }
.global-reach__shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.62),transparent 42%,rgba(0,0,0,.12)), linear-gradient(0deg,rgba(0,0,0,.72),transparent 48%); pointer-events: none; }
.global-reach__caption { position: absolute; z-index: 2; inset: auto 1.55rem 1.45rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.global-reach__caption span { color: var(--lime); font-family: "DM Mono", monospace; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.global-reach__caption p { max-width: 28rem; margin: 0; color: rgba(255,255,255,.86); font-size: 1.05rem; font-weight: 500; line-height: 1.22; letter-spacing: -.035em; text-align: right; }
@keyframes reach-ticker-flow { to { transform: translateX(-50%); } }

/* Project signals retain the original editorial rhythm while adding a quiet motion cue. */
.project-signals { padding: clamp(5rem, 9vw, 9rem) 0; color: var(--white); background: var(--black); }
.project-signals__heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: end; }
.project-signals__heading .heading { max-width: 11ch; }
.project-signals__heading > p { max-width: 37rem; margin: 0; color: rgba(255,255,255,.76); font-size: 1.08rem; }
.project-signals__grid { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid rgba(255,255,255,.22); }
.project-signal { min-height: 18rem; padding: 1.2rem; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.22); }
.project-signal:last-child { border-right: 0; }
.signal-bars { height: 5.4rem; display: flex; align-items: end; gap: .34rem; margin-bottom: 1.45rem; }
.signal-bars i { width: .48rem; display: block; height: var(--bar-one); background: var(--lime); transform: scaleY(.06); transform-origin: bottom; opacity: .24; }
.signal-bars i:nth-child(2) { height: var(--bar-two); }
.signal-bars i:nth-child(3) { height: var(--bar-three); }
.project-signal > span { color: var(--lime); font-family: "DM Mono", monospace; font-size: .68rem; }
.project-signal h3 { margin: auto 0 0; font-size: 1.25rem; font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.project-signal p { margin: .7rem 0 0; color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.42; }
.project-signals__grid.is-visible .signal-bars i { animation: signal-rise .78s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--delay); }
.project-signals__grid.is-visible .signal-bars i:nth-child(2) { animation-delay: calc(var(--delay) + .07s); }
.project-signals__grid.is-visible .signal-bars i:nth-child(3) { animation-delay: calc(var(--delay) + .14s); }
@keyframes signal-rise { to { transform: scaleY(1); opacity: 1; } }

.reveal { opacity: 0; transform: translateY(1.3rem); transition: opacity .66s ease, transform .66s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  :root { --wrap: min(100% - 2.5rem, 81.25rem); }
  .nav-links { gap: 1rem; }
  .nav-cta { min-width: auto; }
  .home-hero__inner { grid-template-columns: 1fr .7fr; }
  .focus-intro, .metrics__grid, .partner-band__inner, .capability-strip__inner { gap: 2.5rem; }
  .solutions { gap: 2rem; }
  .solutions__visual { min-height: 32rem; }
  .solutions__visual :is(img, video) { min-height: 32rem; }
  .story-card__body h3 { font-size: 1.9rem; }
  .video-story { grid-template-columns: 1fr; }
  .video-story__media { min-height: 0; }
  .video-story__content { min-height: 28rem; }
  .video-story--full .video-story__content { min-height: 0; grid-template-columns: 1fr; gap: 2rem; }
  .holding-statement { gap: 1.7rem; }
  .project-showcase__heading { gap: 2.5rem; }
  .project-showcase__grid { grid-template-columns: repeat(2,1fr); }
  .project-card:last-child { grid-column: span 2; }
  .holding-principles { grid-template-columns: repeat(2,1fr); }
  .holding-principles article:nth-child(2) { border-right: 0; }
  .holding-principles article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.22); }
  .global-reach__intro { gap: 2.5rem; }
  .global-reach__globe { min-height: 34rem; }
  .project-signals__heading { gap: 2.5rem; }
  .project-signals__grid { grid-template-columns: repeat(3,1fr); }
  .project-signal:nth-child(3n) { border-right: 0; }
  .project-signal:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.22); }
}

/* The expanded holding navigation retains the established mobile menu before links become crowded. */
@media (max-width: 1100px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav .studio-entry-button { margin-left: auto; }
  .nav .studio-entry-button + .nav-toggle { margin-left: 0; }
  .nav .studio-entry-button + .nav-cta + .nav-toggle { margin-left: 0; }
  .mobile-menu { display: block; }
}

@media (max-width: 760px) {
  :root { --wrap: min(100% - 2rem, 81.25rem); --display: clamp(3rem,12vw,4.1rem); }
  .site-header, .nav { min-height: 4.5rem; }
  .brand { min-width: 0; font-size: 1rem; }
  .brand small { font-size: .43rem; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .mobile-menu { display: block; }
  .footer-top, .footer-bottom { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { gap: .45rem; }
  .footer-company, .footer-legal { display: grid; justify-content: start; gap: .45rem; }
  .legal-facts { grid-template-columns: 1fr; }
  .home-hero { min-height: 48rem; }
  .home-hero__inner { min-height: 48rem; padding: 7.8rem 0 2.25rem; grid-template-columns: 1fr; gap: 2.3rem; }
  .hero-copy { align-self: end; }
  .hero-side { width: 100%; justify-self: auto; align-self: start; gap: 1.2rem; }
  .hero-side__text { font-size: 1.03rem; }
  .hero-keywords { display: none; }
  .hero-orb { width: 4.8rem; height: 4.8rem; bottom: -2.35rem; font-size: 1.35rem; }
  .focus-intro, .solutions, .strategy-rail, .metrics__grid, .statement-panel__content, .partner-band__inner, .experience, .capability-strip__inner, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .focus-cards { margin-top: 3rem; grid-template-columns: 1fr; gap: 1rem; }
  .focus-card, .focus-card__content { min-height: 23rem; }
  .solutions__visual { position: relative; top: auto; min-height: 26rem; }
  .solutions__visual :is(img, video) { min-height: 26rem; }
  .solutions-grid { grid-template-columns: 1fr; }
  .solution-item, .solution-item:nth-child(odd), .solution-item:nth-child(even) { min-height: auto; padding: 1.35rem 0; border-right: 0; }
  .strategy-rail__copy, .strategy-rail__image { min-height: 23rem; }
  .strategy-rail__copy { padding: 2rem; }
  .strategy-rail__copy h3 { font-size: 2.55rem; }
  .strategy-points { grid-template-columns: 1fr; gap: 1.6rem; }
  .metric-list, .solutions-grid-dark { grid-template-columns: 1fr; }
  .metric { min-height: 10rem; }
  .solutions-grid-dark article { min-height: 14rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.23); }
  .statement-panel { min-height: 35rem; }
  .statement-panel__content { padding: 3rem 0; }
  .statement-panel p { font-size: 1.1rem; }
  .interior-hero { min-height: 34rem; }
  .interior-hero__content { padding: 7rem 0 2.6rem; }
  .experience__number { min-height: 20rem; }
  .impact-list > div { grid-template-columns: 2.5rem 1fr; }
  .impact-list p { grid-column: 2; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card { min-height: 31rem; }
  .service-row { grid-template-columns: 2.2rem 1fr; gap: .85rem; }
  .service-row p { grid-column: 2; }
  .service-row .link-arrow { grid-column: 2; justify-self: start; }
  .project-row, .project-row__body { grid-template-columns: 1fr; gap: 1.35rem; }
  .project-row { padding: 2rem 0; }
  .project-row :is(img, video) { height: 17rem; }
  .contact-form { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .video-story__media, .video-story__content { min-height: auto; }
  .video-story__media { height: auto; aspect-ratio: 16 / 9; }
  .video-story__content { padding: 2rem; }
  .video-story--full .video-story__content { padding: 2rem; }
  .video-story__label { left: 1.35rem; bottom: 1.35rem; }
  .holding-statement { padding: 2rem; }
  .project-showcase__heading, .project-showcase__grid { grid-template-columns: 1fr; }
  .project-showcase__heading { margin-bottom: 2.4rem; }
  .project-card, .project-card__body { min-height: 26rem; }
  .project-card:last-child { grid-column: auto; }
  .ecosystem-list, .holding-principles { grid-template-columns: 1fr; }
  .holding-principles article, .holding-principles article:nth-child(2) { min-height: 13.5rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
  .holding-principles article:last-child { border-bottom: 0; }
  .global-reach__intro { grid-template-columns: 1fr; gap: 1.35rem; padding-bottom: 2.4rem; }
  .reach-location { width: 12.7rem; min-height: 6.9rem; padding: .95rem 1rem; }
  .reach-location strong { font-size: 1.25rem; }
  .global-reach__globe { min-height: 25rem; margin-top: 2.5rem; }
  .global-reach__caption { inset: auto 1.15rem 1.1rem; display: grid; gap: .7rem; }
  .global-reach__caption p { max-width: 22rem; font-size: .98rem; text-align: left; }
  .project-signals__heading, .project-signals__grid { grid-template-columns: 1fr; }
  .project-signals__heading { gap: 1.4rem; }
  .project-signal, .project-signal:nth-child(3n) { min-height: auto; padding: 1.25rem 0; display: grid; grid-template-columns: 5.8rem 2.2rem 1fr; column-gap: 1rem; align-items: center; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
  .project-signal:last-child { border-bottom: 0; }
  .signal-bars { height: 3.8rem; margin: 0; }
  .project-signal h3 { margin: 0; }
  .project-signal p { grid-column: 3; margin: .35rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .signal-bars i { transform: scaleY(1); opacity: 1; }
  .reach-ticker__track { animation: none; }
}

/* Owner-only direct editing. These controls never appear on the public website. */
body.studio-editing { padding-top: 4.4rem; }
body.studio-editing .site-header:not(.site-header--light) { top: 4.4rem; }
.studio-edit-toolbar { position: fixed; z-index: 1000; inset: 0 0 auto; min-height: 4.4rem; padding: .65rem max(1rem, calc((100% - 81.25rem) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; color: var(--white); background: var(--green); box-shadow: 0 .35rem 1.2rem rgba(0,0,0,.2); }
.studio-edit-toolbar > div { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.studio-edit-toolbar strong { flex: 0 0 auto; font-size: 1rem; letter-spacing: -.025em; }
.studio-edit-toolbar [role="status"] { min-width: 0; color: rgba(255,255,255,.76); font-family: "DM Mono", monospace; font-size: .66rem; letter-spacing: .03em; text-transform: uppercase; }
.studio-edit-toolbar [role="status"][data-state="error"] { color: #ffb5ad; }
.studio-edit-toolbar [role="status"][data-state="success"] { color: var(--lime); }
.studio-edit-toolbar nav { display: flex; align-items: center; gap: .5rem; }
.studio-edit-toolbar button { min-height: 2.35rem; padding: .55rem .72rem; border: 1px solid rgba(255,255,255,.38); color: var(--white); background: transparent; font: inherit; font-size: .78rem; cursor: pointer; }
.studio-edit-toolbar [data-publish] { color: var(--green); background: var(--lime); border-color: var(--lime); font-weight: 700; }
.studio-edit-toolbar [data-save], .studio-edit-toolbar [data-backup] { font-weight: 600; }
.studio-edit-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.studio-editable-text { outline: 1px dashed transparent; outline-offset: .24rem; cursor: text; transition: outline-color .18s ease, background .18s ease; }
.studio-editable-text:hover { outline-color: rgba(248,250,141,.82); }
.studio-editable-text:focus { outline-color: var(--lime); background: rgba(248,250,141,.1); }
.studio-media-host { position: relative !important; }
.studio-media-edit { position: absolute; z-index: 12; top: .9rem; right: .9rem; min-height: 2.3rem; padding: .5rem .72rem; border: 1px solid rgba(255,255,255,.65); color: var(--black); background: var(--lime); font: 500 .68rem/1 "DM Mono", monospace; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; box-shadow: 0 .35rem 1rem rgba(0,0,0,.2); opacity: .98; transform: none; transition: background .18s ease, box-shadow .18s ease; }
.studio-title-media-host > .studio-media-edit { z-index: 30; top: 6.3rem; }
.studio-media-edit:hover { background: var(--white); }
.studio-media-edit:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.studio-media-dialog { position: fixed; z-index: 5000; inset: 0; padding: max(1rem, 4vh) 1rem; display: grid; place-items: center; background: rgba(0,0,0,.72); }
.studio-media-dialog__panel { width: min(100%, 76rem); max-height: min(51rem, 92vh); overflow: auto; padding: clamp(1.2rem, 3vw, 2.2rem); color: var(--ink); background: var(--paper); box-shadow: 0 1.3rem 4rem rgba(0,0,0,.34); }
.studio-media-dialog__header { display: flex; align-items: start; justify-content: space-between; gap: 2rem; }
.studio-media-dialog__header h2 { margin: .2rem 0 .45rem; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; line-height: .96; letter-spacing: -.065em; }
.studio-media-dialog__header p { max-width: 38rem; margin: 0; color: var(--muted); }
.studio-kicker { color: var(--green) !important; font-family: "DM Mono", monospace; font-size: .67rem; letter-spacing: .04em; text-transform: uppercase; }
.studio-icon-button { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); color: var(--ink); background: transparent; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.studio-media-dialog__upload { margin: 1.7rem 0 1.2rem; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; border: 1px solid var(--line); }
.studio-upload-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .6rem .85rem; color: var(--green); background: var(--lime); font-size: .84rem; font-weight: 600; cursor: pointer; }
.studio-upload-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.studio-media-dialog__upload span { color: var(--muted); font-size: .88rem; }
.studio-media-dialog__status { min-height: 1.2rem; margin-bottom: .8rem; color: var(--green); font-size: .88rem; }
.studio-media-dialog__status[data-state="error"] { color: #a72e23; }
.studio-media-dialog__current { margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); background: var(--white); }
.studio-media-dialog__current p { margin: 0 0 .2rem; color: var(--green); font: .63rem "DM Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
.studio-media-dialog__current strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 500; }
.studio-media-dialog__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.studio-loading, .studio-empty { grid-column: 1 / -1; margin: 0; padding: 1.4rem 0; color: var(--muted); }
.studio-media-choice { position: relative; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); color: var(--ink); background: var(--white); text-align: left; cursor: pointer; }
.studio-media-choice img, .studio-media-choice video { width: 100%; height: 8.2rem; object-fit: cover; background: var(--black); }
.studio-media-choice > span:not(.studio-media-used) { display: block; overflow: hidden; padding: .65rem; font-size: .75rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.studio-media-choice:hover, .studio-media-choice.is-current { border-color: var(--green); }
.studio-media-choice.is-current { box-shadow: inset 0 .18rem 0 var(--lime); }
.studio-media-choice.is-staged { outline: 3px solid var(--green); outline-offset: -3px; }
.studio-media-used { position: absolute; top: .5rem; left: .5rem; padding: .28rem .42rem; color: var(--green); background: var(--lime); font: 500 .55rem/1 "DM Mono", monospace; letter-spacing: .025em; text-transform: uppercase; }
.studio-media-selected { position: absolute; top: .5rem; right: .5rem; padding: .28rem .42rem; color: var(--green); background: var(--white); font: 500 .55rem/1 "DM Mono", monospace; letter-spacing: .025em; text-transform: uppercase; }
.studio-media-type { position: absolute; right: .5rem; bottom: 2.7rem; padding: .28rem .42rem; color: var(--white); background: rgba(0,0,0,.72); font: 500 .55rem/1 "DM Mono", monospace; font-style: normal; letter-spacing: .025em; text-transform: uppercase; }
.studio-media-dialog__confirmation { margin-top: 1.35rem; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); }
.studio-media-dialog__confirmation p { margin: 0; color: var(--muted); font-size: .88rem; }
.studio-media-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .65rem; }
.studio-media-keep { min-height: 2.6rem; padding: .62rem .9rem; border: 1px solid var(--line); color: var(--ink); background: var(--white); font: inherit; font-size: .84rem; cursor: pointer; }
.studio-media-keep:disabled { opacity: .45; cursor: not-allowed; }
.studio-media-apply { flex: 0 0 auto; min-height: 2.6rem; padding: .62rem .9rem; border: 0; color: var(--green); background: var(--lime); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.studio-media-apply:disabled { opacity: .45; cursor: not-allowed; }
.studio-restore-list { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.studio-restore-list article { min-height: 4.2rem; padding: .75rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.studio-restore-list strong { display: block; color: var(--ink); font-size: .9rem; font-weight: 500; }
.studio-restore-list span { display: block; margin-top: .22rem; color: var(--muted); font: .62rem "DM Mono", monospace; letter-spacing: .03em; text-transform: uppercase; }
.studio-restore-list button { flex: 0 0 auto; min-height: 2.3rem; padding: .5rem .7rem; border: 1px solid var(--line); color: var(--ink); background: transparent; font: inherit; font-size: .78rem; cursor: pointer; }
.studio-restore-list button:hover { color: var(--green); border-color: var(--green); }

/* The Studio canvas keeps the public layout intact while making every managed text and medium directly selectable. */
body.studio-canvas-editing .studio-canvas-text { outline: 1px dashed transparent; outline-offset: .24rem; cursor: pointer; transition: outline-color .16s ease, background .16s ease; }
body.studio-canvas-editing .studio-canvas-text:hover { outline-color: rgba(54,80,63,.75); background: rgba(248,250,141,.12); }
body.studio-canvas-editing .studio-canvas-media { outline: 2px solid transparent; outline-offset: -2px; cursor: pointer; transition: outline-color .16s ease, filter .16s ease; }
body.studio-canvas-editing .studio-canvas-media:hover { outline-color: var(--lime); filter: brightness(1.04); }
body.studio-canvas-editing .studio-canvas-selected { outline-color: var(--lime) !important; background: rgba(248,250,141,.15); }
body.studio-canvas-editing .studio-canvas-media.studio-canvas-selected { outline-width: 3px; background: transparent; }

@media (max-width: 1100px) {
  body.studio-editing { padding-top: 7.4rem; }
  body.studio-editing .site-header:not(.site-header--light) { top: 7.4rem; }
  .studio-edit-toolbar { min-height: 7.4rem; align-items: stretch; flex-direction: column; justify-content: center; gap: .55rem; }
  .studio-edit-toolbar nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .studio-entry-button { min-height: 2.25rem; padding: .45rem .58rem; font-size: .66rem; }
  body.studio-editing { padding-top: 9.8rem; }
  body.studio-editing .site-header:not(.site-header--light) { top: 9.8rem; }
  .studio-edit-toolbar { min-height: 9.8rem; padding: .55rem 1rem; align-items: start; flex-direction: column; gap: .4rem; }
  .studio-edit-toolbar > div { width: 100%; display: flex; gap: .65rem; }
  .studio-edit-toolbar [role="status"] { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .studio-edit-toolbar nav { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
  .studio-edit-toolbar button { min-height: 2rem; padding: .42rem .48rem; font-size: .68rem; }
  .studio-media-edit { top: .65rem; right: .65rem; min-height: 2.1rem; padding: .45rem .56rem; font-size: .58rem; }
  .studio-title-media-host > .studio-media-edit { top: 5.25rem; }
  .studio-media-dialog__upload { align-items: start; flex-direction: column; }
  .studio-media-dialog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-media-choice img, .studio-media-choice video { height: 7.5rem; }
  .studio-media-dialog__confirmation { align-items: stretch; flex-direction: column; }
  .studio-media-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .studio-media-keep, .studio-media-apply { width: 100%; }
}