/* Hub page components — full-page port of millwork-hub-v5-final.html's
   <style> block (the approved reference build, Master Build Instructions
   §2.2), scoped to .bm-hub. Values are copied directly from that file, not
   re-derived from the written spec tables, per direct instruction to match
   the reference exactly. Departures, and why, are called out inline. */

.bm-hub *,.bm-hub *::before,.bm-hub *::after{box-sizing:border-box;}
.bm-hub img{max-width:100%;display:block;}
.bm-hub p{margin:0;}
.bm-hub a{color:inherit;text-decoration:none;}
.bm-hub h1,.bm-hub h2,.bm-hub h3,.bm-hub h4{color:var(--ink);font-weight:600;line-height:1.1;letter-spacing:-.025em;margin:0;}
.bm-hub .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s4);}
@media (max-width:640px){ .bm-hub .wrap{padding:0 var(--s3);} }
.bm-hub :focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px;}

.bm-hub .eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--timber-mid);
  display:flex;align-items:center;gap:14px;justify-content: unset !important;background: unset !important;}
.bm-hub .eyebrow::before{content:'';width:32px;height:1px;background:var(--brass);flex:none;}
.bm-hub .eyebrow.dk{color:var(--brass-lift);}
.bm-hub .lede{font-size:19px;line-height:1.65;}

/* buttons */
.bm-hub .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:24px;font-size:16px;
  font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--sans);
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);}
.bm-hub .btn:hover{transform:translateY(-2px);}
.bm-hub .btn .arw{transition:transform .25s var(--ease);}
.bm-hub .btn:hover .arw{transform:translateX(4px);}
.bm-hub .b-brass{background:var(--brass);color:#1a1208;}
.bm-hub .b-brass:hover{background:var(--brass-lift);}
.bm-hub .b-timber{background:var(--timber);color:var(--bone);}
.bm-hub .b-timber:hover{background:var(--ink);}
.bm-hub .b-line{background:transparent;color:var(--ink);border-color:var(--rule);}
.bm-hub .b-line:hover{border-color:var(--timber);background:rgba(94,58,34,.05);}
.bm-hub .b-line.dk{color:var(--bone);border-color:var(--rule-d);}
.bm-hub .b-line.dk:hover{border-color:var(--brass-lift);background:rgba(246,241,233,.08);}

/* ---------- generic section ---------- */
.bm-hub section{padding:var(--s7) 0;position:relative;}
@media (max-width:768px){ .bm-hub section{padding:var(--s6) 0;} }
/* .hero manages its own vertical rhythm via .hero-grid's padding below - the
   generic section rule above would otherwise stack on top of it, doubling
   the space above the H1 to over 200px. .bc (breadcrumb) is a <nav>, not a
   <section>, so it was never affected by this rule; its own small top
   padding is set separately where .bc is defined. */
.bm-hub section.hero{padding:0;}
.bm-hub .head{max-width:780px;margin-bottom:var(--s6);}
.bm-hub .head h2{font-size:clamp(29px,3.5vw,46px);margin-top:var(--s3);}
.bm-hub .head p{margin-top:var(--s3);font-size:18px;}
.bm-hub .head.dk h2{color:var(--bone);}
.bm-hub .head.dk p{color:rgba(246,241,233,.72);}

/* reveal */
.bm-hub .rv{opacity:1;transform:none;}
.bm-hub .rv.rv-armed{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease);}
.bm-hub .rv.rv-armed.in,.bm-hub .rv.in{opacity:1;transform:none;}

/* The theme's global header is `position:fixed` and nothing in the theme
   compensates for its height on this template, so without this the top of
   the page renders hidden behind it. 73px matches the fixed header's
   measured height; scoped to .bm-hub so no other page is affected. */
.bm-hub{padding-top:100px;}

/* ============ BREADCRUMB ============ */
.bm-hub .bc{padding:var(--s3) 0 var(--s4);background:var(--warm);}
.bm-hub .bc ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--timber-mid);}
.bm-hub .bc li:not(:last-child)::after{content:'/';margin-left:8px;color:var(--rule);}
.bm-hub .bc a{color:var(--timber-mid);}
.bm-hub .bc a:hover{color:var(--timber);}
.bm-hub .bc li[aria-current="page"]{color:var(--ink-soft);}

/* ============ HERO ============ */
.bm-hub .hero{position:relative;overflow:hidden;background:var(--warm);}
.bm-hub .hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:var(--s6);align-items:center;
  padding:var(--s7) 0;}
