/* ============================================================
   ECHOSHAPE — UI COMPONENTS: BUTTONS + TAGS (Figma 1:1)
   Source: Website-26, node 893:2327 ("Frame 657" spec sheet)

   Button: Welcome web Bold 16px uppercase, #FF6638 on white,
           2px inside stroke, 10px/20px padding → 39px tall.
           Hover behaves like pressed: solid fill, white text.
   Tag:    Welcome web Regular 16px uppercase, #FF6638 on white,
           1px inside stroke, 6px/16px padding → 31px tall.

   Usage: <a class="btn">…</a>  /  <button class="btn on">…</button>
          .on / .fill = pressed-look (filled) state
          <span class="tag">…</span> (.on = filled variant)
   ============================================================ */

/* ---- button ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;
     font-family:'Welcome web',sans-serif;font-size:16px;font-weight:700;
     text-transform:uppercase;line-height:normal;
     color:var(--prime,#ff6638);background:transparent;
     border:2px solid var(--prime,#ff6638);border-radius:0;
     padding:8px 18px; /* Figma: 10/20 incl. the 2px inside stroke */
     text-decoration:none;white-space:nowrap;cursor:pointer;
     transition:background-color var(--hover-time,.25s) var(--hover-ease,ease),
                color var(--hover-time,.25s) var(--hover-ease,ease),
                border-color var(--hover-time,.25s) var(--hover-ease,ease)}
.btn:hover,.btn.on,.btn.fill{background:var(--prime,#ff6638);color:#fff}
/* .btn is a flex container, and flex layout discards the whitespace text nodes
   between the per-word spans that data-reveal-text injects — "View our work"
   rendered as "Viewourwork". Restore the space as a gap. */
.btn:has(> .es-reveal-word){column-gap:.26em}

/* ---- tag ---- */
.tag{display:inline-flex;align-items:center;justify-content:center;
     font-family:'Welcome web',sans-serif;font-size:16px;font-weight:400;
     text-transform:uppercase;line-height:normal;
     color:var(--prime,#ff6638);background:#fff;
     border:1px solid var(--prime,#ff6638);
     padding:5px 15px; /* Figma: 6/16 incl. the 1px inside stroke */
     white-space:nowrap}
.tag.on{background:var(--prime,#ff6638);color:#fff}

/* ============================================================
   DROPDOWN — Echoshape language
   Trigger is a .btn. Panel is a white plate inside a 0.5px frame
   line, rows separated by the house dash (16/14), uppercase like
   the mobile drawer. The caret is the icon language: 1.5px stroke.

   The panel is position:fixed and placed by JS, because its usual
   host — .bottombar — is overflow:hidden and would clip a plate
   opening upwards.

   Markup:
     <div class="dd">
       <button class="btn dd-btn">Label <svg class="dd-caret">…</svg></button>
       <div class="dd-panel" role="listbox">
         <button class="dd-item" data-value="x">X</button>
         <div class="dd-group">Families</div>
       </div>
     </div>
   ============================================================ */
.dd{position:relative;flex:none}
.dd-btn{gap:.5em}
.dd-caret{flex:none;width:11px;height:7px;display:block;
          transition:transform var(--hover-time,.25s) var(--hover-ease,ease)}
.dd-caret path{fill:none;stroke:currentColor;stroke-width:1.5}
.dd.open .dd-caret{transform:scaleY(-1)}

.dd-panel{position:fixed;z-index:120;display:none;flex-direction:column;
          min-width:180px;max-height:min(70vh,520px);overflow-y:auto;
          background:#fff;border:var(--line,0.5px) solid var(--frameline,#ff6638);
          scrollbar-width:none}
.dd-panel::-webkit-scrollbar{width:0;display:none}
.dd.open .dd-panel{display:flex}

.dd-item{font-family:'Welcome web',sans-serif;font-size:14px;font-weight:500;
         text-transform:uppercase;text-align:left;line-height:1;
         color:var(--dark,#010001);background:transparent;border:0;cursor:pointer;
         padding:13px 16px;white-space:nowrap;
         background-image:var(--dash);background-repeat:no-repeat;
         background-position:left bottom;background-size:100% var(--dashw,1px)}
.dd-item:last-child{background-image:none}
.dd-item:hover,.dd-item:focus-visible{color:var(--prime,#ff6638)}
.dd-item.on{color:var(--prime,#ff6638)}

/* group caption — the blueprint label, not a choice */
.dd-group{font-family:'Welcome web',sans-serif;font-size:11px;font-weight:500;
          text-transform:uppercase;letter-spacing:.06em;
          color:var(--prime,#ff6638);opacity:.7;padding:11px 16px 5px}

/* ---- responsive sizing ----
   Both were locked at 16px with no breakpoint rules, so a hero tag on a phone
   was the same size as on a 1440 screen. These are the site-wide defaults;
   a place that needs bigger chips (the distributors map) overrides locally. */
@media (max-width:1023px){
  .btn{font-size:15px;padding:7px 15px}
  .tag{font-size:15px;padding:5px 13px}
}
@media (max-width:767px){
  .btn{font-size:14px;padding:7px 13px}
  .tag{font-size:13px;padding:4px 10px}
}