/* Dark Editorial: the existing pages and components share this visual layer. */
:root {
  --bg:#0c0e0d; --panel:#252a25; --ink:#f3f2ec; --accent:#b8f747;
  --muted:#b0b3aa; --line:#ffffff12; --pad:clamp(22px,7.2vw,124px);
}
html { background:var(--bg); }
body { width:100%; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; }
.section-pad,.site-header,.site-footer,.subpage-footer {
  padding-inline:max(var(--pad),calc((100% - 1280px)/2));
}
.section-pad { padding-block:58px; }
.site-header { height:76px; gap:32px; border-radius:0; background:#0c0e0d; border-bottom:1px solid var(--line); }
.site-header .wordmark { font-size:29px; letter-spacing:-1.5px; flex-shrink:0; }
.site-header nav { flex:1; gap:28px; margin-left:clamp(20px,6vw,90px); font-size:13px; }
.site-header nav a { padding-block:15px; color:#c4c6bd; }
.site-header nav a[aria-current="page"] { color:var(--ink); }
.site-header nav a[aria-current="page"]:after { bottom:-12px; background:var(--accent); }
.site-header .nav-contact { margin-left:auto; padding:14px 18px; border-color:var(--accent); background:var(--accent); color:#171b11; font-size:12px; }
.site-header .nav-contact:hover,.button-primary:hover { background:#c9ff69; border-color:#c9ff69; }
.nav-contact span { margin-left:18px; }
.button { min-height:48px; padding:14px 22px; gap:26px; border-radius:4px; font-size:13px; }
.button-primary { background:var(--accent); border-color:var(--accent); color:#171b11; }
.button-secondary { background:#0c0e0d80; border-color:#747b69; color:var(--ink); }
.button-secondary:hover { background:#1c211a; border-color:#bcc5ae; }
.button:hover { transform:translateY(-2px); }
.eyebrow { font-size:10px; letter-spacing:.11em; }
.line-icon { display:block; width:29px; height:29px; fill:none; stroke:var(--accent); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; }
.hero {
  display:grid; grid-template-columns:56% 44%; align-content:center; row-gap:40px;
  min-height:clamp(540px,38vw,680px); padding:48px max(var(--pad),calc((100% - 1280px)/2)) 40px;
  background:var(--bg); border-bottom:1px solid var(--line); overflow:hidden;
}
.hero:before,.hero:after { content:none; }
.hero-copy { position:relative; grid-column:1; z-index:2; }
.hero-copy>.eyebrow { color:var(--accent); }
.hero h1 { margin:19px 0 20px; max-width:none; text-align:left; font-size:clamp(40px,4.2vw,64px); line-height:1.04; letter-spacing:-.05em; }
.hero-description { width:100%; max-width:670px; text-align:left; }
.hero-description p { margin:0; max-width:600px; font-size:15px; line-height:1.6; color:#d1d2c9; }
.hero-actions { justify-content:flex-start; flex-wrap:nowrap; gap:18px; margin-top:26px; }
.hero-benefits { position:relative; z-index:2; grid-column:1; list-style:none; display:grid; grid-template-columns:1fr 1.14fr 1fr; gap:28px; padding:0; margin:0; max-width:670px; }
.hero-benefits li { min-width:0; position:relative; }
.benefit-number { position:absolute; left:37px; top:12px; color:#909983; font:9px/1 monospace; }
.hero-benefits h2 { font-size:14px; font-weight:500; letter-spacing:-.015em; margin:15px 0 6px; line-height:1.4; }
.hero-benefits p { color:#a8afa0; font-size:12px; line-height:1.55; }
.hero-showcase { position:absolute; inset:0 0 0 auto; width:70%; min-width:0; margin:0; overflow:hidden; }
.hero-showcase picture { display:block; width:100%; height:100%; }
.hero-showcase img { position:absolute; top:50%; right:0; width:auto; height:auto; max-width:100%; max-height:100%; transform:translateY(-50%); mask-image:linear-gradient(90deg,transparent,black 10%),linear-gradient(180deg,transparent,black 7%,black 90%,transparent); mask-composite:intersect; }
.hero-showcase figcaption { position:absolute; bottom:28px; left:40%; right:var(--pad); display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.hero-showcase figcaption>span { font:9px/1.5 var(--font); letter-spacing:.03em; color:#9aa48d; }
.hero-showcase figcaption em { font:italic 18px/1.4 Georgia,serif; color:#c5ccb9; border-bottom:1px solid #6c745e; padding:0 0 14px; }
.section-heading { border:0; padding:0; align-items:center; }
.section-heading .text-link { font-size:11px; color:var(--muted); padding:0; min-height:44px; }
.work { background:linear-gradient(90deg,#0c0e0df5,#0c0e0dde),url("backgrounds/hero-atmosphere.webp") right bottom/cover no-repeat; border-bottom:1px solid var(--line); }
.work-heading { margin:22px 0 28px; gap:40px; }
.work-heading h2 { font-size:clamp(36px,3.6vw,54px); line-height:1.05; letter-spacing:-.05em; font-weight:600; }
.work-heading h2>.accent { color:var(--ink); }
.work-heading>p { max-width:265px; font-size:14px; line-height:1.65; color:#b5baae; }
.projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:0; }
.project:nth-child(n) { margin:0; min-width:0; }
.project-card { border:1px solid #ffffff15; border-radius:5px; overflow:hidden; background:#0e110d; transition:border-color .3s,box-shadow .3s; }
.project-card:hover { border-color:#b8f74755; box-shadow:0 12px 32px #0003; }
.project-stage { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,28%); align-items:end; gap:clamp(10px,1.4vw,18px); padding:clamp(18px,2vw,28px) clamp(14px,2vw,30px) clamp(20px,2.5vw,36px); isolation:isolate; background:#343c31; }
.project-beija-card .project-stage { background:#534a3e; }
.project-stage:before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 24% 5%,#ffffff18,transparent 65%); }
.project-stage .browser-mockup { width:100%; border:4px solid #1a1d18; border-radius:9px; box-shadow:12px 18px 30px #0005; transform:none; transition:transform .5s,border-color .3s; }
.project-stage .browser-toolbar { min-height:22px; padding:5px 8px; gap:8px; background:#151913; }
.project-stage .browser-address { font-size:6px; }
.project-stage .browser-controls { gap:3px; }
.project-stage .browser-controls i { width:3px; height:3px; }
.project-stage .browser-symbol { font-size:8px; }
.project-preview:hover .browser-mockup,.project-preview:focus-visible .browser-mockup { transform:none; }
.project-phone { position:static; width:100%; min-width:0; padding:5px; border:1px solid #616451; border-radius:16px; background:#0d100c; box-shadow:8px 12px 22px #0007; transform:none; transition:transform .5s; }
.project-phone img { border-radius:10px; aspect-ratio:390/844; object-fit:contain; }
.project-preview:hover .project-phone { transform:none; }
#projects .project-stage img { height:auto; object-fit:contain; transform:none; }
.project-overview { padding:16px 22px 0; margin:0; gap:16px; }
.project-overview .project-number { font-size:10px; color:#a6b297; }
.project-badge { color:var(--accent); border-color:#b8f74730; background:#b8f74705; font-size:9px; padding:4px 8px; }
.project-caption { padding:10px 22px 18px; border:0; }
.project-caption h3 { font-size:23px; letter-spacing:-.035em; font-weight:600; }
.project-caption p { font-size:12px; line-height:1.5; margin-top:7px; color:#b0b5a9; }
.project-meta { margin-top:12px; gap:10px; }
.project-meta>span { font-size:8px; letter-spacing:.08em; line-height:1.5; }
.project-live-link { font-size:11px; min-height:44px; gap:14px; color:var(--ink); }
.project-live-link span { color:var(--accent); }
.work-more { margin-top:26px; padding-top:0; border:0; }
.work-more .button { font-size:12px; }
.services { display:grid; grid-template-columns:.95fr 1.65fr; gap:5%; background:var(--bg); border-top:0; border-bottom:1px solid var(--line); }
.services-heading h2 { margin:25px 0 17px; font-size:clamp(30px,3vw,44px); line-height:1.1; letter-spacing:-.045em; }
.services-heading>p { font-size:14px; color:#b0b5a9; max-width:380px; line-height:1.6; }
.services-heading>.button { margin-top:22px; padding:12px 16px; font-size:12px; }
.service-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
.service,.service:last-child { padding:19px 16px; border:1px solid #ffffff12; border-radius:5px; background:#15191440; transition:border-color .25s,background .25s; }
.service:hover,.service[open] { border-color:#b8f74740; background:#1b211650; }
.service summary { position:relative; display:grid; grid-template-columns:27px minmax(0,1fr); align-items:start; gap:13px; min-height:112px; }
.service-mark { display:flex; flex-direction:column; gap:19px; }
.service-mark .line-icon { width:25px; height:25px; }
.service-num { font:9px/1.5 monospace; color:#829360; letter-spacing:0; min-width:0; }
.service-title { font-size:13px; line-height:1.5; letter-spacing:-.02em; font-weight:600; }
.service-short { display:block; color:#b0b5a9; font-size:11px; line-height:1.6; margin-top:10px; }
.service-toggle { position:absolute; right:0; bottom:-9px; font-size:15px; color:#9fac85; }
.service-body { margin:18px 0 0; border-top:1px solid var(--line); padding-top:15px; }
.service-body p { font-size:12px; margin-bottom:12px; }
.service-body .micro { font-size:8px; letter-spacing:.02em; line-height:1.7; display:block; }
.studio { background:var(--bg); grid-template-columns:1fr 1.22fr; gap:8%; align-items:center; border-bottom:1px solid var(--line); }
.studio-art { aspect-ratio:1.12; min-height:0; background:#10150c; border-color:#b8f74724; border-radius:3px; }
.studio-art:before { background-image:linear-gradient(#b8f74705 1px,transparent 1px),linear-gradient(90deg,#b8f74705 1px,transparent 1px); }
.orbit { border-color:#b8f74780; }
.studio-art:after { background:var(--accent); box-shadow:60px 220px 0 var(--accent); }
.art-label,.art-foot { font-size:9px; color:#b2cd63; }
.studio h2 { margin:24px 0 20px; font-size:clamp(34px,3.3vw,49px); line-height:1.08; letter-spacing:-.045em; }
.studio-copy>.studio-lead { font-size:17px!important; line-height:1.5; }
.studio-copy>p:not(.eyebrow) { color:#b5b9ad; font-size:14px; line-height:1.6; margin-block:15px; }
.studio-copy .text-link { font-size:13px; min-height:44px; margin-top:8px; }
.intro { background:#111510; padding-block:50px; grid-template-columns:1fr 3fr; border-bottom:1px solid var(--line); }
.intro-content { display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:start; }
.intro-kicker { grid-column:1/-1; margin:0; font-size:12px; }
.statement { font-size:clamp(30px,3vw,44px); }
.intro-note { margin:0; max-width:none; }
.intro-note p { color:var(--muted); }
.process { background:var(--bg); }
.process .section-heading h2 { font-size:34px; }
.contact { background:linear-gradient(90deg,#111510f5,#111510db),url("backgrounds/hero-atmosphere.webp") right center/cover no-repeat; }
.contact-intro h2 { font-size:clamp(42px,5vw,72px); }
.contact-action { display:flex; align-items:center; justify-content:center; align-self:stretch; min-width:0; }
.contact-request {
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  width:100%; max-width:420px; min-height:84px; padding:26px 32px;
  border-radius:8px; font-size:16px; font-weight:600; line-height:1.4;
  transition:background .25s ease,box-shadow .25s ease,transform .25s ease;
}
.contact-request span { font-size:24px; line-height:1; transition:transform .25s ease; }
@media(hover:hover) and (pointer:fine) {
  .contact-request:hover { background:#c9ff69; box-shadow:0 8px 24px #0003; transform:translateY(-2px); }
  .contact-request:hover span { transform:translate(3px,-3px); }
}
.contact-request:focus-visible span { transform:translate(3px,-3px); }
@media(max-width:700px) {
  .contact-action { margin-top:40px; }
  .contact-request { max-width:none; min-height:80px; padding:24px 28px; }
}
@media(prefers-reduced-motion:reduce) {
  .contact-request,.contact-request span { transition:none; }
  .contact-request:hover,.contact-request:hover span,.contact-request:focus-visible span { transform:none; }
}
.field input,.field textarea { border-bottom-color:#657156; }
.submit-button { background:var(--accent); border-color:var(--accent); color:#171b11; }
.consent { color:var(--muted); }
.site-footer { border-radius:0; }
.footer-wordmark { font-size:clamp(45px,13vw,200px); }
.footer-bottom { color:#afb6a4; }
.portfolio-hero { background:linear-gradient(90deg,#0c0e0df5,#0c0e0dad),url("backgrounds/hero-atmosphere.webp") center/cover no-repeat; }
.portfolio-hero h1 { font-size:clamp(40px,6vw,90px); }
.portfolio-intro>p { color:#bcc3b3; font-size:16px; }
.case-study { padding-block:62px; }
.case-number { color:var(--accent); }
.case-heading h2 { font-size:clamp(40px,4.7vw,70px); }
.case-facts dd,.case-description>p { color:#d0d4c7; }
.browser-mockup { border-color:#546047; }
.browser-toolbar { background:#20251d; }
.case-visual { grid-template-columns:minmax(0,1fr) minmax(0,24%); gap:clamp(12px,2vw,24px); }
.case-visual .browser-mockup { align-self:end; }
.case-visual .phone-preview { width:100%; max-width:none; }
.case-visual:hover .browser-mockup,.case-visual:hover .phone-mockup { transform:none; }
.phone-mockup { border-color:#59684b; }
.portfolio-contact { background:#151a12; }
.legal { max-width:1100px; padding-inline:var(--pad); }
.legal .draft-note { background:#171d14; border-color:var(--accent); }
.subpage-footer { border-radius:0; }
@media(max-width:1200px) and (min-width:901px) {
  .site-header nav { margin-left:25px; gap:18px; font-size:11px; }
  .site-header .nav-contact { padding:12px 14px; font-size:11px; }
  .site-header .wordmark { font-size:27px; }
  .hero { min-height:520px; }
  .hero-description p { font-size:14px; }
  .hero-benefits { gap:16px; }
  .hero-benefits h2 { font-size:12px; }
  .hero-benefits p { font-size:11px; }
  .service-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .service,.service:last-child { padding:17px 13px; }
  .service summary { grid-template-columns:24px minmax(0,1fr); gap:10px; }
  .service-title { font-size:12px; }
  .service-short { font-size:10px; }
}
@media(max-width:1100px) {
  .hero { display:flex; flex-direction:column; align-items:stretch; min-height:0; gap:0; padding-top:42px; padding-bottom:35px; }
  .hero h1 { font-size:clamp(38px,6.3vw,58px); max-width:740px; }
  .hero-description { max-width:620px; }
  .hero-showcase { position:relative; inset:auto; flex:none; width:calc(100% + var(--pad)*2); aspect-ratio:1.9; margin:18px calc(var(--pad)*-1) 0; }
  .hero-showcase picture { position:absolute; inset:0; mask-image:linear-gradient(180deg,transparent,black 12%,black 85%,transparent); }
  .hero-showcase img { width:auto; max-width:100%; max-height:100%; mask-image:linear-gradient(90deg,transparent,black 10%),linear-gradient(180deg,transparent,black 7%,black 90%,transparent); }
  .hero-showcase figcaption { bottom:8px; left:var(--pad); right:var(--pad); }
  .hero-showcase figcaption em { display:none; }
  .hero-benefits { max-width:660px; margin-top:24px; }
}
@media(max-width:900px) {
  .site-header { position:relative; height:auto; min-height:76px; z-index:10; flex-wrap:wrap; gap:0 20px; }
  .site-header .wordmark { padding-block:21px; font-size:28px; }
  .menu-toggle { display:none; min-height:44px; margin-left:auto; }
  .has-js .menu-toggle { display:flex; align-items:center; gap:15px; }
  .site-header nav { display:flex; position:static; flex-direction:column; width:100%; margin:0; gap:6px; padding:6px 0 24px; background:var(--bg); }
  .has-js .site-header nav { display:none; position:absolute; top:75px; left:0; right:0; padding:22px var(--pad) 26px; background:#171d14; border-bottom:1px solid #b8f74735; box-shadow:0 20px 35px #0006; }
  .has-js .site-header nav.is-open { display:flex; }
  .site-header nav a { min-height:48px; padding:10px 0; font-size:19px; }
  .site-header nav a[aria-current="page"]:after { bottom:4px; width:35px; }
  .site-header .nav-contact { margin:10px 0 0; padding:15px 20px; width:100%; font-size:14px; justify-content:space-between; }
  .menu-icon { width:20px; height:12px; border-block:1px solid currentColor; }
  .menu-toggle[aria-expanded="true"] .menu-icon { transform:rotate(-45deg); }
  .hero h1 { font-size:clamp(38px,6.3vw,58px); max-width:740px; }
  .hero-description { max-width:620px; }
  .hero-description p { font-size:16px; max-width:620px; }
  .services { grid-template-columns:1fr; gap:30px; }
  .services-heading { max-width:620px; }
  .service-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .intro { display:block; }
  .intro-content { margin-top:25px; }
  .studio { gap:6%; }
  .work { background-image:linear-gradient(90deg,#0c0e0df5,#0c0e0dde),url("backgrounds/hero-atmosphere-mobile.webp"); }
  .contact { background-image:linear-gradient(90deg,#111510f5,#111510db),url("backgrounds/hero-atmosphere-mobile.webp"); }
  .portfolio-hero { background-image:linear-gradient(90deg,#0c0e0df5,#0c0e0dad),url("backgrounds/hero-atmosphere-mobile.webp"); }
}
@media(max-width:700px) {
  .case-visual { grid-template-columns:minmax(0,1fr) minmax(0,28%); }
}
@media(max-width:600px) {
  .section-pad { padding-block:40px; }
  .hero { padding-top:34px; padding-bottom:25px; }
  .hero-copy>.eyebrow { font-size:9px; }
  .hero h1 { font-size:clamp(33px,8.4vw,47px); margin:19px 0 19px; line-height:1.06; }
  .hero-description p { font-size:14px; line-height:1.65; }
  .hero-showcase { aspect-ratio:1330/1183; margin-top:16px; }
  .hero-showcase img { width:100%; }
  .hero-showcase figcaption>span { font-size:8px; }
  .hero-benefits { margin-top:18px; }
  .hero-actions { gap:12px; margin-top:23px; flex-direction:row; flex-wrap:wrap; }
  .hero-actions .button { flex:1 1 135px; width:auto; min-height:50px; padding:14px 15px; font-size:12px; gap:10px; }
  .hero-benefits { grid-template-columns:1fr; gap:16px; }
  .hero-benefits li { display:grid; grid-template-columns:28px 1fr; gap:0 13px; }
  .hero-benefits .line-icon { grid-row:1/3; margin-top:3px; }
  .hero-benefits .line-icon { width:25px; height:25px; }
  .benefit-number { display:none; }
  .hero-benefits h2 { font-size:13px; line-height:1.4; margin:0 0 4px; }
  .hero-benefits p { font-size:12px; line-height:1.55; }
  .work .section-heading { gap:12px; align-items:flex-start; }
  .work .eyebrow { font-size:8px; max-width:170px; }
  .section-heading .work-overview { font-size:9px; gap:9px; min-height:44px; margin-top:-12px; flex-shrink:0; }
  .work-heading { margin:22px 0 26px; }
  .work-heading h2 { font-size:clamp(32px,8.5vw,44px); }
  .work-heading>p { margin-top:18px; font-size:13px; max-width:340px; }
  .projects { grid-template-columns:1fr; gap:22px; }
  .project-stage { gap:10px; padding:18px 14px 20px; }
  .project-overview { padding:14px 18px 0; }
  .project-caption { padding:10px 18px 15px; }
  .project-caption h3 { font-size:22px; }
  .project-meta { flex-direction:row; align-items:center; margin-top:10px; }
  .project-meta>span { max-width:160px; font-size:7px; }
  .project-phone { padding:4px; border-radius:13px; }
  .project-phone img { border-radius:8px; }
  .service-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .service,.service:last-child { padding:16px 13px; }
  .service summary { grid-template-columns:1fr; grid-template-rows:33px auto; align-content:start; gap:14px; min-height:175px; }
  .service-mark { flex-direction:row; align-items:center; gap:12px; }
  .service-title { font-size:13px; }
  .service-short { font-size:11px; margin-top:8px; }
  .services-heading h2 { font-size:32px; }
  .studio { display:flex; flex-direction:column; gap:32px; }
  .studio-art { width:100%; aspect-ratio:1.1; }
  .studio h2 { font-size:34px; }
  .studio-copy>.studio-lead { font-size:16px!important; }
  .studio-copy>p:not(.eyebrow) { font-size:13px; }
  .intro-content { display:block; }
  .intro-kicker { margin-bottom:22px; }
  .intro-note { margin-top:26px; }
  .contact-intro h2 { font-size:clamp(40px,12vw,60px); }
  .case-heading h2 { font-size:clamp(30px,8.4vw,45px); }
  .case-study { padding-block:40px; }
  .portfolio-hero h1 { font-size:clamp(34px,9.3vw,52px); }
  .portfolio-intro>p { font-size:14px; }
}
@media(max-width:360px) {
  .hero h1 { font-size:32px; }
  .hero-benefits { gap:10px; }
  .hero-benefits h2 { font-size:13px; }
  .hero-benefits p { font-size:12px; }
  .service-list { gap:8px; }
  .service,.service:last-child { padding-inline:11px; }
  .service-title { font-size:12px; }
}
@media(max-width:420px) {
  .hero-actions { flex-direction:column; }
  .hero-actions .button { flex-basis:auto; width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .project-stage .browser-mockup,.project-preview:hover .browser-mockup,.project-preview:focus-visible .browser-mockup { transform:none; }
  .project-phone,.project-preview:hover .project-phone { transform:none; }
}