/* Two heading levels per block, one look. The sheet that the homepage opens as an overlay keeps its
   title as an <h2> (the host page owns the <h1>) with h3 sections and h4 steps; the standalone
   /diensten and /en/services pages promote that title to <h1> and shift everything under it up one,
   so the same section heading is an h3 in the overlay and an h2 on the page. The type is named by
   both levels rather than by the tag the sheet happens to use, so the two contexts cannot drift.
   See _src/build-service-pages.py: shift_headings. */
/* ============================ SERVICE DETAIL SHEETS ============================
   The Stripe pattern in World 1 material: a service card expands into a large,
   scrollable editorial page above the homepage. Measured against stripe.com/nl:
   their sheet keeps 128px side and 90px top clearance at 1440 with a 16px radius,
   the page behind stays faintly readable, Escape closes and focus returns to the
   card. Two deliberate departures: our close control stays visible while the
   sheet scrolls (theirs scrolls away), and mobile is a true 100dvh surface.
   Warm white, ink, one orange accent. No purple, no glow.
   =============================================================================== */

/* ---- the expand control: a quiet glass tile with four corner brackets.
   It wakes once when it first enters view (JS adds .is-woken, staggered), then
   stays still. Open is brackets; close is the X: two different objects. ---- */
.svc-open{position:relative;display:flex;text-decoration:none;box-sizing:border-box;align-items:center;justify-content:center;
  width:46px;height:46px;margin:-6px -6px 0 0;padding:0;cursor:pointer;
  border:1px solid rgba(60,90,140,.20);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(244,248,253,.72));
  color:#1C2434;box-shadow:0 2px 8px rgba(10,16,30,.06);
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .15s ease}
.svc-open .so-glyph{width:19px;height:19px}
.svc-open .so-c{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.svc-open:hover,.svc-open:focus-visible{background:linear-gradient(180deg,#fff,rgba(238,245,252,.9));
  border-color:rgba(60,110,190,.38);box-shadow:0 4px 12px rgba(10,16,30,.10)}
.svc-open:hover .so-c1,.svc-open:focus-visible .so-c1{transform:translate(-1px,-1px)}
.svc-open:hover .so-c2,.svc-open:focus-visible .so-c2{transform:translate(1px,-1px)}
.svc-open:hover .so-c3,.svc-open:focus-visible .so-c3{transform:translate(1px,1px)}
.svc-open:hover .so-c4,.svc-open:focus-visible .so-c4{transform:translate(-1px,1px)}
.svc-open:active{transform:scale(.97)}
.svc-open:focus-visible{outline:2px solid var(--fx-ink,#1E7BE6);outline-offset:3px}
/* the warm point of light at the centre; visible only during the wake moment */
.so-spark{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--gl-signal,#ed4609);box-shadow:0 0 8px rgba(237,70,9,.7);opacity:0;pointer-events:none}
/* one-time activation: settle in, spark, a ring of azure light through the border, brackets breathe outward */
.svc-open.is-woken{animation:soWake 1s cubic-bezier(.22,.75,.22,1) both}
.svc-open.is-woken::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  animation:soRing 1s cubic-bezier(.22,.75,.22,1) both}
.svc-open.is-woken .so-spark{animation:soSpark 1s ease both}
.svc-open.is-woken .so-c1{animation:soC1 1s cubic-bezier(.22,.75,.22,1) both}
.svc-open.is-woken .so-c2{animation:soC2 1s cubic-bezier(.22,.75,.22,1) both}
.svc-open.is-woken .so-c3{animation:soC3 1s cubic-bezier(.22,.75,.22,1) both}
.svc-open.is-woken .so-c4{animation:soC4 1s cubic-bezier(.22,.75,.22,1) both}
@keyframes soWake{0%{opacity:.65;transform:scale(.94)}45%,100%{opacity:1;transform:scale(1)}}
@keyframes soRing{0%,18%{box-shadow:0 0 0 0 rgba(42,143,255,0)}45%{box-shadow:0 0 0 5px rgba(42,143,255,.30)}100%{box-shadow:0 0 0 8px rgba(42,143,255,0)}}
@keyframes soSpark{0%,12%{opacity:0}30%{opacity:1}68%,100%{opacity:0}}
@keyframes soC1{0%,25%{transform:none}55%{transform:translate(-1.5px,-1.5px)}100%{transform:none}}
@keyframes soC2{0%,25%{transform:none}55%{transform:translate(1.5px,-1.5px)}100%{transform:none}}
@keyframes soC3{0%,25%{transform:none}55%{transform:translate(1.5px,1.5px)}100%{transform:none}}
@keyframes soC4{0%,25%{transform:none}55%{transform:translate(-1.5px,1.5px)}100%{transform:none}}

[data-svcd-card]{cursor:pointer}
[data-svcd-card] a,[data-svcd-card] button{cursor:pointer}

/* ---- scrim: the homepage stays present, softly lit down ---- */
.svcd-scrim{position:absolute;inset:0;z-index:0;background:rgba(24,30,44,.38);
  -webkit-backdrop-filter:blur(7px) saturate(1.05);backdrop-filter:blur(7px) saturate(1.05);
  opacity:0;transition:opacity .42s cubic-bezier(.2,.7,.2,1)}
.svcd-root.is-open .svcd-scrim{opacity:1}

/* ---- the sheet ---- */
/* above the cookie bar (9000) and the concierge launcher (8500): while a service is
   open, the sheet owns the screen; both reappear the moment it closes */
.svcd-root{position:fixed;inset:0;z-index:9600;display:none}
.svcd-root.is-open,.svcd-root.is-closing{display:block}
.svcd-wrap{position:absolute;inset:0;z-index:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:clamp(20px,6vh,64px) clamp(12px,8.5vw,124px) clamp(20px,6vh,64px)}
.svcd-sheet{position:relative;max-width:1184px;margin:0 auto;background:#FDFCFA;border-radius:24px;
  box-shadow:0 40px 120px rgba(10,16,30,.35),0 0 0 1px rgba(255,255,255,.5) inset;
  transform-origin:top left;padding:clamp(28px,4.5vw,72px) clamp(22px,5vw,84px) clamp(36px,5vw,84px)}
.svcd-root.is-open .svcd-sheet{animation:svcdIn .56s cubic-bezier(.22,.75,.22,1) both}
.svcd-root.is-closing .svcd-sheet{animation:svcdOut .34s cubic-bezier(.5,0,.75,.4) both}
@keyframes svcdIn{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}
@keyframes svcdOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(18px) scale(.975)}}

/* ---- close: sticky, always reachable ---- */
.svcd-close{position:sticky;top:0;float:right;z-index:5;width:44px;height:44px;margin:-8px -18px 0 0;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(30,60,110,.14);border-radius:14px;
  background:rgba(253,252,250,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#1C2434;cursor:pointer;box-shadow:0 4px 14px rgba(10,16,30,.10);
  transition:background .2s ease,transform .15s ease}
.svcd-close svg{width:16px;height:16px}
.svcd-close:hover{background:#fff}
.svcd-close:active{transform:scale(.95)}

/* ---- content ---- */
.svcd-hero{max-width:660px}
.svcd-eyebrow{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:550;letter-spacing:.14em;
  text-transform:uppercase;color:#6B7484}
.svcd-h{margin:18px 0 0;font-size:clamp(30px,4.6vw,52px);line-height:1.06;letter-spacing:-.035em;font-weight:420;color:#181C26}
.svcd-lead{margin:18px 0 0;font-size:17.5px;line-height:1.6;color:#535B6B;max-width:560px}
.svcd-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:28px}
.svcd-art{margin:clamp(28px,4vw,52px) 0 0;border-radius:18px;overflow:hidden}
.svcd-art img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.svcd-block{margin-top:clamp(34px,4.5vw,58px)}
.svcd-label{font-size:12.5px;font-weight:550;letter-spacing:.14em;text-transform:uppercase;color:#6B7484;
  padding-bottom:14px;border-bottom:1px solid rgba(24,32,48,.10)}
.svcd-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.svcd-list li{position:relative;padding:15px 0 15px 26px;font-size:15.5px;color:#2A3040;border-bottom:1px solid rgba(24,32,48,.07)}
.svcd-list li::before{content:"";position:absolute;left:2px;top:23px;width:7px;height:7px;border-radius:50%;
  background:var(--gl-signal,#ed4609);opacity:.85}
.svcd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:22px}
.svcd-step{display:flex;gap:14px}
.svcd-step>span{font-size:13px;font-weight:600;color:var(--gl-signal,#ed4609);padding-top:3px}
.svcd-step h4{margin:0;font-size:16.5px;font-weight:550;letter-spacing:-.01em;color:#181C26}
.svcd-step p{margin:7px 0 0;font-size:14.5px;line-height:1.55;color:#5B6478}
.svcd-tags .tags{margin-top:18px}
.svcd-end{margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3.5vw,44px);border-top:1px solid rgba(24,32,48,.10)}
.svcd-end h3,.svcd-end h2{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:440;letter-spacing:-.025em;color:#181C26}
.svcd-end p{margin:10px 0 0;font-size:15.5px;color:#5B6478}

/* ---- desktop-only hover cue on the whole card ---- */
@media (hover:hover){
  [data-svcd-card]:hover .svc-num{color:var(--gl-signal,#ed4609)}
}

/* ---- tablet and phone ---- */
@media (max-width:700px){
  .svcd-wrap{padding:0}
  .svcd-sheet{min-height:100dvh;border-radius:0;max-width:none;
    padding:calc(18px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom))}
  .svcd-close{margin:0 -4px 0 0;top:calc(6px + env(safe-area-inset-top))}
  .svcd-list{grid-template-columns:1fr}
  .svcd-steps{grid-template-columns:1fr;gap:20px}
  .svcd-cta .btn{width:100%;justify-content:center}
  .svcd-h{font-size:clamp(28px,8vw,38px)}
}

/* ---- reduced motion: state changes, no travel ---- */
@media (prefers-reduced-motion:reduce){
  .svcd-scrim{transition:none}
  .svc-open.is-woken,.svc-open.is-woken::after,.svc-open.is-woken .so-spark,.svc-open.is-woken .so-c{animation:none}
  .svcd-root.is-open .svcd-sheet,.svcd-root.is-closing .svcd-sheet{animation:none}
  .svc-open svg{transition:none}
}

/* ================= WEBDESIGN MASTER SHEET (template for the other four) =================
   An editorial mini-case: the hero carries its own layered-planes composition
   (code-native, calmer than the film), then three Higgsfield motion stages
   play in sequence on one orange baseline. Text always lives outside the
   video, so it stays sharp at every size. */
.wdh-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.wdm-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 40px}
.wdm-h{margin:0;font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.03em;line-height:1.12}
.wdm-rail{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto auto auto;column-gap:22px;row-gap:0;margin-top:26px;position:relative;align-items:start}
.wdm-stage{min-width:0;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
.wdm-fig{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#F4EFE6;
  box-shadow:0 14px 30px -18px rgba(30,50,90,.35),inset 0 0 0 1px rgba(190,200,220,.4)}
.wdm-fig video,.wdm-fig .wdm-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.wdm-fig .wdm-still{display:none}
.wdm-stage.is-done .wdm-fig::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(237,122,61,.55)}
.wdm-txt{display:contents}
.wdm-txt .wdm-tag{position:relative;display:block;margin:16px 4px 6px;font-size:11px;line-height:15px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#5B6478;white-space:nowrap}
.wdm-tag i{position:absolute;left:-14px;top:4.5px;width:6px;height:6px;border-radius:50%;background:#D8DEE9;transition:background .3s,box-shadow .3s}
.wdm-stage.is-active .wdm-tag i{background:#ED7A3D;box-shadow:0 0 8px rgba(237,122,61,.6)}
.wdm-txt h4,.wdm-txt h3{margin:0 4px 6px;font-size:17px;line-height:1.35;font-weight:550;letter-spacing:-.02em;align-self:start}
.wdm-txt h4+p,.wdm-txt h3+p{margin:0 4px 0;font-size:14px;line-height:1.55;color:#5B6478;align-self:start}
.wdm-dots{display:none}

/* the case fragment and the proof rows: quiet, factual, no invented numbers */
.wd-case-row{display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:24px;align-items:center;text-decoration:none;color:var(--ink)}
.wd-case-row img{width:100%;height:auto;border-radius:12px;display:block}
.wd-case-txt{display:flex;flex-direction:column;gap:6px}
.wd-case-txt strong{font-size:18px;font-weight:550;letter-spacing:-.02em}
.wd-case-txt span{font-size:14.5px;line-height:1.55;color:#5B6478}
.wd-case-txt .tcta{margin-top:4px;font-style:normal}
.wd-proof-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.wd-proof-list strong{display:block;font-size:15px;font-weight:550;letter-spacing:-.015em;margin-bottom:5px}
.wd-proof-list span{font-size:13.5px;line-height:1.55;color:#5B6478}

@media (max-width:900px){
  /* one stage per viewport width: a snap rail with three tactile marks */
  .wdm-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:6px;
    scrollbar-width:none;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .wdm-rail::-webkit-scrollbar{display:none}
  .wdm-rail::after{display:none}
  .wdm-stage{flex:0 0 88%;scroll-snap-align:center;display:block}   /* the snap rail is a flex row, so the stage stacks normally */
  .wdm-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .wdm-dots i{width:6px;height:6px;border-radius:50%;background:#D8DEE9;transition:background .3s,transform .3s}
  .wdm-dots i.on{background:#ED7A3D;transform:scale(1.25)}
  .wd-case-row{grid-template-columns:1fr}
  .wd-proof-list{grid-template-columns:1fr;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .wd-route path{animation:none;stroke-dashoffset:0}
  /* the strongest final frame instead of autoplay */
  .wdm-fig video{display:none}
  .wdm-fig .wdm-still{display:block}
  .wdm-stage .wdm-tag i{background:#ED7A3D}
}

/* built to keep working: quiet, generous, no divider collision */
.wd-proof{border-top:1px solid var(--line);padding-top:36px;margin-bottom:64px}
.wd-proof-intro{max-width:560px;margin-bottom:34px}
.wd-proof-intro h3,.wd-proof-intro h2{margin:0 0 8px;font-size:clamp(22px,2.6vw,30px);font-weight:400;letter-spacing:-.028em}
.wd-proof-intro p{margin:0;font-size:15.5px;line-height:1.55;color:#5B6478}
.wd-proof-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.wd-proof-list li{display:flex;gap:14px}
.wd-pf-mark{flex:none;width:10px;height:10px;margin-top:6px;border-radius:3px;background:linear-gradient(135deg,#FFB27A 0,#ED7A3D 100%)}
.wd-proof-list strong{display:block;font-size:16px;font-weight:550;letter-spacing:-.015em;margin-bottom:16px}
.wd-proof-list p{margin:0;font-size:14px;line-height:1.6;color:#5B6478;max-width:34ch}

/* what you get: one compact capability field */
.wd-get-field{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.wd-get-field li{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;font-size:14px;letter-spacing:-.01em;
  background:rgba(173,197,240,.16);box-shadow:inset 0 0 0 1px rgba(150,175,225,.4)}
.wd-get-field li::before{content:"";width:5px;height:5px;border-radius:50%;background:#ED7A3D}

/* closing statement: a warm contained field, the route terminating at the CTA */
.wd-end{position:relative;margin-top:14px;padding:44px 48px 42px;border-radius:22px;background:linear-gradient(180deg,#F7F3EA,#F3EDE1);
  box-shadow:inset 0 0 0 1px rgba(200,190,165,.45);overflow:hidden}
.wd-end h3,.wd-end h2{position:relative}

@media (max-width:900px){
  .wd-feat-foot{flex-direction:column;align-items:flex-start}
  .wd-feat-cta{width:100%;flex-wrap:wrap;gap:14px 22px}
  .wd-live-btn{width:100%;justify-content:center}
  /* preview = echt volledig scherm */
  .wd-prev{position:fixed;inset:0;z-index:60}
  .wd-prev-panel{width:100%;height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top)}
  .wd-prev-bar{border-radius:0}
  .wd-prev-tools .wd-prev-vp{display:none}
  .wd-prev-body{padding-bottom:env(safe-area-inset-bottom)}
  .wd-proof{padding-top:32px;margin-bottom:56px}
  .wd-proof-list{grid-template-columns:1fr;gap:30px}
  .wd-end{padding:32px 22px 30px}
}
@media (prefers-reduced-motion:reduce){
  .wd-feat[data-armed] .wd-feat-stage{clip-path:none;transition:none}
  .wd-feat.in-view .wd-live-dot{animation:none}
  .wd-prev-panel,.wd-prev-scrim,.svcd-sheet.wd-receded{transition:none}
}

/* ================= WEBDESIGN SHEET, third edition: a services page =================
   Scoped to .wd-sheet, the wrapper the webdesign template carries; the four other
   sheets keep their rules. The subject is the studio's own web design, shown on a
   fictional label ("Lente") built in code: real type, a real navigation and a real
   mobile layout, so nothing is ever a cropped screenshot and nothing is a client.
   Sections separate by whitespace; one deliberate hairline sits above "Built to
   keep working". No pills, no cards except the closing invitation. */
.wd-sheet .svcd-label{border-bottom:0;padding-bottom:0}
.wd-sheet .svcd-block{margin-top:clamp(44px,5.5vw,76px)}
.wd-sheet .wdm-stage.is-done .wdm-fig::after{display:none}
.wd-sheet .svcd-end{border-top:0;padding-top:0}
.wd-sheet .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- opening: two columns sharing the width; the headline gets room to break naturally ---- */
.wd-hero2{display:grid;grid-template-columns:minmax(300px,.46fr) minmax(0,.54fr);gap:28px 56px;align-items:center;max-width:none}
.wd-hero2 .svcd-h{font-size:clamp(30px,2.8vw,40px);max-width:16ch;text-wrap:balance}
.wd-hero2 .svcd-lead{max-width:46ch}
.wd-hero2 .svcd-eyebrow{gap:0}

/* ---- the example site: type set in container units so it scales with its frame ---- */
.wdx{position:relative;margin:0;padding:0 9% 13% 0}
.wdx-desk{position:relative;border-radius:12px;overflow:hidden;background:#fff;container-type:inline-size;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(150,165,190,.42),0 24px 50px -28px rgba(30,50,90,.42)}
.wdx-bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 10px;background:#F4F2EE;border-bottom:1px solid rgba(150,165,190,.3)}
.wdx-bar i{width:6px;height:6px;border-radius:50%;background:#D9D4CA}
.wdx-site{aspect-ratio:16/11;overflow:hidden;padding:4.6cqw 5.2cqw 4.8cqw;display:flex;flex-direction:column;font-family:var(--font);color:#181C26}
.wdx-nav{display:flex;align-items:center;justify-content:space-between;font-size:2.15cqw;letter-spacing:.01em}
.wdx-wm{font-weight:650;letter-spacing:.2em;text-transform:uppercase;font-size:2.5cqw}
.wdx-links{display:flex;gap:3.4cqw;color:#5B6478}
.wdx-bag{color:#5B6478}
.wdx-hero{flex:1;min-height:0;display:grid;grid-template-columns:1.05fr .95fr;gap:6cqw;align-items:stretch;margin-top:4.6cqw}
.wdx-copy{align-self:center}
.wdx-h{margin:0;font-size:6.6cqw;line-height:1;letter-spacing:-.035em;font-weight:480;text-wrap:balance}
.wdx-sub{margin:2.2cqw 0 0;font-size:2.35cqw;line-height:1.45;color:#5B6478}
.wdx-cta{display:inline-block;margin-top:3.6cqw;padding:1.7cqw 3.4cqw;border-radius:999px;background:#1C2434;color:#fff;font-size:2.1cqw;font-weight:500;
  transition:transform .25s var(--ease),background .25s var(--ease)}
.wdx:hover .wdx-cta{background:var(--fx-ink,#1E7BE6);transform:translateY(-1px)}
.wdx-img{display:block;height:100%;min-height:0;border-radius:1.6cqw;overflow:hidden;background:#EEEBE5}
.wdx-img img,.wdx-mimg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* the phone: the same design in its true mobile order */
.wdx-phone{position:absolute;right:0;bottom:0;width:24%;border-radius:14px;overflow:hidden;background:#fff;container-type:inline-size;
  box-shadow:0 0 0 3px #FDFCFA,0 0 0 4px rgba(150,165,190,.5),0 18px 40px -18px rgba(30,50,90,.5)}
.wdx-msite{aspect-ratio:393/760;padding:7cqw 7cqw 8cqw;display:flex;flex-direction:column;font-family:var(--font);color:#181C26}
.wdx-mnav{display:flex;align-items:center;justify-content:space-between}
.wdx-msite .wdx-wm{font-size:7.2cqw}
.wdx-burger{display:flex;flex-direction:column;gap:2.4cqw;width:11cqw}
.wdx-burger i{height:1.4cqw;background:#181C26;border-radius:1cqw}
.wdx-mimg{display:block;aspect-ratio:4/4.3;border-radius:4cqw;overflow:hidden;background:#EEEBE5;margin-top:7cqw}
.wdx-mh{margin:7cqw 0 0;font-size:12.5cqw;line-height:1;letter-spacing:-.035em;font-weight:480}
.wdx-msub{margin:3.4cqw 0 0;font-size:5.4cqw;line-height:1.4;color:#5B6478}
.wdx-mcta{display:block;margin-top:auto;padding:5cqw 0;border-radius:999px;background:#1C2434;color:#fff;font-size:5.2cqw;font-weight:500;text-align:center}
/* ---- motion that works: the design comes to life once, when the sheet opens.
   Structure first (frame and blocks), then the type, then the image, then the
   phone. Reduced motion shows the finished state. ---- */
.svcd-root.is-open .wdx-desk,.svcd-page .wdx-desk{animation:wdxFrame .6s cubic-bezier(.16,1,.3,1) .1s both}
.svcd-root.is-open .wdx-nav,.svcd-root.is-open .wdx-copy,.svcd-page .wdx-nav,.svcd-page .wdx-copy{animation:wdxType .55s cubic-bezier(.16,1,.3,1) .55s both}
.svcd-root.is-open .wdx-img img,.svcd-page .wdx-img img{animation:wdxImage .8s ease .95s both}
.svcd-root.is-open .wdx-phone,.svcd-page .wdx-phone{animation:wdxPhone .6s cubic-bezier(.16,1,.3,1) 1.35s both}
@keyframes wdxFrame{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wdxType{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wdxImage{from{opacity:0}to{opacity:1}}
@keyframes wdxPhone{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- process band ---- */
.wd-sheet .wdm-head{align-items:flex-end}
.wd-sheet .wdm-h{max-width:14ch}
.wd-sheet .wdm-tag{color:#5B6478}
.wd-sheet .wdm-fig .wdm-still{display:block}
.wd-sheet .wdm-fig video{opacity:0;transition:opacity .35s ease}
.wd-sheet .wdm-stage.is-playing .wdm-fig video{opacity:1}

/* ---- what you get: a plain list, two columns, no pills ---- */
.wd-get-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 48px;max-width:760px}
.wd-get-list li{position:relative;padding-left:18px;font-size:15.5px;letter-spacing:-.01em;color:#2A3040}
.wd-get-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--gl-signal,#ed4609);opacity:.85}

/* ---- quality: one hairline, three columns aligned at the top ---- */
.wd-sheet .wd-proof{border-top:1px solid rgba(24,32,48,.10);padding-top:40px;margin-bottom:0}
.wd-sheet .wd-proof-list{align-items:start}
.wd-sheet .wd-proof-list strong{margin-bottom:8px}

/* ---- closing: the one contained element on the page ---- */
.wd-sheet .wd-end{margin-top:clamp(40px,5vw,64px);padding:40px 44px 38px}
.wd-sheet .wd-end h3,.wd-sheet .wd-end h2{position:static}

@media (max-width:900px){
  .wd-hero2{grid-template-columns:1fr;gap:24px}
  .wdx{padding:0 7% 11% 0;max-width:560px}
  .wdx-phone{width:27%}
}
@media (max-width:700px){
  .wd-sheet .svcd-block{margin-top:44px}
  /* the close control owns the first row on a phone: content starts under it */
  .wd-sheet{padding-top:52px}
  .wd-hero2 .svcd-h{max-width:none}
  .wdx{padding:0 0 15% 0;max-width:none}
  .wdx-phone{width:31%;right:3%}
  .wd-get-list{grid-template-columns:1fr;gap:10px}
  .wd-sheet .wd-end{padding:30px 22px 28px}
}
@media (prefers-reduced-motion:reduce){
  :is(.svcd-root.is-open,.svcd-page) :is(.wdx-desk,.wdx-nav,.wdx-copy,.wdx-img img,.wdx-phone){animation:none}
  .wdx-cta{transition:none}
  .wd-sheet .wdm-fig video{display:none}
}

/* ================= THE SERVICE TEMPLATE, shared by five services =================
   Everything the five sheets have in common lives above under .wd-sheet. Below:
   the standalone page that carries the same markup, the two sections every
   service now has (when this fits, practical questions), the related links,
   and four visuals built in code, each telling its own service. */
.svcd-page{padding:clamp(96px,12vh,140px) 0 clamp(48px,6vw,88px)}
.svcd-page-inner{max-width:1184px;margin:0 auto;padding:0 clamp(20px,5vw,84px)}
.svcd-page .svcd-hero{margin-top:0}
.svcd-page .svcd-h{font-size:clamp(34px,3.4vw,48px)}

/* when this fits: three plain lines, no card */
.wd-fit-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 40px}
.wd-fit-list li{position:relative;padding-left:18px;font-size:16px;line-height:1.5;letter-spacing:-.012em;color:#2A3040;max-width:30ch}
.wd-fit-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gl-signal,#ed4609);opacity:.85}

/* practical questions: native details, one hairline between items */
.wd-faq-list{margin-top:14px;max-width:760px}
.wd-faq{border-top:1px solid rgba(24,32,48,.10)}
.wd-faq:last-child{border-bottom:1px solid rgba(24,32,48,.10)}
.wd-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;
  font-size:17px;font-weight:500;letter-spacing:-.015em;color:#181C26}
.wd-faq summary::-webkit-details-marker{display:none}
.wd-faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:1.6px solid #5B6478;border-bottom:1.6px solid #5B6478;transform:rotate(45deg);margin-right:4px;
  transition:transform .25s var(--ease)}
.wd-faq[open] summary::after{transform:rotate(-135deg)}
.wd-faq summary:focus-visible{outline:2px solid var(--fx-ink,#1E7BE6);outline-offset:4px;border-radius:4px}
.wd-faq-a{padding:0 40px 20px 0}
.wd-faq-a p{margin:0;font-size:15.5px;line-height:1.6;color:#5B6478}
.wd-faq-link{margin-left:10px;font-size:14.5px}

/* related services: two quiet links */
.wd-related{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:clamp(28px,4vw,44px)}
.wd-related a{font-size:14.5px;letter-spacing:-.01em;color:#2A3040;text-decoration:none;border-bottom:1px solid rgba(24,32,48,.22);padding-bottom:2px;transition:color .25s var(--ease),border-color .25s var(--ease)}
.wd-related a:hover{color:var(--fx-ink,#1E7BE6);border-color:currentColor}
.wd-related a i{display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.4px solid currentColor;border-top:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px)}

/* the process band without clips: drawn illustrations that draw themselves in */
.wdm-ill{display:flex;align-items:center;justify-content:center;background:#F6F3EC}
.wdm-ill svg{width:100%;height:100%}
.wdm-ill .d{stroke-dasharray:240;stroke-dashoffset:240;fill-opacity:0}
.wd-proc.in-view .wdm-ill .d{animation:wdmDraw 1.1s cubic-bezier(.3,.7,.2,1) forwards,wdmFill .6s ease .9s forwards}
.wd-proc.in-view [data-wdm-stage="1"] .wdm-ill .d{animation-delay:.25s,1.15s}
.wd-proc.in-view [data-wdm-stage="2"] .wdm-ill .d{animation-delay:.5s,1.4s}
@keyframes wdmDraw{to{stroke-dashoffset:0}}
@keyframes wdmFill{to{fill-opacity:1}}

/* ---- e-commerce: a product page where a size is chosen and the bag slides in ---- */
.wsx{position:relative;margin:0;padding:0 0 13% 9%}
.wsx-desk{position:relative;border-radius:12px;overflow:hidden;background:#fff;container-type:inline-size;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(150,165,190,.42),0 24px 50px -28px rgba(30,50,90,.42)}
.wsx-site{position:relative;aspect-ratio:16/11;overflow:hidden;padding:4.6cqw 5.2cqw 4.8cqw;display:flex;flex-direction:column;font-family:var(--font);color:#181C26}
.wsx-bag{position:relative}.wsx-bag b{font-weight:400}.wsx-bag1{position:absolute;left:0;top:0;opacity:0}
.wsx-pdp{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:.8fr 1.2fr;gap:5cqw;align-items:stretch;margin-top:4.6cqw}
.wsx-img{display:block;height:100%;min-height:0;border-radius:1.6cqw;overflow:hidden;background:#EEEBE5}
.wsx-img img,.wsx-mimg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.wsx-buy{align-self:center}
.wsx-name{margin:0;font-size:4.6cqw;letter-spacing:-.03em;font-weight:480;line-height:1.05}
.wsx-price{margin:1.4cqw 0 0;font-size:2.6cqw;color:#5B6478}
.wsx-lab{margin:4cqw 0 1.4cqw;font-size:1.9cqw;letter-spacing:.12em;text-transform:uppercase;color:#5F6675}
.wsx-chips{display:flex;gap:1.6cqw}
.wsx-chips i{display:inline-flex;align-items:center;justify-content:center;min-width:6.4cqw;height:5.2cqw;padding:0 1.6cqw;border-radius:1cqw;font-style:normal;font-size:2.1cqw;
  box-shadow:inset 0 0 0 1px rgba(24,32,48,.22);transition:background .3s,color .3s,box-shadow .3s}
.wsx-chips i.on{background:#1C2434;color:#fff;box-shadow:inset 0 0 0 1px #1C2434}
.wsx-add{display:inline-block;margin-top:4cqw;padding:1.9cqw 4cqw;border-radius:999px;background:#1C2434;color:#fff;font-size:2.2cqw;font-weight:500;transition:transform .2s,background .3s}
.wsx-drawer{position:absolute;right:-1cqw;top:-1cqw;bottom:-1cqw;width:27%;padding:3.6cqw 3cqw;background:#fff;border-radius:1.6cqw;
  box-shadow:-2cqw 0 6cqw -2cqw rgba(30,40,60,.35),0 0 0 1px rgba(150,165,190,.35);transform:translateX(112%);opacity:0;display:flex;flex-direction:column}
.wsx-dt{margin:0;font-size:2.2cqw;font-weight:550;letter-spacing:-.02em}
.wsx-line{display:flex;align-items:center;gap:1.6cqw;margin-top:3cqw;font-size:1.9cqw;color:#2A3040;white-space:nowrap}
.wsx-line span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.wsx-line i{width:7cqw;height:8cqw;border-radius:1cqw;background:#EEEBE5;flex:none}
.wsx-line b{margin-left:auto;font-weight:500}
.wsx-co{display:block;margin-top:auto;padding:2cqw 0;border-radius:999px;background:#1C2434;color:#fff;font-size:2.1cqw;font-weight:500;text-align:center}
.wsx-phone{position:absolute;left:0;bottom:0;width:22%;border-radius:14px;overflow:hidden;background:#fff;container-type:inline-size;
  box-shadow:0 0 0 3px #FDFCFA,0 0 0 4px rgba(150,165,190,.5),0 18px 40px -18px rgba(30,50,90,.5)}
.wsx-msite{aspect-ratio:393/760;padding:7cqw 7cqw 8cqw;display:flex;flex-direction:column;font-family:var(--font);color:#181C26}
.wsx-msite .wdx-wm{font-size:7.2cqw}
.wsx-mimg{display:block;aspect-ratio:4/3.6;border-radius:4cqw;overflow:hidden;background:#EEEBE5;margin-top:7cqw}
.wsx-mname{margin:6cqw 0 0;font-size:9.5cqw;letter-spacing:-.03em;font-weight:480;line-height:1.05;display:flex;justify-content:space-between;align-items:baseline}
.wsx-mname b{font-size:5.4cqw;font-weight:400;color:#5B6478}
.wsx-msite .wsx-chips{margin-top:5cqw;gap:3cqw}
.wsx-msite .wsx-chips i{min-width:14cqw;height:11cqw;font-size:5cqw;border-radius:2.4cqw}
.wsx-madd{display:block;margin-top:auto;padding:5cqw 0;border-radius:999px;background:#1C2434;color:#fff;font-size:5.2cqw;font-weight:500;text-align:center}
/* the sequence: the frame, then the size is chosen, then the item goes into the bag */
:is(.svcd-root.is-open,.svcd-page) .wsx-desk{animation:wdxFrame .6s cubic-bezier(.16,1,.3,1) .1s both}
:is(.svcd-root.is-open,.svcd-page) .wsx-phone{animation:wdxPhone .6s cubic-bezier(.16,1,.3,1) .5s both}
:is(.svcd-root.is-open,.svcd-page) .wsx-desk .wsx-chips i.on{animation:wsxPick .5s ease 1.1s both}
:is(.svcd-root.is-open,.svcd-page) .wsx-add{animation:wsxPress .35s ease 1.7s both}
:is(.svcd-root.is-open,.svcd-page) .wsx-drawer{animation:wsxDrawer .7s cubic-bezier(.16,1,.3,1) 2s both}
:is(.svcd-root.is-open,.svcd-page) .wsx-bag0{animation:wsxOut .3s ease 2.1s both}
:is(.svcd-root.is-open,.svcd-page) .wsx-bag1{animation:wsxIn .3s ease 2.15s both}
@keyframes wsxPick{0%{background:transparent;color:#181C26;box-shadow:inset 0 0 0 1px rgba(24,32,48,.22)}60%{transform:scale(1.06)}100%{background:#1C2434;color:#fff;box-shadow:inset 0 0 0 1px #1C2434}}
@keyframes wsxPress{50%{transform:scale(.96);background:var(--fx-ink,#1E7BE6)}}
@keyframes wsxDrawer{from{transform:translateX(112%);opacity:0}to{transform:none;opacity:1}}
@keyframes wsxOut{to{opacity:0}}
@keyframes wsxIn{to{opacity:1}}

/* ---- apps: the same booking flow in an iOS and an Android layout ---- */
.wax{position:relative;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:end;padding:0 6% 0 2%}
.wax-ios,.wax-and{position:relative;aspect-ratio:393/800;border-radius:26px;overflow:hidden;background:#fff;container-type:inline-size;font-family:var(--font);color:#181C26;
  box-shadow:0 0 0 3px #FDFCFA,0 0 0 4px rgba(150,165,190,.5),0 22px 46px -22px rgba(30,50,90,.5)}
.wax-scr{position:absolute;inset:0;padding:9cqw 6cqw 6cqw;display:flex;flex-direction:column}
.wax-and{border-radius:16px;margin-bottom:10%}
.wax-status{display:flex;justify-content:space-between;align-items:center;height:4cqw}
.wax-status i{width:14cqw;height:1.4cqw;border-radius:1cqw;background:#181C26;opacity:.7}
.wax-status b{width:9cqw;height:1.8cqw;border-radius:1cqw;background:#181C26;opacity:.4}
.wax-status-a i{width:9cqw}
.wax-title{margin:9cqw 0 0;font-size:11cqw;font-weight:600;letter-spacing:-.03em;line-height:1}
.wax-seg{display:flex;margin-top:6cqw;padding:1cqw;border-radius:3cqw;background:#F1F1F4;font-size:4.2cqw}
.wax-seg span{flex:1;text-align:center;padding:2.2cqw 0;border-radius:2.4cqw;color:#5B6478}
.wax-seg span.on{background:#fff;color:#181C26;box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:500}
.wax-list{display:flex;flex-direction:column;margin-top:6cqw;font-size:5cqw}
.wax-list span{padding:4.4cqw 3cqw;border-bottom:1px solid rgba(24,32,48,.08);border-radius:2cqw;transition:background .3s,color .3s}
.wax-list span.on{background:#1C2434;color:#fff;border-color:transparent}
.wax-btn{display:block;margin-top:auto;padding:4.6cqw 0;border-radius:999px;background:var(--fx-ink,#3157E5);color:#fff;font-size:5cqw;font-weight:600;text-align:center;opacity:.35}
.wax-sheet{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;padding:6cqw 6cqw 5cqw;border-radius:6cqw;background:#fff;box-shadow:0 -4cqw 12cqw -4cqw rgba(30,40,60,.4),0 0 0 1px rgba(150,165,190,.35);
  transform:translateY(130%);opacity:0}
.wax-sheet i{display:block;width:12cqw;height:12cqw;border-radius:50%;margin:0 auto 4cqw;background:#1C2434;position:relative}
.wax-sheet i::after{content:"";position:absolute;left:3.6cqw;top:3.2cqw;width:4.4cqw;height:2.4cqw;border-left:1.4cqw solid #fff;border-bottom:1.4cqw solid #fff;transform:rotate(-45deg)}
.wax-sheet p{margin:0;text-align:center;font-size:5.4cqw;font-weight:600;letter-spacing:-.02em}
.wax-sheet span{display:block;margin-top:1.6cqw;text-align:center;font-size:4cqw;color:#5B6478}
.wax-appbar{display:flex;align-items:center;gap:4cqw;margin-top:6cqw}
.wax-appbar i{width:5cqw;height:5cqw;border-left:1.6cqw solid #181C26;border-bottom:1.6cqw solid #181C26;transform:rotate(45deg) scale(.7)}
.wax-appbar p{margin:0;font-size:6.4cqw;font-weight:500}
.wax-mlist{display:flex;flex-direction:column;margin-top:6cqw;font-size:5cqw}
.wax-mlist span{display:flex;align-items:center;gap:4cqw;padding:4.2cqw 2cqw;border-radius:2cqw;transition:background .3s}
.wax-mlist span i{width:5cqw;height:5cqw;border-radius:50%;border:1.6cqw solid #5F6675;box-sizing:border-box;flex:none;transition:border .3s}
.wax-mlist span.on{background:rgba(30,123,230,.10)}
.wax-mlist span.on i{border:1.6cqw solid var(--fx-ink,#1E7BE6);box-shadow:inset 0 0 0 1.2cqw #fff;background:var(--fx-ink,#1E7BE6)}
.wax-fab{display:block;margin:auto 0 0 auto;padding:4cqw 6cqw;border-radius:4cqw;background:var(--fx-ink,#3157E5);color:#fff;font-size:4.8cqw;font-weight:600;box-shadow:0 3cqw 6cqw -2cqw rgba(30,123,230,.6)}
:is(.svcd-root.is-open,.svcd-page) .wax-ios{animation:wdxFrame .6s cubic-bezier(.16,1,.3,1) .1s both}
:is(.svcd-root.is-open,.svcd-page) .wax-and{animation:wdxFrame .6s cubic-bezier(.16,1,.3,1) .35s both}
:is(.svcd-root.is-open,.svcd-page) .wax-list span.on{animation:waxPick .5s ease 1.2s both}
:is(.svcd-root.is-open,.svcd-page) .wax-mlist span.on{animation:waxPickA .5s ease 1.4s both}
:is(.svcd-root.is-open,.svcd-page) .wax-btn{animation:waxArm .4s ease 1.7s both}
:is(.svcd-root.is-open,.svcd-page) .wax-sheet{animation:waxSheet .7s cubic-bezier(.16,1,.3,1) 2.3s both}
@keyframes waxPick{from{background:transparent;color:#181C26}to{background:#1C2434;color:#fff}}
@keyframes waxPickA{from{background:transparent}to{background:rgba(30,123,230,.10)}}
@keyframes waxArm{to{opacity:1}}
@keyframes waxSheet{from{transform:translateY(130%);opacity:0}to{transform:none;opacity:1}}

/* ---- digital strategy: a working document where insights become a prioritised route ---- */
.wtx{position:relative;margin:0}
.wtx-doc{border-radius:12px;background:#fff;container-type:inline-size;font-family:var(--font);color:#181C26;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(150,165,190,.42),0 24px 50px -28px rgba(30,50,90,.42)}
.wtx-in{padding:4.4cqw 5cqw 4.4cqw}
.wtx-head{display:flex;align-items:baseline;justify-content:space-between}
.wtx-wm{font-size:3.2cqw;font-weight:600;letter-spacing:-.02em}
.wtx-meta{font-size:1.9cqw;color:#5F6675}
.wtx-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3.6cqw;margin-top:4cqw}
.wtx-lab{margin:0 0 2cqw;font-size:1.8cqw;letter-spacing:.14em;text-transform:uppercase;color:#5F6675}
.wtx-card{display:block;padding:2.2cqw 2.4cqw;border-radius:1.4cqw;background:#F6F3EC;font-size:2.05cqw;line-height:1.35;color:#2A3040;margin-bottom:1.8cqw;opacity:0;transform:translateY(6px)}
.wtx-card b{display:block;font-size:1.6cqw;letter-spacing:.12em;text-transform:uppercase;color:#5F6675;margin-bottom:.8cqw;font-weight:500}
.wtx-card.r1{background:#1C2434;color:#fff}
.wtx-card.r1 b{color:#FFB27A}
.wtx-note{margin:3.6cqw 0 0;padding-top:3cqw;border-top:1px solid rgba(24,32,48,.10);font-size:2.3cqw;font-weight:500;letter-spacing:-.015em}
.wtx-note::before{content:"";display:inline-block;width:1.6cqw;height:1.6cqw;border-radius:50%;background:#ED7A3D;margin-right:1.6cqw;vertical-align:middle}
:is(.svcd-root.is-open,.svcd-page) .wtx-doc{animation:wdxFrame .6s cubic-bezier(.16,1,.3,1) .1s both}
:is(.svcd-root.is-open,.svcd-page) .wtx-card{animation:wdxType .5s cubic-bezier(.16,1,.3,1) both}
:is(.svcd-root.is-open,.svcd-page) .wtx-card.c1{animation-delay:.5s}:is(.svcd-root.is-open,.svcd-page) .wtx-card.c2{animation-delay:.62s}:is(.svcd-root.is-open,.svcd-page) .wtx-card.c3{animation-delay:.74s}
:is(.svcd-root.is-open,.svcd-page) .wtx-card.k1{animation-delay:1.15s}:is(.svcd-root.is-open,.svcd-page) .wtx-card.k2{animation-delay:1.27s}
:is(.svcd-root.is-open,.svcd-page) .wtx-card.r1{animation-delay:1.8s}:is(.svcd-root.is-open,.svcd-page) .wtx-card.r2{animation-delay:1.92s}:is(.svcd-root.is-open,.svcd-page) .wtx-card.r3{animation-delay:2.04s}
:is(.svcd-root.is-open,.svcd-page) .wtx-note{opacity:0;animation:wdxType .5s ease 2.5s both}

/* ---- ongoing growth: look, change, review ---- */
.wgx{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wgx-panel{position:relative;border-radius:12px;background:#fff;container-type:inline-size;font-family:var(--font);color:#181C26;min-height:100%;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(150,165,190,.42),0 20px 44px -26px rgba(30,50,90,.4)}
.wgx-in{padding:7cqw 7cqw 6cqw;display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.wgx-lab{margin:0 0 6cqw;font-size:5.2cqw;letter-spacing:.14em;text-transform:uppercase;color:#5F6675}
.wgx-page{display:block;position:relative;aspect-ratio:4/5;border-radius:3cqw;background:#F6F3EC;container-type:inline-size;overflow:hidden}
.wgx-pg{position:absolute;inset:0;padding:8cqw 9cqw}
.wgx-page .l1{display:block;width:60%;height:5cqw;border-radius:2cqw;background:#D8D3C8;margin-bottom:3cqw}
.wgx-page .l2{display:block;width:80%;height:3cqw;border-radius:2cqw;background:#E3DFD5;margin-bottom:8cqw}
.wgx-form{display:flex;flex-direction:column;gap:3cqw}
.wgx-form i{display:block;height:8cqw;border-radius:2cqw;background:#fff;box-shadow:inset 0 0 0 1px rgba(24,32,48,.14)}
.wgx-form b{display:block;height:9cqw;border-radius:999px;background:#1C2434}
.wgx-dot{position:absolute;left:62%;top:52%;width:7cqw;height:7cqw;border-radius:50%;background:#ED7A3D;box-shadow:0 0 0 0 rgba(237,122,61,.5)}
.wgx-note{margin:6cqw 0 0;font-size:5.6cqw;line-height:1.35;letter-spacing:-.015em;color:#2A3040}
.wgx-check{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;border-radius:3cqw;background:#F6F3EC;color:#1C2434}
.wgx-check svg{width:44%;height:auto}
.wgx-tick{stroke:#ED7A3D;stroke-width:2.6;stroke-dasharray:40;stroke-dashoffset:40}
:is(.svcd-root.is-open,.svcd-page) .wgx-panel.p1{animation:wdxFrame .6s cubic-bezier(.16,1,.3,1) .1s both}
:is(.svcd-root.is-open,.svcd-page) .wgx-panel.p2{animation:wdxFrame .6s cubic-bezier(.16,1,.3,1) .9s both}
:is(.svcd-root.is-open,.svcd-page) .wgx-panel.p3{animation:wdxFrame .6s cubic-bezier(.16,1,.3,1) 1.7s both}
:is(.svcd-root.is-open,.svcd-page) .wgx-dot{animation:wgxPulse 1.2s ease-out .8s 2}
:is(.svcd-root.is-open,.svcd-page) .wgx-tick{animation:wgxTick .6s ease 2.4s forwards}
@keyframes wgxPulse{60%{box-shadow:0 0 0 3cqw rgba(237,122,61,0)}100%{box-shadow:0 0 0 0 rgba(237,122,61,0)}}
@keyframes wgxTick{to{stroke-dashoffset:0}}

@media (max-width:900px){
  .wd-fit-list{grid-template-columns:1fr;gap:12px}
  .wsx{padding:0 0 11% 7%;max-width:560px}
  .wsx-phone{width:27%}
  .wax{padding:0 4%;gap:5%}
  .wtx-in{padding:5cqw}
  .wgx{grid-template-columns:1fr 1fr 1fr;gap:10px}
}
@media (max-width:700px){
  .svcd-page{padding-top:88px}
  .wsx{padding:0 0 15% 0;max-width:none}
  .wsx-phone{width:31%;left:3%}
  .wax{grid-template-columns:1fr 1fr;padding:0;gap:4%}
  .wax-and{margin-bottom:6%}
  /* three panels stack on a phone: a deliberate column, not a shrunken row */
  .wgx{grid-template-columns:1fr;gap:10px}
  .wgx-in{flex-direction:row;align-items:center;gap:5cqw;padding:5cqw 6cqw}
  .wgx-lab{writing-mode:vertical-rl;transform:rotate(180deg);margin:0;font-size:3.4cqw}
  .wgx-page,.wgx-check{width:34%;aspect-ratio:4/4.4;flex:none}
  .wgx-note{margin:0;font-size:4.2cqw;flex:1}
  .wd-faq summary{font-size:16px;padding:16px 0}
  .wd-faq-a{padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
  :is(.svcd-root.is-open,.svcd-page) :is(.wsx-desk,.wsx-phone,.wsx-add,.wsx-bag0,.wsx-bag1,.wsx-desk .wsx-chips i.on,.wsx-drawer,.wax-ios,.wax-and,.wax-list span.on,.wax-mlist span.on,.wax-btn,.wax-sheet,.wtx-doc,.wtx-card,.wtx-note,.wgx-panel,.wgx-dot,.wgx-tick){animation:none}
  .wsx-drawer{transform:none;opacity:1}.wsx-bag0{opacity:0}.wsx-bag1{opacity:1}
  .wax-btn{opacity:1}.wax-sheet{transform:none;opacity:1}
  :is(.svcd-root.is-open,.svcd-page) :is(.wtx-card,.wtx-note){opacity:1;transform:none}
  .wgx-tick{stroke-dashoffset:0}
  .wdm-ill .d{stroke-dashoffset:0;fill-opacity:1;animation:none}
  .wd-faq summary::after{transition:none}
}