/* The header's Services and Industries menus, and the Get Started popup at the end of this file.
   It opens on hover or keyboard focus, and is centred under the whole header rather than the link.
   Shared by the homepage and the industry pages; the menu markup comes from scripts/industries/build.mjs. */
.hdr-in{position:relative}
.nav{align-items:center}
.nav-dd{display:flex}
.nav-dd-t{display:inline-flex;align-items:center;gap:4px}
.nav-dd-c{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav-dd:hover .nav-dd-c,.nav-dd:focus-within .nav-dd-c{transform:rotate(180deg)}

.ddm{position:absolute;top:calc(100% + 12px);left:50%;z-index:60;width:min(980px,calc(100vw - 32px));
  opacity:0;visibility:hidden;transform:translate(-50%,6px);
  transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s}
/* an invisible bridge, so moving from the link down to the panel does not close it */
.ddm::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px}
.nav-dd:hover .ddm,.nav-dd:focus-within .ddm{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.nav-dd.shut .ddm{opacity:0;visibility:hidden;transform:translate(-50%,6px)}

/* liquid glass, like the search bar: clear enough to see the page through, frosted enough to read */
.ddm-in{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:8px;padding:10px;border-radius:26px;text-align:left;
  font-family:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.44));
  -webkit-backdrop-filter:blur(26px) saturate(1.8) brightness(1.05);backdrop-filter:blur(26px) saturate(1.8) brightness(1.05);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -12px 24px -18px rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.3),
    0 0 0 1px rgba(11,42,32,.08),0 32px 64px -28px rgba(11,42,32,.4),0 8px 20px -12px rgba(11,42,32,.16)}
