/* =========================================================
   DUALSTAG — OUR PROCESS PAGE. Loads AFTER style.css. All classes prefixed "pr-".
   ========================================================= */
/* ##########################################################
   PAGE MAP: our-process.html  (this file loads AFTER style.css)
   Order on the page, top to bottom, with where each section lives below.
   Navbar + footer + .btn + .eyebrow + .section-title base styles are in style.css (not in this file).
   
   SECTION 1  HERO            .hx-hero  #hxHero     light, photo bg, "Plan my project" button + logo marquee
   SECTION 2  HOW WE RUN      .pr-run   #run        light, 4-card bento with auto-playing mock-ups (hw-)
   SECTION 3  THE PLAN        .pr-process #timeline light, 4-week gantt chart (pr-gantt / pr-lane / pr-bar)
   SECTION 4  OUR PROCESS     .wd-process.pr-flow #walkthrough  light, 5-stage stepper (wds-) + promise tiles + CTA
   SECTION 5  WHY DUALSTAG    .pr-diff  #different light, 6 illustrated cards (pd-)
   SECTION 6  TALK TO US      .talk-section #talk   DARK call-to-action (talk-)
   FOOTER                     .footer               DARK (footer styles are in style.css)
   
   Rule of thumb: later blocks in this file override earlier ones. Sections 2, 3 and 4 were first built dark and
   later switched to light by override blocks, so a section can have a base block AND an override block.
   Search for "SECTION n" to jump to every block that belongs to a section.
   ########################################################## */

/* ----------------------------------------------------------
   SHARED · ghost word, section head (.pr-head), centred head (.pr-center)
   Used by sections 1 to 5.
   ---------------------------------------------------------- */