.bm-hub .hero-copy{position:relative;z-index:4;max-width:640px;}
.bm-hub .hero h1{margin:var(--s3) 0 0;display:flex;flex-direction:column;}
.bm-hub .h1-kw{display:block;font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--timber-mid);margin-bottom:var(--s3);}
.bm-hub .h1-lead{display:block;font-size:clamp(42px,5.3vw,76px);font-weight:700;letter-spacing:-.04em;line-height:1.02;color:var(--ink);}
.bm-hub .h1-lead .warm{color:var(--timber);}
.bm-hub .hero .lede{margin-top:var(--s4);max-width:530px;}
.bm-hub .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);}
.bm-hub .hero-media{position:relative;z-index:2;}
.bm-hub .hero-media::before{content:'';position:absolute;top:-180px;right:-42vw;bottom:-180px;left:-9%;z-index:-1;
  background:linear-gradient(158deg,var(--timber) 0%,#452817 60%,var(--ink) 100%);
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);}
.bm-hub .plate{position:relative;z-index:2;border:1px solid var(--rule-d);box-shadow:0 44px 90px -34px rgba(0,0,0,.6);overflow:hidden;margin:0;}
.bm-hub .plate img{width:100%;height:clamp(360px,42vw,540px);object-fit:cover;}
.bm-hub .plate::after{content:'';position:absolute;inset:0;background:linear-gradient(200deg,rgba(23,18,16,.42),rgba(23,18,16,.05) 55%);}
.bm-hub .plate svg{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;}
/* Driven by hub.js via the Web Animations API, not a CSS @keyframes
   animation - equally valid either way, but this makes the per-element
   --d/--dur stagger explicit in JS rather than round-tripping through a
   body class toggle. (A "frozen at currentTime:0" symptom seen while
   debugging this in the project's automated test tooling turned out to be
   that tool's browser tab running with document.hidden === true, which
   makes Chrome suspend animation timelines entirely - a testing-tool
   artifact, not a real bug; a normal focused tab animates either
   implementation correctly.) */
.bm-hub .plate .el,.bm-hub .plate .dl{fill:none;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1;}
.bm-hub .plate .el{stroke:rgba(246,241,233,.88);stroke-width:1.1;}
.bm-hub .plate .dl{stroke:var(--brass-lift);stroke-width:1;}
.bm-hub .plate .ar{fill:var(--brass-lift);opacity:0;}
.bm-hub .plate .an{fill:var(--brass-lift);font-size:11px;letter-spacing:.1em;opacity:0;}
/* Wood-flick (§11.6): newer addition, not in the reference file. Offset well
   past the plate's corner so it reads as a visible accent, not a sliver. */
.bm-hub .hero-media .wood-flick{position:absolute;left:-72px;bottom:-56px;width:200px;height:auto;z-index:1;opacity:.9;pointer-events:none;}
.bm-hub .hero .shavings{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;}
@media (max-width:1000px){ .bm-hub .hero-media .wood-flick{display:none;} }
@media (max-width:1000px){
  .bm-hub .bc{padding-bottom:var(--s2);}
  .bm-hub .hero-grid{grid-template-columns:1fr;gap:var(--s5);padding-top:var(--s2);padding-bottom:var(--s7);padding-left: 24px;padding-right: 24px;}
  .bm-hub .hero-media::before{left:-6vw;right:-6vw;top:-36px;bottom:-36px;clip-path:polygon(0 4%,100% 0,100% 100%,0 100%);}
}

/* ============ TRUST STRIP ============ */
.bm-hub .trust{background:var(--ink);padding:var(--s5) 0;}
.bm-hub .trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);}
.bm-hub .trust h3{font-size:17px;color:var(--bone);font-weight:500;letter-spacing:-.01em;}
.bm-hub .trust p{font-size:16px;line-height:1.6;color:rgba(246,241,233,.58);margin-top:6px;}
.bm-hub .trust li{border-top:1px solid var(--rule-d);padding-top:var(--s3);}
@media (max-width:860px){ .bm-hub .trust ul{grid-template-columns:1fr 1fr;gap:var(--s4);} }
@media (max-width:520px){ .bm-hub .trust ul{grid-template-columns:1fr;} }

/* ============ THREE PILLARS — Batch 1 content, no reference-file equivalent;
   composed from the trust/enterprise-value bordered-top item pattern ============ */
.bm-hub .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.bm-hub .pillar{border-top:1px solid var(--rule);padding-top:var(--s3);}
.bm-hub .pillar p{font-size:16px;line-height:1.65;}
@media (max-width:860px){ .bm-hub .pillars{grid-template-columns:1fr 1fr;gap:var(--s4);} }
@media (max-width:560px){ .bm-hub .pillars{grid-template-columns:1fr;} }

/* ============ THESIS ============ */
.bm-hub .thesis{background:var(--paper);border-bottom:1px solid var(--rule);}
.bm-hub .th-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s7);align-items:center;}
.bm-hub .th-img{position:relative;overflow:hidden;}
.bm-hub .th-img img{width:100%;height:clamp(320px,36vw,470px);object-fit:cover;}
.bm-hub .th-img figcaption{position:absolute;left:0;bottom:0;right:0;padding:var(--s3) var(--s4);
  background:linear-gradient(transparent,rgba(23,18,16,.86));color:rgba(246,241,233,.86);font-size:12.5px;letter-spacing:.02em;}
.bm-hub .thesis h2{font-size:clamp(28px,3.3vw,44px);}
.bm-hub .thesis h2 em{font-style:normal;color:var(--timber);display:block;}
.bm-hub .th-body p+p{margin-top:var(--s3);}
.bm-hub .pull{border-left:2px solid var(--brass);padding:2px 0 2px var(--s3);margin-top:var(--s4);color:var(--ink);font-weight:400;}
@media (max-width:940px){ .bm-hub .th-grid{grid-template-columns:1fr;gap:var(--s5);} }

