/* Solid colour surfaces. Lighting belongs to the physical 3D objects. */
:root { --ink:#111111; --paper:#ffffff; --honey:#ffb32f; --gold:#111111; --muted:#555555; --line:#dddddd; --ease:cubic-bezier(.22,1,.36,1); }
html { scroll-behavior:smooth; }
body { background:#fff; color:#111; }
::selection { background:#ffb32f; color:#111; }
.site-header { background:#fff; border-bottom:1px solid #ddd; height:90px; }
.header-inner { max-width:1600px; }
.brand img { width:145px; height:64px; }
.desktop-nav a { color:#111; font-size:12px; }
.header-request,.button--primary { background:#ffb32f; border:1px solid #111; color:#111; }
.header-request { border-radius:0; padding:13px 20px; box-shadow:3px 3px 0 #111; }
.header-request:hover { background:#111; color:#fff; border-color:#111; }
.button { border-radius:0; transition:transform .3s var(--ease),box-shadow .3s,background .2s; }
.button--primary { box-shadow:4px 4px 0 #111; }
.button--primary:hover { background:#ffb32f; transform:translate(-2px,-2px); box-shadow:6px 6px 0 #111; }
.button--outline,.button--dark { background:#111; color:#fff; border:1px solid #111; }
.button--outline:hover,.button--dark:hover { background:#fff; color:#111; }
.button--text { background:transparent; }
.eyebrow { color:#111; font-size:10px; letter-spacing:.12em; }
.eyebrow-dot { background:#ffb32f; box-shadow:none; border:1px solid #111; border-radius:0; transform:rotate(45deg); }
.scroll-progress { position:fixed; top:0; left:0; width:100%; height:3px; background:#ffb32f; transform:scaleX(0); transform-origin:left; z-index:1000; pointer-events:none; }

/* A pinned first chapter with a real, locally rendered WebGL hive. */
.hero { background:#fff; min-height:0; height:155vh; overflow:clip; border-bottom:1px solid #111; }
.hero::before,.hero-grid-bg { display:none; }
.hero-inner { position:sticky; top:90px; min-height:660px; height:calc(100svh - 90px); max-height:1000px; padding:32px 0 64px; display:grid; grid-template-columns:1.05fr 1fr; gap:0; }
.hero-copy { position:relative; z-index:5; }
.hero .eyebrow { color:#111; margin-bottom:28px; }
.hero h1 { font-size:clamp(60px,6.6vw,110px); font-weight:750; line-height:.99; letter-spacing:-.075em; }
.hero h1 em { background:none; color:#111; font-style:normal; text-decoration:underline; text-decoration-color:#ffb32f; text-decoration-thickness:.115em; text-underline-offset:.025em; }
.hero-slogan { color:#111; font-size:17px; margin-top:30px; }
.hero-description { color:#555; font-size:12px; margin-top:14px; }
.hero-actions { margin-top:28px; gap:14px; }
.hero-actions .button { min-height:48px; font-size:11px; padding:13px 17px; }
.hero-actions .button--text { padding-inline:0; margin-left:5px; }
.hero-scene { width:106%; margin-left:-3%; aspect-ratio:1; height:auto; min-height:0; align-self:center; background:transparent; border-radius:0; box-shadow:none; isolation:isolate; perspective:1100px; }
.hive-canvas { position:absolute; inset:-8%; width:116%; height:116%; pointer-events:none; z-index:2; opacity:0; transition:opacity .5s; }
.scene-ready .hive-canvas { opacity:1; }
.hero-crawl-window { inset:12%; border-radius:0; opacity:1; transition:opacity .4s; transform:rotate(-12deg); }
.scene-ready .hero-crawl-window { opacity:0; }
.crawl-hive { inset:0; }
.crawl-cell { background:#111; box-shadow:9px 14px 0 #111; }
.crawl-cell::before { background:#ffb32f; inset:3px; }
.crawl-cell--center { background:#111; }
.crawl-cell--center::before { background:#fff; }
.hive-entry { background:#111; box-shadow:none; }
.hive-cell-label { color:#111; }
.scene-spark { display:none; }
.hero .platform { width:77px; height:83px; background:#fff; border:1px solid #111; border-radius:0; box-shadow:5px 6px 0 #111; z-index:4; animation:none; transform:translate3d(0,0,0) rotate(-7deg); }
.platform img { width:29px; height:29px; }
.platform span { color:#111; font-size:7px; }
.platform--shopify { top:3%; left:20%; }
.platform--instagram { right:3%; top:17%; }
.platform--tiktok { right:3%; bottom:10%; }
.platform--facebook { left:23%; bottom:0; }
.platform--linkedin { left:-1%; top:43%; }
.platform--linkedin b { color:#111; }
.scene-note { color:#111; right:3%; bottom:-9%; font-size:7px; line-height:1.9; letter-spacing:.14em; }
.hero-scroll { bottom:20px; left:0; color:#111; }
.hero-scroll span { font-size:8px; letter-spacing:.1em; }
.hero-scroll .icon { animation:none; }

/* Original services and illustrations gain physical depth. */
.services-section { background:#fff; padding:110px 0 90px; position:relative; }
.section-heading { margin-bottom:54px; }
.section-heading h2,.review-intro h2 { font-size:clamp(40px,4.2vw,68px); font-weight:700; letter-spacing:-.055em; line-height:1.07; }
.section-heading h2 em,.review-intro h2 em { color:inherit; }
.section-heading>div:last-child>p,.service-copy>p { color:#555; }
.services-grid { gap:46px 28px; perspective:1400px; }
.service-card { position:relative; }
.art-link { border-radius:0; overflow:visible; display:block; perspective:1000px; }
.service-art { height:250px; border:1px solid #111; border-radius:0; overflow:hidden; background:#ffb32f; box-shadow:6px 7px 0 #111; transform:perspective(1000px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)); transition:transform .4s var(--ease),box-shadow .4s; transform-style:preserve-3d; }
.service-card:hover .service-art { box-shadow:10px 13px 0 #111; }
.art--poster,.art--care,.art--model { background:#fff; }
.art--ai { background:#111; background-image:none; }
.mini-browser { border:2px solid #111; border-radius:0; background:#fff; box-shadow:12px 14px 0 #111; transform:rotate(-7deg); }
.mini-browser-body { background:#fff; color:#111; }
.mini-browser-body>span,.mini-browser-body b { color:#111; }
.browser-dots { border-bottom:1px solid #111; background:#fff; }
.browser-dots i { background:#111; }
.tiny-hex { background:#ffb32f; }
.mini-lines { background:#111; box-shadow:0 7px 0 #111,0 14px 0 #111; opacity:.18; }
.art-tag { color:#111; }
.poster-back { color:#fff; background:#111; box-shadow:7px 9px 0 #111; }
.poster-front { background:#ffb32f; border:1px solid #111; box-shadow:7px 10px 0 #111; color:#111; }
.poster-front b { color:#111; }
.video-frame { background:#111; border:1px solid #111; border-radius:0; box-shadow:9px 12px 0 #fff; transform:rotate(-7deg); }
.video-label { color:#fff; }
.video-label i { background:#ffb32f; }
.video-play .icon { color:#ffb32f; fill:#ffb32f; }
.video-timeline i { background:#ffb32f; }
.care-window { border:1px solid #111; border-radius:0; box-shadow:10px 13px 0 #111; background:#fff; transform:rotate(6deg); }
.care-check { background:#ffb32f; color:#111; }
.care-window>span:not(.care-check) { color:#555; }
.care-window>div i { background:#ffb32f; }
.ai-orb { background:#ffb32f; border:1px solid #ffb32f; border-radius:0; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); box-shadow:none; transform:rotate(-15deg); }
.ai-orb .icon { color:#111; }
.ai-label { color:#fff; border-color:#fff; border-radius:0; background:#111; }
.model-frame { background:#ffb32f; border:1px solid #111; box-shadow:10px 11px 0 #111; transform:rotate(-7deg); }
.model-head,.model-body { background:#111; }
.model-spark { color:#fff; }
.model-caption { color:#fff; }
.service-copy { padding-top:25px; }
.service-index { color:#555; }
.service-copy h3 { font-weight:700; }
.service-link { color:#111; border-color:#111; }
.additions { border-color:#111; }
.additions>p { color:#555; }
.additions a { border-radius:0; border-color:#111; color:#111; background:#fff; }
.additions a:hover { color:#111; background:#ffb32f; }
.catalogue-note { background:#ffb32f; border:1px solid #111; }
.catalogue-note p { color:#111; }
.package-list { border-color:#ddd; }
.package-list li,.package-list .icon { color:#111; }

/* Existing honeycomb: original logos, original links, raised solid hexagons. */
.work-section { background:#111; color:#fff; border:0; padding:105px 0 75px; position:relative; }
.work-section .eyebrow,.work-section .section-heading h2 em,.project-count,.project-count b,.work-section .section-heading>div:last-child>p { color:#fff; }
.work-section .eyebrow-dot { border-color:#ffb32f; }
.work-section .section-heading h2 em { color:#ffb32f; }
.hive { perspective:1500px; transform-style:preserve-3d; margin:55px auto 50px; }
.hive-pod { transform-style:preserve-3d; filter:drop-shadow(0 8px 0 #ffb32f); }
.hex-card { background:#ffb32f; padding:1px; transform:perspective(900px) rotateX(var(--hex-rx,0deg)) rotateY(var(--hex-ry,0deg)); transition:transform .5s var(--ease),background .3s; }
.hex-card:hover,.hex-card:focus-visible { background:#ffb32f; transform:perspective(900px) translateY(-13px) rotateX(5deg) rotateY(-5deg) scale(1.025); }
.hex-card--logo .hex-inner { background:#fff; inset:2px; }
.hex-logo { left:20%; top:22%; width:60%; height:22%; border-radius:0; }
.hex-logo--dark { background:#111; }
.hex-label { color:#111; top:53%; left:12%; right:12%; }
.hex-label small { color:#555; }
.hex-label>span { top:36px; left:0; right:0; display:flex; justify-content:center; }
.hex-label>span .icon { width:15px; height:15px; }
.project-monogram,.hex-card--logo .project-monogram { color:#111; }
.work-bottom { border-color:#555; }
.work-bottom>p { color:#fff; }
.work-bottom>.button { border-color:#ffb32f; color:#111; background:#ffb32f; }
.project-filters button { color:#fff; border-color:#777; background:#111; border-radius:0; }
.project-filters button:hover,.project-filters [aria-pressed=true] { background:#ffb32f; color:#111; border-color:#ffb32f; }
.filter-status,.portfolio-list small,.portfolio-list .icon { color:#fff; }
.portfolio-list a:hover>span { color:#ffb32f; }
.project-dialog { border:1px solid #111; border-radius:0; }
.project-dialog-image { background:#ffb32f; }
.project-dialog-image--dark { background:#111; }
.project-dialog-copy .micro,.project-dialog-copy p { color:#111; }

.social-section { background:#fff; padding:100px 0; }
.social-card { background:#fff; border:1px solid #111; border-radius:0; box-shadow:5px 6px 0 #111; }
.social-card-top { color:#111; border-color:#111; }
.social-tiktok-art { background:#ffb32f; }
.social-tiktok-orbit { border-color:#111; }
.social-tiktok-logo { background:#fff; border:1px solid #111; box-shadow:6px 7px 0 #111; }
.social-tiktok-words,.social-tiktok-words b,.social-tiktok-play { color:#111; }
.social-tiktok-play { border-color:#111; }
.social-card-copy h3,.social-post-link { color:#111; }
.social-card-copy>p,.social-handle,.social-footnote { color:#555; }
.reviews-section { background:#fff; padding:95px 0; border-top:1px solid #111; }
.review-panel { background:#ffb32f; border:1px solid #111; border-radius:0; box-shadow:9px 11px 0 #111; }
.review-panel .micro,.review-panel>p:not(.micro),.review-panel-top>.icon,.client-chips,.review-panel .inline-link { color:#111; }
.client-chips { border-color:#111; }
.site-footer { background:#ffb32f; color:#111; border-top:1px solid #111; }
.site-footer .eyebrow,.site-footer h2,.site-footer h2 em,.footer-brand>p,.footer-grid a,.footer-grid h3,.location-dot,.footer-bottom,.footer-bottom>span,.motion-toggle,.back-top { color:#111; }
.site-footer .eyebrow-dot { background:#111; }
.footer-top,.footer-bottom,.footer-grid { border-color:#111; }
.site-footer .footer-grid a:not(.brand),.site-footer .footer-grid a:hover,.site-footer .footer-bottom a:hover { color:#111; }
.footer-top>.button { background:#111; color:#fff; border-color:#111; box-shadow:5px 6px 0 #fff; }
.site-footer .brand { background:transparent; }
.site-footer .brand img { filter:url('#brand-on-white'); }
.floating-contact>a { border:1px solid #111; border-radius:0; background:#fff; color:#111; box-shadow:3px 3px 0 #111; }
.floating-contact>a:last-child { background:#ffb32f; color:#111; }
.section-flight { border:1px solid #111; border-radius:0; background:#fff; color:#111; }
.section-flight button { color:#111; }

/* Forms retain their structure, fields, step logic, upload and submission path. */
.page-intro { background:#fff; border-color:#111; }
.page-intro h1 em { text-decoration-color:#ffb32f; }
.form-panel { background:#fff; border-color:#111; box-shadow:6px 7px 0 #111; }
.form-panel input:not([type=checkbox],[type=radio],[type=color],[type=file]),.form-panel select,.form-panel textarea,.colour-input { background:#fff; border-color:#bbb; }
.upload-box,.fast-track { background:#fff; border-color:#111; }
.fast-track strong,.fast-track small,.fast-track .icon,.upload-box>span,.upload-box>.icon,.upload-box u { color:#111; }
.check-chip>span { background:#fff; color:#111; border-color:#bbb; }
.check-chip input:checked+span { background:#ffb32f; color:#111; border-color:#111; }
.form-progress [aria-current=step] b,.form-progress>.is-complete b { background:#ffb32f; color:#111; border-color:#111; }
.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus { border-color:#111; outline-color:#ffb32f; }
.insight-card { background:#fff; border-color:#111; border-radius:0; box-shadow:5px 6px 0 #111; }
.insight-number { color:#ffb32f; }
.insight-card>.micro,.insight-card>p { color:#555; }
.js-enabled .reveal { opacity:1; transform:none; }
.motion-active .reveal:not(.is-revealed) { opacity:0; transform:perspective(1200px) translate3d(0,65px,-60px) rotateX(5deg); }
.motion-active .reveal { transition:opacity .9s var(--ease),transform 1.1s var(--ease); transition-delay:var(--delay,0ms); transform-origin:50% 100%; }
.motion-paused .reveal { opacity:1!important; transform:none!important; }
.motion-paused .hero-copy,.motion-paused .platform { transform:none!important; }
.motion-paused .hero { height:auto; }
.motion-paused .hero-inner { position:relative; top:auto; }

@media(min-width:1600px) { .hero-inner { grid-template-columns:1.05fr 1.1fr; } .hero-scene { max-width:760px; } }
@media(max-width:1100px) {
  .hero-inner { min-height:650px; }
  .hero h1 { font-size:clamp(54px,6.7vw,76px); }
  .hero-slogan { font-size:15px; }
  .hero-actions { gap:10px; }
  .hero-actions .button { font-size:10px; padding:12px; }
  .service-art { height:210px; }
  .hero .platform { width:65px; height:72px; }
}
@media(max-width:850px) {
  .site-header { height:80px; }
  .brand img { width:126px; height:55px; }
  .hero { height:auto; }
  .hero-inner { position:relative; top:auto; height:auto; max-height:none; min-height:650px; padding:60px 0 65px; grid-template-columns:1.1fr 1fr; gap:5px; }
  .hero h1 { font-size:55px; }
  .hero-scene { width:115%; margin-left:-8%; }
  .hero-actions { flex-wrap:wrap; }
  .hero-actions .button--text { margin:0; }
  .hero .platform { width:56px; height:63px; }
  .platform span { font-size:6px; }
  .platform img { width:24px; height:24px; }
  .scene-note { font-size:6px; }
  .services-section,.work-section,.social-section,.reviews-section { padding-block:70px; }
  .service-art { height:175px; }
  .services-grid { gap:35px 20px; }
  .service-copy { padding-top:22px; }
  .section-heading h2,.review-intro h2 { font-size:42px; }
  .hex-label>span { top:26px; }
}
@media(max-width:600px) {
  .site-header { height:76px; }
  .brand img { width:113px; height:50px; }
  .header-request { box-shadow:2px 2px 0 #111; font-size:8px; padding:8px 10px; }
  .hero-inner { min-height:0; display:block; padding:42px 0 30px; }
  .hero .eyebrow { font-size:7px; margin-bottom:25px; }
  .hero h1 { font-size:clamp(45px,13vw,75px); line-height:1.01; }
  .hero-slogan { font-size:15px; margin-top:26px; }
  .hero-description { font-size:11px; margin-top:12px; }
  .hero-actions { margin-top:24px; gap:10px; }
  .hero-actions .button { font-size:10px; padding:12px; min-height:44px; }
  .hero-actions .button--text { padding:10px 0; }
  .hero-scene { width:98%; max-width:450px; margin:25px auto 64px; aspect-ratio:1; }
  .hero .platform { width:58px; height:64px; box-shadow:3px 4px 0 #111; }
  .platform--shopify { top:4%; left:21%; }
  .platform--instagram { right:0; top:20%; }
  .platform--tiktok { right:4%; bottom:8%; }
  .platform--facebook { left:24%; bottom:0; }
  .platform--linkedin { left:0; top:43%; }
  .scene-note { right:2%; bottom:-12%; font-size:6px; }
  .hero-scroll { position:relative; left:auto; bottom:auto; margin:0; justify-content:flex-start; }
  .services-section,.work-section,.social-section,.reviews-section { padding-block:55px; }
  .section-heading { margin-bottom:32px; gap:23px; }
  .section-heading h2,.work-section .section-heading h2,.review-intro h2 { font-size:34px; }
  .services-grid { gap:30px 12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .service-art { height:clamp(90px,28vw,155px); box-shadow:3px 4px 0 #111; }
  .service-card:hover .service-art { box-shadow:4px 5px 0 #111; }
  .service-copy { padding-top:16px; }
  .mini-browser { box-shadow:4px 5px 0 #111; border-width:1px; }
  .mini-lines { box-shadow:0 3px 0 #111,0 6px 0 #111; }
  .poster-front,.poster-back,.care-window,.model-frame { box-shadow:4px 5px 0 #111; }
  .video-frame { box-shadow:4px 5px 0 #fff; }
  .service-copy h3 { font-size:clamp(12px,3.5vw,17px); }
  .service-copy>p { font-size:clamp(8px,2.2vw,11px); }
  .service-index { font-size:4.5px; }
  .hive { margin:30px auto 35px; }
  .hive-pod { filter:drop-shadow(0 5px 0 #ffb32f); }
  .hex-card--logo .hex-inner { inset:1px; }
  .hex-label>span { top:26px; }
  .hex-label>span .icon { width:10px; height:10px; }
  .hex-label small { font-size:clamp(4px,calc(var(--w,90px)*.042),5px); }
  .hex-label strong { font-size:clamp(7px,calc(var(--w,90px)*.078),9px); }
  .review-panel { box-shadow:5px 6px 0 #111; }
  .form-panel { box-shadow:4px 5px 0 #111; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero { height:auto; }
  .hero-inner { position:relative; top:auto; }
  .reveal,.motion-active .reveal { opacity:1!important; transform:none!important; }
  .hero-copy,.hero .platform,.service-art,.hex-card { transform:none!important; transition:none!important; }
}