.section-ghost{ position:absolute; top:30px; right:-2%; z-index:0; font-family:var(--font-display); font-weight:800; font-size:clamp(130px,19vw,300px); line-height:.8; letter-spacing:-6px; color:rgba(255,255,255,.045); white-space:nowrap; pointer-events:none; user-select:none; transform:translate3d(var(--ghost-x,0px),0,0); }
.pr-head{ position:relative; z-index:1; max-width:1180px; margin:0 auto 34px; }
.pr-head .section-title{ margin:0 0 12px; }
.pr-head.on-dark .section-title{ color:#fff; } .pr-head.on-dark .section-lede{ color:rgba(255,255,255,.65); }
.pr-center{ text-align:center; } .pr-center .section-lede{ max-width:60ch; margin:0 auto; }
.pr-solid{ background:var(--brand-gradient); color:#fff; box-shadow:0 12px 28px -10px rgba(219,87,123,.55); }
.pr-solid:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -10px rgba(219,87,123,.7); }
.pr-tag{ display:inline-block; margin-bottom:16px; padding:5px 10px; border:1px solid currentColor; border-radius:4px; font:700 11px var(--font-body); letter-spacing:.14em; color:#fff; }
/* ----------------------------------------------------------
   LEGACY · old hero (.pr-hero), old stats, old mock-up cards
   LEGACY: no matching classes in the current our-process.html. Kept in case it is needed again; check, then remove.
   ---------------------------------------------------------- */

/* hero */
.pr-hero{ position:relative; padding:150px 6% 100px; border-radius:0 0 60px 60px; overflow:hidden; background:radial-gradient(50% 60% at 12% 10%,rgba(219,87,123,.55),transparent 70%),radial-gradient(45% 55% at 92% 22%,rgba(124,58,214,.45),transparent 70%),radial-gradient(55% 55% at 50% 110%,rgba(143,48,111,.55),transparent 70%),linear-gradient(160deg,#2C1444,#1B0B34 60%,#251048); }
.pr-hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.4px); background-size:26px 26px; opacity:.5; pointer-events:none; }
.pr-hero-grid{ position:relative; z-index:1; max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
.pr-hero h1{ color:#fff; font-size:clamp(28px,3.4vw,46px); margin:0 0 20px; }
.pr-hero-copy p{ max-width:50ch; color:rgba(255,255,255,.82); font-size:16.5px; line-height:1.75; margin-bottom:30px; }
.pr-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.pr-art{ position:relative; min-width:0; padding:30px 0 40px 56px; }
.pr-chip{ position:absolute; left:0; z-index:2; width:56px; height:56px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px); color:#fff; font-size:26px; }
.pr-chip.c1{ top:20px; } .pr-chip.c2{ top:90px; } .pr-chip.c3{ top:160px; }
.pr-editor,.pr-code{ border-radius:16px; overflow:hidden; background:#1B0B34; border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow-lg); }
.pr-editor{ position:relative; }
.pr-code-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.1); }
.pr-code-bar i{ width:9px; height:9px; border-radius:50%; background:#D9CBDD; opacity:.7; }
.pr-code-bar span{ margin-left:10px; font:600 12px var(--font-body); color:rgba(255,255,255,.7); }
.pr-tabs{ display:flex; gap:4px; } .pr-tabs em{ font-style:normal; padding:4px 10px; border-radius:8px; color:rgba(255,255,255,.55); } .pr-tabs em.on{ background:rgba(255,255,255,.12); color:#fff; }
.pr-editor pre,.pr-code pre{ margin:0; padding:16px 18px; overflow-x:auto; font:500 13px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#E9DDF2; scrollbar-width:none; }
.pr-editor pre{ min-height:230px; }
.pr-editor .ln,.pr-code .ln{ display:inline-block; width:26px; color:rgba(255,255,255,.28); user-select:none; }
.pr-editor .s,.pr-code .s{ font-weight:500; color:#F6A6C1; } .pr-editor .c,.pr-code .c{ font-weight:500; color:rgba(255,255,255,.4); }
.pr-cur{ position:absolute; padding:3px 9px; border-radius:4px; font:700 11px var(--font-body); color:#fff; }
.pr-cur.a{ right:20px; top:96px; background:var(--coral); } .pr-cur.b{ right:90px; bottom:22px; background:var(--magenta); }
.pr-note{ position:absolute; right:-10px; top:0; z-index:2; width:190px; padding:14px 16px; border-radius:6px; background:#F6D860; color:#2b2108; font-size:12.5px; line-height:1.45; box-shadow:0 14px 30px -10px rgba(0,0,0,.5); transform:rotate(2deg); }
.pr-note p{ margin:4px 0 6px; } .pr-note small{ opacity:.7; }
/* stats: trusted-by marquee + numbers */
.pr-stats{ padding:0 6%; background:var(--ink); }
.pr-stats-in{ max-width:1180px; margin:0 auto; border-left:1px solid rgba(255,255,255,.14); border-right:1px solid rgba(255,255,255,.14); }
.pr-trust{ display:grid; grid-template-columns:minmax(220px,26%) 1fr; border-bottom:1px solid rgba(255,255,255,.14); }
.pr-trust-label{ margin:0; padding:30px 28px; display:flex; align-items:center; background:rgba(255,255,255,.06); font:500 13.5px/1.45 var(--font-body); color:rgba(255,255,255,.82); }
.pr-marq{ min-width:0; display:flex; align-items:center; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent); }
.pr-marq-track{ display:flex; width:max-content; animation:pr-marq 34s linear infinite; }
.pr-marq:hover .pr-marq-track{ animation-play-state:paused; }
.pr-marq-set{ display:flex; align-items:center; gap:56px; padding:0 28px; }
.pr-marq-set img{ height:40px; width:auto; max-width:150px; object-fit:contain; opacity:.7; filter:grayscale(1) invert(1) brightness(1.8); mix-blend-mode:screen; transition:opacity .3s; }
.pr-marq-set img:hover{ opacity:1; }
@keyframes pr-marq{ to{ transform:translateX(-50%); } }
.pr-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid rgba(255,255,255,.14); }
.pr-stat{ position:relative; display:flex; flex-direction:column; gap:6px; padding:36px 28px 30px; border-left:1px solid rgba(255,255,255,.14); }
.pr-stat:first-child{ border-left:0; }
.pr-stat .ph-bold{ position:absolute; top:26px; right:26px; font-size:26px; color:#F6A6C1; opacity:.85; }
.pr-stat b{ font:500 clamp(38px,4.6vw,60px)/1.05 var(--font-display); color:#F6A6C1; }
.pr-stat b small{ font:600 .36em var(--font-display); color:var(--coral); }
.pr-stat span{ font-size:15px; color:rgba(255,255,255,.78); }
@media (max-width:900px){
  .pr-trust{ grid-template-columns:1fr; } .pr-trust-label{ padding:20px 22px; } .pr-marq{ padding:22px 0; }
  .pr-stats-row{ grid-template-columns:1fr 1fr; } .pr-stat:nth-child(3){ border-left:0; } .pr-stat:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14); }
}
@media (max-width:480px){ .pr-stat{ padding:28px 20px 24px; } .pr-stat .ph-bold{ top:20px; right:16px; font-size:22px; } .pr-marq-set{ gap:40px; } }
@media (prefers-reduced-motion:reduce){ .pr-marq-track{ animation:none; } .pr-marq{ overflow-x:auto; } }
/* ----------------------------------------------------------
   SECTION 2 · HOW WE RUN · base block (original dark version)
   .pr-run is still the section class. The light look comes from "HOW WE WORK · light version" further down.
   The pr-rc / pr-run-grid cards below are LEGACY (replaced by the hw- bento).
   ---------------------------------------------------------- */

/* how we run: dark card grid */
.pr-run{ position:relative; padding:90px 6%; background:radial-gradient(45% 45% at 50% 0%,rgba(124,58,214,.22),transparent 70%),var(--ink); overflow:clip; }
.pr-run::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1.2px,transparent 1.2px); background-size:26px 26px; pointer-events:none; }
.pr-run .section-title{ color:#fff; } .pr-run .section-title em{ font-style:normal; color:#F6A6C1; } .pr-run .section-lede{ color:rgba(255,255,255,.68); }
.pr-know{ margin-top:14px; font:700 14.5px var(--font-body); color:#F6A6C1; }
.pr-run-grid{ position:relative; z-index:1; max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pr-run-col,.pr-run-col > ul{ display:flex; flex-direction:column; gap:12px; } .pr-run-col{ min-width:0; } .pr-run-col > ul{ flex:1; }
.pr-rc{ position:relative; display:flex; flex-direction:column; min-height:260px; padding:28px 28px 0; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); transition:border-color .3s,transform .4s var(--ease); }
.pr-rc:hover{ border-color:rgba(246,166,193,.5); transform:translateY(-4px); }
.pr-rc.c1,.pr-rc.c4{ flex:1.35; } .pr-rc.c2,.pr-rc.c3{ flex:1; }
.pr-rc-ico{ width:38px; height:38px; display:grid; place-items:center; margin-bottom:22px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.06); color:#F6A6C1; font-size:18px; }
.pr-rc h3{ font-size:18px; color:#fff; margin-bottom:8px; } .pr-rc > p{ max-width:40ch; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.65); }
.pr-v{ position:relative; flex:1; min-height:150px; margin-top:22px; }
/* 1 · contact */
.pr-av{ position:absolute; width:104px; height:104px; display:grid; place-items:center; border-radius:12px; font-size:44px; color:rgba(255,255,255,.9); box-shadow:0 14px 30px -10px rgba(0,0,0,.6); }
.pr-av.a{ left:14%; top:8px; background:linear-gradient(140deg,#DB577B,#8F306F); } .pr-av.b{ left:34%; top:62px; background:linear-gradient(140deg,#7C3AD6,#490B6A); }
.pr-cur2{ position:absolute; padding:3px 9px; border-radius:4px; font:700 11px var(--font-body); } .pr-cur2.you{ left:5%; top:78px; background:#C0392B; color:#fff; } .pr-cur2.us{ left:62%; top:48px; background:#F6A6C1; color:#2a0f24; }
.pr-rb{ position:absolute; right:3%; top:20px; display:flex; flex-direction:column; gap:10px; } .pr-rb i{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#F6A6C1; font-size:19px; }
/* 2 · milestones */
.pr-g{ position:absolute; inset:0 0 0 0; background:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/16.66% 100%; }
.pr-g .r{ position:relative; height:30px; margin:0 0 10px var(--m); background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.04)); } .pr-g .r b{ position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); } .pr-g .r i{ position:absolute; left:14px; top:12px; width:34%; height:5px; border-radius:3px; background:rgba(255,255,255,.35); }
/* 3 · review rounds */
.pr-msg{ display:flex; gap:12px; align-items:flex-start; margin-left:6%; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); }
.pr-dot{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--brand-gradient); color:#fff; font-size:15px; }
.pr-msg small{ font-size:11px; color:rgba(255,255,255,.55); } .pr-msg p{ margin:3px 0 0; font-size:12.5px; line-height:1.45; color:#fff; } .pr-msg .re{ margin-top:6px; color:#F6A6C1; font-weight:600; }
.pr-sk{ display:grid; gap:8px; margin:12px 0 0 14%; } .pr-sk i{ height:34px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
/* 4 · whatsapp */
.pr-search{ position:relative; height:30px; margin:0 6%; border-radius:8px; background:rgba(255,255,255,.08); } .pr-search i:first-child{ position:absolute; left:14px; top:12px; width:34%; height:5px; border-radius:3px; background:rgba(255,255,255,.3); } .pr-search .ph-bold{ position:absolute; right:10px; top:6px; color:rgba(255,255,255,.5); }
.pr-bub{ display:flex; align-items:center; gap:12px; width:72%; margin-top:14px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); }
.pr-bub.l{ margin-left:6%; } .pr-bub.r{ margin-left:22%; } .pr-bub > .ph-bold{ flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.1); color:#F6A6C1; font-size:18px; }
.pr-bub span{ display:grid; gap:7px; flex:1; } .pr-bub b{ height:5px; border-radius:3px; background:rgba(255,255,255,.3); } .pr-bub b:first-child{ width:70%; } .pr-bub b:nth-child(2){ width:45%; } .pr-bub em{ font-style:normal; font-size:12px; font-weight:600; color:#fff; }
@media (max-width:700px){ .pr-run-grid{ grid-template-columns:1fr; } .pr-run-col > ul{ gap:12px; } .pr-rc{ min-height:0; } .pr-v{ min-height:170px; } }
/* timeline (shared look with the web design page) */
.pr-note-t{ position:relative; z-index:1; max-width:1180px; margin:22px auto 0; font-size:13px; color:rgba(255,255,255,.55); }
/* ----------------------------------------------------------
   LEGACY · old "journey" section (.pr-journey, .pr-svcs, .pr-stepbar)
   LEGACY: no matching classes in the current our-process.html. Kept in case it is needed again; check, then remove.
   ---------------------------------------------------------- */

/* journey */
.pr-journey{ padding:90px 6%; background:var(--paper); }
.pr-svcs{ position:relative; z-index:1; max-width:1180px; margin:0 auto 22px; display:flex; gap:8px; flex-wrap:wrap; }
.pr-svcs button{ display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border:1.5px solid var(--magenta); border-radius:99px; background:transparent; color:var(--magenta); font:700 14px var(--font-display); cursor:pointer; transition:background .3s,color .3s; }
.pr-svcs button[aria-selected="true"],.pr-svcs button:hover{ background:var(--magenta); color:#fff; }
.pr-group{ position:relative; z-index:1; max-width:1180px; margin:0 auto; } .pr-group[hidden]{ display:none; }
.pr-stepbar{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 14px; scrollbar-width:none; }
.pr-st{ flex:none; display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 9px; border:1px solid var(--line); border-radius:99px; background:#fff; color:var(--text-soft); font:700 13.5px var(--font-body); cursor:pointer; transition:background .3s,color .3s,border-color .3s; }
.pr-st span{ width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--paper-dim); color:var(--magenta); font:800 12px var(--font-display); }
.pr-st:hover{ border-color:var(--magenta); color:var(--ink); }
.pr-st.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; } .pr-st.is-on span{ background:var(--brand-gradient); color:#fff; }
.pr-pane{ display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; padding:36px; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-sm); } .pr-pane[hidden]{ display:none; }
.pr-wkl{ margin-bottom:8px; font:700 12px var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--magenta); }
.pr-pane h3{ font-size:26px; line-height:1.2; margin-bottom:12px; }
.pr-pane p{ max-width:54ch; font-size:15.5px; line-height:1.75; color:var(--text-soft); }
.pr-chips{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; }
.pr-chips li{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:10px; background:var(--paper); font-size:13.5px; font-weight:600; color:var(--text); }
.pr-chips li::before{ content:""; width:15px; height:15px; border-radius:50%; background:var(--brand-gradient) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pr-code pre{ min-height:190px; }
.pr-away{ position:relative; z-index:1; max-width:1180px; margin:30px auto 0; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:32px 38px; border-radius:24px; background:var(--ink); color:#fff; }
.pr-away h3{ font-size:26px; color:#fff; margin-bottom:8px; } .pr-away em,.pr-process-head em{ font-style:normal; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pr-away p{ max-width:58ch; font-size:15px; line-height:1.7; color:rgba(255,255,255,.72); }
/* ----------------------------------------------------------
   SECTION 5 · WHY DUALSTAG · base block (.pr-diff)
   .pr-diff-grid is LEGACY (replaced by the pd- cards, see "WHY DUALSTAG" further down).
   ---------------------------------------------------------- */

/* different */
.pr-diff{ padding:90px 6%; background:#fff; }
.pr-diff-grid{ position:relative; z-index:1; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:24px; overflow:hidden; }
.pr-diff-grid article{ padding:30px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); transition:background .3s; } .pr-diff-grid article:hover{ background:#fff; }
.pr-diff-grid article:nth-child(3n){ border-right:0; } .pr-diff-grid article:nth-child(n+4){ border-bottom:0; }
.pr-diff-grid .ph-bold{ font-size:28px; color:var(--magenta); margin-bottom:14px; display:block; }
.pr-diff-grid h3{ font-size:19px; margin-bottom:8px; } .pr-diff-grid p{ font-size:14.5px; line-height:1.65; color:var(--text-soft); }
/* ----------------------------------------------------------
   SECTION 3 · THE PLAN · base block (.pr-process, .pr-process-head)
   Gantt chart: .pr-gantt > .pr-ruler + .pr-lane > .pr-lane-tag + .pr-bar. Light override is in the last block of the file.
   ---------------------------------------------------------- */

.pr-process{ position:relative; padding:90px 6%; border-radius:0 0 60px 60px; background:radial-gradient(45% 50% at 90% 0%,rgba(124,58,214,.35),transparent 70%),radial-gradient(40% 50% at 5% 100%,rgba(219,87,123,.28),transparent 70%),var(--ink); overflow:clip; }
.pr-process::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1.2px,transparent 1.2px); background-size:26px 26px; pointer-events:none; }
.pr-process-head{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:end; margin-bottom:40px; }
.pr-process-head .section-lede{ max-width:46ch; margin:0; }
.pr-gantt{ position:relative; z-index:1; max-width:1180px; margin:0 auto; border:1px solid rgba(255,255,255,.14); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.03); }
.pr-ruler,.pr-lane{ display:grid; grid-template-columns:38px repeat(4,1fr); }
.pr-ruler{ border-bottom:1px solid rgba(255,255,255,.14); }
.pr-ruler i{ padding:9px 0; font:600 11px var(--font-body); font-style:normal; letter-spacing:.08em; text-align:center; color:rgba(255,255,255,.5); border-left:1px solid rgba(255,255,255,.08); }
.pr-lane{ min-height:88px; border-bottom:1px solid rgba(255,255,255,.14); background:linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px) 38px 0/calc((100% - 38px)/4) 100% repeat-x; }
.pr-lane:last-child{ border-bottom:0; }
.pr-lane-tag{ grid-column:1; grid-row:1; display:grid; place-items:center; background:var(--c); }
.pr-lane-tag b{ writing-mode:vertical-rl; transform:rotate(180deg); font:700 10px var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:#1a0d24; }
.pr-bar{ grid-row:1; min-width:0; overflow:hidden; position:relative; display:flex; flex-direction:column; justify-content:center; gap:8px; margin:0; padding:14px 56px 14px 16px; border:0; border-left:3px solid var(--coral); background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.05)); color:#fff; text-align:left; cursor:pointer; transition:background .3s; }
.pr-bar strong{ font:700 15px/1.3 var(--font-display); }
.pr-wk{ align-self:flex-start; padding:3px 7px; border:1px solid var(--coral); border-radius:3px; font:700 10px var(--font-body); letter-spacing:.1em; color:#fff; }
.pr-bar > .ph-bold{ position:absolute; top:0; right:0; width:44px; height:44px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:rgba(255,255,255,.75); font-size:19px; }
.pr-bar:hover{ background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.09)); }
.pr-bar.is-on{ background:var(--brand-gradient); border-left-color:#fff; box-shadow:0 14px 30px -12px rgba(219,87,123,.7); }
.pr-bar.is-on .pr-wk{ border-color:#fff; }
.pr-bar:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }
/* ----------------------------------------------------------
   RESPONSIVE · tablet and phone rules for sections 2, 3 and 5 (plus the legacy hero)
   ---------------------------------------------------------- */

/* code colours only (shared) */
@media (max-width:900px){
  .pr-hero{ padding:110px 6% 64px; border-radius:0 0 40px 40px; }
  .pr-hero-grid,.pr-pane,.pr-process-head{ grid-template-columns:1fr; gap:30px; }
  .pr-run,.pr-journey,.pr-diff,.pr-process{ padding-left:5%; padding-right:5%; padding-top:60px; padding-bottom:60px; }
  .pr-process{ border-radius:0 0 40px 40px; }
  .pr-diff-grid{ grid-template-columns:1fr 1fr; } .pr-diff-grid article{ border-right:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important; }
  .pr-pane{ padding:24px 20px; } .pr-art{ padding-left:0; } .pr-chip{ display:none; } .pr-note{ right:0; }
}
@media (max-width:760px){
  .pr-ruler{ display:none; } .pr-lane{ display:block; min-height:0; background:none; }
  .pr-lane-tag{ display:block; padding:5px 14px; } .pr-lane-tag b{ writing-mode:horizontal-tb; transform:none; }
  .pr-bar{ width:100%; min-height:84px; }
}
@media (max-width:600px){
  .pr-diff-grid{ grid-template-columns:1fr; }
  .pr-ctas .btn,.pr-away .btn{ width:100%; justify-content:center; } .pr-away{ padding:26px 22px; } .pr-note{ display:none; }
}

/* ----------------------------------------------------------
   SECTION 6 · TALK TO US · call-to-action (.talk-section, DARK, stays dark)
   Left: .talk-main (title, button). Right: .talk-direct (WhatsApp, phone, email chips).
   The .tk-card booking form rules in this block are LEGACY (the form was removed from the HTML).
   ---------------------------------------------------------- */

/* ===== LET'S TALK: split layout (pitch + contact on the left, booking form on the right) ===== */
.talk-section{
  --talk-r:clamp(28px,3.4vw,48px);
  position:relative; z-index:2; overflow:hidden; isolation:isolate;
  box-sizing:border-box; width:auto; max-width:100%;
  margin:0 clamp(12px,2vw,28px) clamp(16px,2.4vw,28px);
  padding:clamp(44px,5vw,68px) 6%;
  border-radius:var(--talk-r);
  clip-path:inset(0 round var(--talk-r));
  background:
    radial-gradient(50% 60% at 12% 10%,  rgba(219,87,123,0.55), transparent 70%),
    radial-gradient(45% 55% at 92% 22%,  rgba(124,58,214,0.45), transparent 70%),
    radial-gradient(55% 55% at 50% 110%, rgba(143,48,111,0.55), transparent 70%),
    linear-gradient(160deg, #2C1444, #1B0B34 60%, #251048);
}
.talk-section::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:inherit;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1.4px, transparent 1.4px);
  background-size:26px 26px; opacity:.5;
}
.talk-ghost{
  position:absolute; top:14px; left:-3%; z-index:0;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(90px,13vw,220px); line-height:0.8; letter-spacing:-6px;
  color:rgba(255,255,255,0.045); white-space:nowrap;
  pointer-events:none; user-select:none;
  transform:translate3d(var(--ghost-x, 0px), 0, 0); will-change:transform;
}

/* two columns: .talk-main (left) + .tk-card (right). .talk-panel stays only as the scroll-reveal hook for the switch */
.talk-split{
  position:relative; z-index:1; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,72px); align-items:center;
}
.talk-main{ position:relative; z-index:1; min-width:0; }
.talk-main .eyebrow{ margin-bottom:14px; }
.talk-title{
  margin:0 0 14px; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,3.1vw,42px); line-height:1.1; letter-spacing:-.5px; color:#fff;
}
.talk-line{ display:block; }
.talk-title em{
  font-style:normal;
  background:linear-gradient(90deg, #FFB8CB, #D7B4FF);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.talk-lede{ max-width:48ch; margin:0; font-size:15.5px; line-height:1.7; color:rgba(255,255,255,0.78); }

/* the inline switch */
.talk-toggle{
  position:relative; display:inline-block; vertical-align:-.03em;
  width:1.12em; height:.66em; margin:0 .06em; border-radius:999px;
  background:rgba(255,255,255,0.28); cursor:pointer;
  box-shadow:inset 0 2px 4px rgba(8,2,22,0.25);
}
.talk-toggle::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--brand-gradient, linear-gradient(135deg,#DB577B,#7C3AD6)); opacity:0;
  transition:opacity .5s ease .35s;
}
.talk-toggle::after{
  content:""; position:absolute; top:50%; left:.07em;
  width:.52em; height:.52em; margin-top:-.26em; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(8,2,22,0.4);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) .35s, width .25s ease;
}
.talk-panel.in-view .talk-toggle::before{ opacity:1; }
.talk-panel.in-view .talk-toggle::after{ transform:translateX(.46em); }
.talk-panel.in-view .talk-toggle:not(.is-off):hover::after{ transform:translateX(.4em); width:.58em; }
.talk-panel.in-view .talk-toggle.is-off::before{ opacity:0; transition-delay:0s; }
.talk-panel.in-view .talk-toggle.is-off::after{ transform:none; transition-delay:0s; }

/* direct contact block (sits where the logo + stats rows sit in the reference) */
.talk-direct{
  margin-top:clamp(24px,3.2vw,38px); padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid rgba(255,255,255,0.18);
}
.talk-direct-label{
  margin:0 0 14px; font:700 12px var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,0.85);
}
.talk-direct-label b{ color:#FFB8CB; font-weight:700; }
.talk-meta{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.talk-meta li:last-child{ grid-column:1 / -1; }
.talk-chip{
  display:flex; align-items:center; gap:12px; height:100%; box-sizing:border-box;
  padding:12px 16px; border-radius:18px; color:#fff;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22);
  transition:transform .35s var(--ease), background .35s ease, border-color .35s ease;
}
a.talk-chip:hover{ transform:translateY(-3px); background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.4); }
.talk-chip-ico{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-size:18px; color:#fff;
  background:var(--brand-gradient, linear-gradient(135deg,#DB577B,#7C3AD6));
  box-shadow:0 8px 18px rgba(8,2,22,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
.talk-chip-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.talk-chip-txt small{ font-size:10.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,0.6); }
.talk-chip-txt strong{ font-size:14px; font-weight:600; color:#fff; overflow-wrap:anywhere; }

/* booking card (frosted glass, same recipe as the old panel) */
.tk-card{
  position:relative; min-width:0; z-index:1;
  padding:clamp(20px,2.6vw,32px);
  border-radius:clamp(22px,2.4vw,30px);
  background:linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 100%);
  border:1px solid rgba(255,255,255,0.24);
  -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 30px 80px rgba(8,2,20,0.5), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 0 40px rgba(255,255,255,0.04);
}
.tk-host{
  display:flex; align-items:center; gap:14px; margin-bottom:22px; padding:10px 16px 10px 10px;
  border-radius:16px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
}
.tk-avs{ display:flex; flex:0 0 auto; }
.tk-av{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  font:800 20px var(--font-display); color:#fff; box-shadow:0 8px 18px rgba(8,2,22,0.35);
}
.tk-av + .tk-av{ margin-left:-10px; border:2px solid #2A1347; }
.tk-av.a{ background:var(--brand-gradient, linear-gradient(135deg,#DB577B,#7C3AD6)); }
.tk-av.b{ background:linear-gradient(135deg,#FFB8CB,#D7B4FF); color:#2C1444; }
.tk-host p{ margin:0; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,0.9); }

.tk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tk-f{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.tk-f label{ font:600 12.5px var(--font-body); color:rgba(255,255,255,0.88); }
.tk-f label b{ color:#FFB8CB; font-weight:700; }
.tk-f input, .tk-f select, .tk-f textarea{
  width:100%; box-sizing:border-box; min-width:0; height:44px; padding:0 14px;
  font:500 14px var(--font-body); color:#fff; color-scheme:dark;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); border-radius:12px;
  outline:none; transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.tk-f textarea{ height:auto; min-height:44px; padding:11px 14px; line-height:1.5; resize:vertical; }
.tk-f input::placeholder, .tk-f textarea::placeholder{ color:rgba(255,255,255,0.42); }
.tk-f input:focus, .tk-f select:focus, .tk-f textarea:focus{
  background:rgba(255,255,255,0.12); border-color:#D7B4FF; box-shadow:0 0 0 3px rgba(215,180,255,0.25);
}
.tk-f select{
  appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.tk-f select:invalid{ color:rgba(255,255,255,0.42); }
.tk-f select option{ background:#1B0B34; color:#fff; }
.tk-f input:user-invalid, .tk-f select:user-invalid{ border-color:#FFB8CB; }
.tk-phone{ display:grid; grid-template-columns:minmax(0,92px) minmax(0,1fr); gap:8px; }
.tk-phone select{ padding-left:12px; padding-right:28px; background-position:right 10px center; }

.tk-foot{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; margin-top:22px; }
.tk-submit{
  display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border:0; border-radius:999px; cursor:pointer;
  font:700 13px var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--brand-gradient, linear-gradient(135deg,#DB577B,#7C3AD6));
  box-shadow:0 12px 28px -10px rgba(219,87,123,.55);
  transition:transform .35s var(--ease), box-shadow .35s ease;
}
.tk-submit:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -10px rgba(219,87,123,.7); }
.tk-submit:active{ transform:translateY(0); }
.tk-submit:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.tk-note{ margin:0; min-height:1em; font-size:12.5px; color:rgba(255,255,255,0.7); }

@media (prefers-reduced-motion:reduce){
  .talk-toggle::before, .talk-toggle::after, .talk-chip, .tk-submit{ transition:none !important; }
}

/* ---------- tablet: stack, form card below ---------- */
@media (max-width:900px){
  .talk-section{ padding:34px 5%; }
  .talk-ghost{ top:10px; left:-4%; font-size:clamp(70px,22vw,150px); letter-spacing:-4px; }
  .talk-split{ grid-template-columns:1fr; gap:30px; }
  .talk-title{ font-size:clamp(24px,5.2vw,34px); }
  .talk-lede{ max-width:none; font-size:14.5px; }
}
/* ---------- phones ---------- */
@media (max-width:600px){
  .talk-section{ margin:0 10px 10px; padding:26px 4%; }
  .talk-title{ font-size:clamp(21px,6vw,26px); }
  .talk-meta{ grid-template-columns:1fr; gap:10px; }
  .talk-chip{ padding:10px 14px; border-radius:16px; }
  .tk-card{ padding:18px 16px; }
  .tk-host{ gap:12px; }
  .tk-av{ width:46px; height:46px; font-size:17px; }
  .tk-host p{ font-size:13.5px; }
  .tk-grid{ grid-template-columns:1fr; gap:14px; }
  .tk-foot .tk-submit{ width:100%; justify-content:center; }
}

/* narrow timeline bars: keep the chip, title and icon from colliding */
.pr-bar strong{ overflow-wrap:anywhere; }
@media (max-width:1000px) and (min-width:761px){
  .pr-bar{ padding:12px 10px; gap:6px; }
  .pr-bar strong{ font-size:13px; }
  .pr-bar > .ph-bold{ display:none; }
  .pr-wk{ font-size:9px; padding:2px 5px; letter-spacing:.06em; }
}

/* ----------------------------------------------------------
   SHARED · theme match: eyebrow tag, headings, dot-grid paper background, ghost word
   ---------------------------------------------------------- */

/* =========================================================
   THEME MATCH · tags, headings and backgrounds follow the web design page
   (layout and structure are unchanged)
   ========================================================= */
/* eyebrow tag (replaces the boxed .pr-tag) */
.pr-head .eyebrow,.pr-hero-copy .eyebrow{ margin-bottom:14px; }
.pr-center .eyebrow{ justify-content:center; }
.pr-process-head .eyebrow{ margin-bottom:12px; }

/* headings: Poppins, white on dark, ink on light, same sizes and ledes as the web design sections */
.pr-run .section-title,.pr-process .section-title{ margin:0 0 10px; font-family:var(--font-display); font-size:clamp(28px,3vw,40px); line-height:1.15; color:#fff; }
.pr-run .section-lede,.pr-process .section-lede{ color:rgba(255,255,255,.6); font-size:clamp(14.5px,1.15vw,16px); line-height:1.6; }
.pr-journey .section-title,.pr-diff .section-title{ margin:0 0 10px; font-family:var(--font-display); font-size:clamp(28px,3vw,40px); line-height:1.15; color:var(--ink); }
.pr-journey .section-lede,.pr-diff .section-lede{ font-size:clamp(14.5px,1.15vw,16px); line-height:1.6; }

/* light sections: dot-grid paper background, like Why choose us / Our technology */
.pr-journey,.pr-diff{ position:relative; overflow:clip; background:radial-gradient(rgba(143,48,111,.11) 1.2px,transparent 1.2px) 0 0/24px 24px,linear-gradient(180deg,var(--paper),var(--paper-dim)); }
.pr-diff{ background:radial-gradient(rgba(143,48,111,.11) 1.2px,transparent 1.2px) 0 0/24px 24px,linear-gradient(180deg,var(--paper-dim),var(--paper)); }

/* faint ghost word in every section */
.section-ghost.pr-ghost-l{ top:12px; right:-3%; font-size:clamp(110px,15vw,240px); letter-spacing:-5px; color:rgba(143,48,111,.06); }
.section-ghost.pr-ghost-l.is-left{ left:-2%; right:auto; }
.section-ghost.pr-ghost-d{ top:12px; left:-2%; right:auto; font-size:clamp(110px,15vw,240px); letter-spacing:-5px; color:rgba(255,255,255,.035); }
.pr-process > .section-ghost{ right:-3%; left:auto; color:rgba(255,255,255,.035); }

/* ----------------------------------------------------------
   SECTION 2 · HOW WE RUN · LIGHT override (wins over the base block above)
   ---------------------------------------------------------- */

/* =========================================================
   HOW WE WORK · light version (same dot-grid paper as the other light sections)
   ========================================================= */
.pr-run{ background:radial-gradient(rgba(143,48,111,.11) 1.2px,transparent 1.2px) 0 0/24px 24px,linear-gradient(180deg,var(--paper),var(--paper-dim)); }
.pr-run::before{ display:none; }
.pr-run .section-title{ color:var(--ink); }
.pr-run .section-title em{ font-style:normal; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pr-run .section-lede{ color:var(--text-soft); }
.pr-know{ color:var(--magenta); }

.pr-run .pr-rc{ border:1px solid var(--line); background:#fff; box-shadow:0 18px 38px -26px rgba(60,20,90,.3); }
.pr-run .pr-rc:hover{ border-color:rgba(143,48,111,.4); }
.pr-run .pr-rc-ico{ border:1px solid var(--line); background:var(--paper); color:var(--magenta); }
.pr-run .pr-rc h3{ color:var(--ink); }
.pr-run .pr-rc > p{ color:var(--text-soft); }

/* the little pictures inside each card */
.pr-run .pr-av{ box-shadow:0 14px 30px -12px rgba(143,48,111,.45); }
.pr-run .pr-rb i{ background:var(--paper); border:1px solid var(--line); color:var(--magenta); }
.pr-run .pr-g{ background:linear-gradient(90deg,rgba(36,17,48,.07) 1px,transparent 1px) 0 0/16.66% 100%; }
.pr-run .pr-g .r{ background:linear-gradient(90deg,rgba(143,48,111,.16),rgba(143,48,111,.04)); }
.pr-run .pr-g .r i{ background:rgba(36,17,48,.25); }
.pr-run .pr-msg{ background:var(--paper); border:1px solid var(--line); }
.pr-run .pr-msg small{ color:var(--text-soft); }
.pr-run .pr-msg p{ color:var(--ink); }
.pr-run .pr-msg .re{ color:var(--magenta); }
.pr-run .pr-sk i{ background:var(--paper); border:1px solid var(--line); }
.pr-run .pr-search{ background:var(--paper); border:1px solid var(--line); }
.pr-run .pr-search i:first-child{ background:rgba(36,17,48,.25); }
.pr-run .pr-search .ph-bold{ color:rgba(36,17,48,.45); }
.pr-run .pr-bub{ background:var(--paper); border:1px solid var(--line); }
.pr-run .pr-bub > .ph-bold{ background:#fff; color:var(--magenta); }
.pr-run .pr-bub b{ background:rgba(36,17,48,.2); }
.pr-run .pr-bub em{ color:var(--ink); }

/* ----------------------------------------------------------
   SECTION 1 support · brands logo marquee (.pr-marq) + older hero rules
   Mixed block: .pr-marq / .pr-trust are IN USE; .pr-hero / .pr-stage rules are LEGACY.
   ---------------------------------------------------------- */

/* =========================================================
   HERO + BRANDS · new look: big rounded hero, glass stage cards, logo tiles on white
   ========================================================= */
.pr-hero{ padding:150px 6% 110px; border-radius:0 0 80px 80px; }
.pr-stages{ min-width:0; display:flex; gap:16px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent); mask-image:linear-gradient(90deg,#000 80%,transparent); }
.pr-stage{ flex:none; width:250px; box-sizing:border-box; align-self:flex-end; min-height:214px; padding:24px; display:flex; flex-direction:column; gap:10px; border-radius:26px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; }
.pr-stage.is-up{ min-height:240px; background:rgba(255,255,255,.2); }
.pr-stage-n{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.14); font:700 13px var(--font-display); }
.pr-stage.is-up .pr-stage-n{ background:#F6A6C1; color:#2a0f24; }
.pr-stage b{ margin-top:auto; font:700 24px var(--font-display); }
.pr-stage small{ font:600 11px var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:#F6A6C1; }
.pr-stage p{ margin:0; font-size:13px; line-height:1.5; color:rgba(255,255,255,.75); }
@media (min-width:901px){ .pr-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:end; gap:48px; } }

/* brands: logo tiles that scroll sideways on white */
.pr-stats{ padding:44px 6% 56px; background:#fff; }
.pr-stats-in{ border:0; }
.pr-trust{ display:block; border:0; }
.pr-trust-label{ display:block; margin:0 0 22px; padding:0; background:none; text-align:center; font:500 14px var(--font-body); color:var(--text-soft); }
.pr-marq{ display:block; padding:0; }
.pr-marq-set{ gap:16px; padding:0 8px; }
.pr-marq-set img{ box-sizing:content-box; height:40px; max-width:150px; padding:22px 30px; object-fit:contain; border-radius:22px; background:#EFE9F3; filter:none; mix-blend-mode:normal; opacity:.95; }
.pr-marq-set img:hover{ opacity:1; }

@media (max-width:900px){
  .pr-hero{ padding:110px 6% 72px; border-radius:0 0 48px 48px; }
  .pr-stages{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; scrollbar-width:none; }
  .pr-stage,.pr-stage.is-up{ width:220px; min-height:214px; }
}

/* ----------------------------------------------------------
   LEGACY · old hero planner card and stage cards (.pr-plan, .pr-est, .pr-stages)
   LEGACY: no matching classes in the current our-process.html. Kept in case it is needed again; check, then remove.
   ---------------------------------------------------------- */

/* =========================================================
   HERO · interactive: project planner card + clickable stage cards
   ========================================================= */
.pr-hero-copy p{ margin-bottom:26px; }
.pr-plan{ max-width:560px; display:grid; grid-template-columns:1fr 1fr auto; align-items:stretch; padding:10px; border-radius:22px; background:#fff; box-shadow:0 22px 44px -22px rgba(0,0,0,.55); }
.pr-f{ position:relative; display:flex; flex-direction:column; gap:2px; padding:6px 16px; border-right:1px solid var(--line); cursor:pointer; }
.pr-f:nth-child(2){ border-right:0; }
.pr-f span{ font:600 11px var(--font-body); color:var(--text-soft); }
.pr-f select{ appearance:none; -webkit-appearance:none; width:100%; padding:2px 22px 2px 0; border:0; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238F306F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; color:var(--ink); font:700 14.5px var(--font-display); cursor:pointer; }
.pr-f:focus-within{ border-radius:14px; box-shadow:0 0 0 2px var(--magenta) inset; }
.pr-f select:focus{ outline:none; }
.pr-go{ display:inline-flex; align-items:center; gap:8px; padding:0 22px; border:0; border-radius:14px; background:var(--brand-gradient); color:#fff; font:700 14px var(--font-display); cursor:pointer; transition:transform .3s var(--ease),box-shadow .3s; }
.pr-go:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(219,87,123,.7); }
.pr-go:focus-visible,.pr-quick button:focus-visible,.pr-quick a:focus-visible,.pr-stage:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.pr-est{ max-width:52ch; min-height:48px; margin-top:16px; font:500 14px/1.6 var(--font-body); color:rgba(255,255,255,.82); }
.pr-quick{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:12px; }
.pr-quick button,.pr-quick a{ display:inline-flex; align-items:center; gap:8px; padding:6px 0; border:0; background:none; color:#fff; font:700 14px var(--font-display); text-decoration:none; cursor:pointer; }
.pr-quick button .ph-bold{ width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--ink); font-size:12px; transition:transform .3s var(--ease); }
.pr-quick button:hover .ph-bold{ transform:translateY(2px); }
.pr-quick a:hover{ color:#F6A6C1; }

/* stage cards are buttons now: the chosen one is raised and gets a coral "you get" tag */
.pr-stages{ position:relative; padding:74px 0 0 14px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 80%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 80%,transparent); }
.pr-stage{ position:relative; text-align:left; font:inherit; cursor:pointer; transition:background .3s,min-height .4s var(--ease),transform .4s var(--ease); }
.pr-stage:not(.is-up):hover{ background:rgba(255,255,255,.15); transform:translateY(-4px); }
.pr-stage.is-up::before{ content:attr(data-tag); position:absolute; left:-12px; top:-60px; max-width:calc(100% + 24px); padding:14px 20px; border-radius:16px; background:var(--coral); color:#fff; font:700 14px/1.25 var(--font-display); box-shadow:0 0 0 5px rgba(255,255,255,.22); }
.pr-stage-d{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.75); }
.pr-stages.is-swap .pr-stage{ animation:pr-swap .5s var(--ease) both; }
.pr-stages.is-swap .pr-stage:nth-child(2){ animation-delay:.05s; } .pr-stages.is-swap .pr-stage:nth-child(3){ animation-delay:.1s; } .pr-stages.is-swap .pr-stage:nth-child(4){ animation-delay:.15s; } .pr-stages.is-swap .pr-stage:nth-child(5){ animation-delay:.2s; }
@keyframes pr-swap{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .pr-stages.is-swap .pr-stage{ animation:none; } .pr-stage,.pr-go{ transition:none; } }
@media (max-width:900px){
  .pr-stages{ -webkit-mask-image:none; mask-image:none; }
}
@media (max-width:560px){
  .pr-plan{ grid-template-columns:1fr; }
  .pr-f{ border-right:0; border-bottom:1px solid var(--line); padding:10px 14px; }
  .pr-go{ justify-content:center; padding:15px 22px; margin-top:8px; }
}

/* ----------------------------------------------------------
   LEGACY · old hero layout (.pr-badge, .pr-book, .pr-quick ...)
   LEGACY: no matching classes in the current our-process.html. Kept in case it is needed again; check, then remove.
   Exception: the "brand marquee lives inside the hero notch" part is used by SECTION 1.
   ---------------------------------------------------------- */

/* =========================================================
   HERO · layout taken from the reference design
   badge tile · big 2-line title · planner bar · quick links (all in the dark left "lobe")
   photo on the right with a 3-card carousel (previous card peeking, next card cropped by the edge)
   white notch cuts the bottom-right so the left lobe hangs lower · "book a call" card + logo tiles below
   ========================================================= */
.pr-hero{ padding:150px 6% 40px; border-radius:0 0 0 56px; }
.pr-photo{ position:absolute; z-index:0; top:0; right:0; bottom:0; width:58%; background:linear-gradient(90deg,#1B0B34 0%,rgba(27,11,52,.45) 42%,rgba(27,11,52,.6)),url("https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=1400&q=60") center/cover; -webkit-mask-image:linear-gradient(90deg,transparent,#000 32%); mask-image:linear-gradient(90deg,transparent,#000 32%); }
.pr-notch{ position:absolute; z-index:2; right:0; bottom:0; width:53%; height:64px; background:#fff; border-top-left-radius:44px; }
.pr-notch::before{ content:""; position:absolute; left:-44px; bottom:0; width:44px; height:44px; background:radial-gradient(circle at 0 0,transparent 43.5px,#fff 44.5px); }
.pr-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:end; gap:40px; }

/* badge tile */
.pr-badge{ display:inline-flex; align-items:center; gap:12px; margin-bottom:22px; padding:8px 20px 8px 8px; border-radius:18px; background:linear-gradient(135deg,#7C3AD6,#490B6A); box-shadow:0 14px 30px -12px rgba(124,58,214,.8); color:#fff; font:700 12px var(--font-body); letter-spacing:.16em; }
.pr-badge-ico{ position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.16); font-size:24px; }
.pr-badge-ico em{ position:absolute; top:-5px; right:-5px; width:15px; height:15px; border-radius:50%; background:#FF9A3C; }
.pr-hero h1{ margin:0 0 16px; font-size:clamp(30px,3.6vw,52px); line-height:1.1; letter-spacing:-.01em; text-transform:none; }
.pr-hero-copy p{ max-width:44ch; margin-bottom:28px; font-size:14.5px; line-height:1.7; }

/* planner bar (the reference's search bar) */
.pr-plan{ max-width:540px; grid-template-columns:1fr 1fr auto; gap:0; padding:9px; border-radius:16px; }
.pr-f{ flex-direction:row; align-items:center; gap:10px; padding:4px 16px; }
.pr-f > .ph-bold{ flex:none; font-size:22px; color:var(--coral); }
.pr-f-in{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.pr-go{ padding:0 26px; border-radius:11px; background:linear-gradient(135deg,#7C3AD6,#490B6A); }
.pr-go:hover{ box-shadow:0 12px 24px -10px rgba(124,58,214,.8); }
.pr-quick{ gap:8px 28px; margin-top:20px; }

/* right side: carousel bleeds to the screen edge, call text sits bottom right */
.pr-right{ min-width:0; margin-bottom:84px; display:flex; flex-direction:column; align-items:flex-end; gap:22px; }
.pr-stages{ align-self:stretch; margin-right:calc(-1 * max(6vw,(100vw - 1240px) / 2)); padding:78px 0 0 108px; gap:16px; -webkit-mask-image:none; mask-image:none; scroll-behavior:auto; }
.pr-stages::after{ content:""; flex:none; width:60%; }
.pr-stage,.pr-stage.is-up{ width:270px; min-height:220px; gap:8px; padding:22px; border-radius:20px; background:rgba(22,18,40,.62); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.pr-stage:not(.is-up){ opacity:.8; }
.pr-stage.is-up{ opacity:1; background:rgba(34,28,58,.78); border-color:rgba(255,255,255,.28); }
.pr-stage:not(.is-up):hover{ background:rgba(34,28,58,.7); opacity:1; }
.pr-stage-ico{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(246,166,193,.22); color:#F6A6C1; font-size:22px; }
.pr-stage.is-up .pr-stage-ico{ background:var(--coral); color:#fff; }
.pr-stage small{ position:absolute; top:24px; right:22px; font:600 10.5px var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.pr-stage b{ margin-top:auto; font:800 24px var(--font-display); color:#fff; }
.pr-stage.is-up::before{ left:-14px; top:-62px; max-width:190px; padding:12px 18px; border-radius:14px; box-shadow:none; outline:1.5px solid rgba(255,255,255,.9); outline-offset:6px; }
.pr-call{ max-width:300px; text-align:left; }
.pr-est{ min-height:0; margin:0 0 8px; font:600 13px/1.5 var(--font-body); color:#fff; }
.pr-call p{ margin:0; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.78); }
.pr-call a{ color:#B8F26B; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* strip under the hero: "book a call" card + logo tiles */
.pr-stats{ padding:20px 6% 50px; }
.pr-stats-in{ max-width:1240px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px 28px; align-items:center; }
.pr-book{ display:flex; align-items:center; gap:14px; padding:12px 14px 12px 12px; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:0 16px 32px -22px rgba(60,20,90,.45); }
.pr-book-ico{ flex:none; width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#DB577B,#8F306F); color:#fff; font-size:26px; }
.pr-book-t{ display:flex; flex-direction:column; gap:1px; }
.pr-book-t small{ font:600 11px var(--font-body); color:var(--text-soft); }
.pr-book-t b{ font:800 20px var(--font-display); color:var(--ink); }
.pr-book-t em{ font:500 11px var(--font-body); font-style:normal; color:var(--text-soft); }
.pr-book-btn{ margin-left:8px; padding:9px 16px; border-radius:99px; background:var(--coral); color:#fff; font:700 12px var(--font-body); text-decoration:none; white-space:nowrap; transition:transform .3s var(--ease); }
.pr-book-btn:hover{ transform:translateY(-2px); }
.pr-trust-label{ margin:0 0 10px; text-align:left; font-size:12.5px; }

@media (max-width:900px){
  .pr-hero{ padding:110px 6% 56px; border-radius:0 0 48px 48px; }
  .pr-notch{ display:none; }
  .pr-photo{ width:100%; opacity:.5; -webkit-mask-image:none; mask-image:none; }
  .pr-hero-grid{ gap:28px; }
  .pr-right{ margin-bottom:0; align-items:stretch; }
  .pr-stages{ margin-right:calc(-1 * 6vw); padding:74px 0 0 14px; }
  .pr-stages::after{ width:20px; }
  .pr-stage,.pr-stage.is-up{ width:236px; }
  .pr-call{ max-width:none; }
  .pr-stats-in{ grid-template-columns:1fr; }
  .pr-book{ justify-self:start; }
}
@media (max-width:560px){ .pr-plan{ grid-template-columns:1fr; } .pr-f{ padding:10px 14px; } }

/* ----------------------------------------------------------
   SECTION 1 · logo marquee inside the hero notch (.hx-notch .pr-trust .pr-marq) · IN USE
   ---------------------------------------------------------- */

/* ---- brand marquee lives inside the hero notch ---- */
.pr-hero{ --notch-h:178px; }
.pr-notch{ height:var(--notch-h); display:flex; flex-direction:column; justify-content:center; min-width:0; padding:0 0 0 36px; }
.pr-notch .pr-trust{ min-width:0; }
.pr-notch .pr-trust-label{ margin:0 0 16px; text-align:left; font:500 14px/1.4 var(--font-body); color:var(--text-soft); }
.pr-notch .pr-marq{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 88%,transparent); }
.pr-right{ margin-bottom:calc(var(--notch-h) + 20px); }

@media (max-width:900px){
  .pr-hero{ --notch-h:auto; }
  .pr-notch{ display:flex; position:relative; right:auto; bottom:auto; width:auto; height:auto; margin:32px -6% -56px; padding:28px 0 30px 6%; border-radius:32px 32px 0 0; }
  .pr-notch::before{ display:none; }
  .pr-right{ margin-bottom:0; }
}

/* hero copy: tag, heading and paragraph start level with the top of the stage cards; planner + quick links stay at the bottom */
@media (min-width:901px){
  .pr-hero-grid{ align-items:stretch; }
  .pr-hero-copy{ display:flex; flex-direction:column; padding-top:78px; }
  .pr-hero-copy .pr-badge{ align-self:flex-start; }
  .pr-hero-copy .pr-plan{ margin-top:auto; }
}

/* ---- compact hero (desktop) ---- */
@media (min-width:901px){
  .pr-hero{ --notch-h:144px; padding:124px 6% 30px; }
  .pr-right{ gap:12px; margin-bottom:calc(var(--notch-h) + 14px); }
  .pr-stage,.pr-stage.is-up{ min-height:184px; padding:20px; }
  .pr-stages{ padding-top:74px; }
  .pr-hero-copy{ padding-top:74px; }
  .pr-hero-copy .pr-badge{ margin-bottom:16px; }
  .pr-hero h1{ margin-bottom:12px; }
  .pr-hero-copy p{ margin-bottom:22px; }
  .pr-quick{ margin-top:16px; }
  .pr-notch .pr-trust-label{ margin-bottom:12px; font-size:13.5px; }
  .pr-notch .pr-marq-set img{ padding:14px 26px; border-radius:18px; }
}


/* ---- hero photo: two stacked layers that cross-fade when the stage changes ---- */
.pr-photo{ background:none; }
.pr-ph{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; background:linear-gradient(90deg,#1B0B34 0%,rgba(27,11,52,.45) 42%,rgba(27,11,52,.6)),var(--img,none) center/cover; }
.pr-ph.is-on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .pr-ph{ transition:none; } }

/* ---- hero fills the first screen (desktop); content stays anchored to the bottom next to the notch ---- */
@media (min-width:901px){
  .pr-hero{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; }
  .pr-hero-grid{ width:100%; flex:1 1 auto; }
  .pr-hero-copy .eyebrow{ align-self:flex-start; }
}


/* ----------------------------------------------------------
   SECTION 4 · OUR PROCESS · base block (stepper: .wd-process.pr-flow, .wds-)
   Rail (.wds-rail), preview device (.wds-dev), text panes (.wds-pane), promise tiles (.wd-run), footer CTA (.wd-process-foot).
   Originally dark; the light override is in the last block of the file.
   ---------------------------------------------------------- */

/* =========================================================
   WALKTHROUGH (the "Our process" stepper, moved here from the Web Design page)
   ========================================================= */
.wd-head{ position:relative; z-index:1; max-width:1180px; margin:0 auto 34px; }
.wd-head .section-title{ margin:0 0 12px; }
.wd-head.on-dark .section-title{ color:#fff; }
.wd-head.on-dark .section-lede{ color:rgba(255,255,255,.65); }
.wd-solid{ background:var(--brand-gradient); color:#fff; box-shadow:0 12px 28px -10px rgba(219,87,123,.55); }
.wd-solid:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -10px rgba(219,87,123,.7); }
.wd-process{ position:relative; padding:90px 6%; border-radius:60px; background:radial-gradient(45% 50% at 90% 0%,rgba(124,58,214,.35),transparent 70%),radial-gradient(40% 50% at 5% 100%,rgba(219,87,123,.28),transparent 70%),var(--ink); overflow:clip; }
.wd-process::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1.2px,transparent 1.2px); background-size:26px 26px; pointer-events:none; }
.wd-process-head{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:end; margin-bottom:40px; }
.wd-process-head .section-lede{ max-width:46ch; margin:0; }
.wd-process-head em{ font-style:normal; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wd-run{ position:relative; z-index:1; max-width:1180px; margin:22px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.wd-run li{ display:flex; flex-direction:column; gap:6px; padding:22px 20px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.04); color:rgba(255,255,255,.7); font-size:13.5px; line-height:1.55; }
.wd-run .ph-bold{ width:42px; height:42px; display:grid; place-items:center; margin-bottom:6px; border-radius:12px; background:var(--brand-gradient); color:#fff; font-size:20px; }
.wd-run b{ font:700 15px var(--font-display); color:#fff; }
.wds{ --nw:84px; position:relative; z-index:1; max-width:1080px; margin:0 auto; }
.wds-rail{ display:flex; align-items:flex-start; gap:12px; margin-bottom:22px; }
.wds-ar{ flex:none; display:grid; place-items:center; width:40px; height:40px; margin-top:-2px; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:16px; cursor:pointer; transition:background .25s, border-color .25s, opacity .25s; }
.wds-ar:not(:disabled):hover{ background:var(--brand-gradient); border-color:transparent; }
.wds-ar:disabled{ opacity:.35; cursor:default; }
.wds-ar:focus-visible,
.wds-nd:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.wds-rt{ position:relative; flex:1; min-width:0; }
.wds-rt::before,
.wds-rf{ content:""; position:absolute; left:calc(var(--nw)/2); top:13px; height:3px; border-radius:3px; }
.wds-rt::before{ right:calc(var(--nw)/2); background:rgba(255,255,255,.16); }
.wds-rf{ width:calc((100% - var(--nw))*var(--p,0)); background:var(--brand-gradient); transition:width .45s var(--ease); }
.wds-nodes{ position:relative; display:flex; justify-content:space-between; margin:0; padding:0; list-style:none; }
.wds-nd{ display:grid; justify-items:center; gap:6px; width:var(--nw); padding:0; border:0; background:none; color:rgba(255,255,255,.7); font-family:var(--font-body); cursor:pointer; }
.wds-n{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#3a2447; font:700 13px var(--font-display); color:#fff; transition:background .3s, transform .3s var(--ease); }
.wds-nd:hover .wds-n{ transform:scale(1.1); }
.wds-nl{ font:700 13px var(--font-display); text-align:center; line-height:1.2; }
.wds-nl small{ display:block; margin-top:2px; font:600 10.5px var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.wds-nd[aria-current="step"]{ color:#fff; }
.wds-nd[aria-current="step"] .wds-n{ background:#fff; color:#7a2a8c; }
.wds-nd.is-done .wds-n{ background:var(--brand-gradient); font-size:0; }
.wds-nd.is-done .wds-n::before{ content:"\2713"; font:700 14px var(--font-body); color:#fff; }
.wds-n{ position:relative; }
.wds.is-auto .wds-nd[aria-current="step"] .wds-n::after{ content:""; position:absolute; inset:-5px; border-radius:50%; background:conic-gradient(var(--coral) calc(var(--t,0)*360deg), rgba(255,255,255,.2) 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); }
.wds-ctl{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }
.wds-play{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid rgba(255,255,255,.22); border-radius:99px; background:rgba(255,255,255,.08); color:#fff; font:700 12.5px var(--font-body); cursor:pointer; transition:background .25s, border-color .25s; }
.wds-play:hover{ background:var(--brand-gradient); border-color:transparent; }
.wds-play:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.wds-hint{ font-size:12px; color:rgba(255,255,255,.55); }
.wds-main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:30px; align-items:start; }
.wds-body{ display:grid; }
.wds-pane{ grid-area:1/1; }
.wds-pane[hidden]{ display:block; visibility:hidden; }
.wds-pane h3{ margin:0 0 6px; font:700 20px/1.25 var(--font-display); color:#fff; }
.wds-pane h3 small{ margin-left:10px; font:700 12px var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--coral); }
.wds-lede{ margin:0 0 14px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.78); }
.wds-lb{ margin:0 0 7px; font:700 12px var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.wds-lb-you{ color:#f6a623; }
.wds-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0; list-style:none; }
.wds-chips li{ padding:5px 12px; border-radius:99px; background:rgba(255,255,255,.1); font-size:13px; line-height:1.4; color:#fff; }
.wds-you li{ background:rgba(246,166,35,.18); border:1px solid rgba(246,166,35,.4); }
.wds-get{ margin:0; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.08); font-size:14px; line-height:1.5; color:#fff; }
.wds-dev{ border-radius:14px; background:#f6f3f8; color:#2a1633; overflow:hidden; box-shadow:0 24px 50px -28px rgba(0,0,0,.8); }
.wds-bar{ display:flex; align-items:center; gap:6px; padding:8px 12px; background:#e9e3ee; font:500 11.5px var(--font-body); }
.wds-bar i{ width:8px; height:8px; border-radius:50%; background:#c9bfd1; }
.wds-bar span{ flex:1; margin-left:6px; padding:2px 10px; border-radius:99px; background:#fff; }
.wds-bar b{ padding:2px 10px; border-radius:99px; background:var(--brand-gradient); color:#fff; font:700 10.5px var(--font-body); }
.wds-scr{ position:relative; height:256px; }
.wds-ly{ position:absolute; inset:0; padding:16px; opacity:0; visibility:hidden; transform:translateY(8px) scale(.98); transition:opacity .4s, transform .4s var(--ease), visibility 0s .4s; }
.wds-ly.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.wds-b{ padding:6px 13px; border:1.5px solid #8f306f; border-radius:99px; background:#fff; color:#2a1633; font:600 12px var(--font-body); cursor:pointer; transition:background .2s, color .2s; }
.wds-b:hover{ background:#f3e3ee; }
.wds-b[aria-pressed="true"]{ background:#8f306f; color:#fff; }
.wds-b:focus-visible,
.wds-sw:focus-visible{ outline:2px solid #8f306f; outline-offset:2px; }
.wds-doc h5{ margin:0 0 6px; font:700 15px var(--font-display); }
.wds-q{ margin:0 0 8px; font:600 12.5px var(--font-body); color:#6b5876; }
.wds-opts{ display:flex; flex-wrap:wrap; gap:6px; }
.wds-goal{ margin:12px 0 8px; padding:9px 11px; border-radius:10px; background:#fff3dc; font:600 12.5px var(--font-body); }
.wds-line{ display:block; height:8px; margin:9px 0; border-radius:4px; background:#e2dbe8; }
.wds-map{ display:grid; justify-items:center; gap:20px; padding-top:6px; }
.wds-map .r{ padding:7px 16px; border-radius:10px; background:#8f306f; color:#fff; font:600 12.5px var(--font-body); }
.wds-pgs{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.wds-pgs::before{ content:""; position:absolute; left:12%; right:12%; top:-11px; border-top:1.5px solid #8f306f; }
.wds-pg[aria-pressed="false"]{ border-style:dashed; border-color:#c9bfd1; color:#9b8aa6; }
.wds-cap{ margin:0; font:500 11.5px var(--font-body); color:#6b5876; }
.wds-cap b{ color:#8f306f; }
.wds-site{ border-radius:10px; background:#fff; box-shadow:0 8px 24px -12px rgba(60,20,70,.4); overflow:hidden; }
.wds-sn{ display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:10.5px; }
.wds-sn b{ flex:1; color:var(--k1,#8f306f); }
.wds-sn i{ width:24px; height:5px; border-radius:3px; background:#e2dbe8; }
.wds-sh{ padding:14px 12px; background:linear-gradient(120deg,var(--k1,#8f306f),var(--k2,#db577b)); color:#fff; transition:background .4s; }
.wds-sh h6{ margin:0 0 8px; font:700 15px/1.2 var(--font-display); }
.wds-sb{ display:inline-block; padding:4px 11px; border-radius:99px; background:#fff; color:var(--k1,#8f306f); font:600 10.5px var(--font-body); }
.wds-sc{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:9px; }
.wds-sc i{ height:30px; border-radius:7px; background:#efe9f3; }
.wds-sws{ display:flex; align-items:center; gap:8px; margin-top:12px; font:600 12px var(--font-body); color:#6b5876; }
.wds-sw{ width:24px; height:24px; padding:0; border:2px solid #fff; border-radius:50%; background:linear-gradient(135deg,var(--a),var(--b)); box-shadow:0 0 0 1px #c9bfd1; cursor:pointer; }
.wds-sw[aria-pressed="true"]{ box-shadow:0 0 0 2.5px #2a1633; }
.wds-vt,
.wds-dvs{ display:flex; gap:6px; margin-bottom:10px; }
.wds-code{ padding:14px 16px; border-radius:10px; background:#1a0a23; color:#f3d9ff; font:12.5px/1.85 ui-monospace,Menlo,Consolas,monospace; white-space:pre; overflow:hidden; }
.wds-code span{ display:block; }
.wds-build.is-on[data-v="code"] .wds-code span{ animation:wds-in .4s both; animation-delay:calc(var(--d)*100ms); }
.wds-build[data-v="live"] .wds-code,
.wds-build[data-v="code"] .wds-prev{ display:none; }
.wds-livesite{ width:100%; margin:0 auto; transition:width .4s var(--ease); }
.wds-livesite.is-phone{ width:46%; }
.wds-live{ position:absolute; right:14px; top:14px; padding:3px 11px; border-radius:99px; background:#1f9d6b; color:#fff; font:600 11.5px var(--font-body); }
.wds-dvs{ margin-bottom:10px; }
.wds-cur{ position:absolute; left:0; top:0; z-index:5; width:18px; height:18px; margin:-9px 0 0 -9px; border:2px solid #fff; border-radius:50%; background:rgba(42,22,51,.88); box-shadow:0 4px 12px rgba(0,0,0,.35); opacity:0; pointer-events:none; transform:translate(var(--cx,230px),var(--cy,220px)); transition:transform .75s var(--ease), opacity .3s; }
.wds-cur.on{ opacity:1; }
.wds-cur::after{ content:""; position:absolute; inset:-9px; border:2px solid #db577b; border-radius:50%; opacity:0; }
.wds-cur.is-press::after{ animation:wds-rip .45s ease-out; }
.wds-chk{ display:grid; gap:5px; margin-top:10px; }
.wds-chk span{ padding:5px 11px; border-radius:9px; background:#fff; font:600 12px var(--font-body); }
.wds-chk span::before{ content:"\2713"; margin-right:8px; color:#1f9d6b; }
@media (max-width:860px){
  .wds{ --nw:52px; }
  .wds-main{ grid-template-columns:1fr; gap:18px; }
  .wds-rail{ gap:8px; }
  .wds-ar{ width:34px; height:34px; font-size:14px; }
  .wds-body{ display:block; }
  .wds-pane[hidden]{ display:none; }
  .wds-nl{ font-size:11.5px; }
  .wds-nl small{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .wds-ly,
.wds-n,
.wds-rf,
.wds-ar,
.wds-livesite,
.wds-sh{ transition:none; }
  .wds-build.is-on .wds-code span{ animation:none; }
  .wds-cur{ display:none; }
}
.wd-weeks{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:16px 0 14px; }
.wd-weeks span{ position:relative; padding-top:12px; font:600 11px var(--font-body); letter-spacing:.08em; text-transform:uppercase; text-align:center; color:rgba(255,255,255,.5); transition:color .3s; }
.wd-weeks span::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; border-radius:99px; background:rgba(255,255,255,.14); transition:background .3s; }
.wd-weeks span.is-on{ color:#fff; }
.wd-weeks span.is-on::before{ background:var(--brand-gradient); }
.wd-process-note{ position:relative; z-index:1; max-width:1180px; margin:22px auto 0; font-size:13px; color:rgba(255,255,255,.55); }
.wd-process-cta{ position:relative; z-index:1; margin-top:26px; text-align:center; }
@media (max-width:900px){
  .wd-process{ padding:60px 5%; border-radius:40px; }
  .wd-process-head{ grid-template-columns:1fr; gap:14px; }
  .wd-run{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .wd-run{ grid-template-columns:1fr; }
  .wd-process-cta .btn{ width:100%; justify-content:center; }
}
.wd-head .eyebrow{ margin-bottom:14px; }
.wd-process{ padding:56px 6% 50px; border-radius:48px; }
.wd-process-head{ display:block; max-width:760px; margin:0 auto 24px; text-align:center; }
.wd-process-head .eyebrow{ justify-content:center; margin-bottom:10px; }
.wd-process-head .section-title{ margin:0 0 10px; font-family:var(--font-display); font-size:clamp(26px,3vw,38px); line-height:1.15; color:#fff; }
.wd-process-head .section-lede{ max-width:62ch; margin:0 auto; font-size:clamp(14px,1.1vw,15.5px); line-height:1.6; color:rgba(255,255,255,.65); }
.wd-run{ margin-top:14px; gap:12px; }
.wd-run li{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:2px; align-items:start; padding:14px 16px; border-radius:16px; font-size:12.5px; line-height:1.45; }
.wd-run .ph-bold{ grid-row:1 / span 2; width:34px; height:34px; margin:0; border-radius:10px; font-size:17px; }
.wd-run b{ font-size:14px; align-self:end; }
.wd-run span{ grid-column:2; }
.wd-process-note{ margin-top:14px; font-size:12.5px; }
.wd-process-cta{ margin-top:16px; }
@media (max-width:900px){
  .wd-process{ padding:44px 5% 40px; border-radius:36px; }
  .wd-run{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .wd-run{ grid-template-columns:1fr; }
}
.wd-process .wds-cols{ display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; margin:12px 0 10px; }
.wd-process .wds-cols .wds-chips{ margin-bottom:0; }
.wd-process .wds-pane .wds-lede{ margin-bottom:0; }
.wd-process .wd-weeks{ display:none; }
.wd-process .wd-run{ margin-top:16px; gap:10px; }
.wd-process .wd-run li{ align-items:center; padding:10px 14px; border-radius:14px; }
.wd-process .wd-run .ph-bold{ grid-row:auto; width:30px; height:30px; font-size:16px; border-radius:9px; }
.wd-process .wd-run b{ align-self:center; font-size:13.5px; }
.wd-process-foot{ position:relative; z-index:1; max-width:1180px; margin:14px auto 0; display:flex; align-items:center; justify-content:space-between; gap:14px 28px; flex-wrap:wrap; }
.wd-process-foot .wd-process-note{ flex:1 1 320px; max-width:none; margin:0; }
.wd-process-foot .wd-process-cta{ margin:0; }
@media (max-width:700px){
  .wd-process .wds-cols{ grid-template-columns:1fr; }
  .wd-process-foot{ flex-direction:column; align-items:stretch; text-align:center; }
}
@keyframes wds-in{ from{ opacity:0; transform:translateX(-8px); } }
@keyframes wds-rip{ from{ opacity:.9; transform:scale(.5); } to{ opacity:0; transform:scale(1.6); } }
/* ----------------------------------------------------------
   SECTION 3/4 JOIN · section 4 tucked under section 3 (the light override removes this overlap)
   ---------------------------------------------------------- */

/* sits straight under the plan section: tuck its top behind the plan section's rounded bottom corners */
.pr-process{ z-index:1; }
.wd-process.pr-flow{ margin-top:-60px; padding-top:116px; border-radius:0 0 60px 60px; }
@media (max-width:900px){ .wd-process.pr-flow{ margin-top:-40px; padding-top:84px; border-radius:0 0 40px 40px; } }
/* ----------------------------------------------------------
   SECTION 2 · HOW WE RUN · compact, fits one screen on desktop
   ---------------------------------------------------------- */

/* ---- HOW WE WORK: compact, fits one screen on desktop like the hero ---- */
@media (min-width:901px){
  .pr-run{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,6vh,60px) 6%; }
  .pr-run .pr-head{ width:100%; margin-bottom:clamp(16px,2.6vh,26px); }
  .pr-run .pr-head .eyebrow{ margin-bottom:10px; }
  .pr-run .section-title{ margin-bottom:8px; font-size:clamp(26px,2.8vw,38px); }
  .pr-run .section-lede{ font-size:clamp(14px,1.05vw,15.5px); line-height:1.55; }
  .pr-run .pr-know{ display:none; }
  .pr-run-grid{ width:100%; max-width:1040px; gap:12px; }
  .pr-run-col,.pr-run-col > ul{ gap:12px; }
  .pr-rc{ min-height:0; padding:20px 22px 0; border-radius:18px; }
  .pr-rc-ico{ position:absolute; top:18px; right:20px; margin:0; width:34px; height:34px; font-size:17px; }
  .pr-rc h3{ margin:0 0 6px; padding-right:48px; font-size:17px; }
  .pr-rc > p{ max-width:none; font-size:13px; line-height:1.5; }
  .pr-v{ zoom:.7; min-height:120px; margin-top:12px; }
}

/* ----------------------------------------------------------
   SECTION 2 · HOW WE RUN · bento cards with auto-playing mock-ups (classes start with hw-)
   Cards: .hw-a Sign-off, .hw-b Review rounds, .hw-d Point of contact, .hw-e WhatsApp updates.
   ---------------------------------------------------------- */

/* ---- HOW WE WORK: bento with auto-playing interface mock-ups (classes start with hw-) ---- */
.hw-bento button{font-family:inherit;cursor:pointer}
.hw-bento{display:grid;grid-template-columns:1.12fr 1fr 1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:14px;width:100%;max-width:1120px;margin:0 auto;position:relative;z-index:1;height:min(540px,calc(100svh - 250px));min-height:480px}
.hw-c{position:relative;overflow:hidden;border-radius:26px;padding:24px 26px;background:var(--bg)}
.hw-c h3{margin:0 0 4px;font:700 clamp(19px,1.8vw,24px)/1.2 var(--font-display);color:var(--h)}
.hw-c>p{margin:0;max-width:34ch;font-size:13px;line-height:1.5;color:var(--t)}
.hw-a{grid-row:1/3;--bg:#CDB8F2;--h:#2a1550;--t:#4a3a70}
.hw-b{grid-column:2/4;--bg:#F6A1BF;--h:#4a0f2c;--t:#7a3552}
.hw-d{--bg:#BFDD94;--h:#1f3a10;--t:#3f5d2a}
.hw-e{--bg:#FCEFD6;--h:#4a3510;--t:#7a6540}
.hw-a>p{position:absolute;left:26px;bottom:22px;right:26px}
.hw-ui{font-family:var(--font-body);color:#241130}
.hw-btn{border:0;border-radius:10px;padding:8px 14px;font:600 12px var(--font-body)}
.hw-btn:focus-visible,.hw-row:focus-visible,.hw-msg:focus-visible{outline:2px solid #241130;outline-offset:2px}
.hw-panel{position:absolute;left:22px;right:22px;top:76px;bottom:92px;display:flex;flex-direction:column;gap:12px}
.hw-site{flex:1;min-height:0;border-radius:16px;background:#fff;box-shadow:0 22px 40px -20px rgba(42,21,80,.55);overflow:hidden;display:flex;flex-direction:column}
.hw-sbar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#efeaf5;font-size:11px;color:#6b5876}
.hw-sbar i{width:8px;height:8px;border-radius:50%;background:#cfc4da}
.hw-sbar span{flex:1;margin-left:6px;padding:2px 10px;border-radius:99px;background:#fff}
.hw-sbar b{padding:2px 10px;border-radius:99px;background:linear-gradient(90deg,#8F306F,#DB577B);color:#fff;font-size:10.5px}
.hw-sbody{flex:1;min-height:0;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.hw-snav{display:flex;align-items:center;gap:8px;font-size:11px}
.hw-snav b{flex:1;color:#8F306F}
.hw-snav u{width:26px;height:5px;border-radius:3px;background:#e6dfee}
.hw-shero{flex:1;min-height:60px;border-radius:12px;padding:14px;color:#fff;background:linear-gradient(120deg,var(--k1,#8F306F),var(--k2,#DB577B));transition:background .6s;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}
.hw-shero h5{margin:0;font:700 clamp(14px,1.3vw,17px)/1.2 var(--font-display)}
.hw-shero span{padding:4px 12px;border-radius:99px;background:#fff;color:#8F306F;font-size:11px;font-weight:600}
.hw-stiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.hw-stiles i{height:34px;border-radius:8px;background:#f1ecf5}
.hw-steps{position:relative;display:flex;justify-content:space-between;margin:0;padding:12px 14px 10px;list-style:none;border-radius:14px;background:#fff;box-shadow:0 14px 28px -18px rgba(42,21,80,.5)}
.hw-steps::before,.hw-steps .hw-ln{content:"";position:absolute;left:34px;right:34px;top:25px;height:3px;border-radius:3px;background:#e6dfee}
.hw-steps .hw-ln{right:auto;width:calc((100% - 68px)*var(--p,.5));background:linear-gradient(90deg,#8B5CF6,#DB577B);transition:width .6s}
.hw-steps li{position:relative;display:grid;justify-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#9a8aa8}
.hw-steps .hw-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e6dfee;color:#fff;font:700 12px var(--font-body);transition:background .4s,transform .4s}
.hw-steps li.hw-done .hw-dot{background:#8B5CF6}
.hw-steps li.hw-done .hw-dot::before{content:"\2713"}
.hw-steps li.hw-cur{color:#241130}
.hw-steps li.hw-cur .hw-dot{background:#fff;border:3px solid #8B5CF6;color:#8B5CF6;transform:scale(1.12)}
.hw-steps li.hw-cur .hw-dot::before{content:attr(data-n)}
.hw-acts{display:flex;gap:8px}
.hw-acts .hw-ghost{flex:1;background:rgba(255,255,255,.55);color:#2a1550}
.hw-acts .hw-solid{flex:1.3;background:#2a1550;color:#fff;transition:transform .2s,background .3s}
.hw-acts .hw-solid.hw-press{transform:scale(.94);background:#5b2bb8}
.hw-toast{position:absolute;left:50%;top:6px;transform:translate(-50%,-20px);padding:8px 14px;border-radius:99px;background:#1f9d6b;color:#fff;font:600 12px var(--font-body);opacity:0;transition:.4s;white-space:nowrap;z-index:3}
.hw-toast.hw-on{opacity:1;transform:translate(-50%,0)}
.hw-cur{position:absolute;z-index:4;left:0;top:0;width:22px;height:22px;pointer-events:none;transition:transform .8s cubic-bezier(.5,0,.2,1);filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.hw-b .hw-sheet{position:absolute;right:26px;top:22px;bottom:-30px;width:min(52%,430px);padding:14px;border-radius:20px 20px 0 0;background:#fff;box-shadow:0 26px 44px -22px rgba(74,15,44,.6);transform:rotate(2.5deg);transform-origin:bottom right}
.hw-sheet h4{margin:0 0 8px;font:700 14px var(--font-display)}
.hw-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;margin-bottom:6px;border:0;border-radius:12px;background:#faf5f8;text-align:left;font-size:12.5px;color:#241130;transition:background .3s,transform .3s,box-shadow .3s}
.hw-row b{display:block;font-weight:600}
.hw-row small{color:#8a6a7a;font-size:11px}
.hw-row .hw-st{margin-left:auto;padding:3px 9px;border-radius:99px;font:600 10.5px var(--font-body)}
.hw-st.hw-done{background:#E1F5EA;color:#157347}
.hw-st.hw-prog{background:#FFF0C2;color:#8A6A00}
.hw-st.hw-sch{background:#e9e3f7;color:#5b2bb8}
.hw-row.hw-sel{background:#fff;box-shadow:0 0 0 2px #DB577B,0 12px 24px -14px rgba(219,87,123,.7);transform:translateX(-6px)}
.hw-fb{margin:8px 0 10px;padding:10px 12px;border-radius:12px;background:#f3eefb;font-size:12px;line-height:1.45;color:#3b2a5e;min-height:56px;transition:opacity .25s}
.hw-sheet .hw-send{width:100%;background:#DB577B;color:#fff;padding:10px;border-radius:12px;transition:background .3s}
.hw-sheet .hw-send.hw-ok{background:#1f9d6b}
.hw-id{position:absolute;left:22px;right:22px;bottom:-24px;padding:14px;border-radius:20px 20px 0 0;background:#fff;box-shadow:0 22px 40px -22px rgba(31,58,16,.6);transform:rotate(-2deg)}
.hw-who{display:flex;gap:11px;align-items:center}
.hw-avs{position:relative;flex:none;width:46px;height:46px}
.hw-av{position:absolute;inset:0;border-radius:50%;background:linear-gradient(140deg,#7C3AD6,#490B6A);overflow:hidden;opacity:0;transform:scale(.7);transition:opacity .35s,transform .35s}
.hw-av.hw-show{opacity:1;transform:none}
.hw-a2{background:linear-gradient(140deg,#0f9d8a,#0b4f5a)}
.hw-a2::before{background:#d9a07c;box-shadow:inset 0 7px 0 #2b1a12}
.hw-a2::after{background:#ffd9a8}
.hw-nm{transition:opacity .25s,transform .25s}
.hw-nm.hw-sw{opacity:0;transform:translateX(6px)}
.hw-av::before{content:"";position:absolute;left:14px;top:8px;width:18px;height:19px;border-radius:50%;background:#F3C9A8}
.hw-av::after{content:"";position:absolute;left:7px;top:29px;width:32px;height:24px;border-radius:50% 50% 0 0;background:#fff;opacity:.92}
.hw-avs .hw-on{position:absolute;z-index:2;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:#2fbf71;border:2px solid #fff;animation:hw-pulse 2s infinite}
@keyframes hw-pulse{50%{box-shadow:0 0 0 5px rgba(47,191,113,.25)}}
.hw-who b{display:block;font:600 13.5px var(--font-body)}
.hw-who small{font-size:11px;color:#6b7a5e}
.hw-chat{position:relative;height:44px;margin:10px 0 8px}
.hw-chat>*{position:absolute;left:0;top:0;padding:8px 12px;border-radius:14px 14px 14px 4px;background:#eef6e3;font-size:12px;opacity:0}
.hw-typing{display:flex;gap:4px;padding:11px 14px;animation:hw-t1 7s infinite}
.hw-typing i{width:6px;height:6px;border-radius:50%;background:#7a9560;animation:hw-bounce 1s infinite}
.hw-typing i:nth-child(2){animation-delay:.15s}
.hw-typing i:nth-child(3){animation-delay:.3s}
.hw-said{animation:hw-t2 7s infinite}
@keyframes hw-t1{0%,4%{opacity:0}8%,34%{opacity:1}38%,100%{opacity:0}}
@keyframes hw-t2{0%,38%{opacity:0;transform:translateY(6px)}44%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes hw-bounce{40%{transform:translateY(-4px)}}
.hw-cta{display:flex;gap:7px}
.hw-cta .hw-btn{flex:1;background:#1f3a10;color:#fff;padding:8px}
.hw-cta .hw-btn+.hw-btn{background:#e4efd3;color:#1f3a10}
.hw-inbox{position:absolute;left:22px;right:22px;bottom:-24px;top:92px;padding:12px;border-radius:20px 20px 0 0;background:#fff;box-shadow:0 22px 40px -22px rgba(74,53,16,.5);overflow:hidden}
.hw-inbox h4{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font:700 13px var(--font-display)}
.hw-inbox h4 em{min-width:20px;padding:1px 7px;border-radius:99px;background:#25A06A;color:#fff;font:700 11px var(--font-body);text-align:center;font-style:normal}
.hw-msg{display:flex;align-items:center;gap:9px;width:100%;padding:8px 6px;border:0;border-bottom:1px solid #f1e8d6;background:none;text-align:left;font-size:12px;color:#241130;animation:hw-slide .5s both}
.hw-msg .hw-ic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#25A06A;color:#fff;font-size:15px}
.hw-msg b{display:block;font-weight:600;font-size:12px}
.hw-msg span{display:block;color:#7a6540;font-size:11.5px;line-height:1.3}
.hw-msg time{margin-left:auto;font-size:10px;color:#9a8a68;white-space:nowrap}
.hw-msg.hw-unread{background:#f3fbf6}
.hw-msg.hw-unread b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:#25A06A}
@keyframes hw-slide{from{opacity:0;transform:translateY(-14px)}}
@media (max-width:900px){
.hw-bento{grid-template-columns:1fr;grid-template-rows:none;height:auto;min-height:0}
.hw-a,.hw-b{grid-column:auto;grid-row:auto}
.hw-a{min-height:560px}
.hw-b{min-height:380px}
.hw-d,.hw-e{min-height:330px}
.hw-b .hw-sheet{position:relative;right:auto;top:auto;bottom:auto;width:100%;margin-top:16px;transform:none;border-radius:20px}
.hw-b>p{max-width:none}
}
@media (prefers-reduced-motion:reduce){.hw-bento *{animation:none!important;transition:none!important}.hw-chat .hw-said{opacity:1}}

.hw-av img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center top; }

/* ----------------------------------------------------------
   SECTION 2 · HOW WE RUN · 3D glass finish for the hw- cards
   ---------------------------------------------------------- */

/* ---- HOW WE WORK: premium 3D glass finish ---- */
.hw-bento{ grid-template-rows:minmax(0,1.06fr) minmax(0,1fr); height:min(580px,calc(100svh - 230px)); min-height:500px; }
.hw-bento .hw-c{ --glow:rgba(91,43,184,.7); border:1px solid rgba(255,255,255,.75); transform:perspective(900px) rotateX(calc(var(--ry,0)*1deg)) rotateY(calc(var(--rx,0)*1deg)) translateY(calc(var(--lift,0)*-4px)); transition:transform .3s ease-out,box-shadow .3s; will-change:transform;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -22px 40px -26px rgba(255,255,255,.55),0 34px 54px -28px var(--glow),0 12px 20px -14px rgba(36,17,48,.28); }
.hw-bento .hw-c::before{ content:""; position:absolute; z-index:6; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.55) 0,rgba(255,255,255,.12) 28%,transparent 46%); }
.hw-bento .hw-a{ --glow:rgba(91,43,184,.75); background:radial-gradient(70% 45% at 10% 0%,rgba(255,255,255,.7),transparent 65%),radial-gradient(60% 50% at 100% 100%,rgba(124,58,214,.5),transparent 66%),linear-gradient(150deg,#e0d1fa,#bfa5f3 58%,#a98aea); }
.hw-bento .hw-b{ --glow:rgba(219,87,123,.75); background:radial-gradient(60% 60% at 6% 0%,rgba(255,255,255,.7),transparent 65%),radial-gradient(50% 60% at 100% 100%,rgba(219,87,123,.5),transparent 66%),linear-gradient(150deg,#fcc1d6,#f7a0bf 58%,#f08bb0); }
.hw-bento .hw-d{ --glow:rgba(70,140,40,.7); background:radial-gradient(70% 60% at 8% 0%,rgba(255,255,255,.7),transparent 65%),radial-gradient(60% 55% at 100% 100%,rgba(60,150,70,.45),transparent 66%),linear-gradient(150deg,#d7edb4,#bddd8f 58%,#a6d071); }
.hw-bento .hw-e{ --glow:rgba(225,150,40,.65); background:radial-gradient(70% 60% at 8% 0%,rgba(255,255,255,.85),transparent 65%),radial-gradient(60% 55% at 100% 100%,rgba(245,175,70,.42),transparent 66%),linear-gradient(150deg,#fff7e6,#fcebc6 58%,#f8dca0); }
.hw-bento .hw-c h3{ text-shadow:0 1px 0 rgba(255,255,255,.55); }
/* frosted glass panels */
.hw-bento .hw-site,.hw-bento .hw-steps,.hw-bento .hw-sheet,.hw-bento .hw-id,.hw-bento .hw-inbox{ border:1px solid rgba(255,255,255,.9); background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.58)); -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5); box-shadow:inset 0 1.5px 0 #fff,0 28px 44px -22px var(--glow),0 10px 18px -12px rgba(36,17,48,.3); }
.hw-bento .hw-row{ background:rgba(255,255,255,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.hw-bento .hw-fb{ background:rgba(139,92,246,.1); }
/* glossy buttons */
.hw-bento .hw-acts .hw-solid{ background:linear-gradient(180deg,#4d2d8c,#2a1550); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 18px -8px rgba(42,21,80,.75); }
.hw-bento .hw-acts .hw-ghost{ background:rgba(255,255,255,.55); box-shadow:inset 0 1px 0 #fff,0 6px 12px -8px rgba(42,21,80,.4); }
.hw-bento .hw-sheet .hw-send{ background:linear-gradient(180deg,#ee6d92,#d34676); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 16px -8px rgba(211,70,118,.8); }
.hw-bento .hw-sheet .hw-send.hw-ok{ background:linear-gradient(180deg,#2fbf80,#1f9d6b); }
.hw-bento .hw-cta .hw-btn{ background:linear-gradient(180deg,#2f5a18,#1f3a10); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 14px -8px rgba(31,58,16,.8); }
.hw-bento .hw-cta .hw-btn+.hw-btn{ background:rgba(255,255,255,.7); color:#1f3a10; box-shadow:inset 0 1px 0 #fff,0 6px 12px -8px rgba(31,58,16,.5); }
@media (min-width:901px){
  /* panels drift a little against the card when it tilts */
  .hw-bento .hw-sheet{ transform:translate(calc(var(--px,0)*10px),calc(var(--py,0)*8px)) rotate(2.5deg); transition:transform .3s ease-out; }
  .hw-bento .hw-id{ transform:translate(calc(var(--px,0)*8px),calc(var(--py,0)*6px)) rotate(-1.5deg); transition:transform .3s ease-out; }
  .hw-bento .hw-panel{ transform:translate(calc(var(--px,0)*6px),calc(var(--py,0)*5px)); transition:transform .3s ease-out; }
  .hw-bento .hw-inbox{ transform:translate(calc(var(--px,0)*8px),calc(var(--py,0)*6px)); transition:transform .3s ease-out; }
}
/* fixes: text no longer runs under the sheet, contact card and inbox stay fully visible */
.hw-bento .hw-b>p{ max-width:min(30ch,38%); }
.hw-bento .hw-sheet{ bottom:-14px; padding:12px 14px; }
.hw-bento .hw-row{ padding:6px 10px; margin-bottom:4px; }
.hw-bento .hw-fb{ min-height:0; margin:6px 0 8px; padding:7px 10px; }
.hw-bento .hw-sheet .hw-send{ padding:8px; }
.hw-bento .hw-id{ bottom:14px; padding:12px; border-radius:18px; }
.hw-bento .hw-chat{ height:36px; margin:8px 0 8px; }
.hw-bento .hw-chat>*{ padding:7px 12px; }
.hw-bento .hw-inbox{ bottom:14px; border-radius:18px; }
@media (max-width:900px){ .hw-bento .hw-c{ transform:none; } .hw-bento .hw-b>p{ max-width:none; } .hw-bento .hw-sheet{ bottom:auto; } .hw-bento .hw-id,.hw-bento .hw-inbox{ bottom:14px; } }
@media (prefers-reduced-motion:reduce){ .hw-bento .hw-c{ transform:none; transition:none; } }

/* contact card: sits under the description in normal flow, so it can never cover the text */
.hw-bento .hw-d{ display:flex; flex-direction:column; }
.hw-bento .hw-d>p{ max-width:none; }
.hw-bento .hw-d .hw-id{ position:relative; left:auto; right:auto; bottom:auto; margin:auto 0 -8px; padding:10px 12px; }
.hw-bento .hw-d .hw-chat{ height:30px; margin:6px 0; }
.hw-bento .hw-d .hw-chat>*{ padding:5px 11px; }
.hw-bento .hw-d .hw-typing{ padding:9px 12px; }
.hw-bento .hw-d .hw-cta .hw-btn{ padding:6px; }

/* ----------------------------------------------------------
   SECTION 3 · THE PLAN · compact desktop sizing (fits one screen)
   ---------------------------------------------------------- */

/* ---- THE PLAN: compact, fits one screen on desktop like "How we work" ---- */
@media (min-width:901px){
  .pr-process{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,6vh,60px) 6%; }
  .pr-process-head{ width:100%; margin-bottom:clamp(14px,2.6vh,24px); gap:32px; }
  .pr-process-head .eyebrow{ margin-bottom:10px; }
  .pr-process .section-title{ margin-bottom:0; font-size:clamp(26px,2.8vw,38px); }
  .pr-process .section-lede{ font-size:clamp(13.5px,1vw,15px); line-height:1.5; }
  .pr-gantt{ width:100%; }
  .pr-ruler i{ padding:7px 0; font-size:10.5px; }
  .pr-lane{ min-height:70px; }
  .pr-lane-tag b{ font-size:9.5px; letter-spacing:.08em; }
  .pr-bar{ gap:6px; padding:9px 52px 9px 14px; }
  .pr-bar strong{ font-size:14px; line-height:1.25; }
  .pr-bar > .ph-bold{ width:38px; height:38px; font-size:17px; }
  .pr-note-t{ width:100%; margin-top:clamp(12px,2vh,18px); font-size:12.5px; }
}

/* ----------------------------------------------------------
   LEGACY · compact sizing for the old journey section
   LEGACY: no matching classes in the current our-process.html. Kept in case it is needed again; check, then remove.
   ---------------------------------------------------------- */

/* ---- THE JOURNEY: compact, fits one screen on desktop like "How we work" ---- */
@media (min-width:901px){
  .pr-journey{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,6vh,60px) 6%; }
  .pr-journey .pr-head{ width:100%; margin-bottom:clamp(12px,2vh,18px); }
  .pr-journey .pr-head .eyebrow{ margin-bottom:10px; }
  .pr-journey .section-title{ margin-bottom:6px; font-size:clamp(26px,2.8vw,38px); }
  .pr-journey .section-lede{ font-size:clamp(13.5px,1vw,15px); line-height:1.5; }
  .pr-svcs{ width:100%; margin-bottom:12px; }
  .pr-svcs button{ padding:8px 16px; font-size:13px; }
  .pr-group{ width:100%; }
  .pr-stepbar{ padding:2px 2px 10px; }
  .pr-st{ padding:6px 14px 6px 6px; font-size:12.5px; }
  .pr-st span{ width:22px; height:22px; font-size:11px; }
  .pr-pane{ padding:22px 28px; gap:30px; min-height:clamp(250px,36vh,300px); border-radius:20px; }
  .pr-wkl{ margin-bottom:6px; font-size:11px; }
  .pr-pane h3{ margin-bottom:8px; font-size:21px; }
  .pr-pane p{ font-size:14px; line-height:1.6; }
  .pr-chips{ margin-top:14px; gap:6px; }
  .pr-chips li{ padding:6px 11px; font-size:12.5px; }
  .pr-code pre{ min-height:140px; padding:12px 16px; font-size:12px; line-height:1.7; }
  .pr-code-bar{ padding:8px 12px; }
}

/* ----------------------------------------------------------
   SECTION 5 · WHY DUALSTAG · cards (classes start with pd-)
   Six cards: brief, code, phone first, speed, team, ownership. Hover animations at the end of this block.
   ---------------------------------------------------------- */

/* =========================================================
   WHY DUALSTAG · reference style: highlighted title word, "Reason" labels with arrows,
   grey cards that each hold a small illustrated UI (classes start with pd-)
   ========================================================= */
.pr-diff{ background:radial-gradient(rgba(143,48,111,.07) 1.2px,transparent 1.2px) 0 0/24px 24px,#fff; }
.pd-title{ margin-bottom:12px; }
.pd-hl{ position:relative; display:inline-block; padding:.02em .24em; margin:0 .04em; border-radius:4px; background:rgba(143,48,111,.12); color:var(--magenta); }
.pd-hl::before,.pd-hl::after{ content:""; position:absolute; width:9px; height:9px; border:2px solid var(--magenta); background:#fff; }
.pd-hl::before{ left:-5px; top:-5px; } .pd-hl::after{ right:-5px; bottom:-5px; }
.pd-grid{ position:relative; z-index:1; max-width:1180px; margin:40px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:30px 28px; }
.pd-item{ min-width:0; }
.pd-card{ height:100%; padding:10px 10px 22px; border-radius:24px; background:#F4F0F7; border:1px solid #ECE4F1; transition:transform .45s var(--ease,ease),box-shadow .45s; }
.pd-card:hover{ transform:translateY(-6px); box-shadow:0 26px 40px -28px rgba(60,20,90,.45); }
.pd-card h3{ margin:20px 14px 6px; font:700 17px var(--font-display); color:var(--ink); }
.pd-card > p{ margin:0 14px; font-size:13.5px; line-height:1.6; color:var(--text-soft); }
.pd-art{ position:relative; height:214px; overflow:hidden; border-radius:16px; background:radial-gradient(70% 80% at 85% 0%,rgba(219,87,123,.14),transparent 70%),radial-gradient(70% 80% at 0% 100%,rgba(124,58,214,.14),transparent 70%),#FBF8FD; }
.pd-ui{ position:absolute; background:#fff; border-radius:12px; box-shadow:0 14px 26px -16px rgba(60,20,90,.45),0 0 0 1px rgba(143,48,111,.06); font-family:var(--font-body); color:var(--ink); }
.pd-bub{ position:absolute; right:6%; bottom:14px; max-width:62%; padding:9px 13px; border-radius:14px 14px 4px 14px; background:var(--brand-gradient); color:#fff; font:600 11.5px/1.35 var(--font-body); box-shadow:0 10px 20px -10px rgba(143,48,111,.7); }
.pd-chip{ position:absolute; left:6%; bottom:14px; display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:99px; background:#fff; font:600 11px var(--font-body); color:var(--ink); box-shadow:0 8px 18px -10px rgba(60,20,90,.45); }
.pd-chip u{ width:8px; height:8px; border-radius:50%; background:#1f9d6b; box-shadow:0 0 0 3px rgba(31,157,107,.2); }
.pd-chip-r{ left:auto; right:6%; }
/* 1 · brief */
.pd-brief{ left:7%; right:15%; top:18px; display:flex; flex-direction:column; gap:7px; padding:12px 14px; font-size:11.5px; }
.pd-brief b{ margin-bottom:2px; font:700 12px var(--font-display); }
.pd-brief span{ display:flex; align-items:center; gap:9px; color:var(--text-soft); }
.pd-brief span::before{ content:""; flex:none; width:15px; height:15px; border-radius:50%; border:1.5px solid #cfc2d8; box-sizing:border-box; }
.pd-brief span.ok{ color:var(--ink); } .pd-brief span.ok::before{ border:0; background:var(--brand-gradient) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* 2 · code */
.pd-code{ position:absolute; left:7%; right:7%; top:18px; border-radius:12px; overflow:hidden; background:#1B0B34; box-shadow:0 14px 26px -14px rgba(27,11,52,.7); }
.pd-code .bar{ display:flex; align-items:center; gap:5px; padding:7px 11px; background:rgba(255,255,255,.08); }
.pd-code .bar i{ width:7px; height:7px; border-radius:50%; background:#D9CBDD; opacity:.7; }
.pd-code .bar em{ margin-left:8px; font:600 10.5px var(--font-body); font-style:normal; color:rgba(255,255,255,.65); }
.pd-code pre{ margin:0; padding:10px 14px 12px; font:500 11px/1.75 ui-monospace,Menlo,Consolas,monospace; color:#F6A6C1; overflow:hidden; }
.pd-files{ position:absolute; left:7%; bottom:14px; display:flex; gap:6px; }
.pd-files span{ padding:5px 10px; border-radius:8px; background:#fff; font:600 10.5px var(--font-body); color:var(--ink); box-shadow:0 8px 16px -10px rgba(60,20,90,.45); }
.pd-own{ position:absolute; right:7%; top:8px; padding:4px 11px; border-radius:99px; background:var(--coral); color:#fff; font:700 10.5px var(--font-body); transform:rotate(4deg); box-shadow:0 8px 16px -8px rgba(219,87,123,.8); }
/* 3 · phone first */
.pd-desk{ left:7%; top:22px; width:64%; height:132px; overflow:hidden; }
.pd-desk .tb{ display:flex; gap:4px; padding:7px 9px; background:#efeaf5; } .pd-desk .tb i{ width:6px; height:6px; border-radius:50%; background:#cfc4da; }
.pd-desk .hero,.pd-phone .hero{ margin:8px; height:42px; border-radius:8px; background:linear-gradient(120deg,#8F306F,#DB577B); }
.pd-desk .tl{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 8px; } .pd-desk .tl i{ height:26px; border-radius:6px; background:#f1ecf5; }
.pd-phone{ position:absolute; right:9%; bottom:-14px; width:78px; height:162px; padding:7px 4px; box-sizing:border-box; border:4px solid #241130; border-radius:20px; background:#fff; box-shadow:0 18px 28px -14px rgba(36,17,48,.6); }
.pd-phone .hero{ margin:10px 3px 7px; height:50px; } .pd-phone .tl{ display:grid; gap:6px; padding:0 3px; } .pd-phone .tl i{ height:20px; border-radius:6px; background:#f1ecf5; }
/* 4 · speed */
.pd-speed{ left:8%; right:8%; top:30px; display:flex; align-items:center; gap:18px; padding:16px 18px; }
.pd-speed .gauge{ flex:none; width:76px; height:76px; display:grid; place-items:center; border-radius:50%; --g:98; --n:98; counter-reset:n var(--n); background:conic-gradient(#1f9d6b 0 calc(var(--g)*1%),#e4eadf 0); position:relative; }
.pd-speed .gauge::before{ content:""; position:absolute; inset:7px; border-radius:50%; background:#fff; }
.pd-speed .gauge b{ position:relative; font:800 24px var(--font-display); color:#1f9d6b; }
.pd-speed .rows{ flex:1; min-width:0; display:grid; gap:4px; } .pd-speed small{ font-size:10.5px; color:var(--text-soft); } .pd-speed strong{ font:800 20px var(--font-display); line-height:1; }
.pd-speed i{ display:block; height:6px; border-radius:4px; background:#efe9f3; position:relative; } .pd-speed i::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:4px; background:var(--brand-gradient); }
/* 5 · team */
.pd-link{ position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#b9a6c6; stroke-width:1.6; stroke-dasharray:4 5; }
.pd-loc{ width:64%; display:flex; align-items:center; gap:11px; padding:11px 13px; }
.pd-loc.a{ left:7%; top:22px; } .pd-loc.b{ right:7%; bottom:22px; }
.pd-loc .av{ flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:var(--brand-gradient); color:#fff; font:800 15px var(--font-display); } .pd-loc .av.k{ background:linear-gradient(135deg,#7C3AD6,#490B6A); }
.pd-loc b{ display:block; font:700 12.5px var(--font-body); } .pd-loc small{ font-size:11px; color:var(--text-soft); }
/* 6 · ownership */
.pd-track{ left:10%; right:10%; top:16px; display:flex; flex-direction:column; gap:5px; padding:12px 14px; }
.pd-track span{ display:flex; align-items:center; gap:10px; padding:5px 8px; border-radius:8px; font:600 12px var(--font-body); color:var(--text-soft); }
.pd-track span::before{ content:""; flex:none; width:16px; height:16px; border-radius:50%; background:#8B5CF6 center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pd-track span.now{ background:rgba(219,87,123,.1); color:var(--ink); font-weight:700; } .pd-track span.now::before{ background:#fff; border:3px solid var(--coral); box-sizing:border-box; }
.pd-track em{ margin-left:auto; padding:2px 9px; border-radius:99px; background:var(--coral); color:#fff; font:700 10px var(--font-body); font-style:normal; }
@media (max-width:1000px){ .pd-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .pd-grid{ grid-template-columns:1fr; gap:22px; margin-top:32px; } .pd-card{ height:auto; } }
@media (prefers-reduced-motion:reduce){ .pd-card{ transition:none; } .pd-card:hover{ transform:none; } }

/* ---- hover: each illustration comes alive ---- */
@property --g{ syntax:'<number>'; inherits:true; initial-value:98; }
@property --n{ syntax:'<integer>'; inherits:true; initial-value:98; }
.pd-speed .gauge b::before{ content:counter(n); }
.pd-brief{ --chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pd-art .hero{ position:relative; overflow:hidden; }
.pd-art .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,#0f766e,#2aa89a); opacity:0; transition:opacity .5s; }
.pd-card{ cursor:default; }
@media all{
  .pd-bub,.pd-own,.pd-phone,.pd-desk,.pd-loc,.pd-files span{ transition:transform .5s var(--ease,ease); }
  .pd-brief span,.pd-track span{ transition:color .3s; }
  /* 1 · the open task ticks itself off, the others pop in turn, the bubble bobs up */
  .pd-card:hover .pd-brief span:last-child{ color:var(--ink); }
  .pd-card:hover .pd-brief span:last-child::before{ border:0; background:var(--brand-gradient) center/9px no-repeat var(--chk); }
  .pd-card:hover .pd-brief span::before{ animation:pd-popl 2.4s infinite; }
  .pd-brief span:nth-child(3)::before{ animation-delay:.15s !important; } .pd-brief span:nth-child(4)::before{ animation-delay:.3s !important; } .pd-brief span:nth-child(5)::before{ animation-delay:.45s !important; }
  .pd-card:hover .pd-bub{ transform:translateY(-10px) rotate(-2deg); }
  /* 2 · code types itself out, file chips hop, tag wiggles */
  .pd-card:hover .pd-code pre{ animation:pd-type 2.8s steps(34) infinite; }
  .pd-card:hover .pd-files span{ transform:translateY(-7px); }
  .pd-files span:nth-child(2){ transition-delay:.06s; } .pd-files span:nth-child(3){ transition-delay:.12s; }
  .pd-card:hover .pd-own{ transform:rotate(-5deg) scale(1.12); }
  /* 3 · phone rises, both screens switch colour, status dot pulses */
  .pd-card:hover .pd-phone{ transform:translateY(-16px) rotate(-4deg); }
  .pd-card:hover .pd-desk{ transform:translateY(5px) scale(.97); }
  .pd-card:hover .hero::after{ opacity:1; }
  .pd-card:hover .pd-chip u{ animation:pd-ring 1.1s infinite; }
  /* 4 · gauge fills, number counts up, bars grow */
  .pd-card:hover .pd-speed .gauge{ animation:pd-gauge 2.6s ease-out infinite; }
  .pd-card:hover .pd-speed i::after{ animation:pd-bar 2.6s ease-out infinite; }
  /* 5 · offices move closer, the link flows, avatars pulse */
  .pd-card:hover .pd-loc.a{ transform:translateX(10px); } .pd-card:hover .pd-loc.b{ transform:translateX(-10px); }
  .pd-card:hover .pd-link path{ animation:pd-dash .7s linear infinite; }
  .pd-card:hover .pd-loc .av{ animation:pd-ring 1.3s infinite; }
  /* 6 · progress sweeps down the stages */
  .pd-card:hover .pd-track span{ animation:pd-sweep 3s infinite; animation-delay:var(--d,0s); }
  .pd-card:hover .pd-track span::before{ animation:pd-popl 3s infinite; animation-delay:var(--d,0s); }
  .pd-track span:nth-child(2){ --d:.3s; } .pd-track span:nth-child(3){ --d:.6s; } .pd-track span:nth-child(4){ --d:.9s; } .pd-track span:nth-child(5){ --d:1.2s; }
  .pd-card:hover .pd-track em{ animation:pd-beat .9s infinite; }
}
@keyframes pd-pop{ 0%{ transform:scale(.4); } 60%{ transform:scale(1.3); } 100%{ transform:none; } }
@keyframes pd-type{ 0%{ clip-path:inset(0 100% 0 0); } 55%,100%{ clip-path:inset(0 0 0 0); } }
@keyframes pd-ring{ 0%{ box-shadow:0 0 0 0 rgba(31,157,107,.55); } 100%{ box-shadow:0 0 0 9px rgba(31,157,107,0); } }
@keyframes pd-gauge{ 0%{ --g:0; --n:0; } 60%,100%{ --g:98; --n:98; } }
@keyframes pd-bar{ 0%{ width:0; } 60%,100%{ width:var(--w); } }
@keyframes pd-popl{ 0%{ transform:scale(.4); } 8%{ transform:scale(1.3); } 16%,100%{ transform:none; } }
@keyframes pd-dash{ to{ stroke-dashoffset:-9; } }
@keyframes pd-sweep{ 0%,22%,100%{ transform:none; } 10%{ transform:translateX(8px); color:var(--ink); } }
@keyframes pd-beat{ 50%{ transform:scale(1.12); } }

/* ----------------------------------------------------------
   SECTION 6 · TALK TO US · short version (one button + contact chips)
   ---------------------------------------------------------- */

/* ---- TALK TO US: short version (no form, one button + contact chips) ---- */
.talk-section{ padding:clamp(32px,4vw,48px) 6%; }
.talk-short{ align-items:center; }
.talk-short .talk-title{ font-size:clamp(24px,2.8vw,36px); }
.talk-short .talk-lede{ max-width:44ch; }
.talk-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px; margin-top:22px; }
.talk-cta .tk-submit{ text-decoration:none; }
.talk-short .talk-direct{ margin:0; padding:0; border:0; }
.talk-short .talk-meta{ grid-template-columns:1fr; gap:10px; }
.talk-short .talk-meta li:last-child{ grid-column:auto; }
@media (max-width:600px){ .talk-cta .tk-submit{ width:100%; justify-content:center; box-sizing:border-box; } }

/* ----------------------------------------------------------
   SECTION 1 · HERO (.hx-hero) · centred, light, photo background (classes start with hx-)
   ---------------------------------------------------------- */

/* =========================================================
   HERO · centered, light, photo background (fits one screen). Classes start with hx-.
   ========================================================= */
.hx-hero{ position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:100vh; min-height:100svh; padding:112px 6% 0; border-radius:0 0 40px 40px;
  background:radial-gradient(42% 52% at 14% 18%,rgba(219,87,123,.16),transparent 70%),radial-gradient(42% 52% at 88% 16%,rgba(124,58,214,.2),transparent 70%),linear-gradient(180deg,#FAF7FF,#F1E9FD 60%,#E8DDF9); }
/* ghost word: same style as the other sections, lifted above the white glow */
.hx-hero > .pr-ghost-l{ top:96px; z-index:1; color:rgba(143,48,111,.07); }
/* photo anchored to the bottom; its top edge fades into the gradient so the text sits on a clean area */
.hx-photo{ position:absolute; left:0; right:0; bottom:0; z-index:1; height:54%; pointer-events:none; background:url("https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?auto=format&fit=crop&w=2200&q=75") center 60%/cover no-repeat; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%); mask-image:linear-gradient(180deg,transparent 0,#000 38%); }
.hx-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(124,58,214,.16) 1.4px,transparent 1.4px); background-size:26px 26px; opacity:.7; }
.hx-hero::after{ content:""; position:absolute; left:50%; top:30%; width:860px; height:460px; max-width:100%; transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(255,255,255,.95),transparent); pointer-events:none; }
.hx-main{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:flex-start; width:100%; max-width:1240px; margin:0 auto; padding:clamp(20px,5vh,64px) 0 0; }
.hx-center{ position:relative; z-index:3; max-width:820px; margin:0 auto; text-align:center; }
.hx-title{ margin:0 0 14px; font:700 clamp(34px,min(4.8vw,8.4vh),66px)/1.07 var(--font-display); letter-spacing:-.025em; text-transform:none; color:#1E1033; }
.hx-hl{ display:inline-block; background:linear-gradient(90deg,#C23B76,#7C3AD6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hx-ic{ display:inline-grid; place-items:center; width:.7em; height:.7em; margin-right:.16em; vertical-align:-.04em; border-radius:.2em; background:linear-gradient(135deg,#DB577B,#7C3AD6); box-shadow:0 10px 24px -8px rgba(219,87,123,.8); }
.hx-ic svg{ width:56%; height:56%; }
.hx-sub{ max-width:52ch; margin:0 auto; font:400 15.5px/1.6 var(--font-body); color:#625677; }
.hx-go{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; margin-top:26px; padding:0 26px; border:0; border-radius:99px; cursor:pointer; color:#fff; text-transform:uppercase; font:700 14px/1 var(--font-display); letter-spacing:.01em; background:linear-gradient(90deg,#DB577B 0%,#8F306F 48%,#4A1D5C 100%); box-shadow:0 12px 28px -10px rgba(219,87,123,.55); transition:transform .3s,box-shadow .3s,color .45s; }
.hx-go::before{ content:""; position:absolute; inset:0; z-index:-1; background:#fff; transform:translateY(101%); transition:transform .45s var(--ease,cubic-bezier(.22,1,.36,1)); }
.hx-go i{ font-size:1.15em; line-height:1; }
.hx-go:hover::before{ transform:translateY(0); }
.hx-go:hover{ color:var(--magenta,#8F306F); transform:translateY(-3px); box-shadow:0 16px 32px -10px rgba(219,87,123,.7); }
.hx-go:focus-visible{ outline:3px solid #DB577B; outline-offset:3px; }

/* trusted-by notch: slim tab, frameless logos */
.hx-notch{ position:relative; z-index:4; width:min(980px,100%); margin:22px auto 0; padding:16px 30px 18px; background:#fff; filter:drop-shadow(0 -10px 18px rgba(90,50,160,.12)); }
/* both side curves come from ONE shape; the right side is its mirror image, so they are always identical */
.hx-notch::before,.hx-notch::after{ content:""; position:absolute; top:0; bottom:0; width:56px; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80C30 80 26 0 56 0V80Z' fill='%23fff'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
.hx-notch::before{ right:calc(100% - .5px); }
.hx-notch::after{ left:calc(100% - .5px); transform:scaleX(-1); }
.hx-notch .pr-trust{ display:flex; align-items:center; gap:24px; }
.hx-notch .pr-trust-label{ flex:none; max-width:210px; margin:0; padding:0 24px 0 0; border-right:1px solid #E2D8F1; text-align:left; font:500 12.5px/1.4 var(--font-body); color:#6B5F80; }
.hx-notch .pr-marq{ flex:1; min-width:0; padding:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.hx-notch .pr-marq-set{ gap:46px; padding:0 23px; }
.hx-notch .pr-marq-set img{ box-sizing:content-box; height:26px; max-width:110px; padding:0; border-radius:0; background:none; object-fit:contain; }

@media (max-width:1100px){
  .hx-hero{ min-height:0; padding-top:112px; }
  .hx-main{ padding:16px 0 240px; }
  .hx-photo{ height:300px; }
  .hx-notch{ width:auto; margin:30px -6% 0; padding:16px 6% 18px; border-radius:30px 30px 0 0; }
  .hx-notch::before,.hx-notch::after{ display:none; }
}
@media (max-width:620px){
  .hx-hero > .pr-ghost-l{ top:84px; font-size:92px; letter-spacing:-3px; }
  .hx-go{ width:100%; justify-content:center; }
  .hx-notch .pr-trust{ flex-direction:column; align-items:stretch; gap:12px; }
  .hx-notch .pr-trust-label{ max-width:none; padding:0; border:0; text-align:center; font-size:12px; }
  .hx-notch .pr-marq-set{ gap:34px; }
}
@media (prefers-reduced-motion:reduce){ .hx-go,.hx-go::before{ transition:none; } }
/* ----------------------------------------------------------
   SECTION 3 + SECTION 4 · LIGHT THEME OVERRIDES (latest changes live here)
   Edit this block to change colours, gantt bars, stepper or the Plan-your-website button.
   ---------------------------------------------------------- */

/* ==========================================================
   SECTIONS 3 & 4 (THE PLAN + OUR PROCESS): LIGHT THEME
   Matches the other light sections. CTA and footer stay dark.
   ========================================================== */
.pr-process,.wd-process.pr-flow{ border-radius:0; border-top:1px solid var(--line); color:var(--ink); }
.pr-process{ background:radial-gradient(rgba(143,48,111,.11) 1.2px,transparent 1.2px) 0 0/24px 24px,linear-gradient(180deg,var(--paper-dim),var(--paper)); }
.wd-process.pr-flow{ margin-top:0; padding-top:56px; background:radial-gradient(rgba(143,48,111,.11) 1.2px,transparent 1.2px) 0 0/24px 24px,linear-gradient(180deg,var(--paper),var(--paper-dim)); }
@media (max-width:900px){ .wd-process.pr-flow{ padding-top:44px; } }
.pr-process::before,.wd-process.pr-flow::before{ display:none; }
.pr-process > .section-ghost,.pr-flow > .section-ghost{ color:rgba(143,48,111,.06); }

/* headings */
.pr-process .pr-head .section-title,.wd-process .wd-head .section-title{ color:var(--ink); }
.pr-process .pr-head .section-lede,.wd-process .wd-head .section-lede{ color:var(--text-soft); }
.pr-note-t,.wd-process-note{ color:var(--text-soft); }

/* section 3: gantt */
.pr-gantt{ border-color:var(--line); background:#fff; box-shadow:0 18px 38px -26px rgba(60,20,90,.3); }
.pr-ruler{ border-bottom-color:var(--line); }
.pr-ruler i{ color:var(--text-soft); border-left-color:rgba(36,17,48,.08); }
.pr-lane{ border-bottom-color:var(--line); background:linear-gradient(90deg,rgba(36,17,48,.07) 1px,transparent 1px) 38px 0/calc((100% - 38px)/4) 100% repeat-x; }
.pr-lane-tag[style*="#ffffff"]{ --c:#CDB8F2 !important; }
.pr-bar{ background:var(--brand-gradient); border-left-color:#fff; color:#fff; box-shadow:0 14px 30px -16px rgba(219,87,123,.6); transition:transform .25s var(--ease,ease), box-shadow .25s; }
.pr-wk{ color:#fff; border-color:#fff; }
.pr-bar > .ph-bold{ background:rgba(255,255,255,.2); color:#fff; }
.pr-bar:hover,.pr-bar.is-on:hover{ background:var(--brand-gradient); transform:scale(1.04); z-index:2; box-shadow:0 18px 34px -14px rgba(219,87,123,.75); }
.pr-bar.is-on{ background:var(--brand-gradient); color:#fff; }
.pr-bar:focus-visible{ outline-color:#fff; }

/* section 4: stepper */
.wds-ar{ border-color:var(--line); background:#fff; color:var(--ink); }
.wds-ar:not(:disabled):hover,.wds-play:hover{ color:#fff; }
.wds-ar:focus-visible,.wds-nd:focus-visible,.wds-play:focus-visible{ outline-color:var(--magenta); }
.wds-rt::before{ background:rgba(36,17,48,.14); }
.wds-nd{ color:var(--text-soft); }
.wds-n{ background:#e6dcec; color:var(--ink); }
.wds-nl small{ color:var(--text-soft); }
.wds-nd[aria-current="step"]{ color:var(--ink); }
.wds-nd[aria-current="step"] .wds-n{ background:var(--magenta); color:#fff; }
.wds-nd.is-done .wds-n{ background:var(--brand-gradient); }
.wds.is-auto .wds-nd[aria-current="step"] .wds-n::after{ background:conic-gradient(var(--coral) calc(var(--t,0)*360deg),rgba(36,17,48,.14) 0); }
.wds-play{ border-color:var(--line); background:#fff; color:var(--ink); }
.wds-hint{ color:var(--text-soft); }
.wds-dev{ border:1px solid var(--line); box-shadow:0 18px 38px -26px rgba(60,20,90,.3); }
.wds-pane h3{ color:var(--ink); }
.wds-pane h3 small{ color:var(--magenta); }
.wds-lede{ color:var(--text-soft); }
.wds-lb{ color:var(--text-soft); }
.wds-lb-you{ color:#b36200; }
.wds-chips li{ background:rgba(143,48,111,.08); border:1px solid rgba(143,48,111,.16); color:var(--ink); }
.wds-you li{ background:rgba(246,166,35,.16); border-color:rgba(200,120,10,.45); }
.wds-get{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.wd-weeks span{ color:var(--text-soft); }
.wd-weeks span::before{ background:rgba(36,17,48,.12); }
.wd-weeks span.is-on{ color:var(--ink); }
.wd-run li{ border-color:var(--line); background:#fff; color:var(--text-soft); box-shadow:0 14px 30px -24px rgba(60,20,90,.3); }
.wd-run b{ color:var(--ink); }
.wd-process .wd-solid{ background:var(--brand-gradient); color:#fff; border-color:transparent; }

/* ----------------------------------------------------------
   SECTION 4 · "PLAN YOUR WEBSITE" BUTTON AREA (.wd-process-foot)
   Button centred under the four promise tiles, note as a caption beneath.
   ---------------------------------------------------------- */
/* Section 4: "Plan your website" button, centred under the four promise tiles with the note as a small caption beneath */
.wd-process-foot{ flex-direction:column; align-items:center; justify-content:center; gap:14px; margin-top:30px; text-align:center; }
.wd-process-foot .wd-process-cta{ order:1; margin:0; }
.wd-process-foot .wd-process-note{ order:2; flex:none; max-width:62ch; margin:0 auto; }
.wd-process-foot .wd-solid{ padding-left:30px; padding-right:30px; box-shadow:0 16px 30px -14px rgba(219,87,123,.6); }

/* Section 3 gantt bars are display only (not links or buttons): no pointer cursor */
.pr-bar{ cursor:default; }

/* ----------------------------------------------------------
   SECTION 4 · OUR PROCESS · stage text panel (right side of the stepper)
   Point-wise layout: title row, intro, two ruled columns of check-list rows, "What you get" box.
   ---------------------------------------------------------- */
.wd-process .wds-pane h3{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0 0 8px; font-size:22px; }
.wd-process .wds-pane h3 small{ margin:0; padding:3px 10px; border-radius:99px; background:rgba(143,48,111,.1); font-size:11px; }
.wd-process .wds-pane .wds-lede{ margin:0 0 20px; font-size:15px; line-height:1.65; max-width:60ch; }
.wd-process .wds-cols{ gap:0; margin:0 0 20px; }
.wd-process .wds-cols > div{ min-width:0; }
.wd-process .wds-cols > div + div{ padding-left:28px; border-left:1px solid var(--line); }
.wd-process .wds-lb{ margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:11.5px; }
.wd-process .wds-chips{ display:grid; gap:10px; margin:0; }
.wd-process .wds-chips li{ position:relative; padding:0 0 0 28px; border:0; border-radius:0; background:none; font-size:14px; line-height:1.45; color:var(--ink); }
.wd-process .wds-chips li::before{ content:"\2713"; position:absolute; left:0; top:0; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:rgba(143,48,111,.12); color:var(--magenta); font:700 11px/1 var(--font-body); }
.wd-process .wds-you li{ background:none; border:0; }
.wd-process .wds-you li::before{ content:"\2192"; background:rgba(246,166,35,.22); color:#b36200; }
.wd-process .wds-get{ padding:14px 16px; font-size:14.5px; line-height:1.55; }
@media (max-width:700px){
  .wd-process .wds-cols > div + div{ padding-left:0; border-left:0; margin-top:20px; }
}

/* ----------------------------------------------------------
   SECTION 5 · WHY DUALSTAG · heading matches the SECTION 4 heading
   Gradient-text highlight instead of the boxed .pd-hl, same size, width and intro text.
   ---------------------------------------------------------- */
.pr-diff .pr-head{ max-width:760px; margin-bottom:34px; }
.pr-diff .pr-head .eyebrow{ margin-bottom:10px; }
.pr-diff .section-title{ font-size:clamp(26px,3vw,38px); }
.pr-diff .section-title em{ font-style:normal; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pr-diff .pr-head .section-lede{ max-width:62ch; font-size:clamp(14px,1.1vw,15.5px); color:var(--text-soft); }

/* ----------------------------------------------------------
   PHONES · same patterns as the Web Design page
   1) Why DualStag: swipeable stacked card deck + glass nav bar
   2) Talk to us: icon-only contact buttons in one line
   ---------------------------------------------------------- */
.pd-ctl{ display:none; }
@media (max-width:560px){
  /* 1 · deck */
  .pr-diff.is-deck .pd-grid{ --deck-h:410px; display:block; position:relative; height:var(--deck-h); margin-top:28px; touch-action:pan-y; }
  .pr-diff.is-deck .pd-item{
    position:absolute; top:0; left:50%; width:min(82%,300px); height:100%; margin:0;
    z-index:calc(10 - var(--a,0)); opacity:var(--op,1); pointer-events:none;
    transform:translateX(calc(-50% + var(--o,0)*17% + var(--drag,0px))) scale(calc(1 - var(--a,0)*.09));
    filter:brightness(calc(1 - var(--a,0)*.10));
    transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s,filter .35s;
  }
  .pr-diff.is-deck .pd-item.is-near{ pointer-events:auto; cursor:pointer; }
  .pr-diff.is-deck .pd-item.is-active{ cursor:auto; }
  .pr-diff.is-deck .pd-card{ height:100%; box-sizing:border-box; box-shadow:0 18px 34px -22px rgba(60,20,90,.5); }
  .pr-diff.is-deck .pd-card:hover{ transform:none; }
  .pr-diff.is-deck.is-drag .pd-item{ transition:none; -webkit-user-select:none; user-select:none; }

  /* glass navigation bar */
  .pr-diff.is-deck .pd-ctl{
    display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; padding:7px; position:relative; z-index:2;
    border-radius:99px; border:1px solid rgba(255,255,255,.75);
    background:linear-gradient(135deg,rgba(255,255,255,.60),rgba(255,255,255,.22));
    -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
    box-shadow:0 12px 30px rgba(107,27,88,.16), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(107,27,88,.07);
  }
  .pd-ar{
    flex:none; width:44px; height:44px; display:grid; place-items:center; padding:0; border-radius:50%; cursor:pointer;
    border:1px solid rgba(255,255,255,.85); color:#6B1B58; font-size:18px;
    background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(255,255,255,.34));
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:0 6px 16px rgba(107,27,88,.18), inset 0 1px 0 rgba(255,255,255,.95);
    transition:background .25s,color .25s,transform .25s,box-shadow .25s;
  }
  .pd-ar:active{ background:linear-gradient(135deg,#DB577B,#6B1B58); border-color:rgba(255,255,255,.4); color:#fff; transform:scale(.94); box-shadow:0 3px 8px rgba(107,27,88,.25); }
  .pd-ar:focus-visible,.pd-dots button:focus-visible{ outline:2px solid #6B1B58; outline-offset:3px; }
  .pd-dots{ display:flex; gap:7px; }
  .pd-dots button{ position:relative; width:8px; height:8px; padding:0; border:0; border-radius:99px; background:rgba(107,27,88,.22); cursor:pointer; transition:width .3s,background .3s; }
  .pd-dots button::after{ content:""; position:absolute; inset:-10px -3px; }
  .pd-dots button[aria-current="true"]{ width:24px; background:linear-gradient(90deg,#8F306F,#6B1B58); box-shadow:0 2px 8px rgba(107,27,88,.35); }
}
@media (max-width:560px) and (prefers-reduced-motion:reduce){ .pr-diff.is-deck .pd-item,.pd-dots button{ transition:none; } }

/* 2 · Talk to us: three icon-only buttons in one line (details stay in the page for screen readers) */
@media (max-width:600px){
  .talk-short .talk-meta{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .talk-short .talk-meta li:last-child{ grid-column:auto; }
  .talk-chip{ justify-content:center; padding:14px 10px; border-radius:16px; }
  .talk-chip-ico{ flex:0 0 44px; width:44px; height:44px; font-size:20px; }
  .talk-chip-txt{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
}

/* ----------------------------------------------------------
   PHONES · compact hero that fits the screen (SECTION 1)
   Whole hero = one screen. The "Trusted by" notch at the bottom keeps the desktop look:
   curved side wings, label on the left with a divider, logos scrolling on the right.
   ---------------------------------------------------------- */
@media (max-width:620px){
  .hx-hero{ box-sizing:border-box; min-height:100vh; min-height:100svh; padding:92px 0 0; }        /* no side padding, so the notch wings can reach the screen edges */
  .hx-hero > .pr-ghost-l{ top:78px; font-size:84px; letter-spacing:-3px; }
  .hx-photo{ height:44%; }
  .hx-main{ box-sizing:border-box; padding:clamp(10px,3svh,28px) 5% 0; }
  .hx-title{ margin:0 0 10px; font-size:clamp(26px,min(8.2vw,4.8svh),34px); line-height:1.1; }
  .hx-sub{ font-size:14px; line-height:1.5; }
  .hx-go{ width:100%; height:46px; margin-top:18px; }

  /* notch: same curved shape as desktop, shorter; label in one line above the logos */
  .hx-notch{ width:calc(100% - 84px); margin:18px auto 0; padding:10px 12px 12px; border-radius:0; }
  .hx-notch::before,.hx-notch::after{ display:block; width:26px; }
  .hx-notch .pr-trust{ flex-direction:column; align-items:stretch; gap:8px; }
  .hx-notch .pr-trust-label{ flex:none; max-width:none; padding:0; border:0; text-align:center; white-space:nowrap; font-size:clamp(8.5px,2.45vw,10.5px); line-height:1.3; }
  .hx-notch .pr-marq{ flex:none; min-width:0; }
  .hx-notch .pr-marq-set{ gap:30px; padding:0 15px; }
  .hx-notch .pr-marq-set img{ height:22px; max-width:84px; }
}
@media (max-width:620px) and (max-height:600px){
  .hx-hero{ padding-top:84px; }
  .hx-hero > .pr-ghost-l{ display:none; }
  .hx-sub{ font-size:13px; }
}

/* ----------------------------------------------------------
   PHONES · "How we run projects" cards laid out like desktop (SECTION 2)
   The desktop height (fixed) was still applied on phones, so the cards overlapped. Cards now stack with
   their own height, and each card keeps the desktop composition: title + text on top, the demo panel
   below it, sitting slightly tilted and running off the bottom edge of the card.
   ---------------------------------------------------------- */
@media (max-width:900px){
  .hw-bento{ grid-template-columns:1fr; grid-template-rows:none; height:auto; min-height:0; gap:16px; }
  .hw-bento .hw-c{ padding:22px 20px; border-radius:24px; }
  .hw-bento .hw-a,.hw-bento .hw-b,.hw-bento .hw-d,.hw-bento .hw-e{ grid-column:auto; grid-row:auto; }
  /* review rounds: panel under the text, slightly tilted, touching the bottom edge like desktop */
  .hw-bento .hw-b{ min-height:0; padding-bottom:0; }
  .hw-bento .hw-b .hw-sheet{ margin:16px 0 -6px; border-radius:20px 20px 0 0; transform:rotate(2deg); }
  /* point of contact: panel right under the text (no empty gap), tilted, touching the bottom edge */
  .hw-bento .hw-d{ min-height:0; padding-bottom:0; }
  .hw-bento .hw-d .hw-id{ margin:16px 0 -4px; border-radius:18px 18px 0 0; }
}

/* ----------------------------------------------------------
   PHONES + TABLETS · THE PLAN as a mini gantt (SECTION 3)
   Keeps the real timeline shape: 4 week columns, one coloured bar per stage with a short label,
   and the full stage names listed underneath. Desktop gantt is untouched.
   ---------------------------------------------------------- */
.pr-short,.pr-legend{ display:none; }
@media (max-width:900px){
  .pr-process .pr-gantt{ border-radius:18px; }
  /* first track is 0 wide, so the bars' desktop grid-column numbers still work */
  .pr-process .pr-ruler,.pr-process .pr-lane{ display:grid; grid-template-columns:0 repeat(4,1fr); }
  .pr-process .pr-ruler{ display:grid; }
  .pr-process .pr-ruler i{ padding:9px 0; font-size:10px; letter-spacing:.06em; }
  .pr-process .pr-lane{ min-height:0; padding:7px 0; background:linear-gradient(90deg,transparent calc(25% - 1px),var(--line) 0,var(--line) 25%,transparent 0) 0 0/25% 100%; }
  .pr-process .pr-lane-tag{ display:none; }
  .pr-process .pr-bar{ width:auto; min-height:0; margin:0 4px; padding:9px 10px; gap:0; border:0; border-radius:11px; background:var(--c); color:var(--fg,#241130); box-shadow:0 8px 14px -8px rgba(36,17,48,.5); overflow:hidden; }
  .pr-process .pr-bar:hover,.pr-process .pr-bar.is-on:hover{ transform:none; background:var(--c); box-shadow:0 8px 14px -8px rgba(36,17,48,.5); }
  .pr-process .pr-bar strong,.pr-process .pr-wk,.pr-process .pr-bar > .ph-bold{ display:none; }
  .pr-process .pr-short{ display:block; font:700 11.5px/1.2 var(--font-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .pr-process .pr-legend{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; position:relative; z-index:1; }
  .pr-process .pr-legend li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:#fff; border:1px solid var(--line); }
  .pr-process .pr-legend i{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--c); }
  .pr-process .pr-legend b{ font:600 13px var(--font-display); color:var(--ink); }
  .pr-process .pr-legend span{ margin-left:auto; font:700 10px var(--font-body); letter-spacing:.08em; color:var(--magenta); white-space:nowrap; }
}
@media (max-width:380px){ .pr-process .pr-legend b{ font-size:12.5px; } .pr-process .pr-short{ font-size:11px; } }

/* ----------------------------------------------------------
   PHONES + TABLETS · THE PLAN, compact (SECTION 3)
   Tighter padding, smaller heading and text, slimmer chart rows and list.
   ---------------------------------------------------------- */
@media (max-width:900px){
  .pr-process{ padding-top:38px; padding-bottom:34px; }
  .pr-process .pr-head.pr-process-head{ display:block; margin-bottom:16px; }
  .pr-process .pr-head .eyebrow{ margin-bottom:8px; }
  .pr-process .section-title{ margin:0 0 8px; font-size:clamp(21px,6vw,26px); line-height:1.15; }
  .pr-process .pr-process-head .section-lede{ margin:0; max-width:none; font-size:13px; line-height:1.5; }
  .pr-process > .pr-ghost-l{ top:20px; font-size:72px; }

  .pr-process .pr-ruler i{ padding:7px 0; font-size:9.5px; }
  .pr-process .pr-lane{ padding:4px 0; }
  .pr-process .pr-bar{ padding:6px 9px; border-radius:9px; }
  .pr-process .pr-short{ font-size:11px; }

  .pr-process .pr-legend{ margin-top:10px; gap:5px; }
  .pr-process .pr-legend li{ gap:8px; padding:7px 11px; border-radius:11px; }
  .pr-process .pr-legend i{ width:8px; height:8px; }
  .pr-process .pr-legend b{ font-size:12px; }
  .pr-process .pr-legend span{ font-size:9.5px; }

  .pr-process .pr-note-t{ margin-top:12px; font-size:11.5px; line-height:1.45; }
}

/* ----------------------------------------------------------
   PHONES + TABLETS · HOW WE WORK as an accordion (SECTION 2)
   Four rows (icon, title, one-line summary). Tap a row to open its demo card; one open at a time.
   Desktop bento is untouched. Behaviour: process.js "how we work accordion".
   ---------------------------------------------------------- */
.hw-acc-h{ display:none; }
@media (max-width:900px){
  .hw-bento{ gap:10px; }
  .hw-bento .hw-c{ padding:0; min-height:0; border-radius:20px; }
  .hw-bento .hw-c > h3,.hw-bento .hw-c > p{ display:none; }

  .hw-acc-h{ position:relative; z-index:7; display:flex; align-items:center; gap:11px; width:100%; padding:12px 14px; border:0; background:none; text-align:left; cursor:pointer; color:var(--ink); font-family:inherit; }
  .hw-acc-h:focus-visible{ outline:2px solid #8F306F; outline-offset:-3px; border-radius:20px; }
  .hw-acc-ico{ flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:#241130; }
  .hw-acc-ico svg{ width:19px; height:19px; }
  .hw-a .hw-acc-ico{ background:#CDB8F2; } .hw-b .hw-acc-ico{ background:#F6A1BF; } .hw-d .hw-acc-ico{ background:#BFDD94; } .hw-e .hw-acc-ico{ background:#F8DCA0; }
  .hw-acc-tt{ flex:1; min-width:0; }
  .hw-acc-tt b{ display:block; font:600 14px/1.25 var(--font-display); color:var(--ink); }
  .hw-acc-tt small{ display:block; margin-top:1px; font:400 12px/1.3 var(--font-body); color:var(--text-soft); }
  .hw-acc-chev{ flex:none; width:20px; height:20px; color:#8F306F; transition:transform .3s; }
  .hw-c.is-open .hw-acc-chev{ transform:rotate(180deg); }
  .hw-bento .hw-c.is-open .hw-acc-ico{ background:rgba(255,255,255,.7); }

  /* closed row: plain white card, only the header shows */
  .hw-bento .hw-c:not(.is-open){ background:#fff; border:1px solid var(--line); box-shadow:0 12px 22px -18px rgba(60,20,90,.4); }
  .hw-bento .hw-c:not(.is-open)::before{ display:none; }
  .hw-bento .hw-c:not(.is-open) > *:not(.hw-acc-h){ display:none; }

  /* open row: keeps its colour; the demo panel sits in normal flow under the header */
  .hw-bento .hw-c.is-open .hw-panel{ position:relative; inset:auto; margin:0 12px 12px; }
  .hw-bento .hw-c.is-open .hw-sheet{ margin:0 12px 12px; border-radius:16px; transform:none; }
  .hw-bento .hw-c.is-open .hw-id{ margin:0 12px 12px; border-radius:16px; transform:none; }
  .hw-bento .hw-c.is-open .hw-inbox{ position:relative; inset:auto; margin:0 12px 12px; border-radius:16px; }
}
@media (prefers-reduced-motion:reduce){ .hw-acc-chev{ transition:none; } }
/* ----------------------------------------------------------
   PHONES + TABLETS · OUR PROCESS stage text split around the preview (SECTION 4)
   Order on mobile: stage heading + intro paragraph, then the preview, then
   What we do / What we need from you / What you get.
   The pane and its wrapper use display:contents so their children can be ordered
   alongside the preview inside .wds-main. Hidden panes stay display:none, so JS needs no change.
   Desktop (above 860px) is untouched.
   ---------------------------------------------------------- */
@media (max-width:860px){
  .wds-main{ row-gap:0; }
  .wds-body,
  .wds-pane{ display:contents; }
  .wds-pane[hidden]{ display:none; }
  .wd-process .wds-pane h3{ order:1; margin:0 0 8px; }
  .wd-process .wds-pane .wds-lede{ order:1; margin:0 0 18px; }
  .wds-stage{ order:2; margin-bottom:22px; }
  .wd-process .wds-cols{ order:3; margin:0 0 20px; }
  .wd-process .wds-pane > .wds-lb{ order:3; }
  .wd-process .wds-pane > .wds-get{ order:3; }
}

/* ----------------------------------------------------------
   PHONES · smaller "PLAN YOUR WEBSITE" button (SECTION 4)
   Content-width, centred, compact padding and text instead of full width.
   ---------------------------------------------------------- */
@media (max-width:600px){
  .wd-process .wd-process-cta .btn.wd-solid{ width:auto; min-height:0; padding:12px 22px; gap:8px; font-size:13px; letter-spacing:.02em; box-shadow:0 10px 22px -12px rgba(219,87,123,.6); }
  .wd-process .wd-process-cta .btn.wd-solid i{ font-size:15px; }
}