/* ============ MATERIAL TRANSITION BAND ============ */
.bm-hub .band{position:relative;padding:0;overflow:hidden;background:var(--ink);}
.bm-hub .band img{width:100%;height:clamp(280px,32vw,400px);object-fit:cover;opacity:.62;}
.bm-hub .band .ov{position:absolute;inset:0;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(23,18,16,.92) 12%,rgba(23,18,16,.45) 62%,rgba(23,18,16,.25));}
.bm-hub .band .ov .wrap{width:100%;}
.bm-hub .band p{max-width:30ch;font-size:clamp(21px,2.5vw,32px);line-height:1.28;color:var(--bone);font-weight:500;letter-spacing:-.025em;}
.bm-hub .band small{display:block;margin-top:var(--s3);font-size:16px;color:rgba(246,241,233,.6);letter-spacing:.04em;max-width:38ch;}

/* ============ SERVICES GRID ============ */
.bm-hub .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.bm-hub .card{background:var(--warm);padding:var(--s5) var(--s4) var(--s4);text-decoration:none;display:flex;
  flex-direction:column;min-height:250px;position:relative;overflow:hidden;transition:background .35s var(--ease);}
.bm-hub .card:hover{background:var(--paper);}
.bm-hub .card h3{font-size:20px;margin-top:var(--s3);line-height:1.25;}
.bm-hub .card p{margin-top:var(--s2);font-size:16px;line-height:1.6;}
.bm-hub .card .go{margin-top:auto;padding-top:var(--s3);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--timber-mid);display:flex;align-items:center;gap:8px;}
.bm-hub .card .go svg{transition:transform .25s var(--ease);}
.bm-hub .card:hover .go svg{transform:translateX(5px);}
.bm-hub .card::before{content:'';position:absolute;left:0;top:0;height:2px;width:0;background:var(--brass);transition:width .4s var(--ease);}
.bm-hub .card:hover::before{width:100%;}
.bm-hub .card::after{content:'';position:absolute;right:-1px;top:0;bottom:0;width:1px;background:var(--brass);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease) .1s;}
.bm-hub .card:hover::after{transform:scaleY(1);}
@media (max-width:980px){ .bm-hub .cards{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .bm-hub .cards{grid-template-columns:1fr;} .bm-hub .card{min-height:0;} }

.bm-hub .reg{background:var(--bone-2);padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;
  min-height:250px;text-decoration:none;}
.bm-hub .reg h3{font-size:19px;margin-top:var(--s3);}
.bm-hub .reg p{margin-top:var(--s2);font-size:16px;line-height:1.6;}
.bm-hub .reg .go{margin-top:auto;padding-top:var(--s3);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--timber);display:flex;align-items:center;gap:8px;}
.bm-hub .reg:hover .go svg{transform:translateX(5px);}
.bm-hub .reg .go svg{transition:transform .25s var(--ease);}

.bm-hub .addl{margin-top:var(--s6);border-top:1px solid var(--rule);padding-top:var(--s5);}
.bm-hub .addl-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3);justify-content:space-between;}
.bm-hub .addl-h h3{font-size:20px;}
.bm-hub .addl-h span{font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--timber-mid);}
.bm-hub .addl ul{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);}
.bm-hub .addl li{background:var(--warm);padding:var(--s4);}
.bm-hub .addl li strong{display:block;font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.01em;}
.bm-hub .addl li span{display:block;margin-top:9px;font-size:16px;line-height:1.6;}
.bm-hub .addl li em{display:block;margin-top:12px;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass);}
.bm-hub .addl-note{margin-top:var(--s3);font-size:16px;}
.bm-hub .addl-note a{color:var(--timber);}
@media (max-width:900px){ .bm-hub .addl ul{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .bm-hub .addl ul{grid-template-columns:1fr;} }

/* ============ SMALL MID-PAGE FORM — Gravity Form 30 ============ */
.bm-hub .mini{background:var(--bone);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.bm-hub .mini-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s6);align-items:center;}
.bm-hub .mini h2{font-size:clamp(26px,3vw,38px);}
.bm-hub .mini .sub{margin-top:var(--s3);font-size:17.5px;}
.bm-hub .mini .rea{margin-top:var(--s3);font-size:16px;color:var(--timber-mid);display:flex;align-items:center;gap:10px;}
.bm-hub .mini .rea::before{content:'';width:26px;height:1px;background:var(--brass);flex:none;}
@media (max-width:940px){ .bm-hub .mini-grid{grid-template-columns:1fr;gap:var(--s5);} }

/* ============ DRAWING TO REALITY ============ */
.bm-hub .d2r{background:var(--ink);color:rgba(246,241,233,.74);overflow:hidden;}
.bm-hub .cmp{position:relative;user-select:none;border:1px solid var(--rule-d);overflow:hidden;touch-action:none;}
.bm-hub .cmp img{width:100%;height:clamp(340px,50vw,620px);object-fit:cover;pointer-events:none;}
.bm-hub .cmp .top{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 48% 0 0);}
.bm-hub .cmp .top img{width:100%;height:clamp(340px,50vw,620px);object-fit:cover;pointer-events:none;}
.bm-hub .cmp .bar{position:absolute;top:0;bottom:0;left:52%;width:2px;background:var(--brass-lift);z-index:5;cursor:ew-resize;}
.bm-hub .cmp .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  background:var(--brass);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,.5);
  color:#1a1208;font-size:13px;font-weight:700;}
.bm-hub .cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:6;}
.bm-hub .cmp .tag{position:absolute;bottom:var(--s3);padding:8px 16px;border-radius:20px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;background:rgba(23,18,16,.72);color:var(--bone);z-index:4;border:1px solid var(--rule-d);}
.bm-hub .cmp .tag.l{left:var(--s3);} .bm-hub .cmp .tag.r{right:var(--s3);}
.bm-hub .d2r-note{margin-top:var(--s3);font-size:16px;color:rgba(246,241,233,.5);}

