/* GBH Motion: Website design page (/website-design). Page classes use the wd- prefix; loaded only by this page. */
#builder,#work{scroll-margin-top:90px}
.gx-wd .wd-wb-ctrl .wd-wb-seg button{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',Arial,sans-serif}
/* Layout: GBH Motion bands in a 1200px column. Hero (a page assembling itself) → live page builder (the centrepiece) → what we build → selected work (drawn mini-sites) → how we work → why Odoo → contact band. One fixed brand look by choice, like gb-hub.com. */
.gx-wd{
  --purple:#773B82;--deep:#4E2456;--plum:#2B1630;--night:#1C0F20;--teal:#059EAB;--teal-ink:#03727C;--teal-lite:#7FD3DA;
  --tint:#F2EAF4;--teal-tint:#E3F2F2;--ink:#221A29;--muted:#6A6172;--line:#E6E0EA;--mist:#D9C7DE;--gold:#E2B970;--white:#FFFFFF;
  --disp:'Bricolage Grotesque','Arial Black',Arial,sans-serif;--body:'IBM Plex Sans',Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
.gx-wd{font-family:var(--body);font-size:18px;line-height:1.55;overflow-x:hidden;background:var(--white);color:var(--ink)}
.gx-wd *{box-sizing:border-box}
.gx-wd a{color:inherit}
.gx-wd :focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
.gx-band{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,112px);padding-left:max(16px,env(safe-area-inset-left,0px),4vw);padding-right:max(16px,env(safe-area-inset-right,0px),4vw)}
.gx-wrap{position:relative;max-width:1200px;margin:0 auto}
.gx-dark{background:var(--deep);color:var(--white)}
.gx-plum{background:radial-gradient(circle at 72% 45%,#773B82 0%,#4E2456 45%,#2B1630 100%);color:var(--white)}
.gx-tint{background:var(--tint)}
.gx-white{background:var(--white)}
.gx-eb{margin:0 0 14px;font:600 14px/1.3 var(--body);letter-spacing:2.5px;text-transform:uppercase;color:var(--teal-ink)}
.gx-dark .gx-eb,.gx-plum .gx-eb{color:var(--teal-lite)}
.gx-h{margin:0;font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.98;text-wrap:balance}
.gx-h1{font-size:clamp(42px,5.6vw,80px)}
.gx-h2{font-size:clamp(34px,5vw,66px);color:var(--purple)}
.gx-dark .gx-h2,.gx-plum .gx-h2{color:var(--white)}
.gx-hl{color:var(--teal-lite)}
.gx-white .gx-hl,.gx-tint .gx-hl{color:var(--teal-ink)}
.gx-lead{margin:20px 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.55;max-width:58ch;color:var(--muted)}
.gx-dark .gx-lead,.gx-plum .gx-lead{color:var(--mist)}
.gx-line>span{display:block;overflow:hidden;padding-bottom:.1em}
.gx-line i{display:block;font-style:normal}
.gx-swipe{position:relative;display:inline-block;z-index:0;font-style:normal}
.gx-swipe::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.08em;height:.16em;background:var(--teal);z-index:-1;transform-origin:left}
.gx-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.gx-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font:600 17px var(--body);text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background .2s}
.gx-btn:hover{transform:translateY(-2px)}
.gx-btn-main{background:var(--teal);color:var(--white)}
.gx-btn-main:hover{background:var(--teal-ink)}
.gx-btn-ghost{border:2px solid currentColor;background:transparent;color:inherit}
.gx-panel{position:absolute;top:0;bottom:0;right:0;width:44%;background:var(--teal);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.gx-wd svg{max-width:100%;height:auto;display:block;overflow:visible;direction:ltr}
.gx-wd svg text{font-family:var(--body)}
.gx-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);align-items:center}

