/* YBM's white, black and honey-yellow visual direction. Original logo is retained. */
:root {
  --ink: #141414;
  --paper: #ffffff;
  --honey: #e8ac32;
  --gold: #bd7c12;
  --muted: #5c5c5c;
  --line: #e5e5e2;
}
body { background: #fff; color: var(--ink); }
.button { border-radius: 5px; }
.button--primary:hover { background: #f1bf5b; }
.button--outline { color: var(--ink); border-color: #bdbdb8; background: #fff; }
.button--outline:hover { background: #fff5e2; border-color: #c79900; }
.eyebrow { color: #464646; }
.eyebrow-dot { box-shadow: 0 0 0 5px #e8ac321f; }

/* The unaltered white-lettered logo sits on its own compact brand panel. */
.site-header { background: #ffffffed; color: var(--ink); border-color: var(--line); }
.brand { background: #141412; padding: 0 12px; border-radius: 5px; }
.desktop-nav a { color: #3d3d3d; font-weight: 600; }
.desktop-nav a:hover, .desktop-nav [aria-current] { color: #171714; }
.desktop-nav [aria-current]::before { background: #dca900; }
.header-request { border-color: #e8ac32; background: #e8ac32; color: #141414; }
.header-request:hover { color: #141414; background: #f1bf5b; border-color: #f1bf5b; }
.menu-toggle { border-color: #d1d1cb; }
.mobile-menu { background: #fff; color: #141414; }
.mobile-menu nav>.mobile-request { color: #141414; background: #fff0d3; padding-inline: 14px; }
.menu-email { color: #595959; }

/* White space and bold type frame a contained, dark gold-bee scene. */
.hero { background: #fff; color: #141414; min-height: 740px; border-bottom: 1px solid var(--line); }
.hero::before { background: radial-gradient(ellipse at 78% 47%,#fae6bc 0,transparent 49%); opacity: .65; }
.hero-grid-bg { background-image: linear-gradient(#c4a72d0b 1px,transparent 1px),linear-gradient(90deg,#c4a72d0b 1px,transparent 1px); }
.hero-inner { grid-template-columns: 1.1fr 1fr; gap: 36px; min-height: 740px; padding-top: 70px; padding-bottom: 100px; }
.hero .eyebrow { color: #555; }
.hero h1 { font-weight: 650; font-size: clamp(62px,6.7vw,96px); }
.hero h1 em { color: #141414; background: linear-gradient(transparent 75%,#e8ac32 75%,#e8ac32 94%,transparent 94%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero-slogan { color: #262626; }
.hero-description { color: #595959; }
.hero-actions .button--text { border-bottom-color: #8d8d84; }
.hero-scene { align-self: center; min-height: 0; height: auto; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #11110f; box-shadow: 0 0 0 15px #fff,0 0 0 16px #ead989,0 28px 80px #b18e241b; }
.orbit { border-color: #f0ca5145; width: 104%; left: -2%; top: 1%; }
.orbit--two { width: 120%; left: -10%; top: -7%; border-color: #d2aa3b4a; }
.orbit-label { bottom: 12%; left: 24%; color: #d9be74; font-size: 7px; }
.platform { width: 86px; height: 93px; background: linear-gradient(145deg,#fff,#fff5e2); border-color: #e3d6a3; box-shadow: 6px 7px 0 #e5d7a4,0 16px 32px #3428001c; }
.platform img { filter: none; width: 32px; height: 32px; }
.platform span { color: #343434; font-weight: 600; }
.platform--shopify { top: -6%; left: 19%; }
.platform--instagram { right: -5%; top: 20%; }
.platform--tiktok { right: 0; bottom: 4%; }
.platform--facebook { left: 15%; bottom: -6%; }
.platform--linkedin { left: -8%; top: 39%; }
.platform--linkedin b { color: #141414; }
.scene-note { right: -2%; bottom: -17%; color: #656559; }
.hero-scroll { color: #56564c; }

/* Luminance masks display the supplied bee's exact wireframe silhouette on white. */
.hero-roamer { opacity: .95; }
.pod-bee { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff); }
.pod-bee::before { background: #694700; }
.request-bee { mix-blend-mode: normal; opacity: .65; }
.footer-bee { opacity: .9; }

/* Catalogue illustrations follow the same restrained yellow and black palette. */
.services-section { background: #fff; }
.section-heading h2 em, .review-intro h2 em, .about-statement h2 em, .request-aside h2 em { color: #141414; }
.section-heading>div:last-child>p, .service-copy>p { color: #595959; }
.service-index { color: #66665e; }
.service-link { border-color: #deded7; }
.service-card:hover .service-link { border-color: #ba8b00; }
.service-art { background: #f4f3ee; }
.art--web { background: #fae3b3; }
.art-tag { color: #6b623e; }
.art--poster { background: #f3f3ef; }
.poster-back { background: #222220; color: #fff; }
.poster-front { background: #e8ac32; color: #141414; }
.poster-front b { color: #68500a; }
.art--video { background: #f6e1b8; }
.video-frame { background: radial-gradient(at 70% 80%,#ecc174,#cf982c 50%,#725a16); border-color: #b9931f; box-shadow: 5px 7px 18px #725b1228; }
.video-label { color: #28210c; }
.video-label i { background: #28210c; }
.video-play .icon { color: #171714; fill: #ffffff50; }
.video-timeline i { background: #312a145e; }
.art--care { background: #f3f3ee; }
.care-window { background: #fff; }
.care-check { background: #fff0a8; color: #6e5300; }
.care-window>span:not(.care-check) { color: #63635b; }
.care-window>div i { background: #ddb221; }
.art--ai { background: #242420; background-image: radial-gradient(ellipse at 50% 45%,#c4a83c36,transparent 65%); }
.ai-orb { background: radial-gradient(at 30% 20%,#f0ce6b70,#a48a3628,#191913); border-color: #edd17880; box-shadow: inset -10px -12px 22px #0005,0 0 35px #e8ac3220; }
.ai-orb .icon, .ai-label { color: #ffe8a1; }
.art--model { background: #f8dfa9; }
.model-frame { background: #e3c557; }
.model-head { background: #4a4029; }
.model-body { background: #21211d; }
.model-spark { color: #fff8d7; }
.model-caption { color: #fff; }
.additions { border-color: #e4e4db; }
.additions>p { color: #5d5d55; }
.additions a { border-color: #deded4; }
.additions a:hover { background: #fff5c7; }
.package-list { border-color: #e0e0d7; }
.package-list li { color: #51514b; }
.package-list .icon { color: #846000; }
.catalogue-note { background: #fff6cd; }
.catalogue-note p { color: #605a44; }

/* An airy hive: yellow edges, real project imagery and clear black labels. */
.work-section { background: #fafaf7; color: #141414; border-block: 1px solid #ebebe5; }
.work-section .section-heading h2 em { color: #141414; }
.work-section .section-heading>div:last-child>p, .project-count { color: #5b5b50; }
.project-count b { color: #141414; }
.hex-card { background: linear-gradient(145deg,#f8d34f,#d6b347 60%,#f8dc7c); }
.hex-card:hover, .hex-card:focus-visible { background: #ba8900; }
.hex-inner { background: #fff5c9; }
.hex-inner>img { filter: saturate(.9); }
.hex-card:hover img { filter: saturate(1); }
.hex-shade { background: linear-gradient(transparent 20%,#ffffff15 36%,#fffef4e8 64%,#fffef4 88%); }
.hex-label { color: #141414; }
.hex-label small { color: #6d5100; }
.project-monogram { color: #9d7d24; text-shadow: none; }
.work-bottom { border-color: #deded5; }
.work-bottom>p { color: #5a5a4f; }
.project-filters button { border-color: #d9d9cf; color: #4b4b44; background: #fff; }
.project-filters button:hover { border-color: #b58b14; }
.project-filters [aria-pressed=true] { background: #e8ac32; color: #141414; border-color: #e8ac32; }
.filter-status { color: #616157; }
.portfolio-list small { color: #626258; }
.portfolio-list .icon { color: #795a00; }
.portfolio-list a:hover>span { color: #795a00; }
.project-dialog { background: #fff; }
.project-dialog-image { background: #f6f4e9; }
.project-dialog-copy .micro { color: #705500; }
.project-dialog-copy p { color: #58584f; }
.project-dialog-image .project-monogram { color: #9d7d24; }

/* Reviews remain genuine; this area never invents a rating or customer quote. */
.reviews-section { background: #fff; }
.review-intro>p { color: #5c5c53; }
.review-panel { background: #fff9df; border-color: #ebdc9b; box-shadow: 8px 12px 0 #faf4da; }
.review-panel-top>.icon { color: #917319; }
.review-panel .micro { color: #69571d; }
.review-panel>p:not(.micro), .google-review-card>p, .google-source { color: #5b5749; }
.client-chips { border-color: #e7dba8; color: #625a3c; }
.google-review-card { border-color: #e7dba8; }
.review-pager { color: #5b533b; }
.review-order, .review-date { color: #665d42!important; }

/* Every supporting page uses the same white canvas. */
.page-intro { background: #fff; color: #141414; border-bottom: 1px solid #e8e8e0; }
.page-intro h1 em { color: #141414; text-decoration: underline; text-decoration-color: #e8ac32; text-decoration-thickness: .1em; text-underline-offset: .08em; }
.page-intro>.wrap>p { color: #5c5c54; }
.contact-card { border-color: #e2e2da; }
.contact-card>.icon:first-child { color: #7d5d00; }
.contact-card small, .contact-note>p, .contact-note .eyebrow, .about-statement>.micro, .about-statement>p, .approach-grid p, .review-form-layout>div:first-child>p { color: #5b5b51; }
.approach-grid article, .about-cta { border-color: #deded5; }
.approach-grid article>span { color: #755900; }
.insight-card { background: #fff8dc; border: 1px solid #eee3b7; }
.insight-number { color: #e2bf38; }
.insight-card>.micro, .insight-card>p { color: #635a3d; }
.legal-copy p, .article-copy p { color: #53534e; }
.article-cta { border-color: #deded5; }
.form-panel { background: #fff; border-color: #deded5; box-shadow: 0 14px 48px #29290005; }
.form-panel input:not([type=checkbox],[type=radio],[type=color],[type=file]), .form-panel select, .form-panel textarea { background: #fcfcf9; border-color: #d4d4cb; color: #171714; }
.form-panel input::placeholder, .form-panel textarea::placeholder { color: #75756b; }
.form-panel input:focus, .form-panel textarea:focus, .form-panel select:focus { border-color: #b88a00; outline-color: #e8ac3240; }
.form-help, .consent, .step-description, .field-label small, .upload-field>label>small, .request-aside p, .request-aside .micro, .request-aside li, .request-direct>span, .step-counter, .draft-tools, .upload-status { color: #606056; }
.check-label input { accent-color: #725600; }
.request-aside li .icon { color: #806000; }
.form-progress>button { color: #68685c; }
.form-progress [aria-current=step], .form-progress>.is-complete { color: #141414; }
.form-progress b, .form-progress, .request-direct, .form-navigation, .draft-tools, .form-addons { border-color: #deded3; }
.form-progress>i { background: #deded3; }
.colour-input { background: #fcfcf9; border-color: #d4d4cb; }
.form-panel .colour-input input[type=text] { background: transparent; }
.upload-box { background: #fffbed; border-color: #bba34e; }
.upload-box>span, .upload-box>.icon, .upload-box u { color: #675725; }
.fast-track { background: #fff7d2; border-color: #e4cf75; }
.fast-track small { color: #665b37; }
.fast-track .icon { color: #8a6500; }
.check-chip>span { color: #5f5b4a; border-color: #d9d5c3; }
.check-chip input:checked+span { background: #fae3b3; border-color: #c4a33f; color: #141414; }
.draft-tools button { color: #655017; }
.rating-options span { border-color: #d9d5c3; }
.rating-options input:checked+span { background: #fae3b3; border-color: #b49a38; }
.rating-options .icon { color: #8f6c00; }
.review-note { color: #5d5d54; }

/* A warm yellow invitation, useful footer links and recognisable quick actions. */
.site-footer { background: #fff4dc; color: #141414; border-top: 1px solid #f0e3aa; }
.footer-top { border-color: #e5d695; }
.footer-top h2 em { color: #141414; }
.footer-top .eyebrow { color: #5b522f; }
.footer-grid h3 { color: #141414; }
.footer-grid a:not(.brand), .footer-brand>p, .location-dot { color: #56513c; }
.footer-grid a:hover, .footer-bottom a:hover { color: #141414; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { color: #5d5841; border-color: #e5d695; }
.float-review { background: #fff; color: #171714; border-color: #d6d6ca; }
.section-flight { background: #fffffff0; border-color: #d7d7cc; color: #141414; }
.section-flight>span { background: #d4d4c8; }

/* Real social posts, with an optional native TikTok feed. */
.social-section { padding: 100px 0 85px; background: #fff; border-bottom: 1px solid #ebebe5; }
.social-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; align-items: stretch; }
.social-card { min-width: 0; border: 1px solid #e5e5dc; border-radius: 7px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.social-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px; border-bottom: 1px solid #ededE7; }
.social-platform { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; }
.social-platform img { width: 16px; height: 16px; }
.social-card-top>time, .social-card-top>span:not(.social-platform) { font-size: 9px; color: #626256; }
.social-media { display: block; width: 100%; aspect-ratio: 4/5; position: relative; overflow: hidden; background: #f7f7f1; padding: 0; }
.social-media>img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s; }
a.social-media:hover>img { transform: scale(1.025); }
.social-open { position: absolute; bottom: 14px; right: 14px; width: 36px; height: 36px; background: #e8ac32; color: #141414; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 3px 18px #0002; }
.social-open .icon { width: 18px; height: 18px; }
.social-card-copy { padding: 24px 23px 25px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.social-handle { color: #69695f; font-size: 9px; margin-bottom: 12px; overflow-wrap: anywhere; }
.social-card-copy h3 { font-size: 26px; line-height: 1.15; max-width: 290px; margin-bottom: 14px; }
.social-card-copy>p:not(.social-handle) { font-size: 11px; line-height: 1.8; color: #5f5f54; margin-bottom: 24px; }
.social-post-link { display: inline-flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; border-bottom: 1px solid #d9d9cf; padding: 0 0 12px; background: transparent; font-size: 10px; font-weight: 700; margin-top: auto; text-align: left; }
.social-post-link .icon { width: 17px; height: 17px; }
.social-profile-fallback { display: flex; align-items: center; gap: 10px; font-size: 8px; color: #626254; margin-top: 13px; }
.social-profile-fallback .icon { width: 12px; height: 12px; }
.social-live { display: inline-flex; align-items: center; gap: 5px; }
.social-live i { width: 5px; height: 5px; border-radius: 50%; background: #a57b00; }
.social-tiktok-art { background: #edba58; text-align: left; isolation: isolate; }
.social-tiktok-art::after { content: ''; position: absolute; inset: 10% -18% -60% 5%; border: 1px solid #18181224; border-radius: 50%; transform: rotate(-25deg); z-index: -1; }
.social-tiktok-orbit { position: absolute; width: 100%; aspect-ratio: 1; border: 1px solid #18181224; border-radius: 50%; top: -25%; left: -25%; }
.social-tiktok-logo { display: grid; place-items: center; width: 38%; aspect-ratio: 1; position: absolute; left: 16%; top: 12%; border-radius: 21%; background: #171714; box-shadow: 9px 11px 0 #af8b1d54; transform: rotate(-10deg); transition: transform .4s; }
.social-tiktok-logo img { width: 54%; height: 54%; filter: invert(1); }
.social-tiktok-art:hover .social-tiktok-logo { transform: rotate(-3deg) translateY(-5px); }
.social-tiktok-words { position: absolute; left: 13%; top: 51%; font-size: clamp(29px,3.1vw,45px); line-height: 1.05; font-weight: 600; letter-spacing: -.06em; }
.social-tiktok-words b { font-weight: 800; }
.social-tiktok-play { display: inline-flex; gap: 9px; align-items: center; position: absolute; bottom: 9%; left: 13%; font-size: 10px; font-weight: 700; }
.social-tiktok-play .icon { width: 17px; height: 17px; fill: #171714; }
.social-footnote { margin-top: 28px; font-size: 11px; color: #606056; }
.social-footnote a { color: #171714; text-decoration: underline; text-underline-offset: 4px; }
.social-feed-dialog { width: min(760px,calc(100% - 32px)); max-height: 90dvh; padding: 0; border: 1px solid #e7e1ca; border-radius: 8px; background: #fff; color: #141414; overflow: auto; }
.social-feed-dialog::backdrop { background: #080806bf; backdrop-filter: blur(7px); }
.social-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 25px 28px 20px; border-bottom: 1px solid #e7e7dc; }
.social-dialog-header .micro { font-size: 8px; color: #746238; }
.social-dialog-header h2 { font-size: 33px; margin-top: 11px; }
.social-dialog-header>button { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #f4f4ed; }
.social-feed-status { padding: 17px 28px 0; font-size: 11px; color: #686858; }
.tiktok-feed-container { padding: 0 16px; min-height: 70px; }
.tiktok-feed-container blockquote { margin: 18px auto!important; }
.tiktok-feed-container iframe { max-width: 100%; }
.social-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 28px; border-top: 1px solid #e7e7dc; }
.social-dialog-footer>span { font-size: 9px; color: #6a6a5b; }
.social-dialog-footer .button { min-height: 44px; padding: 12px 16px; font-size: 10px; }
@media (max-width: 850px) { .social-section { padding: 75px 0 65px; } .social-grid { gap: 17px; } .social-card-top { padding: 13px 12px; gap: 5px; flex-wrap: wrap; } .social-card-top>time { font-size: 8px; } .social-card-copy { padding: 20px 15px; } .social-card-copy h3 { font-size: 22px; } .social-card-copy>p:not(.social-handle) { font-size: 10px; } .social-tiktok-words { font-size: 29px; } .social-tiktok-play { font-size: 8px; gap: 5px; } }
@media (max-width: 600px) { .social-section { padding: 55px 0 45px; } .social-grid { grid-template-columns: 1fr; gap: 25px; } .social-card-top { padding: 15px 18px; } .social-card-top>time, .social-card-top>span:not(.social-platform) { font-size: 9px; } .social-platform { font-size: 12px; } .social-card-copy { padding: 24px 21px; } .social-card-copy h3 { font-size: 29px; } .social-card-copy>p:not(.social-handle) { font-size: 12px; } .social-handle { font-size: 10px; } .social-post-link { font-size: 12px; min-height: 40px; } .social-profile-fallback { font-size: 10px; min-height: 30px; } .social-tiktok-words { font-size: 42px; } .social-tiktok-play { font-size: 11px; } .social-footnote { font-size: 10px; margin-top: 23px; } .social-dialog-header { padding: 20px 18px 17px; } .social-dialog-header h2 { font-size: 28px; } .social-dialog-header .micro { font-size: 6px; } .social-feed-status { padding: 16px 18px 0; font-size: 10px; } .tiktok-feed-container { padding: 0; } .social-dialog-footer { padding: 18px; flex-wrap: wrap; } .social-dialog-footer>span { font-size: 8px; } }

@media (max-width: 1050px) {
  .hero-inner { gap: 28px; min-height: 680px; }
  .hero { min-height: 680px; }
  .hero-scene { height: auto; min-height: 0; }
  .hero h1 { font-size: clamp(52px,7.1vw,76px); }
  .platform { width: 73px; height: 80px; }
  .platform img { width: 28px; height: 28px; }
  .platform--linkedin b { font-size: 33px; }
}
@media (max-width: 850px) and (min-width: 601px) {
  .hero-inner { min-height: 630px; gap: 30px; }
  .hero { min-height: 630px; }
  .hero h1 { font-size: clamp(48px,7.2vw,61px); }
  .hero-scene { height: auto; min-height: 0; }
  .hero-slogan { font-size: 14px; }
  .platform { width: 58px; height: 64px; border-radius: 10px; }
  .platform img { width: 24px; height: 24px; }
  .platform span { font-size: 6px; }
  .platform--linkedin b { font-size: 28px; }
  .scene-note { font-size: 6px; }
}
@media (max-width: 600px) {
  .brand { padding: 0 8px; }
  .hero, .hero-inner { min-height: 0; }
  .hero-inner { padding-top: 42px; padding-bottom: 30px; display: block; }
  .hero h1 { font-size: clamp(46px,12.3vw,71px); }
  .hero .eyebrow { font-size: 8px; }
  .hero-slogan { font-size: 15px; }
  .hero-description { font-size: 11px; }
  .hero-actions { margin-top: 24px; gap: 9px; }
  .hero-actions .button { font-size: 10px; min-height: 44px; padding: 12px 13px; gap: 10px; }
  .hero-actions .button--text { padding: 9px 0; }
  .hero-scene { width: min(78%,330px); height: auto; min-height: 0; aspect-ratio: 1; margin: 62px auto 76px; }
  .hero .platform { width: 58px; height: 64px; box-shadow: 4px 5px 0 #e5d7a4,0 10px 22px #3428001c; gap: 5px; }
  .platform img { width: 25px; height: 25px; }
  .platform span { font-size: 6px; }
  .platform--shopify { top: -9%; left: 16%; }
  .platform--instagram { right: -9%; top: 18%; }
  .platform--tiktok { right: -3%; bottom: 3%; }
  .platform--facebook { left: 14%; bottom: -9%; }
  .platform--linkedin { left: -12%; top: 39%; }
  .orbit { width: 104%; left: -2%; top: 1%; }
  .orbit--two { width: 120%; left: -10%; top: -7%; }
  .orbit-label { font-size: 5px; bottom: 13%; left: 23%; }
  .scene-note { right: -8%; bottom: -24%; font-size: 6px; }
  .hero-scroll { margin: 0; font-size: 8px; }
  .hero-scroll span { font-size: 7px; }
  .hero-roamer { width: 64px; height: 64px; }
  .services-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .service-copy>p { font-size: clamp(8px,2.2vw,11px); }
  .work-section .section-heading h2 { font-size: 32px; }
  .hex-label small { font-size: 5px; }
  .hex-label strong { font-size: 9px; }
  .review-intro>p, .review-panel>p:not(.micro) { font-size: 11px; }
  .review-panel { box-shadow: 5px 8px 0 #faf4da; }
  .page-intro>.wrap>p { font-size: 11px; }
  .form-help { font-size: 9px; }
  .footer-grid a:not(.brand) { font-size: 10px; }
  .footer-bottom { font-size: 8px; }
}
@media (max-width: 360px) {
  .brand { padding: 0 7px; }
  .header-request { font-size: 7px; }
  .hero h1 { font-size: 43px; }
  .hero-actions .button { font-size: 9px; padding: 11px 10px; }
  .hero-scene { width: 78%; }
  .hero .platform { width: 53px; height: 59px; }
}

/* White header, original mark and an ink wordmark derived from the same asset. */
.brand-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.site-header { background: #fff; }
.brand { background: transparent; padding: 0; border-radius: 0; }
.brand img { filter: url('#brand-on-white'); }

/* Honeycomb illustration; distorted decorative bee overlays have been removed. */
.hero-scene { background: transparent; box-shadow: none; border-radius: 0; }
.hero-crawl-window { position: absolute; inset: -3% -2% -2%; overflow: hidden; border-radius: 30%; }
.crawl-hive { position: absolute; inset: 7% 7% 8%; }
.crawl-cell { position: absolute; width: 30%; height: 34.65%; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: linear-gradient(145deg,#e2bc70,#d39b38); }
.crawl-cell::before { content: ''; position: absolute; inset: 1px; clip-path: inherit; background: linear-gradient(145deg,#fffaf0,#f7e6c5); }
.crawl-cell--center { left: 35%; top: 33%; background: #b77c18; }
.crawl-cell--center::before { background: linear-gradient(135deg,#f0c574,#dfa437); }
.crawl-cell--top-left { left: 19%; top: 9%; }
.crawl-cell--top-right { left: 51%; top: 9%; }
.crawl-cell--left { left: 3%; top: 33%; }
.crawl-cell--right { left: 67%; top: 33%; }
.crawl-cell--bottom-left { left: 19%; top: 57%; }
.crawl-cell--bottom-right { left: 51%; top: 57%; }
.hive-entry { position: absolute; width: 26%; aspect-ratio: 1; left: 37%; top: 35%; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: radial-gradient(at 50% 20%,#5f4017,#9f6f29); box-shadow: inset 0 5px 7px #42260160; }
.hive-cell-label { position: absolute; bottom: 15%; left: 0; right: 0; text-align: center; color: #65430f; font-size: 7px; letter-spacing: .18em; font-weight: 700; }
.hive-cell-lines { position: absolute; width: 32%; height: 1px; left: 34%; top: 48%; background: #cda75c55; box-shadow: 0 6px 0 #cda75c33,0 -6px 0 #cda75c33; }
@media (max-width: 600px) {
  .brand { padding: 0; }
  .hero-scene { width: min(82%,340px); background: transparent; box-shadow: none; }
  .hero-crawl-window { inset: -7% -9% -4%; }
  .hive-cell-label { font-size: 5px; }
}