/* ============ WORKFLOW ============ */
.bm-hub .flow{background:var(--paper);}
.bm-hub .flow-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:var(--s7);align-items:start;}
.bm-hub .steps{border-top:1px solid var(--rule);}
.bm-hub .stp{border-bottom:1px solid var(--rule);padding:var(--s3) 0;cursor:pointer;background:none;border-left:0;border-right:0;
  width:100%;text-align:left;font-family:inherit;display:grid;grid-template-columns:56px 1fr;gap:var(--s3);align-items:baseline;
  transition:opacity .3s var(--ease);}
.bm-hub .stp .n{font-size:16px;font-weight:600;color:var(--brass);font-variant-numeric:tabular-nums;letter-spacing:.1em;}
.bm-hub .stp h3{font-size:19px;transition:color .3s var(--ease);}
.bm-hub .stp p{grid-column:2;font-size:16px;margin-top:var(--s2);max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease),opacity .35s var(--ease),margin .45s var(--ease);}
.bm-hub .stp[aria-expanded="true"] p{max-height:180px;opacity:1;}
.bm-hub .stp[aria-expanded="true"] h3{color:var(--timber);}
.bm-hub .flow-img{position:sticky;top:110px;overflow:hidden;}
.bm-hub .flow-img img{width:100%;height:clamp(300px,38vw,460px);object-fit:cover;}
@media (max-width:940px){ .bm-hub .flow-grid{grid-template-columns:1fr;gap:var(--s5);} .bm-hub .flow-img{position:static;order:-1;} }

/* ============ TWO OUTPUTS ============ */
.bm-hub .feat{background:var(--bone);}
.bm-hub .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6);}
.bm-hub .fbox{background:var(--paper);overflow:hidden;display:flex;flex-direction:column;}
.bm-hub .fbox img{width:100%;height:270px;object-fit:cover;}
.bm-hub .fbox .in{padding:var(--s5) var(--s4) var(--s5);}
.bm-hub .fbox h3{font-size:22px;}
.bm-hub .fbox p{margin-top:var(--s3);font-size:16px;}
.bm-hub .fbox ul{margin:var(--s3) 0 0;padding:0;list-style:none;}
.bm-hub .fbox li{font-size:16px;padding:9px 0 9px var(--s3);border-bottom:1px solid var(--rule);position:relative;}
.bm-hub .fbox li::before{content:'';position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--brass);}
.bm-hub .fbox .btn{margin-top:var(--s4);}
@media (max-width:860px){ .bm-hub .feat-grid{grid-template-columns:1fr;gap:var(--s4);} }

/* ============ CASE STUDY STRIP — reference's .cs, real content not a placeholder ============ */
.bm-hub .cs{margin-top:var(--s6);border:1px solid var(--rule);background:var(--paper);
  display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:center;padding:var(--s4);}
.bm-hub .cs h3{font-size:18px;font-weight:500;}
.bm-hub .cs p{font-size:16px;margin-top:6px;color:var(--timber-mid);}
.bm-hub .cs a{font-size:16px;font-weight:600;color:var(--timber);text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;}
@media (max-width:760px){ .bm-hub .cs{grid-template-columns:1fr;gap:var(--s3);text-align:left;} }

/* ============ TESTIMONIAL SLIDER — reference build's exact .tst-in styling ============ */
.bm-hub .tst{background:var(--bone);}
.bm-hub .tst-slider{max-width:1340px;}
/* Native scroll-snap, not a JS-computed transform+transition: scrollLeft is a
   plain DOM property with no separate "computed style" to fall out of sync
   with, and it gets working touch/trackpad swipe on mobile for free. */
/* align-items:flex-start, not the flex default (stretch) - otherwise every
   slide is stretched to match the height of the longest quote, and the
   border-left on the shorter ones runs on past where their own text ends. */
.bm-hub .tst-track{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
.bm-hub .tst-track::-webkit-scrollbar{display:none;height:0;}
.bm-hub .tst-in{flex:0 0 100%;min-width:0;max-width:1340px;scroll-snap-align:start;border-left:2px solid var(--brass);padding-left:var(--s5);}
.bm-hub .tst-in .lab{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  border:1px dashed var(--timber-mid);display:inline-block;padding:7px 12px;}
.bm-hub .tst-in blockquote{margin:var(--s4) 0 0;font-size:clamp(21px,2.6vw,16px) !important;line-height:1.4;color:var(--ink);
  font-weight:400;letter-spacing:-.02em;}
.bm-hub .tst-in figcaption{margin-top:var(--s4);font-size:16px;color:var(--timber-mid);}
/* Nav is deliberately larger and higher-contrast than a typical dot strip -
   this replaces an earlier version whose controls were too subtle to notice. */
.bm-hub .tst-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--s5);margin-top:var(--s6);}
.bm-hub .tst-arw{width:48px;height:48px;border-radius:50%;border:1px solid var(--timber-mid);background:var(--paper);
  color:var(--ink);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);}
.bm-hub .tst-arw:hover{border-color:var(--timber);background:var(--timber);color:var(--bone);transform:translateY(-2px);}
.bm-hub .tst-dots{display:flex;align-items:center;gap:12px;}
.bm-hub .tst-dot{width:11px;height:11px;border-radius:50%;background:transparent;border:1.5px solid var(--timber-mid);
  padding:0;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);}
