/* WebFrames / studio edition. Shared foundations, then page compositions. */
body.studio[data-page] {
  --ink:#2c3027; --ink-soft:#656c5c; --muted:#727a66; --lime:#d5f56c; --lime-deep:#71883c;
  --paper:#f6f5ef; --white:#fff; --line:#dcdfd2; --soft:#eeefe6; --dark:#2c3027; --dark-2:#454c39;
  --shadow:0 20px 55px #333d2510; background:var(--paper); color:var(--ink);
  font-family:'Segoe UI',system-ui,sans-serif; font-size:15px;
}
body.studio[data-page] h1,body.studio[data-page] h2,body.studio[data-page] h3 { font-family:inherit; font-weight:600; text-wrap:balance; }
body.studio[data-page] h2 { letter-spacing:-.045em; }
body.studio[data-page] p { text-wrap:pretty; }
body.studio[data-page] .container { width:min(1200px,calc(100% - 80px)); }
body.studio[data-page] .section-pad { padding:88px 0; }
body.studio[data-page] .section-muted { background:#eeefe6; }
body.studio[data-page] .section-soft { background:#e9eddf; }
body.studio[data-page] .eyebrow { color:#747d62; font-size:10px; font-weight:650; letter-spacing:.14em; }
body.studio[data-page] .section-heading h2,body.studio[data-page] .projects-section-heading h2 { font-size:clamp(32px,3.3vw,46px); font-weight:550; }
body.studio[data-page] .site-header { border-color:#dddace99; background:#f6f5efed; }
body.studio[data-page] .header-inner { min-height:82px; }
body.studio[data-page] .brand-name { display:block; font-family:inherit; color:#2c3027; font-size:23px; letter-spacing:-1.1px; }
body.studio[data-page] .brand-name>span { display:inline; color:#71883c; }
body.studio[data-page] .brand-name small { display:block; margin-top:5px; color:#737965; font-family:inherit; font-size:8px; letter-spacing:.01em; }
body.studio[data-page] .brand-mark { background:#2c3027; color:#d5f56c; border-color:#434a37; border-radius:12px; }
body.studio[data-page] .nav-link { color:#626a58; font-size:13px; }
body.studio[data-page] .nav-link.active { color:#2c3027; }
body.studio[data-page] .nav-link::after { background:#b8d660; }
body.studio[data-page] .language-switch { background:#ffffff80; border-color:#dbdece; }
body.studio[data-page] .language-button { color:#677052; min-height:28px; }
body.studio[data-page] .language-button.active { background:#2c3027; color:#d5f56c; }
body.studio[data-page] .button { border-radius:11px; font-size:14px; font-weight:600; min-height:51px; }
body.studio[data-page] .button-small { font-size:12px; min-height:43px; }
body.studio[data-page] .button-dark { background:#2c3027; color:#fff; }
body.studio[data-page] .button-dark:hover { background:#454c39; }
body.studio[data-page] .button-lime { background:#d5f56c; color:#2c3027; box-shadow:none; }
body.studio[data-page] .button-lime:hover { background:#e0fa99; box-shadow:0 8px 20px #687c2520; }
body.studio[data-page] .text-link { font-size:14px; font-weight:600; color:#3e4c29; }
body.studio[data-page] .menu-toggle,body.studio[data-page] .menu-toggle[aria-expanded="true"] { color:#30372a; background:#fff; border-color:#d8ddcd; }
body.studio[data-page] .menu-toggle span { background:currentColor; }
.studio-reading-progress { position:absolute; bottom:-1px; left:0; width:100%; height:2px; background:#a7c14b; transform:scaleX(0); transform-origin:left; pointer-events:none; }
body.studio[data-page] .page-hero { position:relative; background:radial-gradient(ellipse at 80% 40%,#e8edcf80,transparent 43%),#f6f5ef; }
body.studio[data-page] .page-hero h1 { max-width:720px; font-size:clamp(43px,4.6vw,65px); line-height:1.06; font-weight:550; letter-spacing:-.055em; margin:24px 0; }
body.studio[data-page] .page-hero p { color:#626b56; font-size:16px; line-height:1.8; max-width:580px; }
body.studio[data-page] .page-hero::after { display:none; }
body.studio[data-page] .page-hero+.section-pad { padding-top:74px; }
body.studio[data-page] .reveal { filter:none; transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay,0ms); }
body.studio[data-page] .reveal.visible { opacity:1; transform:none; }
.studio-art { position:relative; width:100%; min-width:0; }
.studio-art svg { display:block; width:100%; height:100%; overflow:visible; }
.studio-art .scene-float { transform-box:fill-box; transform-origin:center; }
.studio-art.is-inview .scene-float { animation:studio-float 6s ease-in-out infinite; }
.studio-art .scene-draw { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s ease; }
.studio-art.is-inview .scene-draw { stroke-dashoffset:0; }
.studio-hero-art { min-width:0; }
.studio-hero-art .studio-art { transform:rotate(-3deg); }
.studio-hero-art::after { display:block; width:45%; height:1px; margin:0 auto; background:#cfd6bf; content:''; }
@keyframes studio-float { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@keyframes studio-spin { to { transform:rotate(360deg); } }

/* Homepage: a live canvas, illustrated promises and a deliberate selection. */
body.studio[data-page] .intro-lab { background:radial-gradient(ellipse at 83% 35%,#e7edcf88,transparent 44%),#f6f5ef; }
body.studio[data-page] .intro-copy h1 { font-size:clamp(48px,5.4vw,77px); font-weight:550; letter-spacing:-.06em; }
body.studio[data-page] .intro-copy h1 em { color:#687c3f; }
body.studio[data-page] .intro-lead { color:#646b59; }
body.studio[data-page] .intro-window { box-shadow:0 34px 65px #343f231c,0 4px 10px #343f2310; }
body.studio[data-page] .intro-assurance { margin-top:22px; border-top-color:#d8ddcd; }
body.studio[data-page] .trust-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
body.studio[data-page] .trust-card { position:relative; grid-column:auto; padding:0 25px 29px; border:1px solid #dfe2d5; border-radius:18px; background:#fbfcf7; overflow:hidden; }
body.studio[data-page] .trust-card>.studio-art { height:190px; margin:0 0 8px; }
body.studio[data-page] .trust-number { color:#82945a; font-family:inherit; font-size:11px; font-weight:600; }
body.studio[data-page] .trust-card h3 { margin:13px 0 10px; font-size:23px; }
body.studio[data-page] .trust-card p { max-width:100%; font-size:14px; line-height:1.75; }
body.studio[data-page] .trust-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
body.studio[data-page] .service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
body.studio[data-page] .service-card { grid-column:auto; min-height:0; padding:23px; border:1px solid #daddce; border-radius:19px; background:radial-gradient(260px circle at var(--glow-x,50%) var(--glow-y,0%),#eff5d780,transparent),#fffef9; }
body.studio[data-page] .service-card::after { display:none; }
body.studio[data-page] .service-art { height:205px; margin:-10px 0 15px; }
body.studio[data-page] .service-card:nth-child(1) .service-art { background:radial-gradient(ellipse,#eef2df,transparent 70%); }
body.studio[data-page] .service-card:nth-child(2) .service-art { background:#eaf0dc; border-radius:13px; }
body.studio[data-page] .service-card:nth-child(3) .service-art { background:#343c2c; border-radius:13px; }
body.studio[data-page] .service-card:nth-child(3) .service-art svg>circle { opacity:.13; }
body.studio[data-page] .service-card .card-topline { align-items:center; padding-top:14px; border-top:1px solid #e3e5d9; }
body.studio[data-page] .service-card .card-arrow { background:#eef2e1; color:#647b35; }
body.studio[data-page] .service-card h3 { margin:18px 0 12px; font-size:28px; font-weight:550; }
body.studio[data-page] .service-card p { max-width:none; color:#68705e; font-size:14px; line-height:1.75; }
body.studio[data-page] .card-meta { color:#677749; font-size:12px; font-weight:600; }
body.studio[data-page] .service-card ul { gap:10px; margin-bottom:20px; color:#5e6850; font-size:13px; line-height:1.6; }
.studio-service-link { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:50px; margin-top:auto; padding-top:18px; color:#3e4c29; font-size:13px; font-weight:600; }
.studio-service-link>span { font-size:22px; transition:transform .25s; }
.studio-service-link:hover>span { transform:translate(3px,-3px); }
body.studio[data-page] .fine-print { color:#70785f; font-size:11px; }
body.studio[data-page] .home-flow { padding:78px 0; background:#e9eddf; }
body.studio[data-page] .home-flow-heading h2 { font-size:clamp(32px,3.3vw,46px); font-weight:550; }
body.studio[data-page] .home-flow-heading>p,.home-flow-caption p { color:#657151; }
body.studio[data-page] .home-flow-layout { border-color:#d1d9be; box-shadow:0 14px 35px #3e4d2207; }
body.studio[data-page] .home-flow-tabs { background:#e0e6d1; }
body.studio[data-page] .home-flow-tabs button { color:#62714b; }
body.studio[data-page] .home-flow-panel { min-height:270px; }
body.studio[data-page] .faq-item summary { color:#30372a; font-size:15px; font-weight:550; padding-block:25px; }
body.studio[data-page] .faq-item summary:hover { color:#637938; }
body.studio[data-page] .faq-item>p { color:#68705c; font-size:14px; line-height:1.8; }
body.studio[data-page] .faq-item summary span { flex-shrink:0; background:#e9eedb; color:#677e38; }
body.studio[data-page] .faq-layout { gap:50px; }

/* Equal, generous project cards. The concept and future slots stay explicit. */
body.studio[data-page] .project-grid,body.studio[data-page] .projects-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
body.studio[data-page] .project-card,body.studio[data-page] .projects-grid .project-card-feature { display:flex; grid-column:auto; width:100%; flex-direction:column; overflow:hidden; border:1px solid #daddce; border-radius:20px; background:#fffef9; box-shadow:none; }
body.studio[data-page] .project-card .nocturne-cover-link { height:auto; overflow:hidden; }
body.studio[data-page] .project-grid .project-visual,body.studio[data-page] .project-card-feature .nocturne-visual,body.studio[data-page] .project-card-placeholder .project-visual { height:auto; min-height:0; width:100%; aspect-ratio:1.65; margin:0; border:0; border-radius:0; transform:none; background:#e8ecdF; }
body.studio[data-page] .project-card .nocturne-visual { background:#211815; }
body.studio[data-page] .project-visual>.studio-art { width:90%; height:100%; }
body.studio[data-page] .project-card-placeholder:nth-child(3) .project-visual { background:#eae8dd; }
body.studio[data-page] .project-card-placeholder:nth-child(4) .project-visual { background:#e3e7dc; }
body.studio[data-page] .project-card .project-caption,body.studio[data-page] .project-card-feature .feature-caption { display:flex; flex:1; flex-direction:column; align-items:stretch; padding:26px; gap:19px; }
body.studio[data-page] .project-card .feature-info h3 { font-size:32px; margin:9px 0 12px; font-weight:600; letter-spacing:-.035em; }
body.studio[data-page] .project-card .feature-info p { max-width:420px; color:#626c54; font-size:14px; line-height:1.75; margin:0 0 18px; }
body.studio[data-page] .project-card .eyebrow { font-size:10px; }
body.studio[data-page] .project-card .project-tech { color:#747c65; font-size:10px; }
body.studio[data-page] .project-tech i { color:#607d32; }
body.studio[data-page] .project-card .project-actions { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:auto; padding-top:18px; border-top:1px solid #dce1d1; gap:14px; }
body.studio[data-page] .project-actions a:first-child { display:inline-flex; align-items:center; min-height:46px; gap:12px; padding:0 18px; border-radius:10px; background:#2c3027; color:#fff; font:600 14px/1.3 'Segoe UI',sans-serif; }
body.studio[data-page] .project-actions a:last-child { color:#60743b; font-size:14px; }
body.studio[data-page] .project-card-placeholder .project-caption { position:relative; min-height:150px; padding-right:67px; }
body.studio[data-page] .project-card-placeholder h3 { max-width:300px; margin-top:12px; font-size:25px; line-height:1.2; }
body.studio[data-page] .project-placeholder-status { position:absolute; right:24px; top:27px; padding:0; background:none; border:0; color:#94a17c; font-size:21px; font-weight:400; }
.studio-slot-end { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:auto; padding-top:25px; color:#8b9875; font-size:11px; }
.studio-slot-end i { font-size:24px; font-style:normal; }
body.studio[data-page] .project-card-placeholder:last-child { grid-column:auto; width:100%; }
body.studio[data-page] .project-card:hover { transform:translateY(-4px); box-shadow:0 20px 42px #3c462312; }
body.studio[data-page] .project-card .nocturne-preview-image { transition:transform .8s cubic-bezier(.2,.7,.2,1); }
body.studio[data-page] .project-card:hover .nocturne-preview-image { transform:scale(1.035); }
.studio-next-project { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #d7dfc5; border-radius:20px; background:#e8eed9; }
.studio-next-art { display:flex; justify-content:center; aspect-ratio:1.65; background:radial-gradient(ellipse,#f3f7e8,transparent 70%); }
.studio-next-art>.studio-art { width:90%; height:100%; }
.studio-next-copy { padding:26px; }
.studio-next-copy h3 { max-width:360px; font-size:32px; line-height:1.15; letter-spacing:-.045em; margin:14px 0; }
.studio-next-copy p { max-width:390px; margin:0 0 24px; color:#65744c; font-size:14px; line-height:1.75; }
body.studio[data-page] .projects-work-art { max-width:530px; }
body.studio[data-page] .projects-work-slot { border-color:#dde2d2; }
body.studio[data-page] .projects-invite { background:#e4ebd3; color:#30372a; border:1px solid #d6dfc2; }
body.studio[data-page] .projects-invite-copy p,body.studio[data-page] .projects-invite-copy .eyebrow { color:#66754e; }
body.studio[data-page] .projects-invite-index { background:#d5f56c; color:#435330; border-color:#c0d67e; }
body.studio[data-page] .projects-invite-index i { border-color:#e4ebd3; background:#839c45; }

/* Services: illustrated offering, a project toolkit and a visual schedule. */
body.studio[data-page] .services-hero-grid { grid-template-columns:1.05fr 1fr; gap:55px; }
body.studio[data-page] .included-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:55px; align-items:center; }
body.studio[data-page] .included-layout .section-heading { margin:0; }
.scope-art { max-width:350px; margin:20px auto 0; }
body.studio[data-page] .included-checks { display:grid; grid-template-columns:1fr; gap:0; margin:0; border:1px solid #dce1d1; border-radius:18px; overflow:hidden; background:#fbfcf6; }
body.studio[data-page] .included-checks li { min-height:73px; padding:19px 22px; border:0; border-bottom:1px solid #e3e7d9; border-radius:0; background:transparent; font-size:14px; line-height:1.55; color:#566448; }
body.studio[data-page] .included-checks li:last-child { border-bottom:0; }
body.studio[data-page] .included-checks li>span { flex-shrink:0; background:#e6efce; color:#627c32; }
body.studio[data-page] .boundary-card { background:#fbfcf6; border:1px solid #d8decb; padding:32px; }
body.studio[data-page] .boundary-card h2 { font-size:31px; }
body.studio[data-page] .boundary-card p { color:#667254; font-size:14px; line-height:1.8; }
body.studio[data-page] .boundary-accent { background:#e1eaca; color:#30372a; }
body.studio[data-page] .boundary-accent .eyebrow { color:#738454; }
body.studio[data-page] .boundary-revision-step i { border-color:#c1ceaa; background:#f5f8ec; color:#627844; }
body.studio[data-page] .boundary-revision-step b { color:#687b4b; }
body.studio[data-page] .boundary-revision-visual em { background:#c4d0b0; }
body.studio[data-page] .timing-layout-stack .timing-list { gap:20px; }
body.studio[data-page] .timing-layout-stack .timing-row { position:relative; grid-template-columns:38px minmax(0,1fr); grid-template-areas:'index type' '. value' 'hint hint' 'track track'; min-height:190px; padding:24px; border-color:#dce1d2; background:#fffef8; box-shadow:none; }
body.studio[data-page] .timing-layout-stack .timing-row strong { font-size:22px; font-weight:600; }
body.studio[data-page] .timing-row::before { display:none; }
body.studio[data-page] .timing-hint { color:#727b65; font-size:12px; line-height:1.65; }
.studio-time-track { grid-area:track; display:grid; grid-template-columns:repeat(12,1fr); gap:4px; margin-top:15px; }
.studio-time-track i { height:7px; background:#e8ecdf; border-radius:2px; }
.studio-time-track i.filled { background:#bddb6c; }

/* Case study belongs to WebFrames; the artwork keeps the fragrance palette. */
body.studio[data-page="case-nocturne"] .case-hero-grid { grid-template-columns:1.1fr .85fr; gap:55px; }
body.studio[data-page="case-nocturne"] .case-hero h1 { font-size:clamp(42px,4.6vw,65px); }
body.studio[data-page="case-nocturne"] .case-scent-art { padding:20px; aspect-ratio:1.15; border:1px solid #dce0d1; border-radius:24px; background:radial-gradient(circle at 50% 45%,#fff,#e9ecde); }
body.studio[data-page="case-nocturne"] .case-preview-heading h2 { color:#30372a; }
body.studio[data-page="case-nocturne"] .case-preview-heading>p { color:#687258; font-size:14px; }
body.studio[data-page="case-nocturne"] .case-showcase { box-shadow:0 25px 55px #333d2520; border:8px solid #fff; border-radius:20px; background:#fff; }
body.studio[data-page="case-nocturne"] .case-showcase figcaption { padding:18px 16px 10px; color:#747b65; border:0; font-size:10px; letter-spacing:.08em; }
body.studio[data-page="case-nocturne"] .case-overview-section { background:#f6f5ef; }
body.studio[data-page="case-nocturne"] .case-overview-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:65px; align-items:center; }
body.studio[data-page="case-nocturne"] .case-overview-intro>p { color:#687258; font-size:16px; line-height:1.85; }
body.studio[data-page="case-nocturne"] .case-meta { grid-template-columns:1fr; margin:0; }
body.studio[data-page="case-nocturne"] .case-meta>div { background:#fbfcf7; border-color:#dce1d2; padding:22px; }
body.studio[data-page="case-nocturne"] .case-meta span { color:#7a8368; font-size:10px; }
body.studio[data-page="case-nocturne"] .case-meta strong { color:#3f4b31; font-size:14px; }
body.studio[data-page="case-nocturne"] .case-scope-item { min-height:110px; border-color:#d1dbc0; background:#f5f8ec; }
body.studio[data-page="case-nocturne"] .case-scope-number { color:#7b9253; }
body.studio[data-page="case-nocturne"] .case-scope-item p { color:#4b5e37; font-size:15px; }
body.studio[data-page="case-nocturne"] .case-scope-item>i { background:#dcebbd; color:#4d682b; border-color:#c6d8a4; }
body.studio[data-page="case-nocturne"] .tech-block { border-color:#d1dbc0; }
body.studio[data-page="case-nocturne"] .tech-block>div span { background:#f9fbf2; border-color:#d0dabb; color:#52683a; }
body.studio[data-page="case-nocturne"] .concept-note { background:#f1f2e9; border-color:#d9dfcd; }
body.studio[data-page="case-nocturne"] .concept-note p { color:#687458; font-size:14px; line-height:1.7; }
body.studio[data-page="case-nocturne"] .case-note-label { color:#607547; font-size:10px; }
body.studio[data-page="case-nocturne"] .concept-icon { background:#e2e9cf; color:#80984f; }
.identity-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.identity-type,.identity-colours,.identity-devices { position:relative; overflow:hidden; border:1px solid #deded2; border-radius:20px; padding:30px; }
.identity-type { background:#29201b; color:#f0e6d8; }
body.studio .identity-type .eyebrow { color:#bba38e; }
.identity-type>strong { display:block; font-family:Georgia,serif; font-size:92px; line-height:1; font-weight:400; margin:25px 0; }
.identity-type>strong span { display:block; font-size:39px; font-style:italic; }
.identity-type p { color:#c5ad98; font-size:10px; letter-spacing:.18em; margin:0; }
.identity-colours { background:#fffdf7; }
.identity-colours>div { display:flex; height:190px; margin-top:25px; }
.identity-colours i { position:relative; flex:1; background:var(--swatch); border-radius:60px; margin-left:-8px; box-shadow:inset 0 0 0 1px #0000000a; }
.identity-colours i:first-child { margin-left:0; }
.identity-colours b { position:absolute; bottom:24px; left:0; width:100%; color:#fff; font:500 11px 'Segoe UI',sans-serif; text-align:center; }
.identity-colours i:last-child b { color:#5c4c3c; }
.identity-devices { grid-column:1/-1; min-height:430px; background:#e9e9df; }
.identity-desktop { width:69%; margin:35px auto 0; border:8px solid #fdfcf7; border-radius:17px; overflow:hidden; box-shadow:0 25px 40px #493c2520; }
.identity-desktop img { display:block; width:100%; }
.identity-phone { position:absolute; bottom:30px; right:11%; width:14%; aspect-ratio:.5; border:7px solid #2d3027; border-radius:26px; overflow:hidden; box-shadow:0 18px 35px #333d2525; }
.identity-phone img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.identity-devices.is-inview .identity-phone { animation:studio-float 7s ease-in-out infinite; }

/* Brief: one page, grouped questions, a quiet progress guide. */
body.studio[data-page] .brief-hero-grid { grid-template-columns:1fr 1fr; gap:60px; }
body.studio[data-page] .brief-layout { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:35px; }
body.studio[data-page] .brief-aside,body.studio[data-page] .form-card { grid-column:auto; min-width:0; border:1px solid #dadecd; border-radius:20px; background:#fffef9; box-shadow:none; }
body.studio[data-page] .brief-aside { padding:25px; background:#e5edd5; }
body.studio[data-page] .brief-aside>.eyebrow,body.studio[data-page] .brief-aside>h2,body.studio[data-page] .brief-aside>p { display:none; }
.studio-brief-guide>p { font-size:25px; font-weight:550; line-height:1.25; letter-spacing:-.03em; margin:18px 0 27px; color:#3f4e2f; }
.studio-brief-guide nav { display:grid; gap:4px; margin-bottom:26px; }
.studio-brief-guide nav a { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #cad6b4; color:#53683b; font-size:13px; }
.studio-brief-guide nav a>span { font-size:10px; color:#83986a; }
.studio-brief-guide nav a>i { margin-left:auto; font-size:17px; font-style:normal; }
.studio-brief-guide nav a:hover { color:#242c1c; }
.studio-form-progress { display:flex; flex-wrap:wrap; justify-content:space-between; gap:13px; font-size:11px; color:#6e8254; margin-bottom:24px; }
.studio-form-progress>i { width:100%; height:4px; border-radius:8px; background:#d0dcbb; overflow:hidden; }
.studio-form-progress em { display:block; height:100%; width:0; background:#88a347; transition:width .4s ease; }
body.studio[data-page] .brief-aside .full-button { background:#30372a; color:#fff; font-size:13px; min-height:49px; }
body.studio[data-page] .brief-email { background:#eff4e5; border-color:#d3dfbe; color:#61774a; }
body.studio[data-page] .aside-note { border-color:#cad6b4; }
body.studio[data-page] .aside-note p { color:#6d8057; font-size:12px; }
body.studio[data-page] .form-card { padding:35px; }
body.studio[data-page] .form-card>h2 { font-size:32px; }
.studio-form-heading { display:flex; align-items:center; gap:15px; padding:24px 0; margin-top:12px; border-top:1px solid #e3e6d9; scroll-margin-top:110px; }
.studio-form-heading>span { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border-radius:12px; background:#eaf1d9; color:#7a9250; font-size:12px; }
.studio-form-heading h3 { margin:0 0 4px; font-size:20px; letter-spacing:-.025em; }
.studio-form-heading p { margin:0; color:#7c856c; font-size:12px; line-height:1.5; }
body.studio[data-page] .form-field>span { color:#596647; font-size:13px; font-weight:550; margin-bottom:9px; }
body.studio[data-page] .form-field input,body.studio[data-page] .form-field textarea,body.studio[data-page] .select-trigger { border-color:#dce1d1; background:#f8f9f2; border-radius:10px; color:#30372a; font-size:14px; padding:14px; }
body.studio[data-page] .form-field input::placeholder,body.studio[data-page] .form-field textarea::placeholder { color:#89917c; }
body.studio[data-page] .select-menu { border-color:#d7dfc7; background:#fffef9; box-shadow:0 15px 40px #2d3c2018; }
body.studio[data-page] .select-value.is-placeholder { color:#89917c; }
body.studio[data-page] .form-field input:focus,body.studio[data-page] .form-field textarea:focus { background:#fff; border-color:#a1b967; box-shadow:0 0 0 3px #d5f56c35; }
body.studio[data-page] .form-field { margin-bottom:23px; }
body.studio[data-page] .form-note { color:#768263; font-size:12px; line-height:1.7; }

/* A consistent closing scene on every page. */
body.studio[data-page] .home-invitation { background:#e9eedc; border-color:#d5ddc5; padding:48px 0; }
body.studio[data-page] .home-invitation-card { gap:65px; }
body.studio[data-page] .home-invitation h2 { margin:16px 0; font-size:clamp(32px,3.2vw,44px); font-weight:550; }
body.studio[data-page] .home-invitation-copy>p { font-size:14px; line-height:1.7; }
body.studio[data-page] .home-brief-link { min-height:62px; margin-top:14px; }
body.studio[data-page] .home-brief-link>b { font-size:19px; }
body.studio[data-page] .home-brief-link>span { position:relative; width:43px; height:43px; flex-basis:43px; overflow:hidden; font-size:24px; transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .45s; }
body.studio[data-page] .home-brief-link .brief-arrow { position:absolute; top:12px; left:12px; display:block; width:19px; height:19px; transition:transform .5s cubic-bezier(.22,.75,.2,1); }
body.studio[data-page] .home-brief-link .brief-arrow-out { transform:translate(0,0); }
body.studio[data-page] .home-brief-link .brief-arrow-in { transform:translate(-34px,34px); }
body.studio[data-page] .home-brief-link:is(:hover,:focus-visible)>span { transform:scale(1.1); background:#d5f56c; box-shadow:0 0 0 7px #d5f56c2b; }
body.studio[data-page] .home-brief-link:is(:hover,:focus-visible) .brief-arrow-out { transform:translate(34px,-34px); }
body.studio[data-page] .home-brief-link:is(:hover,:focus-visible) .brief-arrow-in { transform:translate(0,0); }
body.studio[data-page] .home-brief-link:active>span { transform:scale(.96); box-shadow:0 0 0 3px #d5f56c2b; }
body.studio[data-page] .home-invitation small { margin-top:12px; }
body.studio[data-page] .home-contact-stack { max-width:310px; }
body.studio[data-page] .home-contact-card { padding:20px; background:#fcfdf6; box-shadow:0 24px 40px #5d6e2a0a; }
body.studio[data-page] .home-contact-top { margin-bottom:20px; }
body.studio[data-page] .home-contact-card strong { margin-top:6px; color:#3c4d2c; font-size:27px; }
body.studio[data-page] .home-contact-bottom { margin-top:18px; padding-top:13px; }
body.studio[data-page] .home-contact-email { margin-top:12px; }
body.studio[data-page] .home-contact-top>i { background:#d5f56c; color:#647a36; }
body.studio[data-page] .home-contact-top>i { position:relative; width:46px; height:46px; background:linear-gradient(145deg,#e5f9b0,#d1ee85); box-shadow:inset 0 1px 0 #fff,0 10px 20px #6d843512; border-radius:14px; }
body.studio[data-page] .home-contact-top svg { width:27px; height:27px; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
body.studio[data-page] .home-contact-card:hover svg { transform:translate(3px,-4px) rotate(-7deg); }
body.studio[data-page] .nocturne-cover-link { position:relative; }
body.studio[data-page] .nocturne-cover-link::after { position:absolute; right:20px; bottom:20px; display:grid; place-items:center; width:49px; height:49px; border-radius:50%; background:#f6f5ef; color:#343c2c; content:'↗'; font-size:24px; opacity:0; transform:translateY(8px); transition:opacity .3s,transform .3s; }
body.studio[data-page] .nocturne-cover-link:hover::after,body.studio[data-page] .nocturne-cover-link:focus-visible::after { opacity:1; transform:translateY(0); }
body.studio[data-page] .site-footer { padding:45px 0 0; background:#f6f5ef; color:#3f4a31; border-top:1px solid #dce1d1; }
body.studio[data-page] .footer-top { display:grid; grid-template-columns:1.3fr 1fr .7fr; gap:50px; padding-bottom:30px; }
body.studio[data-page] .footer-brand>p { color:#788267; font-size:13px; max-width:280px; }
body.studio[data-page] .brand-footer .brand-name { color:#30372a; font-size:30px; }
body.studio[data-page] .brand-footer .brand-mark { background:#d5f56c; color:#3d4c2b; border-color:#c9e38b; }
body.studio[data-page] .footer-heading { color:#808d6b; font-size:10px; }
body.studio[data-page] .footer-column { gap:14px; }
body.studio[data-page] .footer-column>a { color:#536342; font-size:14px; }
body.studio[data-page] .footer-column>a:hover { color:#28341b; }
body.studio[data-page] .footer-bottom { padding:21px 0; border-color:#dce1d1; color:#808b70; font-size:10px; }

@media(min-width:761px) and (max-width:1000px) {
  body.studio[data-page] .faq-layout { grid-template-columns:repeat(12,minmax(0,1fr)); gap:28px; }
  body.studio[data-page] .faq-layout>.section-heading { grid-column:span 5; }
  body.studio[data-page] .faq-layout .faq-list { grid-column:span 7; }
  body.studio[data-page] .faq-layout h2 { font-size:32px; }
  body.studio[data-page] .trust-grid,body.studio[data-page] .service-grid { gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.studio[data-page] .trust-grid>:last-child,body.studio[data-page] .service-grid>:last-child { grid-column:auto; width:100%; }
  body.studio[data-page] .trust-card,body.studio[data-page] .service-card { padding:18px; }
  body.studio[data-page] .trust-card>.studio-art,body.studio[data-page] .service-art { height:145px; }
  body.studio[data-page] .service-card h3 { font-size:23px; }
  body.studio[data-page] .trust-card h3 { font-size:21px; }
  body.studio[data-page] .brief-layout { grid-template-columns:.7fr 1.3fr; gap:20px; }
  body.studio[data-page] .brief-aside { padding:19px; }
  body.studio[data-page] .form-card { padding:25px; }
  body.studio[data-page] .timing-layout-stack .timing-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  body.studio[data-page] .timing-layout-stack .timing-row:last-child { grid-column:auto; width:100%; }
  body.studio[data-page] .timing-layout-stack .timing-row { padding:19px; }
}
@media(max-width:1000px) {
  body.studio[data-page] .container { width:calc(100% - 48px); }
  body.studio[data-page] .main-nav { gap:18px; }
  body.studio[data-page] .page-hero h1 { font-size:46px; }
  body.studio[data-page] .services-hero-grid,body.studio[data-page] .brief-hero-grid,body.studio[data-page] .case-hero-grid { gap:25px; }
  body.studio[data-page] .section-pad { padding:70px 0; }
  body.studio[data-page] .included-layout { gap:30px; }
  body.studio[data-page] .home-invitation-card { gap:35px; }
  body.studio[data-page] .case-overview-layout { gap:35px; }
  body.studio[data-page] .project-card .project-caption { padding:23px; }
  .identity-colours { padding:24px; }
  .identity-devices { min-height:340px; }
}
@media(max-width:760px) {
  body.studio[data-page] .container { width:min(560px,calc(100% - 36px)); }
  body.studio[data-page] .header-inner { min-height:72px; }
  body.studio[data-page] .header-inner.container { width:calc(100% - 36px); }
  body.studio[data-page] .main-nav.open { background:#f6f5ef; border-color:#dedfce; }
  body.studio[data-page] .section-pad { padding:58px 0; }
  body.studio[data-page] .page-hero+.section-pad { padding-top:52px; }
  body.studio[data-page] .page-hero h1 { font-size:clamp(38px,8vw,52px); margin:21px 0; }
  body.studio[data-page] .page-hero p { font-size:15px; }
  body.studio[data-page] .section-heading h2,body.studio[data-page] .projects-section-heading h2 { font-size:34px; }
  body.studio[data-page] .services-hero-grid,body.studio[data-page] .projects-hero-grid,body.studio[data-page] .brief-hero-grid,body.studio[data-page] .case-hero-grid { grid-template-columns:1fr; gap:25px; }
  body.studio[data-page] .studio-hero-art { width:min(100%,420px); margin:auto; }
  body.studio[data-page] .projects-work-art { width:min(100%,410px); }
  body.studio[data-page] .brief-hero-visual { width:min(100%,420px); }
  body.studio[data-page] .intro-copy h1 { font-size:clamp(43px,9.5vw,60px); }
  body.studio[data-page] .trust-grid,body.studio[data-page] .service-grid { grid-template-columns:1fr; gap:18px; }
  body.studio[data-page] .trust-grid>:last-child,body.studio[data-page] .service-grid>:last-child { grid-column:auto; width:100%; }
  body.studio[data-page] .trust-card { padding:22px; display:grid; grid-template-columns:1fr 105px; gap:0 15px; }
  body.studio[data-page] .trust-card>.studio-art { grid-column:2; grid-row:1/4; align-self:center; height:120px; margin:0; }
  body.studio[data-page] .trust-card h3 { grid-column:1; font-size:22px; }
  body.studio[data-page] .trust-card p { grid-column:1/-1; font-size:14px; }
  body.studio[data-page] .trust-number { grid-column:1; }
  body.studio[data-page] .service-card { padding:24px; }
  body.studio[data-page] .service-art { height:205px; }
  body.studio[data-page] .service-card h3 { font-size:29px; }
  body.studio[data-page] .home-flow { padding:55px 0; }
  body.studio[data-page] .home-flow-panel { min-height:230px; }
  body.studio[data-page] .home-flow-heading h2 { font-size:34px; }
  body.studio[data-page] .home-flow-tabs button>b { display:none; }
  body.studio[data-page] .faq-layout { gap:26px; }
  body.studio[data-page] .faq-item summary { padding-block:23px; font-size:14px; }
  body.studio[data-page] .project-grid,body.studio[data-page] .projects-grid { grid-template-columns:1fr; gap:24px; }
  body.studio[data-page] .project-grid .project-visual,body.studio[data-page] .project-card-feature .nocturne-visual,body.studio[data-page] .project-card-placeholder .project-visual { aspect-ratio:1.65; min-height:0; }
  body.studio[data-page] .project-card .project-caption { padding:23px; }
  body.studio[data-page] .project-card-placeholder .project-caption { padding-right:68px; min-height:140px; }
  body.studio[data-page] .project-card .feature-info h3 { font-size:29px; }
  body.studio[data-page] .project-card-placeholder h3 { font-size:25px; }
  .studio-next-copy { padding:23px; }
  .studio-next-copy h3 { font-size:29px; }
  body.studio[data-page] .projects-invite { grid-template-columns:1fr; padding:28px; }
  body.studio[data-page] .projects-invite-index { display:none; }
  body.studio[data-page] .included-layout { grid-template-columns:1fr; gap:27px; }
  .scope-art { display:none; }
  body.studio[data-page] .included-checks li { min-height:74px; padding:19px; }
  body.studio[data-page] .boundary-grid { grid-template-columns:1fr; gap:20px; }
  body.studio[data-page] .boundary-card { padding:27px; grid-column:auto; }
  body.studio[data-page] .boundary-card h2 { font-size:29px; }
  body.studio[data-page] .timing-layout-stack .timing-list { grid-template-columns:1fr; }
  body.studio[data-page] .timing-layout-stack .timing-row { min-height:170px; }
  body.studio[data-page] .timing-layout-stack .timing-row:last-child { width:100%; grid-column:auto; }
  body.studio[data-page="case-nocturne"] .case-hero-grid { grid-template-columns:1fr; }
  body.studio[data-page="case-nocturne"] .case-hero h1 { font-size:42px; }
  body.studio[data-page="case-nocturne"] .case-scent-art { max-width:390px; aspect-ratio:1.5; padding:10px; }
  body.studio[data-page="case-nocturne"] .case-preview-heading { flex-direction:column; align-items:start; gap:18px; }
  body.studio[data-page="case-nocturne"] .case-showcase { border-width:5px; border-radius:14px; }
  body.studio[data-page="case-nocturne"] .case-showcase figcaption { font-size:8px; gap:15px; padding:12px 8px 7px; }
  body.studio[data-page="case-nocturne"] .case-overview-layout { grid-template-columns:1fr; gap:28px; }
  body.studio[data-page="case-nocturne"] .case-scope-grid { grid-template-columns:1fr; }
  .identity-grid { grid-template-columns:1fr; }
  .identity-type>strong { font-size:80px; }
  .identity-colours>div { height:145px; }
  .identity-devices { min-height:235px; padding:23px; }
  .identity-desktop { width:86%; margin-top:27px; border-width:5px; border-radius:10px; }
  .identity-phone { width:20%; border-width:4px; border-radius:15px; bottom:22px; right:7%; }
  body.studio[data-page] .brief-layout { grid-template-columns:1fr; gap:24px; }
  body.studio[data-page] .brief-aside { position:static; padding:24px; }
  .studio-brief-guide nav { display:none; }
  .studio-brief-guide>p { max-width:340px; margin-bottom:24px; }
  body.studio[data-page] .form-card { padding:23px; }
  body.studio[data-page] .form-field input,body.studio[data-page] .form-field textarea,body.studio[data-page] .select-trigger { font-size:16px; }
  body.studio[data-page] .home-invitation { padding:38px 0; }
  body.studio[data-page] .home-invitation-card { grid-template-columns:1fr; gap:25px; }
  body.studio[data-page] .home-invitation h2 { font-size:34px; }
  body.studio[data-page] .home-contact-stack { max-width:none; }
  body.studio[data-page] .footer-top { grid-template-columns:1fr 1fr; gap:30px 20px; }
  body.studio[data-page] .footer-brand { grid-column:1/-1; }
  body.studio[data-page] .footer-bottom { flex-wrap:wrap; gap:12px; }
  body.studio[data-page] .footer-column>a { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  body.studio[data-page] .home-brief-link:is(:hover,:focus-visible)>span { transform:none; }
  body.studio[data-page] .home-brief-link:is(:hover,:focus-visible) .brief-arrow-out { transform:none; }
  body.studio[data-page] .home-brief-link .brief-arrow-in { display:none; }
  html { scroll-behavior:auto; }
  body.studio[data-page] *,body.studio[data-page] *::before,body.studio[data-page] *::after { animation:none!important; transition:none!important; }
  body.studio[data-page] .reveal { opacity:1; transform:none; }
  .studio-art .scene-draw { stroke-dashoffset:0; }
}