/* Homepage review v4: shared controls, projects, contact and footer. */
.canvas { --bm-ink:#24232a; --bm-muted:#625e6a; --bm-accent:#7140c8; --bm-line:#e5dfed; --bm-surface:#f7f4fc; }
.bm-icon { display:inline-block; width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.bm-icon-small { width:18px; height:18px; }
.canvas button, .canvas a, .canvas input, .canvas textarea { -webkit-tap-highlight-color:transparent; }
.canvas :is(button,a,input,textarea):focus-visible { outline:2px solid var(--bm-accent); outline-offset:4px; }
.canvas .heading { align-items:flex-start; }
.canvas .heading h2 { margin-bottom:0; }
.canvas .heading > button { flex-shrink:0; }
.canvas .text-action { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:8px 0; border:0; border-radius:var(--bm-radius-none); border-bottom:1px solid #bdb1cb; background:transparent; text-decoration:none; font:400 12px/1.5 Be,Arial,sans-serif; }
.canvas .text-action:hover { color:var(--bm-accent); border-color:var(--bm-accent); background:transparent; }
.hero-cta .bm-icon { width:22px; height:22px; }
.canvas #clients .logos { gap:16px; }
.canvas #clients .logos > .client-logo-slot { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; flex:1 0 148px; height:88px; border:1px dashed #c5bdcf; padding:16px; color:#756b80; font-size:12px; }
.client-logo-slot small { font-size:10px; letter-spacing:.08em; }
.canvas #projects { padding-top:56px; }
.project-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.project-filters button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:10px 16px; border:1px solid var(--bm-line); border-radius:var(--bm-radius-pill); background:white; font:400 12px/1.4 Be,Arial,sans-serif; white-space:nowrap; }
.project-filters button .bm-icon { width:14px; height:14px; visibility:hidden; }
.project-filters button[aria-pressed=true] { color:white; background:var(--bm-accent); border-color:var(--bm-accent); }
.project-filters button[aria-pressed=true] .bm-icon { visibility:visible; }
.project-filters button:hover:not([aria-pressed=true]) { background:var(--bm-surface); }
.canvas .project-count { margin:12px 0 20px; font-size:12px; color:var(--bm-muted); }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.project-card { min-width:0; }
.project-card.is-featured { grid-column:1/-1; }
.project-cover { display:block; position:relative; width:100%; padding:0; border:0; border-radius:var(--bm-radius-media); overflow:hidden; background:#efedf3; }
.project-cover img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform .3s ease; }
.project-cover:hover img { transform:scale(1.015); }
.project-cover::after { content:""; position:absolute; inset:0; border:1px solid #24232a12; border-radius:inherit; pointer-events:none; }
.project-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0 4px; }
.canvas .project-meta h3 { margin:0 0 5px; font-size:19px; font-weight:600; }
.project-meta p { margin:0; font-size:12px; }
.project-meta .bm-icon { width:20px; height:20px; color:var(--bm-accent); }
.project-empty { padding:24px; background:var(--bm-surface); border-radius:var(--bm-radius-card); }
.canvas .service > .bm-icon { width:22px; height:22px; color:var(--bm-accent); }
.canvas .service-action { display:grid; place-items:center; padding:0; width:44px; height:44px; border:0; border-radius:var(--bm-radius-circle); background:transparent; }
.canvas .service { grid-template-columns:28px 1fr 1.2fr 44px; }
.canvas .service-action:hover { background:var(--bm-surface); color:var(--bm-accent); }
.canvas #contact { position:relative; background:#f7f4fc; padding:48px 4.5% 0; }
.contact-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; align-items:end; }
.contact-copy { min-width:0; padding-bottom:48px; }
.canvas #contact h2 { font-size:clamp(30px,3.5cqw,42px); line-height:1.2; letter-spacing:-.035em; margin:14px 0 16px; }
.canvas #contact .contact-intro { font-size:14px; line-height:1.7; margin:0 0 20px; }
.canvas #contact .form-note { display:flex; align-items:flex-start; gap:8px; font-size:11px; line-height:1.7; margin:0 0 20px; color:#675878; }
.form-note .bm-icon { width:16px; height:16px; margin-top:1px; }
.contact-form fieldset { margin:0; padding:0; border:0; min-width:0; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field { min-width:0; }
.form-field-wide { grid-column:1/-1; }
.contact-form label { display:block; margin-bottom:7px; font-size:12px; color:var(--bm-ink); }
.contact-form label span { font-size:11px; color:var(--bm-muted); }
.contact-form input,.contact-form textarea { width:100%; max-width:100%; min-width:0; min-height:46px; padding:12px; border:1px solid #c8bed4; border-radius:var(--bm-radius-input); background:#ffffff; font:400 15px/1.5 Be,Arial,sans-serif; color:var(--bm-ink); }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#7b7483; }
.contact-form textarea { display:block; min-height:88px; resize:vertical; }
.contact-form [aria-invalid=true] { border-color:#a52442; }
.canvas #contact .field-error { color:#98203d; font-size:12px; line-height:1.6; margin:6px 0 0; }
.canvas .contact-submit { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:48px; margin-top:20px; padding:12px 24px; border:1px solid var(--bm-accent); border-radius:var(--bm-radius-pill); background:var(--bm-accent); color:#fff; font:600 13px/1.6 Be,Arial,sans-serif; }
.canvas .contact-submit:hover { background:#6132b4; }
.canvas #contact .form-status { font-size:12px; line-height:1.6; margin:12px 0 0; }
.canvas #contact .form-status:empty { display:none; }
.contact-portrait { position:relative; isolation:isolate; width:100%; max-width:520px; height:clamp(440px,50cqw,600px); margin:0; justify-self:center; overflow:hidden; }
.contact-portrait::before { content:""; position:absolute; z-index:-1; inset:13% 0 0; border-radius:50% 50% 0 0; background:radial-gradient(ellipse at 50% 60%,#dfd9f3 0%,#ece5f8 45%,transparent 72%); }
.contact-orbit { position:absolute; z-index:0; inset:18% 4% 13%; border:1px solid #d7c9e8; border-radius:50%; transform:rotate(-28deg); pointer-events:none; }
.contact-orbit::after { content:""; position:absolute; width:13px; height:13px; border-radius:50%; background:#b69adf; right:4%; top:18%; box-shadow:0 0 0 6px #f7f4fc; }
.contact-portrait img { position:absolute; z-index:1; top:-7%; left:-7%; display:block; width:114%; height:auto; max-width:none; mask-image:var(--contact-mask,none); mask-mode:luminance; mask-size:100% 100%; mask-repeat:no-repeat; }
.contact-prop { position:absolute; z-index:2; display:grid; place-items:center; pointer-events:none; user-select:none; }
.contact-prop svg { display:block; width:100%; height:auto; }
.contact-prop-browser { width:clamp(82px,10.8cqw,126px); left:1%; top:24%; transform:rotate(-10deg); filter:drop-shadow(0 12px 13px #6c44941c); }
.contact-prop-brand { width:clamp(52px,6.3cqw,72px); aspect-ratio:1; right:4%; top:11%; border:1px solid #fff; border-radius:20px; background:linear-gradient(140deg,#fff,#e4d9f5); color:#8054bf; transform:rotate(12deg); box-shadow:6px 9px 0 #dcd0ed,0 15px 28px #704a9514; }
.contact-prop-brand .bm-icon { width:48%; height:48%; }
.contact-prop-cursor { width:clamp(52px,6.4cqw,74px); right:0; bottom:20%; transform:rotate(9deg); filter:drop-shadow(4px 8px 4px #6c449423); }
.canvas #contact .design-note { margin-bottom:24px; }
.canvas #footer { padding:40px 4.5% 24px; }
.footer-layout { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; }
.canvas #footer .bm-brand { display:inline-flex; align-items:center; gap:12px; color:#141418; text-decoration:none; white-space:nowrap; min-height:48px; }
.bm-footer-logo { display:block; width:66px; height:48px; flex-shrink:0; }
.bm-footer-logo .brand-mono { opacity:0; }
.bm-footer-logo .brand-colour { opacity:1; }
.canvas #footer .brand-copy { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.canvas #footer .brand-name { font:600 19px/1.1 Be,Arial,sans-serif; letter-spacing:.075em; }
.canvas #footer .brand-tagline { font:400 10.5px/1.3 Be,Arial,sans-serif; letter-spacing:.025em; color:#35333b; }
.canvas #footer .footer-heading { margin:4px 0 14px; font-size:13px; font-weight:600; }
.footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.canvas #footer .footer-links :is(a,button) { min-height:40px; display:inline-flex; align-items:center; gap:8px; padding:7px 0; border:0; border-radius:var(--bm-radius-none); background:transparent; font:400 12px/1.5 Be,Arial,sans-serif; color:var(--bm-muted); text-decoration:none; }
.canvas #footer .footer-links :is(a,button):hover { color:var(--bm-accent); text-decoration:underline; text-underline-offset:4px; }
.canvas #footer .footer-pending { font-size:11px; margin:10px 0; color:#756b80; }
.footer-bottom { border-top:1px solid var(--bm-line); margin-top:28px; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:11px; color:var(--bm-muted); }
.footer-bottom a { display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:none; }
.has-mobile-dock.is-contact-editing .bm-mobile-dock { visibility:hidden; pointer-events:none; }
.notice { width:min(420px,calc(100vw - 32px)); border-radius:var(--bm-radius-card); font-size:13px; }
@container homepage (min-width:741px) and (max-width:900px) {
  .contact-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .contact-copy { padding-bottom:12px; }
  .contact-portrait { max-width:360px; height:395px; }
}
@container homepage (max-width:740px) {
  .canvas .heading { display:flex; flex-direction:column; gap:16px; }
  .canvas .section { padding:32px 22px; }
  .project-filters { flex-wrap:nowrap; overflow-x:auto; padding:4px 3px 8px; margin-inline:-3px; scrollbar-width:thin; }
  .project-filters button { font-size:12px; padding:10px 13px; }
  .project-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .project-card.is-featured { grid-column:auto; }
  .canvas .service { grid-template-columns:24px minmax(0,1fr) 44px; gap:12px; }
  .canvas .service h3 { font-size:18px; }
  .canvas .service p { grid-column:2; margin-top:0; }
  .canvas .service-action { grid-row:1; grid-column:3; }
  .canvas #contact { padding:32px 22px 0; }
  .contact-layout { grid-template-columns:minmax(0,1fr); gap:12px; }
  .contact-copy { padding-bottom:8px; }
  .canvas #contact h2 { font-size:clamp(29px,7.8cqw,34px); }
  .contact-fields { grid-template-columns:minmax(0,1fr); gap:16px; }
  .contact-form :is(input,textarea) { font-size:16px; }
  .canvas .contact-submit { width:100%; }
  .contact-portrait { height:330px; max-width:300px; justify-self:center; }
  .contact-prop-browser { width:76px; left:0; top:24%; }
  .contact-prop-brand { width:46px; right:2%; top:8%; border-radius:14px; box-shadow:4px 6px 0 #dcd0ed; }
  .contact-prop-cursor { width:48px; right:0; bottom:21%; }
  .canvas #footer { padding:32px 22px 16px; }
  .footer-layout { grid-template-columns:1fr 1fr; gap:24px 16px; }
  .footer-brand { grid-column:1/-1; }
  .canvas #footer .bm-brand { gap:10px; }
  .bm-footer-logo { width:57px; height:42px; }
  .canvas #footer .brand-name { font-size:16px; letter-spacing:.06em; }
  .canvas #footer .brand-tagline { font-size:9.2px; letter-spacing:.005em; }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:6px; margin-top:20px; }
}
@media(prefers-reduced-motion:reduce) { .project-cover img { transition:none; } .project-cover:hover img { transform:none; } }