.bm-hub .tst-dot:hover{border-color:var(--timber);}
.bm-hub .tst-dot[aria-selected="true"]{background:var(--brass);border-color:var(--brass);transform:scale(1.2);}
@media (max-width:640px){ .bm-hub .tst-in{padding-left:var(--s3);} }

/* ============ ENTERPRISE VALUE ============ */
.bm-hub .val{background:var(--timber);color:rgba(246,241,233,.78);}
.bm-hub .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.bm-hub .val h2{color:var(--bone);}
.bm-hub .vitem{border-top:1px solid var(--rule-d);padding-top:var(--s3);}
.bm-hub .vitem h3{font-size:17px;color:var(--bone);}
.bm-hub .vitem p{margin-top:var(--s2);font-size:16px;line-height:1.65;}
@media (max-width:860px){ .bm-hub .val-grid{grid-template-columns:1fr 1fr;gap:var(--s4);} }
@media (max-width:560px){ .bm-hub .val-grid{grid-template-columns:1fr;} }

/* ============ SELECTED WORK ============ */
.bm-hub .work{background:var(--warm);}
.bm-hub .wgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);}
.bm-hub .wc{position:relative;overflow:hidden;text-decoration:none;display:block;background:var(--ink);}
.bm-hub .wc-img{display:block;}
.bm-hub .wc-img img{width:100%;height:290px;object-fit:cover;transition:transform .7s var(--ease),opacity .5s var(--ease);}
.bm-hub .wc:hover .wc-img img{transform:scale(1.05);opacity:.8;}
.bm-hub .wc .cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s4);display:block;
  background:linear-gradient(transparent,rgba(23,18,16,.9));}
.bm-hub .wc h3{font-size:18px;color:var(--bone);}
.bm-hub .wc small{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lift);}
.bm-hub .req{margin-top:var(--s4);font-size:16px;letter-spacing:.06em;color:var(--timber-mid);
  border:1px dashed var(--rule);padding:var(--s3) var(--s4);background:var(--paper);}
@media (max-width:1000px){ .bm-hub .wgrid4{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .bm-hub .wgrid4{grid-template-columns:1fr;} }

/* ============ INDUSTRIES / MARKETS / PLATFORMS ============ */
.bm-hub .ctx{padding:var(--s7) 0;}
.bm-hub .ctx-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:var(--s6);align-items:start;}
.bm-hub .ctx h2{font-size:clamp(24px,2.6vw,34px);}
.bm-hub .ctx .cx-sub{margin-top:var(--s3);font-size:16px;max-width:44ch;}
@media (max-width:900px){ .bm-hub .ctx-grid{grid-template-columns:1fr;gap:var(--s4);} }

.bm-hub .sect{background:var(--bone);}
.bm-hub .sect ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 var(--s5);border-top:1px solid var(--rule);}
.bm-hub .sect li{border-bottom:1px solid var(--rule);}
.bm-hub .sect a,.bm-hub .sect .is-pending{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:baseline;
  padding:15px 0;text-decoration:none;transition:padding-left .3s var(--ease);}
.bm-hub .sect a:hover,.bm-hub .sect .is-pending:hover{padding-left:10px;}
.bm-hub .sect strong{font-size:16px;font-weight:500;color:var(--ink);transition:color .3s var(--ease);}
.bm-hub .sect span{font-size:16px;color:var(--timber-mid);text-align:right;}
.bm-hub .sect a:hover strong,.bm-hub .sect .is-pending:hover strong{color:var(--timber);}
.bm-hub .sect .is-pending{cursor:default;opacity:1;}
@media (max-width:640px){ .bm-hub .sect ul{grid-template-columns:1fr;} .bm-hub .sect span{display:none;} }

.bm-hub .mkt{background:var(--ink);color:rgba(246,241,233,.72);}
.bm-hub .mkt h2{color:var(--bone);}
.bm-hub .mkt .cx-sub{color:rgba(246,241,233,.66);}
.bm-hub .mkt ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--rule-d);border:1px solid var(--rule-d);}
.bm-hub .mkt li{background:var(--ink);padding:var(--s4);display:flex;flex-direction:column;transition:background .3s var(--ease);}
.bm-hub .mkt li:hover{background:var(--ink-2);}
.bm-hub .mkt .rowh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);}
.bm-hub .mkt li strong{font-size:16.5px;color:var(--bone);font-weight:500;letter-spacing:-.01em;}
.bm-hub .mkt .pill{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 9px;border-radius:12px;white-space:nowrap;flex:none;}
.bm-hub .mkt .pill.on{color:#1a1208;background:var(--brass-lift);}
.bm-hub .mkt .pill.next{color:var(--brass-lift);border:1px solid rgba(214,167,88,.45);}
.bm-hub .mkt .pill.enq{color:var(--brass-lift);border:1px dashed rgba(214,167,88,.45);}
.bm-hub .mkt li em{display:block;font-style:normal;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass-lift);margin-top:12px;}
.bm-hub .mkt li>span{display:block;font-size:16px;line-height:1.6;margin-top:10px;color:rgba(246,241,233,.6);}
.bm-hub .mkt li a,.bm-hub .mkt li .is-pending{font-size:16px;color:var(--brass-lift);text-decoration:none;margin-top:auto;padding-top:var(--s3);
  display:inline-block;transition:color .25s var(--ease),transform .25s var(--ease);}