/* the rim: brightest at the top left and bottom right, as on the search bar */
.ddm-in::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:-1;
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.3) 25%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.35) 78%, rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ddm-h{padding:10px 12px 6px;font-size:12.5px;font-weight:500;letter-spacing:.02em;color:#767680}
.ddm ul{list-style:none;margin:0;padding:0}
.ddm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
@media(max-width:1100px){.ddm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the links: specific enough to win over each page's own .nav a rules */
.nav .ddm a{display:flex;position:static;padding:0;font-size:inherit;letter-spacing:normal;white-space:normal;border-radius:14px;background:none;color:#0B0B0C;transition:background .2s}
.nav .ddm a::after{display:none}
.nav .ddm .ddm-i{align-items:center;gap:12px;padding:10px 12px}
.nav .ddm .ddm-i:hover,.nav .ddm .ddm-i[aria-current]{background:rgba(255,255,255,.55)}
/* the generated 3D icon sits on its own mint, so the tile is just a rounded crop */
.ddm-ic{flex:none;display:block;width:40px;height:40px;border-radius:12px;object-fit:cover;background:#EEF6F2;
  box-shadow:inset 0 0 0 1px rgba(35,122,102,.08);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav .ddm .ddm-i:hover .ddm-ic{transform:scale(1.08)}
.ddm-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ddm-t b,.ddm-g b{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.ddm-t span,.ddm-g span{font-size:13px;line-height:1.35;color:#5F6763}

.ddm-side{display:flex;flex-direction:column;border-radius:18px;background:rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.35);padding-bottom:8px}
.ddm-groups{display:grid;gap:2px;padding:0 6px}
.nav .ddm .ddm-g{flex-direction:column;gap:2px;padding:10px}
.nav .ddm .ddm-g:hover{background:rgba(255,255,255,.6)}
.nav .ddm .ddm-all{align-items:center;gap:6px;margin:auto 16px 6px;padding:10px 0 0;border-top:1px solid rgba(11,42,32,.10);border-radius:0;
  font-size:14px;font-weight:500;color:#0B0B0C}
.nav .ddm .ddm-all svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.nav .ddm .ddm-all:hover{background:none}
.nav .ddm .ddm-all:hover svg{transform:translateX(3px)}

@media(prefers-reduced-motion:reduce){.ddm,.nav-dd-c{transition:none}}


/* Two menus with the same wide panel: Services (every service) and Industries (the twelve pages). */
.ddm-in{grid-template-columns:minmax(0,1fr)!important}
.nav-svc .ddm-all{margin:2px 12px 6px;padding-top:10px}
button.nav-dd-t{-webkit-appearance:none;appearance:none;border:0;background:none;cursor:default}
/* the section you are in is underlined, as on hover */
.nav-dd-t[aria-current]::after,.nav>a[aria-current]::after{transform:scaleX(1)!important}

/* The panel slides in without fading. Any opacity on the glass or above it (even mid-fade) stops the
   browser from blurring what is behind it, which made the panel read as flat and see-through. */
.ddm{opacity:1;transform:translateX(-50%);transition:visibility 0s linear .2s}
.nav-dd:hover .ddm,.nav-dd:focus-within .ddm{transform:translateX(-50%);transition-delay:0s}
.nav-dd.shut .ddm{opacity:1;transform:translateX(-50%);visibility:hidden}
.ddm-in{transform:translateY(6px);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav-dd:hover .ddm-in,.nav-dd:focus-within .ddm-in{transform:none}
@media(prefers-reduced-motion:reduce){.ddm-in{transition:none}}

/* Services: one column per group, the group's name on top */
.ddm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.ddm-col ul{display:grid;gap:2px}
.nav .ddm .ddm-h-link{display:block;padding:10px 12px 6px;font-size:12.5px;font-weight:500;letter-spacing:.02em;color:#767680;border-radius:0}
.nav .ddm .ddm-h-link:hover{background:none;color:#0B0B0C}
@media(max-width:1100px){.ddm-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ---------------- Get Started: a short onboarding, one question at a time ----------------
   A glass card like the booking panel. Built by industry-menu.js on first open. */
.gs{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:16px;font-family:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif}
.gs[hidden]{display:none}
.gs-scrim{position:absolute;inset:0;background:rgba(9,9,11,.30);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .35s ease}
.gs.on .gs-scrim{opacity:1}
.gs-panel{position:relative;width:min(600px,100%);max-height:92vh;overflow:auto;padding:clamp(28px,3.4vw,52px) clamp(22px,3.4vw,52px) clamp(22px,2.6vw,36px);
  border-radius:clamp(24px,2.2vw,32px);color:#0B0B0C;border:1px solid rgba(255,255,255,.7);
  background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.85),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.7));
  -webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),0 0 0 1px rgba(11,15,13,.06),0 40px 90px -40px rgba(0,0,0,.45);
  transform:translateY(14px) scale(.985);transition:transform .45s cubic-bezier(.16,1,.3,1),width .45s cubic-bezier(.16,1,.3,1)}
.gs.on .gs-panel{transform:none}
.gs-panel.gs-unlocked{width:min(680px,100%)}
.gs-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:999px;border:0;display:grid;place-items:center;cursor:pointer;
  color:#5C5C63;background:rgba(0,0,0,.05);transition:background .25s,color .25s;z-index:2}
.gs-x:hover{background:rgba(0,0,0,.1);color:#0B0B0C}
.gs-x svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.gs-prog{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;border-radius:999px 999px 0 0}
.gs-prog i{position:absolute;inset:0;background:#0B0B0C;opacity:.75;transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.16,1,.3,1)}

.gs-stage{min-height:200px;opacity:0;transform:translateX(18px)}
.gs-stage.from-left{transform:translateX(-18px)}
.gs-stage.in{opacity:1;transform:none;transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.gs-count{font-size:13px;letter-spacing:.02em;color:#8A8A93}
.gs-q{display:block;margin-top:10px;font-size:clamp(26px,2.6vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.1;max-width:20ch}
.gs-in{display:block;width:100%;margin-top:clamp(20px,2.2vw,30px);border:0;border-bottom:1.5px solid rgba(11,11,12,.16);border-radius:0;background:none;
  padding:10px 0 12px;font:inherit;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.01em;color:#0B0B0C;outline:none;transition:border-color .3s}
.gs-in::placeholder{color:rgba(11,11,12,.3)}
.gs-in:focus{border-bottom-color:#0B0B0C}
/* the darker underline is the focus cue here, so no outline box around the field */
.gs-in:focus,.gs-in:focus-visible{outline:none;box-shadow:none}
textarea.gs-in{resize:none;line-height:1.45}
.gs-hint{margin-top:12px;font-size:14.5px;line-height:1.5;color:#6B6B73}
.gs-chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.gs-chip{border:0;cursor:pointer;font:inherit;font-size:14px;padding:8px 13px;border-radius:999px;color:#0B0B0C;background:rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(11,15,13,.1);transition:background .2s,box-shadow .2s}
.gs-chip:hover{background:#fff;box-shadow:0 0 0 1px rgba(11,15,13,.22)}
.gs-chip.on{background:#0B0B0C;color:#fff;box-shadow:none}
.gs-err{margin-top:12px;font-size:14px;color:#C42D1F}
.gs-err[hidden]{display:none}
.gs-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(24px,2.6vw,36px)}
.gs-back{border:0;background:none;cursor:pointer;font:inherit;font-size:15px;color:#6B6B73;padding:8px 2px;transition:color .2s}
.gs-back:hover{color:#0B0B0C}
.gs-back[hidden]{visibility:hidden;display:block}
.gs-next{margin-left:auto;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:16px;font-weight:500;
  padding:14px 22px;letter-spacing:-.01em}
.gs-next svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.gs-next:hover svg{transform:translateX(3px)}

/* the unlock: quiet, not a fanfare. A pill with a soft glow, then the two gifts settle in one after the other. */
.gs-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.02em;color:#3A3A42;padding:6px 12px 6px 10px;border-radius:999px;
  background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(11,15,13,.08)}
.gs-pill span{width:8px;height:8px;border-radius:50%;background:#2FA57E;box-shadow:0 0 0 0 rgba(47,165,126,.5);animation:gs-glow 2.4s ease-out infinite}
@keyframes gs-glow{0%{box-shadow:0 0 0 0 rgba(47,165,126,.45)}80%,100%{box-shadow:0 0 0 9px rgba(47,165,126,0)}}
.gs-unlocked .gs-q{margin-top:16px}
.gs-gifts{margin-top:clamp(18px,2vw,26px);display:grid;gap:10px}
.gs-gift{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) 26px;align-items:center;gap:16px;padding:12px 16px 12px 12px;border-radius:18px;cursor:pointer;
  background:rgba(255,255,255,.72);box-shadow:0 0 0 1px rgba(11,15,13,.08);opacity:0;transform:translateY(8px);
  animation:gs-in .7s calc(.25s + var(--n) * .14s) cubic-bezier(.16,1,.3,1) forwards;transition:box-shadow .25s,background .25s}
@keyframes gs-in{to{opacity:1;transform:none}}
.gs-gift:hover{background:#fff}
.gs-gift input{position:absolute;opacity:0;pointer-events:none}
.gs-gift-img{width:72px;height:72px;border-radius:13px;overflow:hidden;background:#E9ECEA}
.gs-gift-img img{display:block;width:100%;height:100%;object-fit:cover}
.gs-gift-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.gs-gift-t b{font-size:17px;font-weight:500;letter-spacing:-.015em}
.gs-gift-t span{font-size:14px;line-height:1.4;color:#6B6B73}
.gs-check{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(11,15,13,.2);transition:background .25s,box-shadow .25s}
.gs-check svg{width:15px;height:15px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.gs-gift:has(input:checked){box-shadow:0 0 0 1.5px #0B0B0C;background:#fff}
.gs-gift:has(input:checked) .gs-check{background:#0B0B0C;box-shadow:none}
.gs-gift:has(input:checked) .gs-check svg{opacity:1;transform:none}
.gs-gift:has(input:focus-visible){outline:2px solid #0B0B0C;outline-offset:3px}
@media(max-width:480px){.gs-gift{grid-template-columns:56px minmax(0,1fr) 24px;gap:12px}.gs-gift-img{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){.gs-scrim,.gs-panel,.gs-stage.in,.gs-prog i{transition:none}.gs-gift{animation:none;opacity:1;transform:none}.gs-pill span{animation:none}}

/* ---------------- Sign in: the same glass, a narrower card ---------------- */
.si-panel{width:min(460px,100%)}
.si-h{margin-top:0}
.si-form{display:grid;margin-top:clamp(14px,1.6vw,22px)}
.si-l{display:block;margin-top:16px;font-size:13.5px;color:#6B6B73}
.si .gs-in{margin-top:4px;font-size:18px}
.si-row{display:flex;justify-content:space-between;align-items:baseline}
.si-wrap{position:relative;display:block}
.si-wrap .gs-in{padding-right:56px}
.si-link{border:0;background:none;cursor:pointer;font:inherit;font-size:13.5px;color:#3A3A42;padding:4px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(11,11,12,.25)}
.si-link:hover{color:#0B0B0C;text-decoration-color:#0B0B0C}
.si-show{position:absolute;right:0;bottom:12px;text-decoration:none;color:#6B6B73}
.si-pw[hidden],.si-back[hidden]{display:none}
.si-note.ok{color:#3A3A42}
.si-go{justify-content:center;margin:24px 0 0;width:100%;padding:15px 22px}
.si-back{justify-self:center;margin-top:12px}
.si-help{margin-top:18px;text-align:center;font-size:13.5px;color:#6B6B73}
.si-help a{color:#0B0B0C;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(11,11,12,.25)}