/* ---------- live page builder ---------- */
.wd-wb{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;margin-top:44px;align-items:start}
.wd-wb-ctrl{background:var(--white);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:20px;box-shadow:0 30px 50px -36px rgba(43,22,48,.6)}
.wd-wb-ctrl fieldset{border:0;margin:0;padding:0;min-width:0}
.wd-wb-ctrl legend{font:600 12px var(--body);letter-spacing:2px;text-transform:uppercase;color:var(--teal-ink);margin-bottom:8px;padding:0}
.wd-wb-seg{display:flex;flex-wrap:wrap;gap:6px}
.wd-wb-seg button{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 14px;border-radius:999px;font:600 15px var(--body);border:1.5px solid var(--mist);color:var(--purple);background:var(--white)}
.wd-wb-seg button[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:var(--white)}
.wd-wb-seg button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.wd-wb-note{margin:0;font-size:14px;color:var(--muted)}
.wd-wb-stage{min-width:0;display:block;background:radial-gradient(circle at 50% 40%,#fff 0%,#EADDEE 100%);border-radius:24px;padding:clamp(14px,3vw,34px);overflow:hidden}
.wd-wb-fit{position:relative;width:100%;min-width:0;display:flex;justify-content:center;align-items:flex-start;overflow:visible}
.wd-wb-frame{width:800px;flex:none;transform-origin:top center;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 40px 70px -34px rgba(20,8,24,.55);transition:width .55s cubic-bezier(.3,1,.4,1),border-radius .4s}
.wd-wb-frame.wd-phone{width:300px;border-radius:30px;border:8px solid #221A29}
.wd-wb-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#EFEAF1}
.wd-wb-chrome i{width:10px;height:10px;border-radius:50%;background:#D9C7DE}
.wd-wb-chrome span{margin-inline-start:10px;flex:1;min-width:0;font:500 12px var(--mono);color:var(--muted);background:#fff;border-radius:999px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-wb-frame.wd-phone .wd-wb-chrome{justify-content:center}
.wd-wb-frame.wd-phone .wd-wb-chrome i{display:none}
.wd-wb-frame.wd-phone .wd-wb-chrome span{margin:0;flex:0 1 auto}
/* the mock site, styled by its own tokens */
.wd-ms{--m-bg:#fff;--m-ink:#221A29;--m-acc:#773B82;--m-acc2:#059EAB;--m-soft:#F2EAF4;--m-r:14px;--m-font:'IBM Plex Sans',Arial,sans-serif;--m-disp:'Bricolage Grotesque',Arial,sans-serif;
  background:var(--m-bg);color:var(--m-ink);font-family:var(--m-font);transition:background .4s,color .4s}
.wd-ms[dir="rtl"]{--m-font:'IBM Plex Sans Arabic',Arial,sans-serif;--m-disp:'IBM Plex Sans Arabic',Arial,sans-serif}
.wd-ms.wd-st-play{--m-bg:#FFF8E8;--m-ink:#2A2140;--m-acc:#FF6B5A;--m-acc2:#2EB8A6;--m-soft:#FFE9A8;--m-r:26px;--m-disp:'Fredoka','IBM Plex Sans Arabic',Arial,sans-serif}
.wd-ms.wd-st-ind{--m-bg:#1B2228;--m-ink:#E8EDF0;--m-acc:#F28C28;--m-acc2:#8FA3B0;--m-soft:#2A343C;--m-r:4px;--m-disp:'Barlow Condensed','IBM Plex Sans Arabic',Arial,sans-serif}
.wd-ms-nav{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid color-mix(in srgb,var(--m-ink) 12%,transparent)}
.wd-ms-logo{font:700 18px var(--m-disp);color:var(--m-acc)}
.wd-ms-links{display:flex;gap:14px;margin-inline-start:auto;font-size:13px;opacity:.8}
.wd-ms-burger{display:none;margin-inline-start:auto;width:22px;height:14px;border-block:3px solid var(--m-ink);position:relative}
.wd-ms-burger::after{content:"";position:absolute;left:0;right:0;top:2.5px;height:3px;background:var(--m-ink)}
.wd-ms-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:center;padding:26px 20px}
.wd-ms-hero h4{margin:0;font:700 clamp(22px,3vw,34px)/1.08 var(--m-disp);text-wrap:balance}
.wd-ms.wd-st-ind .wd-ms-hero h4{text-transform:uppercase;letter-spacing:.02em}
.wd-ms-hero p{margin:10px 0 14px;font-size:14px;opacity:.75}
.wd-ms-cta{display:inline-block;padding:9px 16px;border-radius:var(--m-r);background:var(--m-acc);color:#fff;font:600 13px var(--m-font)}
.wd-ms-art{aspect-ratio:4/3;max-width:100%;border-radius:var(--m-r);background:var(--m-soft);position:relative;overflow:hidden}
.wd-ms-art b{position:absolute;border-radius:var(--m-r)}
.wd-ms-art .a1{inset:18% 40% 30% 12%;background:var(--m-acc)}
.wd-ms-art .a2{inset:40% 10% 12% 45%;background:var(--m-acc2)}
.wd-ms-art .a3{width:22%;aspect-ratio:1;border-radius:50%!important;right:12%;top:10%;background:var(--m-ink);opacity:.15}
.wd-ms-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 20px 24px}
.wd-ms-card{background:var(--m-soft);border-radius:var(--m-r);padding:12px;font-size:13px}
.wd-ms-card i{display:block;height:46px;border-radius:calc(var(--m-r) * .6);background:var(--m-acc2);opacity:.85;margin-bottom:8px}
.wd-ms-card b{display:block;font:600 14px var(--m-disp)}
.wd-ms-card span{opacity:.7}
.wd-wb-frame.wd-phone .wd-ms-links{display:none}
.wd-wb-frame.wd-phone .wd-ms-burger{display:block}
.wd-wb-frame.wd-phone .wd-ms-hero{grid-template-columns:1fr}
.wd-wb-frame.wd-phone .wd-ms-cards{grid-template-columns:1fr}
.wd-ms.wd-motion .wd-ms-art .a1{animation:msFloat 3.2s ease-in-out infinite}
.wd-ms.wd-motion .wd-ms-art .a2{animation:msFloat 3.8s .4s ease-in-out infinite reverse}
.wd-ms.wd-motion .wd-ms-art .a3{animation:msPulse 2.4s ease-in-out infinite}
.wd-ms.wd-motion .wd-ms-card{animation:msRise .7s both}
.wd-ms.wd-motion .wd-ms-card:nth-child(2){animation-delay:.12s}.wd-ms.wd-motion .wd-ms-card:nth-child(3){animation-delay:.24s}
@keyframes msFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes msPulse{0%,100%{scale:1}50%{scale:1.18}}
@keyframes msRise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}

/* ---------- what we build ---------- */
.wd-bl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.wd-bl-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.wd-bl-card svg{width:64px;height:64px}
.wd-bl-card h3{margin:0;font:700 21px/1.2 var(--disp)}
.wd-bl-card p{margin:0;font-size:16px;color:var(--muted)}

/* ---------- selected work ---------- */
.wd-wk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:44px}
.wd-wk-card{background:var(--white);border-radius:22px;overflow:hidden;color:var(--ink);display:flex;flex-direction:column}
.wd-wk-card.wd-wide{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr}
.wd-wk-art{background:var(--c,#F2EAF4);padding:22px 22px 0;display:flex;align-items:flex-end;justify-content:center;min-height:220px}
.wd-wk-art svg{width:100%;max-width:520px}
.wd-wk-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px}
.wd-wk-tags{display:flex;flex-wrap:wrap;gap:6px}
.wd-wk-tags span{font:600 12px var(--body);letter-spacing:1px;text-transform:uppercase;color:var(--teal-ink);background:var(--teal-tint);border-radius:999px;padding:4px 10px}
.wd-wk-body h3{margin:0;font:800 26px/1.15 var(--disp)}
.wd-wk-body p{margin:0;font-size:16px;color:var(--muted)}
.wd-wk-body ul{margin:0;padding-inline-start:20px;font-size:16px}
.wd-wk-url{font:500 14px var(--mono);color:var(--purple);text-decoration:none;align-self:flex-start;border-bottom:2px solid var(--teal)}

/* ---------- process ---------- */
.wd-pr{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;position:relative}
.wd-pr::before{content:"";position:absolute;left:4%;right:4%;top:27px;height:3px;background:rgba(127,211,218,.35)}
.wd-pr li{position:relative;display:flex;flex-direction:column;gap:8px}
.wd-pr .n{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--white);font:500 20px var(--mono);box-shadow:0 0 0 6px var(--deep)}
.wd-pr b{font:700 19px/1.2 var(--disp)}
.wd-pr span{font-size:15px;color:var(--mist)}

/* ---------- why odoo ---------- */
.wd-wo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center;margin-top:40px}
.wd-wo ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.wd-wo li{display:flex;gap:14px;align-items:flex-start;font-size:17px}
.wd-wo li svg{flex:none;width:28px;height:28px;margin-top:1px}
.wd-wo li b{display:block;font:700 19px var(--disp)}
.wd-wo li span{color:var(--muted)}

/* ---------- contact ---------- */
.wd-ct-phone{display:inline-flex;align-items:center;gap:12px;margin-top:22px;background:rgba(255,255,255,.1);border-radius:999px;padding:8px 8px 8px 20px;font:500 20px var(--mono);color:var(--white);user-select:all}
.wd-ct-phone button{all:unset;cursor:pointer;background:var(--teal);color:var(--white);font:600 14px var(--body);padding:8px 14px;border-radius:999px;user-select:none}
.wd-ct-phone button:focus-visible{outline:3px solid var(--teal-lite);outline-offset:2px}

/* motion: plays once per band; everything shows if the observer never fires */
.gx-js .gx-s:not(.on) .up,.gx-js .gx-s:not(.on) .fade,.gx-js .gx-s:not(.on) .pop,.gx-js .gx-s:not(.on) .left,.gx-js .gx-s:not(.on) .stamp,.gx-js .gx-s:not(.on) .drop{opacity:0}
.gx-js .gx-s:not(.on) .gx-line i{transform:translateY(110%)}
.gx-swipe::after{transform:scaleX(1)}
.gx-js .gx-s .gx-swipe::after{transform:scaleX(0)}
.on .up{animation:gxUp .8s var(--d,0s) cubic-bezier(.2,.8,.2,1) both}
.on .fade{animation:gxFade .8s var(--d,0s) both}
.on .pop{transform-box:fill-box;transform-origin:center;animation:gxPop .55s var(--d,0s) cubic-bezier(.3,1.6,.5,1) both}
.on .left{animation:gxLeft .8s var(--d,0s) cubic-bezier(.2,.8,.2,1) both}
.on .gx-line i{animation:gxLine .9s var(--d,0s) cubic-bezier(.2,.8,.2,1) both}
.on .stamp{animation:gxStamp .5s var(--d,0s) cubic-bezier(.3,1.5,.5,1) both}
.on .drop{animation:gxDrop .7s var(--d,0s) cubic-bezier(.3,1.4,.5,1) both}
.on .gx-swipe::after{animation:gxSwipe .6s var(--d,0s) cubic-bezier(.7,0,.2,1) forwards}
.on .bob{animation:gxBob 3.6s var(--d,0s) ease-in-out infinite}
.on .spin{transform-box:fill-box;transform-origin:center;animation:gxSpin 22s linear infinite}
.on .wd-blink{animation:gxBlink 1.1s steps(2,start) infinite}
.on .wd-type{animation:gxType 3.2s var(--d,1.6s) steps(18) infinite}
@keyframes gxUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}
@keyframes gxFade{from{opacity:0}to{opacity:1}}
@keyframes gxPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes gxLeft{from{opacity:0;translate:-100px 0}to{opacity:1;translate:0 0}}
@keyframes gxLine{from{transform:translateY(110%)}to{transform:none}}
@keyframes gxStamp{from{opacity:0;transform:scale(2.4) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes gxDrop{from{opacity:0;translate:0 -160px;rotate:-10deg}to{opacity:1;translate:0 0}}
@keyframes gxSwipe{to{transform:scaleX(1)}}
@keyframes gxBob{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes gxSpin{to{transform:rotate(360deg)}}
@keyframes gxBlink{to{opacity:.1}}
@keyframes gxType{0%{clip-path:inset(0 100% 0 0)}60%,90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@media (prefers-reduced-motion: reduce){.gx-wd *,.gx-wd *::after{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}}

@media (max-width:980px){.wd-bl{grid-template-columns:repeat(2,minmax(0,1fr))}.wd-pr{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}.wd-pr::before{display:none}}
@media (max-width:900px){
  .gx-grid2,.wd-wo,.wd-wb{grid-template-columns:minmax(0,1fr)}
  .gx-panel{display:none}
  .wd-wk{grid-template-columns:minmax(0,1fr)}
  .wd-wk-card.wd-wide{grid-template-columns:minmax(0,1fr)}
  .wd-hero-art{max-width:540px;margin:0 auto;width:100%}
}
@media (max-width:640px){.gx-wd{font-size:17px}.wd-bl{grid-template-columns:minmax(0,1fr)}.wd-pr{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* real screenshots of live client sites (19.0.1.12.2) */
.gx-wd .wd-wk-shot{width:100%;max-width:560px;border-radius:12px 12px 0 0;overflow:hidden;background:#fff;box-shadow:0 30px 50px -30px rgba(20,8,24,.55)}
.gx-wd .wd-wk-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#EFEAF1;direction:ltr}
.gx-wd .wd-wk-bar i{width:9px;height:9px;border-radius:50%;background:#D9C7DE}
.gx-wd .wd-wk-bar span{margin-inline-start:8px;flex:1;min-width:0;font:500 12px var(--mono);color:var(--muted);background:#fff;border-radius:999px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-wd .wd-wk-shot img{display:block;width:100%;height:auto;aspect-ratio:1200/596}
.gx-wd .wd-wk-url{display:inline-flex;gap:6px;align-items:center;font:600 15px var(--body);border-bottom:none;background:var(--teal);color:var(--white);padding:9px 16px;border-radius:999px;text-decoration:none;margin-top:4px}
.gx-wd .wd-wk-url:hover{background:var(--teal-ink)}