.bm-hub .mkt li a:hover,.bm-hub .mkt li .is-pending:hover{color:var(--bone);transform:translateX(4px);}
.bm-hub .mkt li .is-pending{cursor:default;opacity:1;}
@media (max-width:1000px){ .bm-hub .mkt ul{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .bm-hub .mkt ul{grid-template-columns:1fr;} }

.bm-hub .pf{background:var(--warm);border-top:1px solid var(--rule);}
.bm-hub .pf-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.bm-hub .pf-list a,.bm-hub .pf-list .is-pending{background:var(--warm);padding:var(--s4);text-decoration:none;transition:background .3s var(--ease);display:block;opacity:1;}
.bm-hub .pf-list a:hover,.bm-hub .pf-list .is-pending:hover{background:var(--paper);cursor:default;}
.bm-hub .pf-list strong{display:block;font-size:16px;font-weight:500;color:var(--ink);}
.bm-hub .pf-list span{display:block;font-size:16px;line-height:1.55;margin-top:8px;color:var(--ink-soft);}
.bm-hub .pf-note{margin-top:var(--s4);font-size:16px;color:var(--timber-mid);}
.bm-hub .pf-note a,.bm-hub .pf-note .is-pending{color:var(--timber);font-weight:600;}
@media (max-width:860px){ .bm-hub .pf-list{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .bm-hub .pf-list{grid-template-columns:1fr;} }

/* ============ FAQ ============ */
.bm-hub .faq{background:var(--paper);}
.bm-hub .faq-list{border-top:1px solid var(--rule);max-width:940px;}
.bm-hub .faq-list details{border-bottom:1px solid var(--rule);}
.bm-hub .faq-list summary{list-style:none;cursor:pointer;padding:var(--s4) var(--s6) var(--s4) 0;font-size:18px;font-weight:500;
  color:var(--ink);position:relative;letter-spacing:-.01em;}
.bm-hub .faq-list summary::-webkit-details-marker{display:none;}
.bm-hub .faq-list summary::after{content:'';position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--timber-mid);border-bottom:1.5px solid var(--timber-mid);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);}
.bm-hub .faq-list details[open] summary::after{transform:translateY(-25%) rotate(-135deg);}
.bm-hub .faq-list .a p{padding:0 var(--s6) var(--s4) 0;font-size:16px;max-width:74ch;margin:0;}
.bm-hub .faq-list .a a,.bm-hub .faq-list .a .is-pending{color:var(--timber);font-weight:600;text-underline-offset:3px;}

/* ============ CLOSING CTA — Batch 1's own block; the reference file's .close
   CSS is present but unused in its body (superseded there by .fconv alone).
   Reused here since it matches Batch 1's "one dominant CTA + one quiet
   action" requirement exactly. ============ */
.bm-hub .close{background:var(--ink);color:rgba(246,241,233,.74);overflow:hidden;}
.bm-hub .close .shavings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.bm-hub .close .wrap{position:relative;z-index:2;}
.bm-hub .close .inner{max-width:820px;}
.bm-hub .close h2{color:var(--bone);font-size:clamp(30px,3.9vw,50px);}
.bm-hub .close p{margin-top:var(--s3);font-size:17.5px;}
.bm-hub .close .alt{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2);}

/* ============ FOOTER CONVERSION — Gravity Form 20 ============ */
.bm-hub .fconv{background:var(--ink);padding:var(--s7) 0 var(--s6);}
.bm-hub .fconv-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s7);align-items:start;}
.bm-hub .fconv h2{color:var(--bone);font-size:clamp(28px,3.4vw,44px);}
.bm-hub .fconv .sub{margin-top:var(--s3);font-size:17.5px;color:rgba(246,241,233,.72);}
.bm-hub .fconv .why{list-style:none;margin:var(--s5) 0 0;padding:0;}
.bm-hub .fconv .why li{font-size:16px;color:rgba(246,241,233,.66);padding:11px 0 11px var(--s3);
  border-top:1px solid var(--rule-d);position:relative;}
.bm-hub .fconv .why li::before{content:'';position:absolute;left:0;top:22px;width:10px;height:1px;background:var(--brass);}
.bm-hub .fconv .form{background:rgba(246,241,233,.05);border:1px solid var(--rule-d);padding:var(--s5) var(--s4);}
.bm-hub .fconv .form h3{color:var(--bone);font-size:20px;}
.bm-hub .fconv .form .fh{font-size:16px;margin-top:10px;color:rgba(246,241,233,.55);}
@media (max-width:940px){ .bm-hub .fconv-grid{grid-template-columns:minmax(0,1fr);gap:var(--s5);} }

/* ============ CONDITIONAL INTERNAL LINKS — target not live yet ============ */
.bm-hub .is-pending{ cursor:default; opacity:.7; }

/* ============ GRAVITY FORMS — re-skinned to brand tokens, underline inputs only.
   Light-ground forms (.mini) use --ink text on --rule underlines; dark-ground
   forms (.fconv) use --bone text on --rule-d underlines and --brass-lift labels. ============ */
.bm-hub .gform_wrapper{max-width:none !important;}
.bm-hub .gform_wrapper .gform_heading{display:none;}
/* Gravity Forms 2.5+ ships its own 12-column CSS grid on .gform_fields
   (each field carries grid-column:span 6/12 etc. from GF's own core CSS).
   An earlier version here re-declared display:grid with a 2-column template
   on the outer <form> and display:contents on .gform_fields to flatten it -
   that left GF's own span-6/span-12 values fighting a 2-column template,
   which generated large implicit grid tracks and produced a huge blank gap
   between fields. Matching GF's own 12-column system instead of overriding
   it fixes this outright. */
.bm-hub .gform_wrapper .gform_fields{display:grid !important;grid-template-columns:repeat(12,1fr) !important;column-gap:var(--s4);row-gap:0;}
/* Form 30's fields carry GF's own gfield--width-half/--width-full classes,
   which map to real grid-column:span values and lay out correctly on their
   own. Form 20's fields carry no width class at all (grid-column:auto),
   which - on a 12-column grid - defaults every field to a single 1-of-12
   track, cramming all five into one illegibly narrow row. Defaulting every
   field to full width, then opting specific fields back into a half/third
   span only when GF's own class says so, makes both forms correct without
   needing to know which convention a given form happens to use. */
.bm-hub .gform_wrapper .gfield{grid-column:1/-1 !important;margin-top:var(--s3) !important;}
.bm-hub .gform_wrapper .gfield--width-half{grid-column:span 6 !important;}
.bm-hub .gform_wrapper .gfield--width-third{grid-column:span 4 !important;}
/* These two forms' fields are configured in Gravity Forms with label
   placement set to "hidden" (relying on placeholder text only), which
   doesn't match the design system's underline-input-with-visible-label
   spec (§5.4). Overriding the sr-only clip technique GF applies for hidden
   labels so the label actually shows, rather than leaving fields looking
   bare with only greyed-out placeholder text inside the box. */
.bm-hub .gform_wrapper .gfield_label,
.bm-hub .gform_wrapper label.gfield_label{
  position:static !important; width:auto !important; height:auto !important; overflow:visible !important; clip:auto !important; clip-path:none !important;
  display:block !important; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--timber-mid); margin-bottom:8px !important;
}
.bm-hub .fconv .gform_wrapper label.gfield_label{color:var(--brass-lift);}
/* GF renders "(Required)" as genuinely visible text (not screen-reader-only)
   in this install's field markup - clean per-field labels ("Name", "Email")
   read better here than "Name(Required)". Hidden accessibly (clipped, not
   display:none) since the input's own `required` attribute still conveys
   this to assistive tech. */
.bm-hub .gform_wrapper .gfield_required_text{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.bm-hub .gform_wrapper input[type=text],
.bm-hub .gform_wrapper input[type=email],
.bm-hub .gform_wrapper input[type=tel],
.bm-hub .gform_wrapper textarea,
.bm-hub .gform_wrapper select{
  width:100% !important; background:transparent !important; border:0 !important;
  border-bottom:1px solid var(--rule) !important; border-radius:0 !important;
  color:var(--ink) !important; font-family:var(--sans) !important; font-size:16px !important;
  padding:9px 0 !important; box-shadow:none !important; transition:border-color .3s var(--ease);
}
.bm-hub .fconv .gform_wrapper input,
.bm-hub .fconv .gform_wrapper textarea{ color:var(--bone) !important; border-bottom-color:var(--rule-d) !important; }
.bm-hub .gform_wrapper input:focus,
.bm-hub .gform_wrapper textarea:focus,
.bm-hub .gform_wrapper select:focus{ outline:none !important; border-bottom-color:var(--brass) !important; }
.bm-hub .gform_wrapper .gform_footer{margin-top:var(--s4) !important; padding:0 !important; grid-column:1/-1;}
.bm-hub .gform_wrapper .gform_button{
  display:inline-flex !important; align-items:center; gap:8px;
  background:var(--brass) !important; color:#1a1208 !important;
  border:none !important; border-radius:24px !important; padding:16px 30px !important;
  font-size:16px !important; font-weight:600 !important; letter-spacing:.01em !important; cursor:pointer;
  width:100%; justify-content:center; text-transform:none !important;
  transition:transform .25s var(--ease);
}
.bm-hub .gform_wrapper .gform_button:hover{ transform:translateY(-2px); }
.bm-hub .gform_wrapper .gform_validation_container{ display:none !important; }
.bm-hub .gform_wrapper .validation_message{ color:#b3261e !important; font-size:16px !important; margin-top:4px !important; }
.bm-hub .gform_confirmation_message{ font-size:16px; color:var(--timber); }
.bm-hub .fconv .gform_confirmation_message{ color:var(--brass-lift); }
@media (max-width:560px){ .bm-hub .gform_wrapper .gfield{grid-column:1/-1 !important;} }

/* ── Gravity Forms confirmation card ── */
.gform_confirmation_message,
.gform_confirmation_wrapper{ padding:0; margin:0; border:0; }

.bl-thanks{
  box-sizing:border-box;
  max-width:680px;
  margin:0 auto;
  padding:48px 32px 44px;
  text-align:center;
  background:#F6F1E9;
  border:1px solid rgba(59,50,43,.10);
  border-radius:18px;
  font-family:Poppins, system-ui, sans-serif;
  color:#4A4038;
}
.bl-thanks *{ box-sizing:border-box; }

/* check badge */
.bl-thanks__badge{
  position:relative;
  display:block;
  width:78px; height:78px;
  margin:0 auto 28px;
  border:1px solid rgba(185,143,69,.45);
  border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B98F45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/32px 32px;
}
.bl-thanks__badge::before,
.bl-thanks__badge::after{
  content:"\2726";
  position:absolute; top:26px;
  font-size:13px; line-height:1;
  color:rgba(185,143,69,.55);
}
.bl-thanks__badge::before{ left:-26px; }
.bl-thanks__badge::after{ right:-26px; }

/* title + gold hairline */
.bl-thanks__title{
  margin:0 0 26px !important;
  font-size:clamp(22px, 3.2vw, 30px)!important;
  font-weight:700 !important;
  line-height:1.3 !important;
  letter-spacing:-.01em !important;
  color:var(--timber-mid) !important;
}
.bl-thanks__title::after{
  content:"";
  display:block;
  width:78px; height:1px;
  margin:22px auto 0;
  background:#C9A867;
}

.bl-thanks__lede {
    margin: 10px 0 16px !important;
    font-size: 17px;
    line-height: 1.65;
    color: var(--timber-mid);
}

/* dotted divider with sprig */
.bl-thanks__ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:46px;
  margin:0 0 26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B98F45' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V9'/%3E%3Cpath d='M12 12C12 7 9 3 5 2c0 5 3 9 7 10z'/%3E%3Cpath d='M12 12c0-5 3-9 7-10 0 5-3 9-7 10z'/%3E%3C/svg%3E") no-repeat center/22px 22px;
}
.bl-thanks__ornament::before,
.bl-thanks__ornament::after{
  content:"";
  flex:0 1 150px;
  border-top:2px dotted rgba(185,143,69,.45);
}

.bl-thanks__more{
  margin:0 0 32px !important;
  font-size:17px;
  line-height:1.65;
  color:var(--timber-mid);
}

/* buttons */
.bl-thanks__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.bl-thanks__btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:15px 30px;
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  color:#fff !important;
  background:#2400A1;
  border-radius:999px;
  transition:background-color .2s, transform .15s, box-shadow .2s;
}
.bl-thanks__btn:hover{
  background:#1B0079;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(36,0,161,.22);
  color:#fff !important;
}
.bl-thanks__btn:focus-visible{
  outline:2px solid #C9A867;
  outline-offset:3px;
}
.bl-thanks__btn::before{
  content:"";
  flex:0 0 19px; width:19px; height:19px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.bl-thanks__btn--work::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}
.bl-thanks__btn--blog::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}
.bl-thanks__btn--case::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round'%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3C/svg%3E");
}

@media (max-width:600px){
  .bl-thanks{ padding:36px 20px 32px; border-radius:14px; }
  .bl-thanks br{ display:none; }
  .bl-thanks__lede,
  .bl-thanks__more{ font-size:15.5px; }
  .bl-thanks__ornament{ gap:30px; }
  .bl-thanks__ornament::before,
  .bl-thanks__ornament::after{ flex:0 1 90px; }
  .bl-thanks__btn{ width:100%; justify-content:center; padding:14px 22px; }
}

/* ── Attach drawings pill — Form 20 / Field 19 ── */
#field_20_19{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:14px 18px; margin-top:6px;
}

/* label = pill trigger */
#field_20_19 > .gfield_label{
  display:inline-flex; align-items:center; gap:10px;
  margin:0; padding:13px 24px 13px 20px;
  font-size:14px; font-weight:600; line-height:1;
  letter-spacing:0; text-transform:none;
  color:#F2ECE1; background:transparent;
  border:1px solid rgba(242,236,225,.30);
  border-radius:999px; cursor:pointer;
  user-select:none; -webkit-user-select:none;
  transition:border-color .2s, background-color .2s, transform .15s;
}
#field_20_19 > .gfield_label::before{
  content:""; flex:0 0 16px; width:16px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2ECE1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") no-repeat center/contain;
}
#field_20_19 > .gfield_label:hover{
  border-color:#D6A758; background:rgba(214,167,88,.08);
}
#field_20_19 > .gfield_label:active{ transform:translateY(1px); }
#field_20_19:focus-within > .gfield_label{
  border-color:#D6A758; box-shadow:0 0 0 3px rgba(214,167,88,.18);
}

/* container inline, native input hidden (accessible) */
#field_20_19 .ginput_container_fileupload{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px; margin:0; flex:1 1 auto;
}
#field_20_19 input[type="file"]{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; border:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* helper text */
#gfield_upload_rules_20_19{
  margin:0; padding:0; font-size:13px;
  color:rgba(242,236,225,.45);
}

/* selected-file chip */
#field_20_19 .bl-file-chip{
  display:none; align-items:center; gap:8px; max-width:100%;
  padding:7px 8px 7px 14px; font-size:13px; color:#F2ECE1;
  background:rgba(246,241,233,.07);
  border:1px solid rgba(242,236,225,.18);
  border-radius:999px;
}
#field_20_19.has-file .bl-file-chip{ display:inline-flex; }
#field_20_19.has-file #gfield_upload_rules_20_19{ display:none; }
#field_20_19 .bl-file-chip__name{
  max-width:24ch; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
#field_20_19 .bl-file-chip__x{
  all:unset; cursor:pointer; width:20px; height:20px;
  border-radius:50%; display:grid; place-items:center;
  font-size:15px; line-height:1; color:rgba(242,236,225,.6);
}
#field_20_19 .bl-file-chip__x:hover{
  background:rgba(242,236,225,.12); color:#F2ECE1;
}

@media (max-width:520px){
  #field_20_19{ gap:12px; }
  #gfield_upload_rules_20_19{ flex-basis:100%; }
}