/* iDEO child theme: the front page and the Case studies page. Scoped under body .ideo-home. */

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
body.ideo-front{
  margin:0;background:var(--page);color:var(--light);
  font-family:var(--serif);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body .ideo-home a{color:inherit;text-decoration:none}
body .ideo-home :focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:2px}
body .ideo-home .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body .ideo-home .label{font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase}
body .ideo-home .hero{position:relative;isolation:isolate;overflow:hidden;background:var(--page);
    min-height:100svh;display:flex;align-items:center;}
body .ideo-home .hero .media{position:absolute;inset:0;z-index:0}
body .ideo-home .hero .poster{position:absolute;inset:0;background-image:var(--poster,none);background-size:cover;background-position:50% 48%}
body .ideo-home .hero video{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 48%;
    opacity:0;transition:opacity 1.3s var(--ease);transform:translateZ(0);}
body .ideo-home .hero.ready video{opacity:1}
body .ideo-home .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      
      linear-gradient(0deg,var(--page) 0%,rgba(18,27,29,.93) 6%,rgba(18,27,29,.78) 13%,rgba(18,27,29,.56) 21%,rgba(18,27,29,.33) 31%,rgba(18,27,29,.14) 42%,rgba(18,27,29,0) 55%),
      linear-gradient(95deg,rgba(4,7,8,.9) 0%,rgba(4,7,8,.8) 22%,rgba(4,7,8,.52) 44%,rgba(4,7,8,.2) 64%,rgba(4,7,8,.1) 100%),
      linear-gradient(180deg,rgba(4,7,8,.58) 0%,rgba(4,7,8,0) 26%);}
/* the hero's orbit is centred on the i of the brand mark in the header, so the mark's own
   orbit carries on into the page; it opens out from the mark as the page arrives */
body .ideo-home .orbit{position:absolute;z-index:2;pointer-events:none;
    --ow:clamp(520px,52vw,860px);
    width:var(--ow);aspect-ratio:1/.74;
    left:calc(clamp(18px,3.6vw,56px) + 17px - var(--ow) / 2);
    top:calc(var(--bar) + env(safe-area-inset-top,0px) + var(--head-h) / 2 - var(--ow) * .37);
    animation:ideo-orbit-in 2.4s var(--ease-out) .2s both;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,rgba(0,0,0,.55) 82%,transparent 100%);
    mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,rgba(0,0,0,.55) 82%,transparent 100%);}
/* the live rings: drawn in 3D by the script; the flat drawing stays for no script */
body .ideo-home .orbit .orbit-live-hero{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:none}
body .ideo-home .orbit.is-live .orbit-live-hero{display:block}
body .ideo-home .orbit.is-live .orbit-static{display:none}
body .ideo-home .orbit-live-hero path{fill:none;stroke-linecap:round}
body .ideo-home .orbit .orbit-static{width:100%;height:100%;display:block;animation:ideo-spin 96s linear infinite;transform-origin:50% 50%}
body .ideo-home .orbit .inner{animation:ideo-spin-back 132s linear infinite;transform-origin:50% 50%}
@keyframes ideo-spin{to{transform:rotate(360deg)}}
@keyframes ideo-orbit-in{from{opacity:0;transform:scale(.62)}to{opacity:1;transform:none}}
@keyframes ideo-spin-back{to{transform:rotate(-360deg)}}
body .ideo-home .hero-in{position:relative;z-index:3;width:100%;
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;gap:clamp(24px,4vw,72px);
    padding:calc(var(--head-h) + clamp(20px,4vh,44px)) clamp(18px,3.6vw,56px) clamp(64px,10vh,110px);}
body .ideo-home .hero-copy{max-width:min(700px,56vw);color:var(--light);text-shadow:var(--tshadow)}
body .ideo-home .eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;
    padding:8px 17px 8px 13px;border-radius:999px;
    font-size:13.5px;letter-spacing:.015em;color:var(--light);
    background:rgba(248,243,237,.1);
    border:1px solid rgba(248,243,237,.26);
    backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
    text-shadow:none;}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body .ideo-home .eyebrow{background:rgba(8,13,14,.72)}
}
body .ideo-home .eyebrow i{flex:0 0 auto;width:6px;height:6px;border-radius:50%;
    background:var(--crimson);box-shadow:0 0 0 4px rgba(211,42,31,.24);}
body .ideo-home h1{margin:0;font-weight:400;font-size:clamp(30px,4.3vw,60px);line-height:1.06;letter-spacing:-.02em}
body .ideo-home h1 .line2{display:block;margin-top:.04em;white-space:nowrap}
body .ideo-home .rotor{position:relative;display:inline-block;vertical-align:baseline}
body .ideo-home .rotor .sizer{visibility:hidden;display:inline-block;font-style:italic;white-space:nowrap}
body .ideo-home .rotor .word{position:absolute;left:0;top:0;white-space:nowrap;
    color:var(--crimson);font-style:italic;
    
    text-shadow:0 1px 2px rgba(3,5,5,.72),0 0 28px rgba(211,42,31,.38),0 6px 26px rgba(3,5,5,.6);
    opacity:0;transform:translateY(.1em);
    animation:ideo-rot 12s linear infinite;}
body .ideo-home .rotor .w1{animation-delay:0s}
body .ideo-home .rotor .w2{animation-delay:4s}
body .ideo-home .rotor .w3{animation-delay:8s}
@keyframes ideo-rot{
    0%{opacity:0;transform:translateY(.16em)}
    3.4%,30%{opacity:1;transform:translateY(0)}
    36.5%,100%{opacity:0;transform:translateY(-.14em)}
  }
body .ideo-home .hero-sub{margin:24px 0 0;max-width:46ch;
    font-size:clamp(16.5px,1.25vw,19.5px);line-height:1.62;color:rgba(248,243,237,.86);
    text-align:justify;text-justify:inter-word;
    -webkit-hyphens:auto;hyphens:auto;}
@keyframes ideo-rise{to{opacity:1;transform:none}}
body .ideo-home .book{position:relative;
    width:min(340px,88vw);
    border-radius:16px;padding:20px 20px 16px;
    
    background:linear-gradient(180deg,rgba(7,12,13,.3),rgba(7,12,13,.4));
    backdrop-filter:blur(40px) saturate(155%);-webkit-backdrop-filter:blur(40px) saturate(155%);
    border:1px solid rgba(248,243,237,.22);
    box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 38px 90px -48px rgba(0,0,0,.95);
    color:var(--light);
    text-shadow:0 1px 12px rgba(3,5,5,.5);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body .ideo-home .book{background:rgba(8,13,14,.88)}
}
body .ideo-home .edge{position:absolute;inset:-1px;border-radius:17px;padding:1.1px;
    overflow:hidden;pointer-events:none;z-index:1;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;}
body .ideo-home .edge i{position:absolute;top:50%;left:50%;width:155%;aspect-ratio:1;
    transform:translate(-50%,-50%) rotate(0deg);
    background:conic-gradient(from 0deg,
      rgba(255,255,255,0) 0 58%,
      rgba(255,255,255,.012) 68%,
      rgba(255,255,255,.04) 78%,
      rgba(255,255,255,.1) 85%,
      rgba(255,255,255,.2) 87.8%,
      rgba(255,255,255,.32) 89.3%,
      rgba(255,255,255,0) 90.2% 100%);
    animation:ideo-edgespin 17s linear infinite;}
@keyframes ideo-edgespin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
body .ideo-home .edge{display:none}
}
body .ideo-home .book > .label{display:block;color:rgba(248,243,237,.6);margin-bottom:4px}
body .ideo-home .book-head{margin:0 0 14px;font-weight:400;font-size:21px;line-height:1.2}
body .ideo-home .book-cta{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;
    font-family:var(--serif);color:var(--light);text-align:left;}
body .ideo-home .cta-line{display:flex;align-items:baseline;gap:10px;
    font-weight:700;font-size:clamp(23px,1.65vw,27px);
    letter-spacing:-.015em;line-height:1.16;
    text-shadow:0 2px 16px rgba(3,5,5,.45);}
body .ideo-home .cta-line em{font-weight:700;font-style:italic;color:var(--crimson);
    border-bottom:1.5px solid rgba(211,42,31,0);padding-bottom:2px;
    transition:border-color .4s var(--ease);}
body .ideo-home .cta-line .arrow{align-self:center;flex:0 0 auto;position:relative;top:1px;
    width:20px;height:12px;overflow:visible;
    filter:drop-shadow(0 0 6px rgba(211,42,31,.5)) drop-shadow(0 1px 6px rgba(3,5,5,.45));
    opacity:1;transform:translateX(0);transition:transform .45s var(--ease);
    animation:ideo-beckon 3.6s var(--ease) infinite;}
body .ideo-home .cta-line .arrow .trav{animation:17s linear infinite}
body .ideo-home .cta-line .arrow .tail{animation-name:ideo-travTail}
body .ideo-home .cta-line .arrow .tip{animation-name:ideo-travTip}
@keyframes ideo-travTail{0%,87%{stroke-dashoffset:7}100%{stroke-dashoffset:-15.8}}
@keyframes ideo-travTip{0%,87%{stroke-dashoffset:2}100%{stroke-dashoffset:-20.8}}
@keyframes ideo-beckon{
    0%,58%{opacity:1;transform:translateX(0)}
    66%{opacity:.3;transform:translateX(4px)}
    73%{opacity:1;transform:translateX(6px)}
    81%{opacity:.4;transform:translateX(3px)}
    89%,100%{opacity:1;transform:translateX(0)}
  }
body .ideo-home .cta-sub{display:block;margin-top:5px;font-size:12.5px;letter-spacing:.02em;
    color:rgba(248,243,237,.58);}
body .ideo-home .book-cta:hover .cta-line em{border-bottom-color:rgba(211,42,31,.9)}
body .ideo-home .book-cta:hover .arrow{animation:none;opacity:1;transform:translateX(6px)}
body .ideo-home .slots{display:flex;flex-direction:column}
body .ideo-home .slot{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    width:100%;padding:11px 0;background:transparent;border:0;border-top:1px solid rgba(248,243,237,.16);
    color:var(--light);font-family:var(--serif);text-align:left;cursor:pointer;
    transition:padding-left .4s var(--ease),color .4s var(--ease);}
body .ideo-home .slot:first-child{border-top:0}
body .ideo-home .slot::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
    background:var(--crimson);transform:scaleX(0);transform-origin:left;
    transition:transform .5s var(--ease);}
body .ideo-home .slot:hover{padding-left:7px}
body .ideo-home .slot:hover::before{transform:scaleX(1)}
body .ideo-home .slot .day{font-size:18.5px;font-style:italic}
body .ideo-home .slot .date{font-size:15px;color:rgba(248,243,237,.66);white-space:nowrap}
body .ideo-home .slot .tag{display:inline-flex;align-items:center;gap:5px;
    font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(248,243,237,.8);border:1px solid rgba(248,243,237,.3);
    border-radius:999px;padding:2px 8px;white-space:nowrap;}
body .ideo-home .slot .tag::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--crimson)}
body .ideo-home .slot.is-today .day{color:#fff}
body .ideo-home .slot.is-today .tag{border-color:rgba(211,42,31,.6);color:#fff}
body .ideo-home .book-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:14px;padding-top:12px;border-top:1px solid rgba(248,243,237,.16);}
body .ideo-home .book-foot p{margin:0;font-size:12px;line-height:1.4;color:rgba(248,243,237,.55);max-width:19ch}
body .ideo-home .more{background:transparent;border:0;padding:0;cursor:pointer;color:var(--light);
    font-family:var(--serif);font-size:14px;border-bottom:1px solid rgba(248,243,237,.45);
    transition:color .35s var(--ease),border-color .35s var(--ease);white-space:nowrap;}
body .ideo-home .more:hover{color:var(--light);border-color:var(--crimson)}
body .ideo-home .hero-foot{position:absolute;z-index:3;left:clamp(18px,3.6vw,56px);bottom:clamp(14px,2.4vh,24px);
    display:flex;align-items:center;gap:12px;color:rgba(248,243,237,.55);margin:0;
    text-shadow:0 1px 8px rgba(3,5,5,.6);}
body .ideo-home .hero-foot s{display:block;width:42px;height:1px;background:rgba(248,243,237,.34);position:relative;overflow:hidden;text-decoration:none}
body .ideo-home .hero-foot s::after{content:"";position:absolute;inset:0;background:var(--crimson);transform:translateX(-100%);animation:ideo-cue 3.6s var(--ease) infinite}
@keyframes ideo-cue{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
body .ideo-home .modal{position:fixed;inset:0;z-index:90;display:none}
body .ideo-home .modal.open{display:block}
body .ideo-home .modal-bg{position:absolute;inset:0;background:rgba(4,7,8,.66);
    backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);}
body .ideo-home .modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(720px,calc(100vw - 32px));max-height:min(88svh,880px);
    overflow:auto;overflow-x:hidden;
    
    background:rgba(7,12,13,.42);
    backdrop-filter:blur(46px) saturate(150%);-webkit-backdrop-filter:blur(46px) saturate(150%);
    border:1px solid rgba(248,243,237,.2);
    color:var(--light);border-radius:18px;
    box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 50px 140px -46px rgba(0,0,0,.9);
    animation:ideo-pop .55s var(--ease-out);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body .ideo-home .modal-card{background:rgba(7,12,13,.94)}
}
@keyframes ideo-pop{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
body .ideo-home .modal-bar{position:sticky;top:0;z-index:6;display:flex;justify-content:flex-end;
    padding:14px 14px 10px;
    background:linear-gradient(180deg,rgba(7,12,13,.78) 56%,rgba(7,12,13,0));
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
body .ideo-home .modal-close{width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(248,243,237,.34);background:rgba(248,243,237,.08);
    cursor:pointer;font-family:var(--serif);font-size:21px;line-height:1;color:var(--light);
    transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);}
body .ideo-home .modal-close:hover{background:var(--light);border-color:var(--light);color:var(--ink);transform:rotate(90deg)}
body .ideo-home .modal-body{padding:0 clamp(22px,3.2vw,44px) clamp(26px,3.2vw,40px);min-width:0}
body .ideo-home .modal-card h2{margin:0;font-weight:400;font-size:clamp(24px,2.7vw,35px);line-height:1.14;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(3,5,5,.5)}
body .ideo-home .modal-card h2 em{font-style:italic;color:var(--crimson)}
body .ideo-home .modal-card .kicker{color:rgba(248,243,237,.66);display:block;margin-bottom:12px}
body .ideo-home .modal-card .lede{margin:14px 0 0;color:rgba(248,243,237,.84);max-width:54ch;font-size:16.5px}
body .ideo-home .brandname{white-space:nowrap;text-transform:none;letter-spacing:.03em}
body .ideo-home form{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:26px}
body .ideo-home .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
body .ideo-home .field{display:flex;flex-direction:column;gap:6px;min-width:0}
body .ideo-home .field label{color:rgba(248,243,237,.82);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
body .ideo-home .field label i{font-style:normal;font-weight:400;letter-spacing:.06em;text-transform:none;opacity:.7}
body .ideo-home .field input,
body .ideo-home .field textarea{font-family:var(--serif);font-size:17px;color:var(--light);background:transparent;
    border:0;border-bottom:1px solid rgba(248,243,237,.34);padding:8px 2px;border-radius:0;width:100%;
    transition:border-color .3s var(--ease);}
body .ideo-home .field textarea{resize:vertical;min-height:56px;line-height:1.5}
body .ideo-home .field input:focus,
body .ideo-home .field textarea:focus{outline:none;border-bottom-color:var(--crimson)}
body .ideo-home .field input::placeholder,
body .ideo-home .field textarea::placeholder{color:rgba(248,243,237,.45)}
body .ideo-home .when-block{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:20px;border-radius:14px;
    border:1px solid rgba(248,243,237,.16);background:rgba(248,243,237,.07);}
body .ideo-home .when-block > div{min-width:0}
body .ideo-home .when-block .label{color:rgba(248,243,237,.7)}
body .ideo-home .day-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 9px}
body .ideo-home .day-head .label{margin:0}
body .ideo-home .month-nav{display:flex;align-items:center;gap:6px}
body .ideo-home .month-nav b{font-weight:400;font-size:14.5px;min-width:10ch;text-align:center;white-space:nowrap}
body .ideo-home .month-nav button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(248,243,237,.3);
    background:transparent;cursor:pointer;font-family:var(--serif);font-size:15px;line-height:1;color:var(--light);
    transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);}
body .ideo-home .month-nav button:hover:not(:disabled){background:var(--light);border-color:var(--light);color:var(--ink)}
body .ideo-home .month-nav button:disabled{opacity:.28;cursor:not-allowed}
body .ideo-home .days-row{display:flex;gap:8px;min-width:0;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
body .ideo-home .days-row::-webkit-scrollbar{display:none}
body .ideo-home .day-chip{flex:0 0 auto;padding:9px 14px;border-radius:999px;
    border:1px solid rgba(248,243,237,.3);background:transparent;
    font-family:var(--serif);font-size:15px;color:var(--light);cursor:pointer;white-space:nowrap;
    transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease);}
body .ideo-home .day-chip:hover{border-color:var(--light)}
body .ideo-home .day-chip[aria-pressed="true"]{background:var(--light);border-color:var(--light);color:var(--ink)}
body .ideo-home .day-chip.fri::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
    background:var(--crimson);margin-left:7px;vertical-align:middle;}
body .ideo-home .mo-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:2px}
body .ideo-home .mo-grid .dow{text-align:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(248,243,237,.55);padding-bottom:5px;}
body .ideo-home .mo-day{position:relative;aspect-ratio:1;border:0;border-radius:9px;background:transparent;
    font-family:var(--serif);font-size:15px;color:var(--light);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .25s var(--ease),color .25s var(--ease);}
body .ideo-home .mo-day:hover:not(:disabled){background:rgba(248,243,237,.14)}
body .ideo-home .mo-day:disabled{color:rgba(248,243,237,.3);cursor:not-allowed}
body .ideo-home .mo-day.today{box-shadow:inset 0 0 0 1px rgba(248,243,237,.4)}
body .ideo-home .mo-day.fri::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
    width:3.5px;height:3.5px;border-radius:50%;background:var(--crimson);}
body .ideo-home .mo-day:disabled.fri::after{background:rgba(211,42,31,.4)}
body .ideo-home .mo-day[aria-pressed="true"]{background:var(--light);color:var(--ink)}
body .ideo-home .day-toggle{background:none;border:0;padding:0;margin-top:11px;cursor:pointer;
    font-family:var(--serif);font-size:13.5px;color:rgba(248,243,237,.76);
    border-bottom:1px solid rgba(248,243,237,.32);
    transition:color .3s var(--ease),border-color .3s var(--ease);}
body .ideo-home .day-toggle:hover{color:var(--light);border-color:var(--crimson)}
@media (pointer:coarse){
body .ideo-home .mo-day{min-height:42px}
body .ideo-home .month-nav button{width:38px;height:38px}
}
/* the hour, the minutes and am or pm on wheels, set the way an alarm is set on an iPhone:
   a drum of values seen in perspective, the chosen one in the glass band across the middle */
body .ideo-home .clock{display:flex;align-items:center;justify-content:center;margin:2px 0 12px}
body .ideo-home .clock + .hint{text-align:center}
body .ideo-home .wheels{position:relative;display:flex;align-items:center;gap:2px;padding:0 8px}
body .ideo-home .wheel-band{position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px;border-radius:13px;pointer-events:none;
    background:linear-gradient(180deg,rgba(248,243,237,.085),rgba(248,243,237,.05));
    box-shadow:inset 0 0 0 1px rgba(248,243,237,.1),inset 0 1px 0 rgba(255,255,255,.07),0 8px 24px -14px rgba(0,0,0,.6);}
body .ideo-home .wcol{position:relative;display:flex;flex-direction:column;align-items:center}
body .ideo-home .wheel{position:relative;display:block;width:68px;height:156px;
    perspective:520px;overflow:hidden;cursor:grab;touch-action:none;
    -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);}
body .ideo-home .wheel.is-grabbing{cursor:grabbing}
body .ideo-home .wheel:focus{outline:none}
body .ideo-home .wheel:focus-visible{outline:1px solid rgba(248,243,237,.5);outline-offset:-1px;border-radius:13px}
body .ideo-home .wheel i{position:absolute;left:0;right:0;top:50%;height:40px;margin-top:-20px;
    display:flex;align-items:center;justify-content:center;
    font-style:normal;font-size:28px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
    color:rgba(248,243,237,.62);backface-visibility:hidden;-webkit-backface-visibility:hidden;
    transition:color .18s var(--ease);will-change:transform,opacity;}
body .ideo-home .wheel i.is-sel{color:var(--light)}
body .ideo-home .wheel-ampm{width:58px}
body .ideo-home .wheel-ampm i{font-size:18px;letter-spacing:.08em}
body .ideo-home .wheel-ampm i.is-sel{color:var(--light)}
body .ideo-home .wcol-ampm{margin-left:8px}
body .ideo-home .colon{align-self:center;margin-top:-4px;font-size:26px;line-height:1;color:rgba(248,243,237,.55);
    width:12px;text-align:center;pointer-events:none}
body .ideo-home .step{display:grid;place-items:center;width:46px;height:28px;border:0;border-radius:9px;
    background:transparent;cursor:pointer;color:rgba(248,243,237,.6);
    transition:background .25s var(--ease),color .25s var(--ease);}
body .ideo-home .step svg{width:15px;height:9px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body .ideo-home .step:hover{background:rgba(248,243,237,.1);color:var(--light)}
body .ideo-home .step:active{background:rgba(248,243,237,.16)}
/* iPhone haptics: the wheel sits inside an invisible switch's label (see site.js) */
body .ideo-home .hap-wrap{display:contents}
body .ideo-home .hint{margin:0;font-size:13.5px;color:rgba(248,243,237,.76);line-height:1.45}
body .ideo-home .hint.warn{color:var(--light)}
body .ideo-home .hint.warn::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
    background:var(--crimson);margin:0 8px 2px 0;vertical-align:middle;}
@media (pointer:coarse){
body .ideo-home .step{height:38px}
body .ideo-home .day-chip{min-height:44px}
}
body .ideo-home .slip{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
    padding:15px 18px;border:1px solid rgba(248,243,237,.16);background:rgba(248,243,237,.07);border-radius:12px;}
body .ideo-home .slip .label{color:rgba(248,243,237,.66)}
body .ideo-home .slip .when{margin:0;font-size:clamp(18px,2vw,23px);letter-spacing:-.01em;color:var(--light)}
body .ideo-home .slip .when span{color:var(--crimson);font-style:italic}
body .ideo-home .slip .tz{margin:0;width:100%;color:rgba(248,243,237,.74);font-size:13.5px}
body .ideo-home .submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
body .ideo-home .proc{position:relative;color:var(--light);background:var(--page);isolation:isolate;
    padding:clamp(54px,8vh,112px) 0 clamp(72px,10vh,132px);}
body .ideo-home .proc-in{max-width:1440px;margin-inline:auto;
    padding-inline:clamp(18px,3.6vw,56px);
    scroll-margin-top:calc(var(--head-h) + clamp(16px,3vh,30px));}
body .ideo-home .sec-mark{display:flex;align-items:center;gap:clamp(11px,1.3vw,17px);
    margin:0 0 clamp(17px,2.6vh,28px);
    font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
    color:var(--t3);}
body .ideo-home .sec-mark span{white-space:nowrap}
body .ideo-home .sec-mark svg{flex:0 0 auto;width:28px;height:13px;overflow:visible;
    filter:drop-shadow(0 0 6px rgba(211,42,31,.4));}
body .ideo-home .proc-head{max-width:none}
body .ideo-home .proc-head h2{margin:0 0 14px;font-weight:400;
    font-size:clamp(27px,3.6vw,50px);line-height:1.07;letter-spacing:-.02em;}
body .ideo-home .proc-head h2 em{font-style:italic;color:var(--crimson)}
body .ideo-home .proc-sub{margin:0;max-width:56ch;color:var(--t2);
    font-size:clamp(16px,1.15vw,18.5px);line-height:1.65;}
body .ideo-home .rm{--gut:clamp(34px,3.8vw,58px);--pad:clamp(20px,3.2vh,32px);--dot:clamp(30px,2.3vw,34px);
      position:relative;margin-top:clamp(32px,5vh,62px);padding-bottom:clamp(20px,2.8vh,32px)}
body .ideo-home .rm-rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line);overflow:hidden}
body .ideo-home .rm-rail i{position:absolute;left:0;right:0;top:-2px;bottom:0;
    background:linear-gradient(180deg,
      rgba(211,42,31,0) 0%,
      rgba(211,42,31,.14) 42%,
      rgba(211,42,31,.55) 82%,
      var(--crimson) 98%,
      var(--crimson) 100%);
    transform:translateY(-100%);}
body .ideo-home .rm-end{position:absolute;left:0;bottom:0;transform:translate(-50%,50%);
    width:15px;height:1px;background:var(--line);
    transition:background .5s var(--ease),box-shadow .5s var(--ease);}
body .ideo-home .rm.done .rm-end{background:var(--crimson);box-shadow:0 0 10px 1px rgba(211,42,31,.42)}
body .ideo-home .rm-rail i::after{content:"";position:absolute;left:50%;bottom:-1px;
    width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
    background:var(--crimson);box-shadow:0 0 11px 2px rgba(211,42,31,.55);}
body .ideo-home .rm-list{list-style:none;margin:0;padding:0}
body .ideo-home .rm-row{position:relative;display:grid;
    grid-template-columns:minmax(0,1fr);
    padding:var(--pad) 0 var(--pad) var(--gut);
    border-top:1px solid var(--line);}
body .ideo-home .rm-row:first-child{border-top:0;padding-top:0}
body .ideo-home .rm-no{position:absolute;left:0;top:calc(var(--pad) - 3px);
    transform:translateX(-50%);
    width:var(--dot);height:var(--dot);border-radius:50%;
    display:grid;place-items:center;
    background:var(--page);border:1px solid var(--line);
    font-size:13px;font-weight:700;letter-spacing:.08em;
    color:var(--t3);
    transition:color .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);}
body .ideo-home .rm-row:first-child .rm-no{top:-3px}
body .ideo-home .rm-no::after{content:"";position:absolute;inset:-1px;border-radius:50%;
    border:1px solid var(--crimson);opacity:0;}
body .ideo-home .rm-row.on .rm-no{color:#fff;background:var(--crimson-deep);border-color:var(--crimson);
    animation:ideo-seat .72s var(--ease-out);}
body .ideo-home .rm-row.on .rm-no::after{animation:ideo-arrive .95s var(--ease-out) forwards}
@keyframes ideo-seat{
    0%{transform:translateX(-50%) scale(1)}
    44%{transform:translateX(-50%) scale(1.11)}
    100%{transform:translateX(-50%) scale(1)}
  }
@keyframes ideo-arrive{
    0%{opacity:.9;transform:scale(1)}
    100%{opacity:0;transform:scale(2.2)}
  }
body .ideo-home .rm-do{grid-column:1;min-width:0}
body .ideo-home .rm-do h3{margin:0 0 8px;font-weight:700;text-wrap:balance;color:var(--t1);
    font-size:clamp(17.5px,1.3vw,20.5px);line-height:1.26;letter-spacing:-.01em;}
body .ideo-home .rm-do p{margin:0;max-width:54ch;color:var(--t2);
    font-size:clamp(15.3px,1vw,16.4px);line-height:1.7;}
body .ideo-home .rm-grp{margin-top:14px}
body .ideo-home .rm-lab{display:flex;align-items:center;gap:8px;margin:0 0 8px;
    font-size:9.5px;font-weight:700;letter-spacing:.22em;line-height:1.4;
    text-transform:uppercase;color:var(--t3);}
body .ideo-home .rm-lab s{flex:0 0 auto;width:5px;height:5px;border-radius:50%;text-decoration:none;
    background:var(--crimson);box-shadow:0 0 0 3px rgba(211,42,31,.18);}
body .ideo-home .rm-lab.later s{background:transparent;box-shadow:0 0 0 1px rgba(211,42,31,.95) inset}
body .ideo-home .rm-chip{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
body .ideo-home .rm-chip li{padding:4px 11px;border-radius:999px;font-size:12.6px;
    color:var(--t2);border:1px solid var(--line-2);}
body .ideo-home .rm-chip.soon li{color:var(--t3);border-color:var(--line)}
body .ideo-home .rm-get{grid-column:1;min-width:0;max-width:54ch;
    margin-top:13px;padding-top:11px;border-top:1px solid var(--line);}
body .ideo-home .rm-get b{display:block;margin-bottom:3px;
    font-size:9.5px;font-weight:700;letter-spacing:.22em;line-height:1.4;
    text-transform:uppercase;color:var(--t3);}
body .ideo-home .rm-get span{font-size:14.4px;font-style:italic;color:var(--t2)}
@media (min-width:1000px){
body .ideo-home .rm-row{grid-template-columns:minmax(0,1.5fr) minmax(224px,.72fr);
      column-gap:clamp(22px,2.6vw,48px);align-items:start;}
body .ideo-home .rm-get{grid-column:2;max-width:none;margin-top:.34em;
      padding:0 0 0 clamp(22px,2.4vw,44px);
      border-top:0;border-left:1px solid var(--line);}
body .ideo-home .rm-do p{max-width:56ch}
}
@media (min-width:700px){
body .ideo-home .proc-sub{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
}
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
}
@media (max-width:1099px){
body .ideo-home .hero-copy{max-width:min(620px,62vw)}
body .ideo-home .orbit{--ow:min(70vw,560px)}
body .ideo-home .book{width:312px}
}
@media (max-width:860px){
body .ideo-home .rotor{font-size:1.06em}
body .ideo-home .hero-in{grid-template-columns:1fr;align-items:start;gap:26px}
body .ideo-home .hero-copy{max-width:none}
body .ideo-home .book{width:min(420px,100%)}
}
@media (max-width:699px){
body .ideo-home h1{font-size:clamp(23px,7vw,33px)}
body .ideo-home .hero-in{padding-bottom:clamp(38px,7vh,62px);gap:22px}
body .ideo-home .hero-sub{font-size:16px;max-width:34ch;margin-top:18px}
body .ideo-home .eyebrow{font-size:12.5px;padding:7px 14px 7px 11px;margin-bottom:20px}
body .ideo-home .hero-foot{display:none}
body .ideo-home .orbit{--ow:min(132vw,600px)}
body .ideo-home .scrim{background:
        linear-gradient(180deg,rgba(4,7,8,.6) 0%,rgba(4,7,8,.12) 22%,rgba(4,7,8,.2) 34%,rgba(4,7,8,.44) 50%,rgba(14,22,23,.7) 70%,rgba(18,27,29,.9) 86%,var(--page) 100%),
        linear-gradient(95deg,rgba(4,7,8,.22) 0%,rgba(4,7,8,0) 70%);}
body .ideo-home .book{width:100%;padding:17px 17px 14px;
      backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);}
body .ideo-home .book h2{font-size:19px;margin-bottom:10px}
body .ideo-home .slot{padding:10px 0}
body .ideo-home .slot .day{font-size:17.5px}
body .ideo-home .row{grid-template-columns:1fr}
body .ideo-home .submit-row .ideo-btn{width:100%}
body .ideo-home .when-block{padding:16px}
}
@media (max-height:560px) and (orientation:landscape){
body .ideo-home .hero{min-height:640px}
body .ideo-home .hero-foot{display:none}
}
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
body .ideo-home .rotor .word{opacity:0}
body .ideo-home .rotor .w1{opacity:1}
body .ideo-home .hero-foot s::after{display:none}
body .ideo-home .cta-line .arrow{animation:none;opacity:1;transform:none}
body .ideo-home .cta-line .arrow .trav{display:none}
body .ideo-home .edge{display:none}
}
@media (max-width:699px){
body .ideo-home .edge{display:none}
body .ideo-home .orbit .inner{animation:none}
body .ideo-home .orbit{animation:none}
body .ideo-home .cta-line .arrow .tail{display:none}
body .ideo-home .book{backdrop-filter:blur(14px) saturate(145%);-webkit-backdrop-filter:blur(14px) saturate(145%)}
}


/* ================= WordPress build additions (v44) ================= */

/* the fixed header sits below the admin bar for logged-in users */
body .ideo-home .hero-in{padding-top:calc(var(--bar) + var(--head-h) + clamp(20px,4vh,44px))}

/* Laptops and tablets: the words and the booking panel sit in the upper part of the hero,
   their tops on one line, so the lower part belongs to the film: the hand, the screen,
   the booking, seen clearly. The scroll cue stays at the foot. */
@media (min-width:700px){
  body .ideo-home .hero{align-items:flex-start}
  body .ideo-home .hero-in{align-items:start;
    padding-top:calc(var(--bar) + var(--head-h) + clamp(40px,9vh,104px))}
}
/* Phones: the story image stays clear above; the words run the full width, set justified,
   and the band runs straight on into the next section without an empty gap */
@media (max-width:699px){
  body .ideo-home .hero-sub{max-width:none;text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
  body .ideo-home .hero-in{padding-bottom:26px}
  body .ideo-home .creds{padding-top:40px}
}

/* the still that shows first: CSS picks the right one per screen, so nothing waits on a script */
body .ideo-home .hero .poster{background-image:url("../media/poster-wide.jpg?v=7")}

/* the changing word rolls through a soft-edged window, one word leaving upward as the next
   arrives from below, so two words never sit on top of each other */
body .ideo-home .rotor{
  padding:.34em .5em .34em 0;margin:-.34em -.5em -.34em 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 72%,transparent 100%);
  perspective:520px;
}
body .ideo-home .rotor .word{
  top:.34em;left:0;
  opacity:0;transform:translateY(.72em) rotateX(-68deg);
  transform-origin:50% 60%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  animation:ideo-flip 12s cubic-bezier(.45,0,.2,1) infinite;
}
body .ideo-home .rotor .w1{animation-delay:-.2s}
body .ideo-home .rotor .w2{animation-delay:3.8s}
body .ideo-home .rotor .w3{animation-delay:7.8s}
@keyframes ideo-flip{
  0%{opacity:0;transform:translateY(.72em) rotateX(-68deg)}
  5%,29%{opacity:1;transform:translateY(0) rotateX(0)}
  34.5%,100%{opacity:0;transform:translateY(-.72em) rotateX(68deg)}
}

/* ---- booking form states ---- */
body .ideo-home .field.invalid input,body .ideo-home .field.invalid textarea{border-bottom-color:var(--crimson)}
body .ideo-home .field .err{margin:2px 0 0;font-size:12.5px;color:#F2B8B2;line-height:1.35}
body .ideo-home .form-note{margin:0;font-size:14px;line-height:1.5;color:var(--t2)}
body .ideo-home .form-note.bad{color:#F2B8B2}
body .ideo-home .form-note a{color:var(--light);border-bottom:1px solid var(--crimson)}
body .ideo-home .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
body .ideo-home .sent{padding:6px 0 4px}
body .ideo-home .sent[hidden]{display:none}
body .ideo-home .sent-mark{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:4px 0 22px;
  border:1px solid rgba(211,42,31,.7);box-shadow:0 0 0 6px rgba(211,42,31,.12);
}
body .ideo-home .sent h3{margin:0 0 10px;font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em}
body .ideo-home .sent h3 em{font-style:italic;color:var(--crimson)}
body .ideo-home .sent p{margin:0 0 20px;color:var(--t2);max-width:50ch}
body .ideo-home .sent .slip{margin-bottom:22px}
body .ideo-home .ideo-btn-ghost,body .ideo-home .ideo-btn-ghost:focus{background:transparent;color:var(--light);border-color:rgba(248,243,237,.4)}
body .ideo-home .ideo-btn-ghost:hover{background:var(--light);color:var(--ink);border-color:var(--light)}

/* ================= phones: the picture tells the story, the words follow it ================= */
@media (max-width:699px){
  body .ideo-home .hero{display:block;min-height:0}
  body .ideo-home .hero .media,body .ideo-home .scrim{
    inset:auto;top:0;left:0;right:0;height:calc(100vw * 16 / 9);overflow:hidden;
  }
  body .ideo-home .hero .poster{
    background-image:url("../media/poster-tall.jpg");background-position:24% 0;
    transform-origin:30% 42%;
  }
  body .ideo-home .hero video{object-position:24% 0}
  body .ideo-home .scrim{
    background:linear-gradient(180deg,
      rgba(4,7,8,.62) 0%,rgba(4,7,8,.2) 11%,rgba(4,7,8,0) 20%,
      rgba(4,7,8,0) 55%,rgba(18,27,29,.8) 72%,var(--page) 92%);
  }
  body .ideo-home .hero-in{padding-top:calc(100vw * 16 / 9 * .69)}
  body .ideo-home .orbit{display:none}
}
/* a slow push-in keeps the still alive, at the cost of one composited transform */
@media (max-width:699px) and (prefers-reduced-motion:no-preference){
  body .ideo-home .hero .poster{animation:ideo-drift 26s ease-in-out -3s infinite alternate}
  body .ideo-home .hero.is-off .poster{animation-play-state:paused}
}
@keyframes ideo-drift{
  from{transform:scale(1.002)}
  to{transform:scale(1.075) translate3d(-1.2%,-1.4%,0)}
}

@media (prefers-reduced-motion:reduce){
  body .ideo-home .rotor{-webkit-mask-image:none;mask-image:none}
  body .ideo-home .rotor .word{transform:none}
  body .ideo-home .rotor .w1{opacity:1}
}

body .ideo-home #time-label{margin:0 0 6px}
body .ideo-home .submit-row .form-note{flex:1 1 240px}
body .ideo-home .sent:focus{outline:none}
body .ideo-home .slip .when span{white-space:nowrap}

/* Sections meet without rules. They share the page colour, a midnight petrol taken from
   the film's cool opening shot, and each one's own light (the film, a glow, the soft teal
   and royal blue fields) fades out before its edges, so one runs into the next the way the
   film fades into the page. New sections follow the same rule. */
body .ideo-home main > section{border-top:0;border-bottom:0}

/* ================= credentials: the letters after our names (v1.5) ================= */
/* The iDEO mark is an i inside an orbit. Here that orbit lifts off the mark, opens out
   into a ring seen in perspective and carries the team's credentials around it: the one
   in front full size, lit from below in crimson and swept by a glint, the ones behind
   small and dim. The ring is drawn with the hero's own strokes, so the band reads as the
   same world. */
body .ideo-home .creds{
  position:relative;overflow:hidden;color:var(--light);
  padding:clamp(56px,8vh,100px) 0 clamp(36px,5vh,64px);
  background:var(--page);isolation:isolate;
}
/* the section's light lives on its own layer, which fades to nothing a fixed distance
   before the top and bottom edges: whatever the screen height, both edges are plain page
   colour, so this section runs into the next without a line */
body .ideo-home .creds::before,
body .ideo-home .proc::before,
body .ideo-home .voices::before,
body .ideo-home .work::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(140px,22vh,240px),#000 calc(100% - clamp(140px,22vh,240px)),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 clamp(140px,22vh,240px),#000 calc(100% - clamp(140px,22vh,240px)),transparent 100%);
}
/* one broad, quiet wash, the same in every section: petrol light from the upper left, a
   breath of midnight blue from the lower right, no pools and no hot spots */
body .ideo-home .proc::before,
body .ideo-home .creds::before,
body .ideo-home .voices::before,
body .ideo-home .work::before{
  background:
    radial-gradient(140% 100% at 16% 18%,rgba(47,96,104,.07),rgba(47,96,104,0) 70%),
    radial-gradient(140% 100% at 88% 86%,rgba(44,72,150,.05),rgba(44,72,150,0) 70%);
}
/* under the ring, the faintest warmth from the mark */
body .ideo-home .creds::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 40% at 50% 62%,rgba(211,42,31,.04),rgba(211,42,31,0) 72%);
}
body .ideo-home .creds-in{
  max-width:1440px;margin-inline:auto;padding-inline:clamp(18px,3.6vw,56px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
body .ideo-home .creds-mark{
  display:flex;align-items:center;gap:14px;margin:0 0 clamp(16px,2.4vh,24px);
  font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--t3);
}
body .ideo-home .creds-mark s{display:block;width:clamp(34px,6vw,76px);height:1px;background:var(--line-2);text-decoration:none}
body .ideo-home .creds-mark s:first-child{transform-origin:100% 50%}
body .ideo-home .creds-mark s:last-child{transform-origin:0 50%}
body .ideo-home .creds h2{
  margin:0 0 14px;font-weight:400;text-wrap:balance;
  font-size:clamp(27px,3.6vw,50px);line-height:1.07;letter-spacing:-.02em;
}
body .ideo-home .creds h2 em{font-style:italic;color:var(--crimson)}
body .ideo-home .creds-sub{
  margin:0;max-width:60ch;color:var(--t2);text-wrap:balance;
  font-size:clamp(16px,1.15vw,18.5px);line-height:1.62;
}
/* the heading arrives once: rules draw toward the dot, the line comes into focus */
body .ideo-home .creds.will-in .creds-mark s{transform:scaleX(0)}
body .ideo-home .creds.will-in .creds-mark span{opacity:0}
body .ideo-home .creds.will-in h2{opacity:0;transform:translateY(22px);filter:blur(6px)}
body .ideo-home .creds.will-in .creds-sub{opacity:0;transform:translateY(14px)}
body .ideo-home .creds.is-in .creds-mark s{transform:none;transition:transform 1.1s var(--ease-out) .1s}
body .ideo-home .creds.is-in .creds-mark span{opacity:1;transition:opacity .8s var(--ease) .35s}
body .ideo-home .creds.is-in h2{opacity:1;transform:none;filter:none;
  transition:opacity 1s var(--ease) .2s,transform 1.2s var(--ease-out) .2s,filter 1s var(--ease) .2s}
body .ideo-home .creds.is-in .creds-sub{opacity:1;transform:none;
  transition:opacity 1s var(--ease) .38s,transform 1.2s var(--ease-out) .38s}

/* ---- the stage ---- */
body .ideo-home .orbit-stage{
  position:relative;width:min(1040px,92vw);aspect-ratio:1000/450;
  margin:clamp(16px,2.4vh,30px) auto 0;
}
body .ideo-home .orbit-ring,
body .ideo-home .orbit-live{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
body .ideo-home .orbit-live{display:none;opacity:0}
body .ideo-home .orbit-live path{stroke-width:1;stroke-linecap:round}
body .ideo-home .orbit-core{
  position:absolute;left:50%;top:50%;z-index:5;width:clamp(50px,5.4vw,70px);
  transform:translate(-50%,-50%);
}
body .ideo-home .orbit-core img{display:block;width:100%;height:auto;max-width:none}
/* the mark breathes, slowly: its glow swells and settles every eight seconds */
body .ideo-home .orbit-core::before{
  content:"";position:absolute;left:50%;top:50%;width:280%;aspect-ratio:1;z-index:-1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(211,42,31,.22),rgba(211,42,31,0));
  animation:ideo-breathe 8s ease-in-out -2s infinite;
}
@keyframes ideo-breathe{0%,100%{opacity:.55}50%{opacity:.9}}
/* the mark answers each credential that reaches the front with one soft pulse of light */
body .ideo-home .orbit-core::after{
  content:"";position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;z-index:-1;pointer-events:none;
  border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.7);
  background:radial-gradient(closest-side,rgba(232,69,58,.3),rgba(211,42,31,.09) 55%,rgba(211,42,31,0));
}
body .ideo-home .orbit-core.is-pulse::after{animation:ideo-pulse 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes ideo-pulse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  22%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}

/* the comet's head; its tail is drawn along the ring in the SVG */
body .ideo-home .orbit-comet{
  position:absolute;left:0;top:0;z-index:2;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  opacity:0;display:none;pointer-events:none;will-change:transform,opacity;
  background:#FF6A55;box-shadow:0 0 10px 2px rgba(211,42,31,.7),0 0 26px 6px rgba(211,42,31,.22);
}
body .ideo-home .orbit-live .r-tail{opacity:0;stroke-width:1.8;stroke-linecap:round}

/* ---- the logos ---- */
body .ideo-home .orbit-list{
  list-style:none;margin:0;padding:0;
  /* without the script: a quiet centred row */
  position:relative;z-index:6;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 40px;
  height:100%;
}
body .ideo-home .sat{
  --k:1;position:relative;flex:0 0 auto;
  width:calc(var(--lw) * var(--k));height:calc(var(--lh) * var(--k));
}
body .ideo-home .sat img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;position:relative;z-index:1}
body .ideo-home .sat > img,
body .ideo-home .sat > .sheen{transition:transform .5s var(--ease)}
body .ideo-home .sat.is-hot > img,
body .ideo-home .sat.is-hot > .sheen{transform:scale(1.07)}
/* the crimson light under the logo in front; only its opacity ever changes */
body .ideo-home .sat::before{
  content:"";position:absolute;left:50%;top:76%;width:230%;height:130%;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(211,42,31,.26),rgba(211,42,31,0));
  opacity:var(--g,0);
}
/* the glint: a band of warm light cut to the logo's own shape, crossing it once at the front */
body .ideo-home .sheen{
  position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;display:none;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
body .ideo-home .sheen i{
  position:absolute;top:-30%;bottom:-30%;left:0;width:42%;
  background:linear-gradient(90deg,rgba(211,42,31,0),rgba(236,74,56,.85) 34%,rgba(255,244,236,1) 50%,rgba(236,74,56,.85) 66%,rgba(211,42,31,0));
  transform:translateX(-130%) skewX(-18deg);
}
body .ideo-home .sat.is-shine .sheen{display:block}
body .ideo-home .sat.is-shine .sheen i{animation:ideo-glint 1.15s cubic-bezier(.35,.1,.25,1) both}
@keyframes ideo-glint{to{transform:translateX(260%) skewX(-18deg)}}

/* the script takes over: every logo is placed on the ring by transform alone */
body .ideo-home .orbit-stage.is-live .orbit-ring{display:none}
body .ideo-home .orbit-stage.is-live .orbit-live{display:block}
body .ideo-home .orbit-stage.is-live .orbit-comet{display:block}
body .ideo-home .orbit-stage.is-live .orbit-core{left:0;top:0;will-change:transform}
body .ideo-home .orbit-stage.is-live .orbit-list{position:absolute;inset:0;display:block;height:auto;z-index:auto}
body .ideo-home .orbit-stage.is-live .sat{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
/* the ring can be turned by hand: a grab cursor, sideways swipes only (a vertical swipe
   still scrolls the page), no text selection or image ghosts while dragging */
body .ideo-home .orbit-stage.is-live{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body .ideo-home .orbit-stage.is-grabbing{cursor:grabbing}
body .ideo-home .orbit-stage img{-webkit-user-drag:none}
body .ideo-home .orbit-stage:focus{outline:none}
body .ideo-home .orbit-stage:focus-visible{outline:1px solid rgba(248,243,237,.42);outline-offset:14px;border-radius:32px}

@media (max-width:699px){
  /* a narrower, more open ring on phones, so a logo at either end never meets the screen edge */
  body .ideo-home .orbit-stage{width:82vw;aspect-ratio:1000/800}
  body .ideo-home .sat{--k:.62}
  body .ideo-home .creds-sub{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  body .ideo-home .orbit-core::before{animation:none;opacity:.8}
  body .ideo-home .orbit-core::after{display:none}
  body .ideo-home .orbit-comet,
  body .ideo-home .orbit-live .r-tail{display:none!important}
  body .ideo-home .sheen{display:none!important}
}

/* ================= glass: only on parts that float over light ================= */
/* Like Apple's glass: a clear pane that blurs what is behind it, a bright top rim and a
   soft shadow under it. Used only where the page has light behind it (the section
   fields, the film); a pane over flat colour would be invisible. */
body .ideo-home .rm-get{
  border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:12px 16px 13px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 30px rgba(3,5,5,.3);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
}
@media (min-width:1000px){
  body .ideo-home .rm-get{padding:12px 16px 13px;border-left:1px solid rgba(255,255,255,.09)}
}
body .ideo-home .rm-chip li{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border-color:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
body .ideo-home .rm-chip.soon li{border-color:rgba(255,255,255,.08)}
/* no blur available: a slightly firmer pane instead */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body .ideo-home .rm-get{background:rgba(24,36,38,.72)}
  body .ideo-home .rm-chip li{background:rgba(24,36,38,.6)}
}

/* ================= phones: the picture and the words meet, one rhythm down the page ================= */
@media (max-width:699px){
  /* the story picture rises a little, so the laptop, the phone and the writing hand sit
     just under the header; only the dark wall above the lamp slips under the bar */
  body .ideo-home .hero .media{top:calc(100vw * -.15)}
  body .ideo-home .scrim{
    background:linear-gradient(180deg,
      rgba(4,7,8,.62) 0,rgba(4,7,8,.2) calc(100vw * .19),rgba(4,7,8,0) calc(100vw * .34),
      rgba(4,7,8,0) calc(100vw * .9),rgba(14,22,23,.4) calc(100vw * 1.02),
      rgba(16,25,27,.8) calc(100vw * 1.12),rgba(18,27,29,.94) calc(100vw * 1.26),
      var(--page) calc(100vw * 1.44));
  }
  /* the words begin just under the pen, so the first screen carries the picture and the message together
     (v141, Kazi 17:27: the picture and the words both sit a little higher, so no wide gap opens between them) */
  body .ideo-home .hero-in{padding-top:calc(100vw * 1.0)}
  body .ideo-home .eyebrow{margin-bottom:16px}
  body .ideo-home .hero-sub{margin-top:16px}

  /* one gap between sections, the same above Pedigree and above the five steps */
  body .ideo-home .creds{padding-top:calc(clamp(58px,17vw,76px) - 26px);padding-bottom:0}
  body .ideo-home .proc{padding-top:calc(clamp(58px,17vw,76px) - 30px)}

  /* the paragraphs of sections 2 and 3 run the full width, set justified like the hero's */
  body .ideo-home .creds-sub{max-width:none;text-wrap:pretty;
    text-align:justify;text-align-last:center;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
  body .ideo-home .proc-sub,
  body .ideo-home .rm-do p{max-width:none;
    text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
}
/* the smallest phones: the line above the heading stays on one line */
@media (max-width:359px){
  body .ideo-home .eyebrow{font-size:12px;gap:8px;padding:7px 12px 7px 10px}
}

/* ================= voices: a professor and the doctors, in their own words =================
   Each portrait sits in an oval with the orbit of the iDEO mark around it, its far half
   behind the face and its near half in front. Asleep they are quiet and grey; the chosen
   one wakes in colour, its ring turns crimson with a small cream ball going round, its
   title rises above it and its words appear below. */
body .ideo-home .voices{position:relative;overflow:hidden;color:var(--light);background:var(--page);isolation:isolate;
  padding:clamp(20px,3vh,40px) 0 clamp(72px,10vh,124px)}
body .ideo-home .voices-in{max-width:1240px;margin-inline:auto;padding-inline:clamp(18px,3.6vw,56px)}
body .ideo-home .voices-head{display:flex;flex-direction:column;align-items:center;text-align:center}
body .ideo-home .voices h2{margin:0 0 14px;font-weight:400;text-wrap:balance;
  font-size:clamp(27px,3.6vw,50px);line-height:1.07;letter-spacing:-.02em}
body .ideo-home .voices h2 em{font-style:italic;color:var(--crimson)}
body .ideo-home .voices-sub{margin:0;max-width:60ch;color:var(--t2);text-wrap:balance;
  font-size:clamp(16px,1.15vw,18.5px);line-height:1.62}

body .ideo-home .vx{margin-top:clamp(30px,4.6vh,52px)}
body .ideo-home .vx-row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,2.4vw,36px)}
body .ideo-home .vx-p{--w:clamp(104px,10.2vw,138px);position:relative;display:flex;flex-direction:column;align-items:center;gap:13px;
  width:var(--w);margin:0;padding:42px 0 0;border:0;background:none;color:inherit;font:inherit;text-align:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
body .ideo-home .vx-o{position:relative;display:block;width:var(--w);aspect-ratio:100/130;
  transition:transform .8s var(--ease-out)}
/* a breath of crimson behind the chosen one */
body .ideo-home .vx-o::before{content:"";position:absolute;left:-30%;right:-30%;top:-10%;bottom:-24%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(211,42,31,.13),rgba(211,42,31,0));opacity:0;transition:opacity .9s var(--ease)}
body .ideo-home .vx-face{position:absolute;inset:0;z-index:1;border-radius:50%;overflow:hidden;transform:translateZ(0);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.85),0 0 0 1px rgba(248,243,237,.08)}
body .ideo-home .vx-face img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.92) brightness(.68) contrast(.96);transition:filter .9s var(--ease)}
body .ideo-home .vx-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
body .ideo-home .vx-back{z-index:0}
body .ideo-home .vx-front{z-index:2}
body .ideo-home .vx-ring path{fill:none;stroke:rgba(248,243,237,.16);stroke-width:1;vector-effect:non-scaling-stroke;
  transition:stroke .9s var(--ease)}
body .ideo-home .vx-ball{fill:var(--light);opacity:0;transition:opacity .5s var(--ease)}
body .ideo-home .vx-back .vx-ball{fill:rgba(248,243,237,.7)}
body .ideo-home .vx-name{display:block;max-width:calc(var(--w) + 40px);font-size:13.5px;line-height:1.3;color:var(--t3);text-wrap:balance;
  transition:color .6s var(--ease)}
/* the title that rises above the chosen portrait */
body .ideo-home .vx-chip{position:absolute;top:0;left:50%;z-index:3;white-space:nowrap;pointer-events:none;
  padding:5px 13px 6px;border-radius:999px;font-size:12.5px;letter-spacing:.02em;line-height:1.2;color:var(--light);
  background:rgba(248,243,237,.07);border:1px solid rgba(248,243,237,.16);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -16px rgba(0,0,0,.7);
  opacity:0;transform:translate(calc(-50% + var(--cx,0px)),10px) scale(.9);
  transition:opacity .45s var(--ease),transform .7s var(--ease-out)}
body .ideo-home .vx-chip.is-badge{border-color:rgba(211,42,31,.55);font-style:italic}
body .ideo-home .vx-chip.is-badge::before{content:"";display:inline-block;width:5px;height:5px;margin:0 8px 1px 0;border-radius:50%;
  background:var(--crimson);vertical-align:middle;box-shadow:0 0 8px rgba(211,42,31,.7)}

body .ideo-home .vx-p.is-on .vx-o{transform:scale(1.06)}
body .ideo-home .vx-p.is-on .vx-o::before{opacity:1}
body .ideo-home .vx-p.is-on .vx-face img{filter:none}
body .ideo-home .vx-p.is-on .vx-front path{stroke:rgba(211,42,31,.95)}
body .ideo-home .vx-p.is-on .vx-back path{stroke:rgba(211,42,31,.4)}
body .ideo-home .vx-p.is-on .vx-ball{opacity:1}
body .ideo-home .vx-p.is-on .vx-name{color:var(--light)}
body .ideo-home .vx-p.is-on .vx-chip{opacity:1;transform:translate(calc(-50% + var(--cx,0px)),0) scale(1)}
@media (hover:hover) and (pointer:fine){
  body .ideo-home .vx-p:not(.is-on):hover .vx-face img{filter:grayscale(.45) brightness(.86)}
  body .ideo-home .vx-p:not(.is-on):hover .vx-ring path{stroke:rgba(248,243,237,.32)}
  body .ideo-home .vx-p:not(.is-on):hover .vx-name{color:var(--t2)}
}
body .ideo-home .vx-p:focus{outline:none}
body .ideo-home .vx-p:focus-visible .vx-face{box-shadow:0 0 0 2px var(--page),0 0 0 3.5px var(--crimson),0 22px 44px -26px rgba(0,0,0,.85)}

/* the words: every quote shares one place, so the box keeps the height of the longest */
body .ideo-home .vx-stage{display:grid;max-width:820px;margin:clamp(30px,4.4vh,46px) auto 0}
/* on phones the words open in the sheet, so a quiet hint sits under the portraits */
body .ideo-home .vx-hint{display:none;margin:22px 0 0;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--t4)}
body .ideo-home .vx-q{grid-area:1/1;margin:0;text-align:center;visibility:hidden;opacity:0;transform:translateY(12px);filter:blur(5px);
  transition:opacity .4s var(--ease),transform .7s var(--ease-out),filter .45s var(--ease),visibility 0s linear .45s}
body .ideo-home .vx-q.is-on{visibility:visible;opacity:1;transform:none;filter:none;
  transition:opacity .7s var(--ease) .14s,transform .9s var(--ease-out) .14s,filter .7s var(--ease) .14s,visibility 0s}
body .ideo-home .vx-q blockquote{margin:0}
body .ideo-home .vx-q blockquote::before{content:"\201C";display:block;height:34px;margin:0 0 4px;
  font-style:italic;font-size:70px;line-height:.82;color:var(--crimson)}
body .ideo-home .vx-q blockquote p{margin:0;color:var(--t1);text-wrap:pretty;
  font-size:clamp(19px,1.62vw,24.5px);line-height:1.52;letter-spacing:-.004em}
body .ideo-home .vx-q figcaption{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:3px}
body .ideo-home .vx-badge{margin-bottom:6px;font-style:italic;font-size:15px;color:var(--crimson)}
body .ideo-home .vx-q figcaption b{font-weight:700;font-size:17px;color:var(--t1)}
body .ideo-home .vx-creds{font-size:14.5px;color:var(--t2)}
body .ideo-home .vx-where{font-size:14.5px;color:var(--t3);text-wrap:balance}
body .ideo-home .vx-focus{margin-top:2px;font-size:14px;font-style:italic;color:var(--t3);text-wrap:balance}

/* arriving: the heading, then the portraits one after another */
body .ideo-home .voices.will-in .voices-head > *{opacity:0;transform:translateY(16px)}
body .ideo-home .voices.will-in .vx-p{opacity:0;transform:translateY(24px)}
body .ideo-home .voices.will-in .vx-stage{opacity:0}
body .ideo-home .voices.is-in .voices-head > *{opacity:1;transform:none;transition:opacity 1s var(--ease) var(--hd,.05s),transform 1.2s var(--ease-out) var(--hd,.05s)}
/* v150 (Kazi: one by one, calm): the mark, then the title, then the line under it */
body .ideo-home .voices-head > :nth-child(2),body .ideo-home .work-head > :nth-child(2){--hd:.2s}
body .ideo-home .voices-head > :nth-child(3),body .ideo-home .work-head > :nth-child(3){--hd:.36s}
body .ideo-home .voices.is-in .vx-p{opacity:1;transform:none;
  transition:opacity .9s var(--ease) calc(.25s + var(--i) * 90ms),transform 1.1s var(--ease-out) calc(.25s + var(--i) * 90ms)}
body .ideo-home .voices.is-in .vx-stage{opacity:1;transition:opacity 1s var(--ease) .8s}

@media (max-width:1099px){
  body .ideo-home .vx-row{gap:clamp(12px,2vw,24px)}
}
/* tablets in portrait: three by two, like phones, with room to breathe */
@media (min-width:700px) and (max-width:939px){
  body .ideo-home .vx-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;justify-items:center;
    max-width:620px;margin-inline:auto}
  body .ideo-home .vx-p{--w:clamp(112px,16vw,140px)}
}
/* phones: three by two, every face in view at once; the words below */
@media (max-width:699px){
  body .ideo-home .proc{padding-bottom:30px}
  body .ideo-home .voices{padding:calc(clamp(58px,17vw,76px) - 46px) 0 clamp(58px,17vw,76px)}
  body .ideo-home .voices-sub{max-width:34ch;text-wrap:balance;text-align:center}
  body .ideo-home .vx-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;justify-items:center}
  body .ideo-home .vx-p{--w:min(25vw,108px);padding-top:34px;gap:10px}
  body .ideo-home .vx-name{font-size:12.5px;max-width:31vw}
  body .ideo-home .vx-chip{font-size:11.5px;padding:4px 10px 5px}
  body .ideo-home .vx-stage{margin-top:26px}
  body .ideo-home .vx-q blockquote::before{font-size:58px;height:28px}
  body .ideo-home .vx-q blockquote p{font-size:17.5px;line-height:1.6;text-align:justify;text-align-last:center;-webkit-hyphens:auto;hyphens:auto}
  /* with the script, the words open in a sheet instead of below the faces */
  body .ideo-home .vx.has-sheet .vx-stage{display:none}
  body .ideo-home .vx.has-sheet .vx-hint{display:block}
}

/* the phone sheet: glass rising from the bottom edge, shared by the voices and the results */
body .ideo-home .sh{position:fixed;inset:0;z-index:95}
body .ideo-home .sh[hidden]{display:none}
body .ideo-home .sh-back{position:absolute;inset:0;background:rgba(4,7,8,.52);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s var(--ease)}
body .ideo-home .sh-card{position:absolute;left:0;right:0;bottom:0;max-height:88svh;overflow:auto;overscroll-behavior:contain;
  padding:10px 22px calc(16px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;color:var(--light);
  background:linear-gradient(180deg,rgba(26,39,42,.9),rgba(18,27,29,.95));
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 -30px 60px -30px rgba(0,0,0,.85);
  transform:translateY(104%);transition:transform .6s var(--ease-out);touch-action:pan-y}
body .ideo-home .sh.is-open .sh-back{opacity:1}
body .ideo-home .sh.is-open .sh-card{transform:none}
body .ideo-home .sh-pull{touch-action:none;padding-right:44px}
body .ideo-home .sh-grip{display:block;width:38px;height:4px;margin:0 auto 14px;border-radius:2px;background:rgba(248,243,237,.26);
  transform:translateX(22px)}
body .ideo-home .sh-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;
  border:1px solid rgba(248,243,237,.2);background:rgba(248,243,237,.05);color:var(--light);cursor:pointer}
body .ideo-home .sh-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
body .ideo-home .sh-top{display:flex;align-items:center;gap:16px;margin:0 0 18px;min-height:40px}
body .ideo-home .sh-nav{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
body .ideo-home .sh-nav button{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid rgba(248,243,237,.2);background:transparent;color:var(--light);cursor:pointer}
body .ideo-home .sh-nav svg{width:8px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body .ideo-home .sh-dots{display:flex;gap:7px}
body .ideo-home .sh-dots i{width:6px;height:6px;border-radius:50%;background:rgba(248,243,237,.24);transition:background .3s var(--ease),transform .3s var(--ease)}
body .ideo-home .sh-dots i.is-on{background:var(--crimson);transform:scale(1.25)}
body .ideo-home .swap-r{animation:ideo-sh-in-r .5s var(--ease-out) both}
body .ideo-home .swap-l{animation:ideo-sh-in-l .5s var(--ease-out) both}
@keyframes ideo-sh-in-r{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes ideo-sh-in-l{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

/* a voice in the sheet: the small oval portrait in a crimson ring, a cream ball going round it */
body .ideo-home .vx-sheet-o{position:relative;flex:none;display:block;width:62px;aspect-ratio:100/130}
body .ideo-home .vx-sheet-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 14px 28px -16px rgba(0,0,0,.8)}
body .ideo-home .vx-sheet-face img{display:block;width:100%;height:100%;object-fit:cover}
body .ideo-home .vx-sheet-ring{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none}
body .ideo-home .vx-sheet-ring ellipse{fill:none;stroke:rgba(211,42,31,.92);stroke-width:1.4}
body .ideo-home .vx-sheet-ring circle{fill:var(--light);filter:drop-shadow(0 0 3px rgba(248,243,237,.65))}
body .ideo-home .vx-sheet-who{display:flex;flex-direction:column;gap:2px;min-width:0}
body .ideo-home .vx-sheet-who .vx-badge{margin:0 0 2px;font-size:14px}
body .ideo-home .vx-sheet-who b{font-size:16px;line-height:1.3;color:var(--t1)}
body .ideo-home .vx-sheet-who .vx-creds,body .ideo-home .vx-sheet-who .vx-where,body .ideo-home .vx-sheet-who .vx-focus{font-size:13.5px;line-height:1.4}
body .ideo-home .vx-sheet-body blockquote{margin:0}
body .ideo-home .vx-sheet-body blockquote::before{content:"\201C";display:block;height:24px;margin:0 0 2px;
  font-style:italic;font-size:52px;line-height:.82;color:var(--crimson)}
body .ideo-home .vx-sheet-body p{margin:0;font-size:17.5px;line-height:1.62;color:var(--t1);
  text-align:justify;-webkit-hyphens:auto;hyphens:auto}

/* ================= track record: proof, not promises =================
   Four case studies, read like case sheets: four cards, figure first, and the chosen case
   open beneath them (on phones the cards become a list and a case opens in the sheet).
   The chosen card's number is circled by the orbit of the mark (the only place the orbit is used here: it means "this one"). Then one slow band of
   brand marks and, set still, the organisations the team has worked at. The case sheet
   (.cs-) and the Case studies page (.cx-) share these styles. */
body.ideo-designed{
  margin:0;background:var(--page);color:var(--light);
  font-family:var(--serif);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body .ideo-home .work{position:relative;overflow:hidden;color:var(--light);background:var(--page);isolation:isolate;
  padding:clamp(20px,3vh,40px) 0 clamp(64px,9vh,108px)}
body .ideo-home .work-in{max-width:1240px;margin-inline:auto;padding-inline:clamp(18px,3.6vw,56px)}
body .ideo-home .work-head{display:flex;flex-direction:column;align-items:center;text-align:center}
body .ideo-home .work h1,
body .ideo-home .work h2{margin:0 0 14px;font-weight:400;text-wrap:balance;
  font-size:clamp(27px,3.6vw,50px);line-height:1.07;letter-spacing:-.02em}
body .ideo-home .work h1 em,
body .ideo-home .work h2 em{font-style:italic;color:var(--crimson)}
body .ideo-home .work-sub{margin:0;max-width:62ch;color:var(--t2);text-wrap:balance;
  font-size:clamp(16px,1.15vw,18.5px);line-height:1.62}

/* the list of cases and the open case */
body .ideo-home .wk{margin-top:clamp(32px,4.8vh,54px)}
body .ideo-home .wk-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.3vw,18px)}
body .ideo-home .wk-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  margin:0;padding:clamp(14px,1.4vw,18px) clamp(16px,1.7vw,22px) clamp(15px,1.5vw,19px) clamp(10px,1.1vw,14px);
  text-align:left;border-radius:18px;border:1px solid rgba(248,243,237,.08);color:inherit;font:inherit;cursor:pointer;
  background:linear-gradient(180deg,rgba(248,243,237,.035),rgba(248,243,237,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);-webkit-tap-highlight-color:transparent;
  transition:border-color .5s var(--ease),background .5s var(--ease),box-shadow .6s var(--ease),transform .7s var(--ease-out)}
body .ideo-home .wk-i{position:relative;display:grid;place-items:center;width:46px;height:28px;flex:none;
  font-size:13px;letter-spacing:.06em;font-variant-numeric:lining-nums tabular-nums;color:var(--t4);transition:color .5s var(--ease)}
body .ideo-home .wk-oo{position:absolute;left:1px;top:1px;width:44px;height:26px;overflow:visible;opacity:0;transition:opacity .6s var(--ease)}
body .ideo-home .wk-oo path{fill:none;stroke:var(--crimson);stroke-width:1}
body .ideo-home .wk-oo circle{fill:var(--light)}
body .ideo-home .wk-who{order:2;align-self:stretch;display:flex;flex-direction:column;gap:3px;min-width:0;
  margin:auto 0 0 6px;padding-top:13px;border-top:1px solid var(--line)}
body .ideo-home .wk-who b{font-weight:400;font-size:clamp(16px,1.25vw,18px);line-height:1.25;color:var(--t1)}
body .ideo-home .wk-who small{font-size:13px;line-height:1.35;color:var(--t3)}
body .ideo-home .wk-fig{order:1;display:flex;flex-direction:column;gap:6px;margin:14px 0 18px 6px}
body .ideo-home .wk-num{font-size:clamp(30px,2.7vw,40px);line-height:1;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:lining-nums;color:var(--t1)}
body .ideo-home .wk-num.is-word{font-style:italic;font-size:clamp(27px,2.4vw,35px);letter-spacing:-.01em;color:var(--t2)}
body .ideo-home .wk-of{font-size:13.5px;line-height:1.35;color:var(--t2);text-wrap:balance}
body .ideo-home .wk-t.is-on{border-color:rgba(211,42,31,.48);
  background:linear-gradient(180deg,rgba(211,42,31,.07),rgba(248,243,237,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 50px -34px rgba(211,42,31,.5)}
body .ideo-home .wk-t.is-on .wk-i{color:var(--t1)}
body .ideo-home .wk-t.is-on .wk-oo{opacity:1}
@media (hover:hover) and (pointer:fine){
  body .ideo-home .wk-t:not(.is-on):hover{border-color:rgba(248,243,237,.2);transform:translateY(-2px)}
  body .ideo-home .wk-t:not(.is-on):hover .wk-i{color:var(--t2)}
}
body .ideo-home .wk-t:focus{outline:none}
body .ideo-home .wk-t:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}

/* the open case: all cases share one place, so nothing jumps */
body .ideo-home .wk-stage{display:grid;margin-top:clamp(12px,1.6vh,18px)}
body .ideo-home .wk-d,
body .ideo-home .cx-case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4.4vw,64px)}
body .ideo-home .cs-side{display:flex;flex-direction:column;min-width:0}
body .ideo-home .cs-main{min-width:0}
body .ideo-home .cs-main .cs-steps > div:first-child{border-top:0;padding-top:0}
body .ideo-home .wk-d{grid-area:1/1;padding:clamp(24px,2.8vw,40px);border-radius:22px;
  border:1px solid rgba(248,243,237,.08);background:rgba(248,243,237,.022);
  visibility:hidden;opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .7s var(--ease-out),visibility 0s linear .4s}
body .ideo-home .wk-d.is-on{visibility:visible;opacity:1;transform:none;
  transition:opacity .7s var(--ease) .1s,transform .9s var(--ease-out) .1s,visibility 0s}

/* a case sheet */
body .ideo-home .cs-head{margin:0 0 clamp(16px,2.2vh,22px)}
body .ideo-home .cs-meta{display:flex;align-items:center;gap:10px;min-height:26px;margin:0 0 12px;
  font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--t3)}
body .ideo-home .cs-no{color:var(--t2)}
body .ideo-home .cs-kind{display:flex;align-items:center;gap:10px}
body .ideo-home .cs-kind::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--crimson)}
body .ideo-home .cs-logo{display:flex;align-items:center;height:26px;margin-left:auto}
body .ideo-home .cs-logo img{display:block;height:100%;width:auto;max-width:118px;object-fit:contain;object-position:right center;opacity:.78}
body .ideo-home .cs-line{margin:0 0 8px;font-weight:400;font-size:clamp(22px,1.95vw,28px);line-height:1.2;letter-spacing:-.012em;
  color:var(--t1);text-wrap:balance}
body .ideo-home .cs-who{margin:0;font-size:14.5px;line-height:1.45;color:var(--t3)}
body .ideo-home .cs-who b{font-weight:400;color:var(--t2)}
body .ideo-home .cs-stats{display:flex;flex-wrap:wrap;gap:14px clamp(22px,3vw,44px);margin:0 0 clamp(16px,2.2vh,22px);padding:0;list-style:none}
body .ideo-home .cs-stats li{position:relative;display:flex;flex-direction:column;gap:5px;max-width:210px;padding-top:12px}
body .ideo-home .cs-stats li::before{content:"";position:absolute;left:0;top:0;width:18px;height:2px;border-radius:1px;background:var(--crimson)}
body .ideo-home .cs-stats b{font-weight:400;font-size:clamp(23px,2vw,29px);line-height:1;letter-spacing:-.015em;white-space:nowrap;
  font-variant-numeric:lining-nums;color:var(--t1)}
body .ideo-home .cs-stats span{font-size:13px;line-height:1.35;color:var(--t3)}
body .ideo-home .cs-steps{display:flex;flex-direction:column;margin:0}
body .ideo-home .cs-steps > div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--line)}
body .ideo-home .cs-steps dt{padding-top:4px;font-size:10.5px;font-weight:700;letter-spacing:.2em;line-height:1.5;text-transform:uppercase;color:var(--t3)}
body .ideo-home .cs-steps dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--t2);text-wrap:pretty}
body .ideo-home .cs-lesson{position:relative;margin:clamp(12px,1.8vh,18px) 0 0;padding:15px 20px 16px;border-radius:16px;
  border:1px solid rgba(211,42,31,.24);background:linear-gradient(180deg,rgba(211,42,31,.075),rgba(211,42,31,.035))}
body .ideo-home .cs-lesson-lab{margin:0 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#EE9A90}
body .ideo-home .cs-lesson-tx{margin:0;font-size:15.5px;line-height:1.55;color:var(--t1);text-wrap:pretty}
body .ideo-home .cs-tags{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:16px 0 0;list-style:none}
body .ideo-home .cs-tags li{padding:4px 11px;border-radius:999px;border:1px solid rgba(248,243,237,.14);font-size:12.5px;color:var(--t3)}


/* the brands and the people, one plate (template-parts/brands.php): three slow rows of marks
   (where the team has worked, then the brands) and the question a doctor would ask. */
body .ideo-home .wk-bands{margin-top:clamp(56px,8vh,96px)}
body .ideo-home .wp{--split:25%;--pad:clamp(22px,2.6vw,36px);--hair:rgba(248,243,237,.075);
  position:relative;border:1px solid var(--line);border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,rgba(248,243,237,.03),rgba(248,243,237,.012) 60%,rgba(248,243,237,.02))}
body .ideo-home .wp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;
  padding:clamp(26px,3vw,40px) var(--pad) clamp(22px,2.6vw,32px)}
body .ideo-home .wp-title{margin:0;font-weight:400;text-wrap:balance;font-size:clamp(25px,2.35vw,34px);line-height:1.15;letter-spacing:-.01em;color:var(--t1)}
body .ideo-home .wp-title em{font-style:italic;color:var(--crimson)}
body .ideo-home .wp-meta{margin:0;font-size:14.5px;color:var(--t3);white-space:nowrap}
body .ideo-home .wp-meta span{display:block}
body .ideo-home .wp-meta small{display:block;margin-top:4px;font-size:13px;color:var(--t3);opacity:.85}
body .ideo-home .wp-meta b{font-weight:400;color:var(--t1)}

/* three slow rows of marks, small and clean: where the team has worked, then the brands. The
   rows run in turn to the right, the left and the right; a row rests under the pointer, its
   other marks step back and the one pointed at comes forward. */
body .ideo-home .wp-rows{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px);padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line)}
body .ideo-home .wp-band{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
body .ideo-home .wp-track{display:flex;align-items:center;width:max-content;margin:0;padding:0;list-style:none;
  animation:ideo-wp-mq var(--mq,70s) linear infinite;will-change:transform}
body .ideo-home .wp-band[data-dir="right"] .wp-track{animation-direction:reverse}
body .ideo-home .wp-band.is-off .wp-track,
body .ideo-home .wp-band:hover .wp-track{animation-play-state:paused}
body .ideo-home .wp-track li{flex:none;display:flex;align-items:center;height:46px;padding:0 clamp(24px,2.5vw,38px)}
body .ideo-home .wp-track img{display:block;opacity:.6;transition:opacity .45s var(--ease)}
@keyframes ideo-wp-mq{to{transform:translate3d(-50%,0,0)}}
@media (hover:hover) and (pointer:fine){
  body .ideo-home .wp-band:hover img{opacity:.28}
  body .ideo-home .wp-band:hover li:hover img{opacity:1}
}
/* arriving: the rows come in one after another */
body .ideo-home .wp-rows[data-rise] .wp-band{opacity:0;transform:translateY(8px)}
body .ideo-home .wp-rows.is-up .wp-band{opacity:1;transform:none;
  transition:opacity 1s var(--ease) calc(var(--r) * 160ms),transform 1.2s var(--ease-out) calc(var(--r) * 160ms)}

/* the rows under the wall share the wall's quarter line */
body .ideo-home .wp-row{position:relative;display:grid;grid-template-columns:var(--split) minmax(0,1fr);border-top:1px solid var(--line)}
body .ideo-home .wp-row::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--split) - 1px);width:1px;background:var(--hair)}
body .ideo-home .wp-row > *{margin:0;padding:clamp(24px,2.8vw,36px) var(--pad)}
body .ideo-home .wp-lab{text-wrap:balance;font-size:10.5px;font-weight:700;letter-spacing:.24em;line-height:1.7;text-transform:uppercase;color:var(--t3);padding-top:calc(clamp(24px,2.8vw,36px) + 6px)}
/* a crimson point before every name; the one that would open a line sits out of sight */
body .ideo-home .wp-plw{clip-path:inset(0 0 0 var(--pad))}
body .ideo-home .wp-pl{display:flex;flex-wrap:wrap;gap:2px 0;margin:0 0 0 calc(-1.7em - 4px);padding:0;list-style:none;
  font-size:clamp(16.5px,1.32vw,19px);line-height:1.75;color:var(--t2)}
body .ideo-home .wp-pl li{white-space:nowrap}
body .ideo-home .wp-pl li::before{content:"";display:inline-block;width:4px;height:4px;margin:0 .85em;border-radius:50%;
  background:var(--crimson);vertical-align:.3em;opacity:.85}
body .ideo-home .wp-pl li:first-child{color:var(--t1)}

/* the question: what do you need? a kind of expert rises in its place, circled once in crimson */
body .ideo-home .wp-ask{background:linear-gradient(180deg,rgba(211,42,31,.035),rgba(211,42,31,0) 70%)}
body .ideo-home .wp-q{font-style:italic;font-size:clamp(20px,1.75vw,25px);line-height:1.3;color:var(--t1);
  padding-top:calc(clamp(30px,3.4vw,46px) + .5em)}
body .ideo-home .wp-a{padding-top:clamp(30px,3.4vw,46px);padding-bottom:clamp(30px,3.4vw,44px)}
body .ideo-home .wp-w{display:grid;justify-items:start;margin:0 0 0 -.1em;padding:.32em .5em .3em .1em;border:0;background:none;
  color:var(--t1);font:inherit;font-size:clamp(30px,3.6vw,52px);line-height:1.12;letter-spacing:-.015em;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
body .ideo-home .wp-w:focus{outline:none}
body .ideo-home .wp-w:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;border-radius:12px}
body .ideo-home .wp-w > span{grid-area:1/1;position:relative;white-space:nowrap;opacity:0;transform:translateY(.45em);filter:blur(6px);
  transition:opacity .7s var(--ease),transform 1s var(--ease-out),filter .8s var(--ease)}
body .ideo-home .wp-w > span i{font-style:normal;color:var(--crimson)}
body .ideo-home .wp-w > span.is-on{opacity:1;transform:none;filter:none}
body .ideo-home .wp-w > span.is-out{opacity:0;transform:translateY(-.4em);filter:blur(5px);
  transition:opacity .5s var(--ease),transform .8s var(--ease),filter .6s var(--ease)}
body .ideo-home .wp-ring{position:absolute;left:-.52em;top:-.3em;width:calc(100% + 1em);height:calc(100% + .56em);overflow:visible;pointer-events:none}
body .ideo-home .wp-ring path{fill:none;stroke:var(--crimson);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
body .ideo-home .wp-w > span.is-on .wp-ring path{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s cubic-bezier(.55,.1,.25,1) .45s}
body .ideo-home .wp-w > span.is-out .wp-ring path{stroke-dashoffset:0;opacity:0;transition:opacity .4s var(--ease)}
body .ideo-home .wp-have{margin:.9em 0 0;max-width:56ch;text-wrap:pretty;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.5;color:var(--t2)}
body .ideo-home .wp-have b{font-weight:400;color:var(--t1)}
@media (hover:hover) and (pointer:fine){
  body .ideo-home .wp-w:hover .is-on .wp-ring path{opacity:1;stroke-width:2}
}

@media (max-width:699px){
  body .ideo-home .wp{--pad:20px;border-radius:22px}
  body .ideo-home .wp-track li{height:38px;padding:0 20px}
  body .ideo-home .wp-track img{height:calc(var(--h) * .84px);width:auto}
  body .ideo-home .wp-band{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  body .ideo-home .wp-head{flex-direction:column;align-items:flex-start;gap:6px;padding:24px var(--pad) 20px}
  body .ideo-home .wp-title{font-size:24px}
  body .ideo-home .wp-meta{font-size:13.5px;white-space:normal}
  body .ideo-home .wp-meta small{font-size:12.5px}
  body .ideo-home .wp-row{grid-template-columns:1fr}
  body .ideo-home .wp-row::before{display:none}
  body .ideo-home .wp-row > :first-child{padding-bottom:6px}
  body .ideo-home .wp-row > :last-child{padding-top:0}
  body .ideo-home .wp-lab{padding-top:22px}
  body .ideo-home .wp-pl{font-size:15.5px;line-height:1.68}
  body .ideo-home .wp-q{padding-top:28px;font-size:20px}
  body .ideo-home .wp-a{padding-bottom:28px}
  body .ideo-home .wp-w{font-size:clamp(25px,7.4vw,32px)}
}
@media (prefers-reduced-motion:reduce){
  body .ideo-home .wp-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:4px}
  body .ideo-home .wp-track li[aria-hidden]{display:none}
  body .ideo-home .wp-band{-webkit-mask-image:none;mask-image:none}
  body .ideo-home .wp-rows[data-rise] .wp-band{opacity:1;transform:none;transition:none}
  body .ideo-home .wp-w > span{transition:none;filter:none}
  body .ideo-home .wp-ring path,
  body .ideo-home .wp-w > span.is-on .wp-ring path{stroke-dashoffset:0;transition:none}
}

/* v11 (Kazi): no box. The title and the question sit centred; the rows run edge to edge of the
   screen, close together; the question stays smaller than the title. */
body .ideo-home .wp{border:0;border-radius:0;background:none;overflow:visible}
body .ideo-home .wp-head{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0 0 clamp(22px,2.6vw,34px)}
body .ideo-home .wp-rows{margin-inline:calc(50% - 50vw);padding:0;border:0;gap:clamp(2px,.5vw,8px)}
body .ideo-home .wp-band{-webkit-mask-image:none;mask-image:none}
body .ideo-home .wp-track li{height:42px}
body .ideo-home .wp-ask{display:flex;flex-direction:column;align-items:center;text-align:center;border:0;background:none;
  margin-top:clamp(36px,4.4vw,60px)}
body .ideo-home .wp-ask::before{display:none}
body .ideo-home .wp-ask > .wp-q{padding:0;font-size:clamp(15px,1.1vw,16.5px);color:var(--t2)}
body .ideo-home .wp-ask > .wp-a{display:flex;flex-direction:column;align-items:center;padding:0}
body .ideo-home .wp-ask .wp-w{justify-items:center;margin:.15em 0 0;font-size:clamp(21px,1.85vw,27px);text-align:center}
body .ideo-home .wp-ask .wp-have{margin:.5em 0 0;font-size:clamp(14px,1vw,15.5px);text-align:center}
@media (max-width:699px){
  body .ideo-home .wp-track li{height:34px}
  body .ideo-home .wp-head{padding-bottom:20px}
  body .ideo-home .wp-ask .wp-w{font-size:21px}
  body .ideo-home .wp-title em{display:block}
}

/* the note: one short quiet line right under the question */
body .ideo-home .work .wk-note{margin:clamp(14px,1.6vw,20px) auto 0;max-width:none;font-size:12.5px;letter-spacing:.01em;color:var(--t4);text-wrap:balance}
@media (min-width:700px){ body .ideo-home .work .wk-note{white-space:nowrap} }

/* v15 (Kazi): every case is read against the three phases of our work. A key under the
   heading names them; each case shows the phases it touched; the chosen case lights its
   phases in the key. */
body .ideo-home .wk-key{display:flex;justify-content:center;flex-wrap:wrap;row-gap:8px;margin:clamp(20px,2.6vh,28px) auto 0;padding:0;list-style:none}
body .ideo-home .wk-key li{position:relative;display:flex;align-items:baseline;gap:8px;padding:0 clamp(18px,2.4vw,34px);
  font-size:14.5px;color:var(--t3);transition:color .45s var(--ease)}
body .ideo-home .wk-key li + li::before{content:"";position:absolute;left:calc(clamp(18px,2.4vw,34px) * -.6);top:55%;
  width:calc(clamp(18px,2.4vw,34px) * 1.2);height:1px;background:var(--line-2)}
body .ideo-home .wk-key b{font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);transition:color .45s var(--ease)}
body .ideo-home .wk-key li.is-on{color:var(--t1)}
body .ideo-home .wk-key li.is-on b{color:var(--crimson)}
body .ideo-home .wk-phs{display:flex;gap:5px;margin-top:9px}
body .ideo-home .wk-phs i{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line-2);border-radius:50%;
  font-style:normal;font-size:10.5px;line-height:1;color:var(--t4)}
body .ideo-home .wk-phs i.on{border-color:rgba(211,42,31,.7);background:rgba(211,42,31,.12);color:var(--t1)}
body .ideo-home .cs-ph{display:flex;align-items:center;gap:10px;color:#EE9A90}
body .ideo-home .cs-ph::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--crimson)}
@media (max-width:699px){
  body .ideo-home .wk-key li{padding:0 11px;font-size:12.5px;gap:5px;flex-direction:column;align-items:center}
  body .ideo-home .wk-key li + li::before{display:none}
  body .ideo-home .wk-key b{font-size:9px}
  body .ideo-home .wk-phs{margin-top:6px}
  body .ideo-home .wk-phs i{width:18px;height:18px;font-size:10px}
}

/* inside an open case: the next one, in place */
body .ideo-home .wk-next{grid-column:2;justify-self:end;display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;padding:8px 2px;
  border:0;background:none;color:var(--t2);font:inherit;font-size:15px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .4s var(--ease)}
body .ideo-home .wk-next-l{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--t3)}
body .ideo-home .wk-next-n{color:var(--t1);border-bottom:1px solid rgba(211,42,31,.5);padding-bottom:1px}
body .ideo-home .wk-next svg{width:16px;height:10px;fill:none;stroke:var(--crimson);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  body .ideo-home .wk-next:hover svg{transform:translateX(4px)}
  body .ideo-home .wk-next:hover .wk-next-n{border-bottom-color:var(--crimson)}
}
body .ideo-home .wk-note{margin:clamp(24px,3.4vh,34px) auto 0;max-width:64ch;text-align:center;font-size:13px;line-height:1.5;color:var(--t4)}

/* arriving */
body .ideo-home .work.will-in .work-head > *{opacity:0;transform:translateY(16px)}
body .ideo-home .work.will-in .wk-t{opacity:0}
body .ideo-home .work.will-in .wk-stage,
body .ideo-home .work.will-in .wk-bands{opacity:0}
body .ideo-home .work.is-in .work-head > *{opacity:1;transform:none;transition:opacity 1s var(--ease) var(--hd,.05s),transform 1.2s var(--ease-out) var(--hd,.05s)}
body .ideo-home .work.is-in .wk-t{opacity:1;animation:ideo-wk-rise 1.1s var(--ease-out) calc(.22s + var(--i) * 90ms) backwards}
@keyframes ideo-wk-rise{from{opacity:0;transform:translateY(22px)}}
body .ideo-home .work.is-in .wk-stage{opacity:1;transition:opacity 1s var(--ease) .6s}
body .ideo-home .work.is-in .wk-bands{opacity:1;transition:opacity 1.2s var(--ease) .5s}

@media (max-width:999px){
  body .ideo-home .wk-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:939px){
  body .ideo-home .wk-d,
  body .ideo-home .cx-case{grid-template-columns:1fr}
  body .ideo-home .cs-tags{margin:0 0 18px;padding:0}
  body .ideo-home .cs-main .cs-steps > div:first-child{border-top:1px solid var(--line);padding-top:12px}
  body .ideo-home .wk-next{grid-column:1}
}
@media (max-width:699px){
  body .ideo-home .work{padding:calc(clamp(58px,17vw,76px) - 46px) 0 clamp(58px,17vw,76px)}
  body .ideo-home .work-sub{max-width:none;text-wrap:pretty;text-align:justify;text-align-last:center;-webkit-hyphens:auto;hyphens:auto}
  body .ideo-home .wk{margin-top:28px}
  body .ideo-home .wk-list{display:flex;flex-direction:column;gap:10px}
  body .ideo-home .wk-t{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:3px 12px;padding:15px 15px 15px 10px;border-radius:16px}
  body .ideo-home .wk-who{order:0;margin:0;padding:0;border:0}
  body .ideo-home .wk-fig{order:0;align-items:flex-end;gap:4px;max-width:112px;margin:0;text-align:right}
  body .ideo-home .wk-i{width:38px;font-size:12px}
  body .ideo-home .wk-oo{left:-3px}
  body .ideo-home .wk-who b{font-size:17px}
  body .ideo-home .wk-who small{font-size:12.5px}
  body .ideo-home .wk-num{font-size:25px}
  body .ideo-home .wk-num.is-word{font-size:20px}
  body .ideo-home .wk-of{font-size:11.5px;color:var(--t3)}
  body .ideo-home .wk.has-sheet .wk-stage{display:none}
  body .ideo-home .cs-steps > div{grid-template-columns:1fr;gap:4px;padding:12px 0}
  body .ideo-home .cs-steps dt{padding-top:0}
  body .ideo-home .cs-lesson{padding:14px 16px 15px}
}

/* a case in the sheet */
body .ideo-home .wk-sheet-mark{flex:none;display:flex;align-items:center;height:30px}
body .ideo-home .wk-sheet-mark img{display:block;height:100%;width:auto;max-width:110px;object-fit:contain}
body .ideo-home .wk-sheet-who{display:flex;flex-direction:column;gap:2px;min-width:0}
body .ideo-home .wk-sheet-who b{font-size:16px;line-height:1.3;color:var(--t1)}
body .ideo-home .wk-sheet-who span{font-size:13.5px;color:var(--t3)}
body .ideo-home .wk-sheet-body .cs-head{margin-bottom:16px}
body .ideo-home .wk-sheet-body .cs-meta{margin-bottom:10px}
body .ideo-home .wk-sheet-body .cs-line{font-size:22px}
body .ideo-home .wk-sheet-body .cs-stats{gap:14px 26px}
body .ideo-home .wk-sheet-body .cs-stats b{font-size:25px}

/* ================= the Case studies page ================= */
body .ideo-home .cx-top{padding:clamp(34px,7vh,84px) 0 clamp(14px,2.4vh,24px)}
body .ideo-home .cx-top h1{font-size:clamp(34px,4.6vw,62px)}
body .ideo-home .cx-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(24px,3.6vh,36px)}
body .ideo-home .cx-f{display:inline-flex;align-items:baseline;gap:7px;margin:0;padding:9px 17px;border-radius:999px;
  border:1px solid var(--line-2);background:transparent;color:var(--t2);font:inherit;font-size:15px;line-height:1.2;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
body .ideo-home .cx-f span{font-size:12px;color:var(--t4)}
body .ideo-home .cx-f.is-on{border-color:rgba(211,42,31,.6);background:rgba(211,42,31,.1);color:var(--t1)}
body .ideo-home .cx-f.is-on span{color:var(--t3)}
@media (hover:hover) and (pointer:fine){
  body .ideo-home .cx-f:not(.is-on):hover{border-color:rgba(248,243,237,.3);color:var(--t1)}
}
body .ideo-home .cx-list{position:relative;padding:clamp(12px,2vh,20px) 0 clamp(36px,6vh,64px)}
body .ideo-home .cx-list .work-in{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
body .ideo-home .cx-case{padding:clamp(24px,3vw,42px);border-radius:24px;scroll-margin-top:calc(var(--head-h) + 20px);
  border:1px solid rgba(248,243,237,.08);background:linear-gradient(180deg,rgba(248,243,237,.03),rgba(248,243,237,.012))}
body .ideo-home .cx-case .cs-line{font-size:clamp(24px,2.3vw,32px)}
body .ideo-home .cx-case[hidden]{display:none}
body .ideo-home .cx-case.is-shown{animation:ideo-cx-in .7s var(--ease-out) calc(var(--k,0) * 60ms) backwards}
@keyframes ideo-cx-in{from{opacity:0;transform:translateY(14px)}}
body .ideo-home .cx-h{margin:0 0 clamp(22px,3.2vh,34px);text-align:center;font-weight:400;font-size:clamp(25px,2.7vw,38px);line-height:1.12;letter-spacing:-.015em}
body .ideo-home .cx-brands{padding:clamp(36px,6vh,70px) 0 clamp(30px,5vh,56px)}
body .ideo-home .cx-brands h2.cx-h{margin:0 0 clamp(22px,3.4vh,34px);font-size:clamp(27px,3.2vw,44px)}
body .ideo-home .cx-brands .wk-bands{margin-top:0}
body .ideo-home .cx-end{position:relative;padding:clamp(48px,8vh,96px) 0 clamp(60px,9vh,110px);text-align:center}
body .ideo-home .cx-end .work-in{display:flex;flex-direction:column;align-items:center}
body .ideo-home .cx-end-h{margin:0 0 12px;font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
body .ideo-home .cx-end-h em{font-style:italic;color:var(--crimson)}
body .ideo-home .cx-end .work-sub{margin:0}
body .ideo-home .cx-end-btn{margin-top:clamp(22px,3.2vh,30px)}
body .ideo-home .cx-end .wk-note{margin-top:clamp(36px,5vh,52px)}
@media (max-width:699px){
  body .ideo-home .cx-top .work-sub{text-align:center;text-align-last:center}
  body .ideo-home .cx-filter{gap:7px}
  body .ideo-home .cx-f{padding:8px 14px;font-size:14px}
  body .ideo-home .cx-case{padding:22px 18px 20px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  body .ideo-home .cx-case.is-shown{animation:none}
}

/* v16 (Kazi): the rows are driven frame by frame (site.js), so the CSS loop is off once the
   script runs. */
body .ideo-home .wp-rows.is-js .wp-track{animation:none}
/* v150: a mark that is still on its way waits unseen, then fades in (no pop) */
body .ideo-home .wp-track img.is-wait{opacity:0}

body .ideo-home .cs-eg{margin:-6px 0 14px;font-size:12px;font-style:italic;color:var(--t4)}

/* v17-19 (Kazi): the typing search box, smaller and our own: a light runs round its edge,
   it types one expert as a search would, then "We have one". AI and health-tech
   experts lead the names. */
@property --wp-a{syntax:'<angle>';inherits:false;initial-value:0deg}
body .ideo-home .wp-ask{margin-top:clamp(30px,3.6vw,48px)}
body .ideo-home .wp-ask > *{padding:0}
body .ideo-home .wp-ask > .wp-q{font-size:14px;letter-spacing:.01em;color:var(--t3)}
body .ideo-home .wp-field{--fill:var(--page);display:flex;align-items:center;gap:8px;width:min(400px,100%);margin:10px 0 0;padding:8px 8px 8px 14px;
  border:1px solid transparent;border-radius:999px;font-size:15px;line-height:1.3;color:var(--t1);
  background:linear-gradient(rgba(248,243,237,.03),rgba(248,243,237,.03)) padding-box,linear-gradient(var(--fill),var(--fill)) padding-box,
    conic-gradient(from var(--wp-a),transparent 0deg 250deg,rgba(211,42,31,.95) 330deg,transparent 360deg) border-box,
    linear-gradient(var(--line-2),var(--line-2)) border-box;
  animation:ideo-wp-run 7s linear infinite}
@keyframes ideo-wp-run{to{--wp-a:360deg}}
body .ideo-home .wp-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 3px rgba(211,42,31,.18)}
body .ideo-home .wp-pre{flex:none;color:var(--t3)}
body .ideo-home .wp-typed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .ideo-home .wp-glass{flex:none;width:16px;height:16px;fill:none;stroke:var(--t3);stroke-width:1.6;stroke-linecap:round}
body .ideo-home .wp-caret{flex:none;width:1.5px;height:1.05em;margin-left:-6px;background:var(--crimson);animation:ideo-caret 1s steps(1) infinite}
body .ideo-home .wp-ok{display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex:none;padding:4px 10px 4px 8px;border-radius:999px;
  font-size:12px;letter-spacing:.01em;color:#F3C9C3;background:rgba(211,42,31,.16);opacity:0;transform:translateX(-6px);
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
body .ideo-home .wp-ok svg{width:11px;height:8px;fill:none;stroke:var(--crimson);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body .ideo-home .wp-field.is-ok .wp-ok{opacity:1;transform:none}
/* every name in two lines on a desktop and tablet; three lines on a phone */
body .ideo-home .wp-chips-in{position:relative;display:flex;justify-content:center;width:100%;margin:14px 0 0}
body .ideo-home .wp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:880px;margin:0;padding:0;list-style:none}
body .ideo-home .wp-chip{padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:none;font:inherit;font-size:12.5px;
  color:var(--t3);cursor:pointer;transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease)}
body .ideo-home .wp-chip.is-on{color:var(--t1);border-color:rgba(211,42,31,.7);background:rgba(211,42,31,.1)}
@media (hover:hover) and (pointer:fine){ body .ideo-home .wp-chip:hover{color:var(--t1);border-color:rgba(248,243,237,.36)} }
body .ideo-home .wp-chip:focus-visible{outline:1px solid var(--crimson);outline-offset:2px}
body .ideo-home .wp-ask .wp-have{margin-top:10px;font-size:13px;color:var(--t3)}
@media (max-width:699px){
  body .ideo-home .wp-field{font-size:14px;padding:7px 7px 7px 12px;gap:7px}
  body .ideo-home .wp-ok{font-size:11px;padding:3px 8px 3px 7px}
  body .ideo-home .wp-chip{font-size:12px;padding:4px 10px}
  /* phones: the first seven names, in three still lines; the box still types every kind */
  body .ideo-home .wp-chips{gap:6px}
  body .ideo-home .wp-chips li:nth-child(n+8){display:none}
}
@media (prefers-reduced-motion:reduce){ body .ideo-home .wp-field,body .ideo-home .wp-caret{animation:none} }

/* v17 (Kazi): the hero's rings circle the words themselves, sized to them by home.js; only
   transforms and opacity change each frame. */
body .ideo-home .orbit{-webkit-mask-image:none;mask-image:none;aspect-ratio:auto}
body .ideo-home .orbit-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
body .ideo-home .orbit-rings ellipse{fill:none}
body .ideo-home .orbit-rings .ra{stroke:url(#ideo-ring-a);stroke-width:1}
body .ideo-home .orbit-rings .rb{stroke:rgba(211,42,31,.55);stroke-width:1;stroke-dasharray:2 9}
body .ideo-home .orbit-rings .rc{stroke:url(#ideo-ring-c);stroke-width:.9}
body .ideo-home .o-comet{position:absolute;left:0;top:0;width:84px;height:8px;margin:-4px 0 0 -80px;transform-origin:80px 4px;opacity:0;will-change:transform,opacity}
body .ideo-home .o-comet::before{content:"";position:absolute;left:0;width:80px;top:3.2px;height:1.6px;border-radius:2px;
  background:linear-gradient(90deg,rgba(211,42,31,0),rgba(211,42,31,.45) 60%,#FF6A55)}
body .ideo-home .o-comet b{position:absolute;left:76px;top:0;width:8px;height:8px;border-radius:50%;background:#FF6A55;box-shadow:0 0 12px 4px rgba(255,106,85,.4)}
body .ideo-home .o-sat{position:absolute;left:0;top:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#F8F3ED;opacity:0;will-change:transform,opacity}

body .ideo-home .wf-more{margin:clamp(24px,3.4vh,36px) 0 0;text-align:center}
body .ideo-home .wf-more a{display:inline-flex;align-items:center;gap:10px;padding:6px 0;font-size:15px;color:var(--t2);text-decoration:none;
  border-bottom:1px solid var(--line-2);transition:color .4s var(--ease),border-color .4s var(--ease)}
body .ideo-home .wf-more a:hover{color:var(--t1);border-bottom-color:var(--crimson)}
body .ideo-home .wf-more svg{width:16px;height:10px;fill:none;stroke:var(--crimson);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* v28 (Kazi: still too hard for people who are not technical): the proof, as the four questions a
   doctor actually asks us. Each is answered by one thing our team has already done: one number,
   one plain sentence, and where. Then the turn: done for them, why not for you. */
body .ideo-home .pq{max-width:1120px;margin:clamp(40px,6vh,68px) auto 0}
body .ideo-home .pq-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
body .ideo-home .pq-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(170px,auto) minmax(0,1fr);grid-template-areas:"q n a";gap:clamp(24px,3.6vw,56px);
  align-items:center;padding:clamp(28px,4.4vh,44px) 0;border-bottom:1px solid var(--line)}
body .ideo-home .pq-q{grid-area:q;margin:0;font-size:clamp(24px,2.3vw,32px);font-style:italic;line-height:1.22;color:var(--t1);text-wrap:balance}
body .ideo-home .pq-n{grid-area:n;display:flex;flex-direction:column;align-items:center;margin:0;text-align:center}
body .ideo-home .pq-n span{font-size:clamp(58px,6.2vw,92px);line-height:.95;letter-spacing:-.03em;color:var(--t1);font-variant-numeric:tabular-nums}
body .ideo-home .pq-n small{margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FF6A55}
body .ideo-home .pq-a{grid-area:a}
body .ideo-home .pq-a p{margin:0;font-size:17px;line-height:1.55;color:var(--t2)}
body .ideo-home .pq-a .pq-where{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--t3)}
body .ideo-home .pq-where b{padding:3px 9px;border:1px solid var(--line-2);border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t1)}
body .ideo-home .pq-end{display:flex;flex-direction:column;align-items:center;margin-top:clamp(48px,7vh,76px);text-align:center}
body .ideo-home .pq-places{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
body .ideo-home .pq-places li{padding:5px 13px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t2)}
body .ideo-home .pq-places li:last-child{border-color:rgba(211,42,31,.55);color:#fff;background:rgba(211,42,31,.14)}
body .ideo-home .pq-why{margin:22px 0 0;font-size:clamp(34px,4.2vw,60px);line-height:1.05;letter-spacing:-.02em;color:var(--t1);text-wrap:balance}
body .ideo-home .pq-why em{font-style:italic;color:var(--crimson)}
body .ideo-home .pq-go{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px;margin:30px 0 0}
body .ideo-home .pq-link{display:inline-flex;align-items:center;gap:10px;padding:6px 0;font-size:15px;color:var(--t2);text-decoration:none;border-bottom:1px solid var(--line-2);
  transition:color .4s var(--ease),border-color .4s var(--ease)}
body .ideo-home .pq-link:hover{color:var(--t1);border-bottom-color:var(--crimson)}
body .ideo-home .pq-link svg{width:16px;height:10px;fill:none;stroke:var(--crimson);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body .ideo-home .pq[data-rise] .pq-row,body .ideo-home .pq[data-rise] .pq-end{opacity:0;transform:translateY(18px)}
body .ideo-home .pq.is-up .pq-row,body .ideo-home .pq.is-up .pq-end{opacity:1;transform:none;transition:opacity .9s var(--ease) calc(var(--i,4) * .12s),transform 1.1s var(--ease-out) calc(var(--i,4) * .12s)}
@media (max-width:999px){
  body .ideo-home .pq-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q n" "a n";row-gap:12px}
  body .ideo-home .pq-n{padding-left:12px}
}
@media (max-width:699px){
  body .ideo-home .pq-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"q" "n" "a";row-gap:14px;padding:28px 0}
  body .ideo-home .pq-q{font-size:23px}
  body .ideo-home .pq-n{flex-direction:row;align-items:baseline;gap:12px;padding:0;text-align:left}
  body .ideo-home .pq-n span{font-size:56px}
  body .ideo-home .pq-n small{margin:0}
  body .ideo-home .pq-a p{font-size:16.5px}
  body .ideo-home .pq-why{font-size:36px}
  body .ideo-home #work .work-sub{text-align:center;text-align-last:center;hyphens:manual}
}
@media (prefers-reduced-motion:reduce){
  body .ideo-home .pq[data-rise] .pq-row,body .ideo-home .pq[data-rise] .pq-end{opacity:1;transform:none;transition:none}
}

/* v30: each answer now says what it means for the doctor, and opens its whole story in a sheet.
   Under the four, the three things every doctor gets, and a search box typing where we did it. */
body .ideo-home .pq-qw{grid-area:q}
body .ideo-home .pq-i{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.22em;color:#FF6A55}
body .ideo-home .pq-i::after{content:"";width:34px;height:1px;background:rgba(211,42,31,.55)}
body .ideo-home .pq-a .pq-you{display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:13px 16px;border:1px solid rgba(211,42,31,.24);border-radius:14px;
  background:rgba(211,42,31,.07);font-size:15.5px;line-height:1.5;color:var(--t1)}
body .ideo-home .pq-you svg,body .ideo-home .pq-keep svg{flex:none;width:13px;height:10px;margin-top:.42em;fill:none;stroke:#FF6A55;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body .ideo-home .pq-you b{color:#FF6A55;font-weight:700}
body .ideo-home .pq-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:16px}
body .ideo-home .pq-a .pq-foot .pq-where{margin:0}
body .ideo-home .pq-read{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid var(--line-2);border-radius:999px;background:none;
  font:inherit;font-size:14px;color:var(--t1);cursor:pointer;transition:border-color .4s var(--ease),background-color .4s var(--ease)}
body .ideo-home .pq-read svg,body .ideo-home .pq-link svg{width:15px;height:10px;fill:none;stroke:var(--crimson);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
@media (hover:hover) and (pointer:fine){
  body .ideo-home .pq-read:hover{border-color:rgba(211,42,31,.7);background:rgba(211,42,31,.1)}
  body .ideo-home .pq-read:hover svg,body .ideo-home .pq-link:hover svg{transform:translateX(3px)}
}
body .ideo-home .pq-read:focus-visible,body .ideo-home .pq-link:focus-visible{outline:1px solid var(--crimson);outline-offset:3px}
body .ideo-home button.pq-link{background:none;border-width:0 0 1px;border-style:solid;font:inherit;font-size:15px;cursor:pointer}
body .ideo-home .pq-keep{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;margin:0;padding:0 0 clamp(36px,5vh,52px);list-style:none;
  width:100%;border-bottom:1px solid var(--line)}
body .ideo-home .pq-keep li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.45;color:var(--t2);text-align:left}
body .ideo-home .pq-ask{margin:clamp(36px,5vh,52px) 0 0;font-size:14px;letter-spacing:.01em;color:var(--t3)}
body .ideo-home .pq-field{width:min(340px,100%);margin-top:12px}
body .ideo-home .pq-field .wp-ok{white-space:nowrap}
body .ideo-home .pq-field + .vh + .pq-why{margin-top:30px}
@media (max-width:999px){
  body .ideo-home .pq-row{grid-template-areas:"q n" "a a";row-gap:20px}
  body .ideo-home .pq-keep{flex-direction:column;align-items:flex-start;gap:12px;width:auto;padding-bottom:36px}
}
@media (max-width:699px){
  body .ideo-home .pq-row{grid-template-areas:"q" "n" "a";row-gap:14px}
  body .ideo-home .pq-i{margin-bottom:10px}
  body .ideo-home .pq-a .pq-you{font-size:15px;padding:12px 14px}
  body .ideo-home .pq-foot{gap:14px}
  body .ideo-home .pq-read{width:100%;justify-content:center;padding:11px 15px;font-size:15px}
  body .ideo-home .pq-keep{flex-direction:column;align-items:flex-start;gap:12px;width:auto;padding-bottom:36px}
  body .ideo-home .pq-keep li{font-size:15.5px}
}

/* The stories: a sheet over the page, one story per slide. A centred card on a laptop and a
   tablet, a sheet rising from the bottom on a phone. */
body .ideo-home .st{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:24px}
body .ideo-home .st[hidden]{display:none}
body .ideo-home .st-bg{position:absolute;inset:0;background:rgba(5,9,10,.82);opacity:0;transition:opacity .5s var(--ease)}  /* v129: no blur, so the sheet glides without dropped frames */
body .ideo-home .st-card{position:relative;display:flex;flex-direction:column;width:min(660px,100%);height:min(88vh,820px);overflow:hidden;
  border:1px solid var(--line-2);border-radius:22px;background:#172326;box-shadow:0 40px 120px rgba(0,0,0,.55);color:var(--t1);
  opacity:0;transform:translateY(26px) scale(.98);transition:opacity .45s var(--ease),transform .7s var(--ease-out)}
body .ideo-home .st.is-open .st-bg,body .ideo-home .st.is-open .st-card{opacity:1}
body .ideo-home .st.is-open .st-card{transform:none}
body .ideo-home .st-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 12px 12px 24px;border-bottom:1px solid var(--line)}
body .ideo-home .st-count{margin:0;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--t3)}
body .ideo-home .st-count span{color:#FF6A55}
body .ideo-home .st-x{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:none;
  font:inherit;font-size:24px;line-height:1;color:var(--t1);cursor:pointer;transition:border-color .4s var(--ease),background-color .4s var(--ease)}
body .ideo-home .st-x:hover{border-color:rgba(211,42,31,.7);background:rgba(211,42,31,.1)}
body .ideo-home .st-track{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:0}
body .ideo-home .st-track::-webkit-scrollbar{display:none}
body .ideo-home .st-slide{flex:0 0 100%;min-width:0;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-align:start;scroll-snap-stop:always;
  padding:26px clamp(22px,4.4vw,44px) 34px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
body .ideo-home .st-where{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-size:13.5px;color:var(--t3)}
body .ideo-home .st-where b{padding:3px 9px;border:1px solid var(--line-2);border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t1)}
body .ideo-home .st-q{margin:18px 0 0;font-size:17px;font-style:italic;color:var(--t3)}
body .ideo-home .st-big{margin:12px 0 0}
body .ideo-home .st-n{margin:0;font-size:clamp(54px,7vw,78px);line-height:1;letter-spacing:-.03em;color:var(--t1)}
body .ideo-home .st-nl{margin:10px 0 0;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#FF6A55}
body .ideo-home .st-h{margin:20px 0 0;font-size:clamp(23px,2.4vw,28px);font-weight:400;line-height:1.25;color:var(--t1);text-wrap:balance}
body .ideo-home .st-steps{margin:26px 0 0;padding:0;list-style:none}
body .ideo-home .st-steps li{position:relative;padding:0 0 22px 28px}
body .ideo-home .st-steps li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border:1.5px solid var(--crimson);border-radius:50%;box-sizing:border-box}
body .ideo-home .st-steps li::after{content:"";position:absolute;left:4px;top:calc(.42em + 14px);bottom:4px;width:1px;background:var(--line-2)}
body .ideo-home .st-steps li:last-child::before{background:var(--crimson)}
body .ideo-home .st-steps li:last-child::after{display:none}
body .ideo-home .st-steps b{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
body .ideo-home .st-steps p{margin:7px 0 0;font-size:16.5px;line-height:1.6;color:var(--t2)}
body .ideo-home .st-you{margin:4px 0 0;padding:16px 18px;border:1px solid rgba(211,42,31,.26);border-radius:14px;background:rgba(211,42,31,.08);font-size:16.5px;line-height:1.55;color:var(--t1)}
body .ideo-home .st-you b{display:block;margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FF6A55}
body .ideo-home .st-go{margin:24px 0 0}
body .ideo-home .st-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
body .ideo-home .st-prev,body .ideo-home .st-next{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:none;color:var(--t1);
  cursor:pointer;transition:border-color .4s var(--ease),background-color .4s var(--ease),opacity .4s var(--ease)}
body .ideo-home .st-prev svg,body .ideo-home .st-next svg{width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body .ideo-home .st-next{border-color:rgba(211,42,31,.7);background:rgba(211,42,31,.14)}
body .ideo-home .st-prev:disabled,body .ideo-home .st-next:disabled{opacity:.28;cursor:default}
body .ideo-home .st-dots{display:flex;align-items:center;gap:2px}
body .ideo-home .st-dots button{display:grid;place-items:center;width:24px;height:30px;padding:0;border:0;background:none;cursor:pointer;transition:width .4s var(--ease)}
body .ideo-home .st-dots button::before{content:"";width:7px;height:7px;border-radius:9px;background:var(--line-2);transition:width .4s var(--ease),background-color .4s var(--ease)}
body .ideo-home .st-dots button[aria-current="true"]{width:36px}
body .ideo-home .st-dots button[aria-current="true"]::before{width:26px;background:var(--crimson)}
body .ideo-home .st :focus-visible{outline:1px solid var(--crimson);outline-offset:3px}
@media (max-width:699px){
  body .ideo-home .st{align-items:flex-end;padding:0}
  body .ideo-home .st-card{width:100%;height:92vh;height:92dvh;border-width:1px 0 0;border-radius:22px 22px 0 0;transform:translateY(100%)}
  body .ideo-home .st-card::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:var(--line-2)}
  body .ideo-home .st-top{padding:16px 10px 10px 20px}
  body .ideo-home .st-slide{padding:22px 20px 30px}
  body .ideo-home .st-steps p,body .ideo-home .st-you{font-size:16px}
  body .ideo-home .st-go .ideo-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  body .ideo-home .st-bg,body .ideo-home .st-card{transition:none}
}

/* v31 (Kazi: the lines in the hero should be the brand's red): the orbit rings, the small
   satellite and the scroll line now carry the crimson instead of white. */
body .ideo-home .o-sat{background:#FF6A55;box-shadow:0 0 8px 2px rgba(255,106,85,.45)}
body .ideo-home .hero-foot s{background:rgba(211,42,31,.32)}
body .ideo-home .hero-foot s::after{background:#FF6A55}

/* v32 (Kazi: the button at the end of each story should hook): a line that invites the doctor in,
   and a button in the doctor's own voice, different for each story. */
body .ideo-home .st-go{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line)}
body .ideo-home .st-go p{margin:0 0 14px;font-size:clamp(20px,2vw,24px);line-height:1.25;color:var(--t1)}
body .ideo-home .st-go em{font-style:italic;color:var(--crimson)}
body .ideo-home .st-go .ideo-btn{display:inline-flex;align-items:center;gap:10px}
body .ideo-home .st-go .ideo-btn svg{width:15px;height:10px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
body .ideo-home .st-go .ideo-btn:hover svg{transform:translateX(3px)}
@media (max-width:699px){ body .ideo-home .st-go .ideo-btn{justify-content:center} }
/* v34 (Kazi: the closing button was too big): it now sits level with the link beside it */
body .ideo-home .pq-go{gap:12px 26px;margin-top:26px}
body .ideo-home .pq-go .ideo-btn{padding:10px 21px;font-size:14.5px;box-shadow:0 12px 28px -18px rgba(211,42,31,.85)}
@media (pointer:coarse){ body .ideo-home .pq-go .ideo-btn{min-height:44px} }
/* v40 (Kazi: let the digits change, but smoothly and well timed): odometer wheels. Each digit is
   a strip of 0 to 9 behind a soft-edged window; it rolls once to its place with a gentle start
   and a long landing, the wheels setting off 0.16 s apart. The label follows as it lands. */
body .ideo-home .pq-n.is-od > span[aria-hidden]{display:inline-flex;align-items:flex-start}
body .ideo-home .pq-n .od{display:inline-block;height:1.08em;overflow:hidden;font-weight:inherit;
  -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
body .ideo-home .pq-n .od-s{display:block;font-weight:inherit;transition:transform 2.1s cubic-bezier(.45,.05,.2,1) calc(var(--k) * .16s);will-change:transform}
body .ideo-home .pq-n .od-s i{display:block;height:1.08em;line-height:1.08em;font-style:normal;text-align:center}
body .ideo-home .pq-n.is-run .od-s{transform:translateY(calc(var(--d) * -1.08em))}
body .ideo-home .pq-n .od-c{display:inline-block;line-height:1.08em;font-weight:inherit}
body .ideo-home .pq-n.is-od small{opacity:0;transform:translateY(6px)}
body .ideo-home .pq-n.is-run small{opacity:1;transform:none;transition:opacity .9s var(--ease) 1.5s,transform 1.1s var(--ease-out) 1.5s}
/* v42 (Kazi: the booking needs a hook): one true line above the button, a crimson light beside it */
body .ideo-home .submit-hook{flex:1 1 100%;display:flex;align-items:center;gap:11px;margin:0;font-size:16px;line-height:1.4;color:var(--t1)}
body .ideo-home .submit-hook i{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--crimson);animation:ideo-hook-blink 1.6s var(--ease) infinite}
body .ideo-home .submit-hook i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--crimson);opacity:0;animation:ideo-foot-ping 2.8s var(--ease-out) infinite}
body .ideo-home .submit-hook em{font-style:italic;color:var(--crimson)}
@media (prefers-reduced-motion:reduce){ body .ideo-home .submit-hook i,body .ideo-home .submit-hook i::after{animation:none} }
body .ideo-home .submit-hook{align-items:flex-start}body .ideo-home .submit-hook i{margin-top:.5em}
/* v44 (Kazi: the country box repeated the search box below, so it is gone; the ticks now name
   what we do, each with a solid crimson tick) */
body .ideo-home .pq-keep{gap:12px 14px;max-width:820px;padding-bottom:clamp(36px,5vh,52px)}
body .ideo-home .pq-keep li{align-items:center;gap:9px;padding:8px 16px 8px 9px;border:1px solid var(--line-2);border-radius:999px;font-size:15.5px;line-height:1.2;color:var(--t1)}
body .ideo-home .pq-keep li i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 3px rgba(211,42,31,.18)}
body .ideo-home .pq-keep li i svg{width:10px;height:8px;margin:0;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body .ideo-home .pq-keep + .pq-why{margin-top:clamp(34px,5vh,52px)}
@media (max-width:999px){ body .ideo-home .pq-keep{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;width:100%} }
@media (max-width:699px){
  body .ideo-home .pq-keep{gap:10px 8px;padding-bottom:34px}
  body .ideo-home .pq-keep li{font-size:14.5px;padding:7px 13px 7px 8px}
}
body .ideo-home .pq-keep{max-width:1000px}
@media (max-width:999px) and (min-width:700px){ body .ideo-home .pq-keep{max-width:560px} }

/* v45 what we do: six small cards, each in a doctor's words */
body .ideo-home .pq-keep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:980px;padding:0 0 clamp(36px,5vh,52px)}
body .ideo-home .pq-keep li{position:relative;display:flex;align-items:flex-start;gap:13px;padding:17px 20px 18px 16px;border:1px solid var(--line-2);border-radius:16px;background:linear-gradient(160deg,rgba(248,243,237,.05),rgba(248,243,237,.012) 62%);text-align:left;overflow:hidden;transition:border-color .5s var(--ease),transform .5s var(--ease)}
body .ideo-home .pq-keep li::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,106,85,.75),transparent);opacity:0;transition:opacity .5s var(--ease)}
body .ideo-home .pq-keep li i{margin-top:1px}
body .ideo-home .pq-keep li span{display:flex;flex-direction:column;gap:4px;min-width:0}
body .ideo-home .pq-keep li b{font-size:16px;font-weight:600;line-height:1.25;color:var(--t1)}
body .ideo-home .pq-keep li small{font-size:14px;line-height:1.45;color:var(--t3)}
@media (hover:hover){
  body .ideo-home .pq-keep li:hover{border-color:rgba(211,42,31,.45);transform:translateY(-2px)}
  body .ideo-home .pq-keep li:hover::before{opacity:1}
}
@media (max-width:999px){ body .ideo-home .pq-keep{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px} }
@media (max-width:560px){
  body .ideo-home .pq-keep{grid-template-columns:1fr;gap:9px;padding-bottom:34px}
  body .ideo-home .pq-keep li{gap:12px;padding:13px 16px 14px 13px;border-radius:14px}
  body .ideo-home .pq-keep li b{font-size:15.5px}
  body .ideo-home .pq-keep li small{font-size:13.5px}
}
body .ideo-home .st-go .st-more{margin-left:24px;vertical-align:middle}
@media (max-width:699px){ body .ideo-home .st-go .st-more{display:flex;justify-content:center;width:max-content;margin:16px auto 0} }

/* v56 (Kazi: arrive like a top 1% site, soothing, no lag). Hidden from the very first paint (v47), then
   each portrait forms like a small planet, one after another: its orbit traces itself round the oval
   (behind, then in front), the face rises out of the dark and settles, one soft light passes over it
   and the name follows. When the last is in, the first wakes in colour: crimson ring, the cream ball
   sets off, its title rises and the words appear. Only opacity, transform and a hairline's dash move. */
@media (prefers-reduced-motion:no-preference){
  html.ideo-js body .ideo-home .vx{--wake:calc(.3s + (var(--n,6) - 1) * .17s + .85s)}
  html.ideo-js body .ideo-home .voices .vx-p{opacity:1;transform:none;transition:none;
    --d:calc(.3s + var(--i,0) * .17s);--fd:calc(var(--d) + .2s);--sd:calc(var(--d) + 1.2s)}
  html.ideo-js body .ideo-home .voices .vx-p.is-on{--sd:var(--wake)}
  /* waiting in the dark */
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-ring path,
  html.ideo-js body .ideo-home .vx.is-arriving .vx-ring path{stroke-dasharray:var(--len,400px) var(--len,400px)}
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-ring path{stroke-dashoffset:var(--len,400px)}
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-name{opacity:0;transform:translateY(10px)}
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-ball{opacity:0}
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-p.is-on .vx-o{transform:none}
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-p.is-on .vx-o::before{opacity:0}
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-p.is-on .vx-face img{filter:grayscale(.92) brightness(.68) contrast(.96)}
  /* the orbit is traced in a brighter cream, then settles to its quiet hairline (crimson for the first) */
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-front path{stroke:rgba(248,243,237,.58)}
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-back path{stroke:rgba(248,243,237,.32)}
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-p.is-on .vx-name{color:var(--t3)}
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-chip{opacity:0;transform:translate(calc(-50% + var(--cx,0px)),10px) scale(.9)}
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-stage{opacity:0;transform:translateY(14px)}
  html.ideo-js body .ideo-home .vx .vx-p:not(.is-shown) .vx-face{opacity:0;transform:translate3d(0,26px,0) scale(.86)}
  html.ideo-js body .ideo-home .vx .vx-p:not(.is-shown) .vx-face img{transform:scale(1.14)}
  /* the face: a slow rise, the photo settling inside its frame */
  html.ideo-js body .ideo-home .vx .vx-face{transition:opacity 1.1s cubic-bezier(.33,0,.2,1) var(--fd),
    transform 1.7s var(--ease-out) var(--fd),box-shadow .6s var(--ease)}
  html.ideo-js body .ideo-home .vx .vx-face img{transition:filter .9s var(--ease),transform 2.2s var(--ease-out) var(--fd)}
  html.ideo-js body .ideo-home .vx .vx-face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
    background:linear-gradient(100deg,rgba(255,244,232,0) 30%,rgba(255,244,232,.16) 45%,rgba(255,249,242,.34) 50%,rgba(255,244,232,.16) 55%,rgba(255,244,232,0) 70%)}
  /* only while arriving: the delays that make it one calm sequence */
  html.ideo-js body .ideo-home .vx.is-arriving .vx-face{will-change:transform,opacity}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-back path{transition:stroke 1.4s var(--ease) var(--sd),
    stroke-dashoffset .62s cubic-bezier(.5,0,.8,.5) var(--d)}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-front path{transition:stroke 1.4s var(--ease) var(--sd),
    stroke-dashoffset .8s cubic-bezier(.2,.5,.3,1) calc(var(--d) + .62s)}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-p.is-shown .vx-face::after{animation:vx-sheen 1.6s cubic-bezier(.45,.05,.25,1) calc(var(--fd) + .35s) both}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-name{transition:opacity .9s var(--ease) calc(var(--d) + .5s),
    transform 1.1s var(--ease-out) calc(var(--d) + .5s),color .8s var(--ease) var(--wake)}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-p.is-on .vx-face img{transition:filter 1.2s var(--ease) var(--wake),transform 2.2s var(--ease-out) var(--fd)}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-p.is-on .vx-o{transition:transform 1.4s var(--ease-out) var(--wake)}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-o::before{transition:opacity 1.4s var(--ease) var(--wake)}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-ball{transition:opacity .8s var(--ease) calc(var(--wake) + .2s)}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-chip{transition:opacity .6s var(--ease) calc(var(--wake) + .25s),transform .9s var(--ease-out) calc(var(--wake) + .25s)}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-stage{transition:opacity 1.1s var(--ease) calc(var(--wake) + .35s),transform 1.3s var(--ease-out) calc(var(--wake) + .35s)}
  @keyframes vx-sheen{0%{opacity:0;transform:translateX(-100%)}18%,82%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
}

/* v46 the picked Dhaka hour, shown in the doctor's own time or any city they choose */
body .ideo-home .you-time{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;padding:9px 8px 9px 14px;border:1px solid var(--line-2);border-radius:14px;background:rgba(248,243,237,.03)}
body .ideo-home .you-k{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,243,237,.6)}
body .ideo-home .you-time b{font-weight:400;font-size:17px;color:var(--light);font-variant-numeric:tabular-nums}
body .ideo-home .you-time b small{margin-left:6px;font-size:13px;color:rgba(248,243,237,.6)}
body .ideo-home .you-sel{position:relative;display:inline-flex;align-items:center;margin-left:auto}
body .ideo-home .you-sel select{-webkit-appearance:none;appearance:none;max-width:190px;height:32px;padding:0 30px 0 13px;border:1px solid rgba(211,42,31,.55);border-radius:999px;background:rgba(211,42,31,.08);font:inherit;font-size:13.5px;color:var(--light);cursor:pointer;text-overflow:ellipsis}
body .ideo-home .you-sel select:focus-visible{outline:1px solid var(--crimson);outline-offset:2px}
body .ideo-home .you-sel select option{color:#111;background:#fff}
body .ideo-home .you-sel svg{position:absolute;right:12px;width:9px;height:6px;fill:none;stroke:#FF6A55;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
body .ideo-home .slip .when-you{margin:0;width:100%;font-size:15px;font-style:italic;color:#FF6A55}
@media (max-width:420px){ body .ideo-home .you-sel{margin-left:0;width:100%} body .ideo-home .you-sel select{max-width:none;width:100%} }

/* v48 booking: the place the hour is shown in, auto from the device, or any place typed */
body .ideo-home .you-time .you-where{margin-left:auto;padding:4px 11px;border:1px solid rgba(211,42,31,.55);border-radius:999px;background:rgba(211,42,31,.08);font-size:13px;color:var(--light);white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
body .ideo-home .you-time .you-auto{padding:0;border:0;background:none;font:inherit;font-size:12.5px;color:#FF6A55;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
body .ideo-home .you-time .you-combo{flex:1 0 100%;margin-top:4px}
body .ideo-home .you-time .tz-find input{height:36px;font-size:13.5px}
@media (max-width:420px){ body .ideo-home .you-time .you-where{margin-left:0} }

/* v49 (Kazi): the hero card says what the call is; the form's lead is short and justified;
   closing turns red, the way the story sheet's close does */
body .ideo-home .book .book-what{margin:6px 0 12px;font-size:13.5px;line-height:1.45;color:rgba(248,243,237,.78);text-wrap:pretty}
body .ideo-home .modal-card .lede{max-width:46ch;text-align:justify;text-align-last:left;-webkit-hyphens:auto;hyphens:auto}
body .ideo-home .modal-close,body .ideo-home .st-x{border-color:rgba(211,42,31,.75);background:rgba(211,42,31,.1);color:var(--light);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .4s var(--ease)}
body .ideo-home .modal-close:hover,body .ideo-home .st-x:hover{background:var(--crimson);border-color:var(--crimson);color:#fff;transform:rotate(90deg)}
body .ideo-home .modal-close:focus-visible,body .ideo-home .st-x:focus-visible{outline:1px solid var(--crimson);outline-offset:3px}

/* v60 one rhythm between sections (Kazi: the gap between sections felt a little too big on every
   device). --gap is the empty space a reader sees from the last thing in one section to the first
   thing in the next: 72px on phones rising to 112px on wide screens, in vw only, so tall tablets no
   longer get the extra space the old vh paddings gave them. Each section keeps a quarter of it above
   its heading and the one before supplies the rest; the footer opens with a little more air. */
body{--gap:clamp(72px,4.2vw + 52px,112px)}
body .ideo-home .creds{padding-top:calc(var(--gap) - 32px);padding-bottom:max(14px,calc(var(--gap) * .75 - 57px))}
@media (min-width:700px){
  /* the ring keeps empty room under its front logos; the next section may sit a little into it */
  body .ideo-home .orbit-stage{margin-bottom:calc(min(1040px,92vw) * -.045)}
}
body .ideo-home .proc{padding-top:calc(var(--gap) * .25);padding-bottom:max(6px,calc(var(--gap) * .9 - 56px))}
body .ideo-home .rm{padding-bottom:clamp(12px,1.4vw,18px)}
body .ideo-home .rm-row:last-child{padding-bottom:calc(var(--pad) * .5)}
body .ideo-home .work{padding-top:calc(var(--gap) * .25);padding-bottom:calc(var(--gap) * .75 - 11px)}
body .ideo-home .voices{padding-top:calc(var(--gap) * .25);padding-bottom:calc(var(--gap) * .75 - 9px)}
body .ideo-foot{padding-top:calc(var(--gap) * .45 + 2px)}
@media (max-width:699px){
  body .ideo-home .creds{padding-top:calc(var(--gap) - 50px)}
}
/* v54 the footer's Case Studies link lands here, with the heading clear of the fixed header */
body .ideo-home .work{scroll-margin-top:calc(var(--head-h,72px) - 6px)}

/* v65-66 (Kazi: keep the orbit and its moving ball, and give the chosen portrait a slim red border right
   on the picture): a 1px crimson line hugging the face, with the tilted orbit and ball going round as before */
body .ideo-home .vx-o::after{content:"";position:absolute;inset:-2px;z-index:1;border-radius:50%;pointer-events:none;
  border:1px solid var(--crimson);box-shadow:0 0 8px rgba(211,42,31,.28);opacity:0;transition:opacity .5s var(--ease)}
body .ideo-home .vx-p.is-on .vx-o::after{opacity:1}
@media (prefers-reduced-motion:no-preference){
  /* arriving (v56): the border lights with the first portrait as it wakes */
  html.ideo-js body .ideo-home .vx:not(.is-go) .vx-p.is-on .vx-o::after{opacity:0}
  html.ideo-js body .ideo-home .vx.is-arriving .vx-o::after{transition:opacity 1.2s var(--ease) var(--wake)}
}
/* the phone sheet's small portrait: the same red line sits right on the picture, the cream ball still going round it */
body .ideo-home .vx-sheet-ring{left:-2.5px;top:-2.5px;width:calc(100% + 5px);height:calc(100% + 5px)}
body .ideo-home .vx-sheet-ring ellipse{stroke-width:1.1}

/* ================= How it works arrives (Kazi, 2026-10-10: sections should come in calmly and hook) =================
   The heading rises line by line as the section comes up; each step's words follow the moment the
   rail lights its number; the chips of what you get settle one after another. JS adds will-in
   (never with reduced motion), so without it everything simply stands. */
body .ideo-home .proc.will-in .proc-head > *{opacity:0;transform:translate3d(0,26px,0)}
body .ideo-home .proc.will-in.is-in .proc-head > *{opacity:1;transform:none;transition:opacity 1s var(--ease) var(--d,.05s),transform 1.25s var(--ease-out) var(--d,.05s)}
body .ideo-home .proc.will-in .proc-head > :nth-child(2){--d:.17s}
body .ideo-home .proc.will-in .proc-head > :nth-child(3){--d:.3s}
body .ideo-home .proc.will-in .rm-row .rm-do,body .ideo-home .proc.will-in .rm-row .rm-get{transition:opacity .95s var(--ease),transform 1.2s var(--ease-out)}
body .ideo-home .proc.will-in .rm-row .rm-get{transition-delay:.14s}
body .ideo-home .proc.will-in .rm-row:not(.on) .rm-do,body .ideo-home .proc.will-in .rm-row:not(.on) .rm-get{opacity:0;transform:translate3d(0,22px,0)}
body .ideo-home .proc.will-in .rm-grp .rm-lab,body .ideo-home .proc.will-in .rm-grp .rm-chip li{transition:opacity .8s var(--ease) calc(var(--n,0) * 70ms + .1s),transform 1s var(--ease-out) calc(var(--n,0) * 70ms + .1s)}
body .ideo-home .proc.will-in .rm-grp:not(.is-in) .rm-lab,body .ideo-home .proc.will-in .rm-grp:not(.is-in) .rm-chip li{opacity:0;transform:translate3d(0,12px,0)}
@media (prefers-reduced-motion:reduce){
  body .ideo-home .proc.will-in .proc-head > *,body .ideo-home .proc.will-in .rm-row .rm-do,body .ideo-home .proc.will-in .rm-row .rm-get,
  body .ideo-home .proc.will-in .rm-grp .rm-lab,body .ideo-home .proc.will-in .rm-grp .rm-chip li{opacity:1!important;transform:none!important;transition:none!important}
}

/* glass only where it shows (2026-10-10): these panels sit on the plain page, where blurring what lies
   behind them changed nothing you can see (measured: at most 5 of 255 levels) but cost the graphics
   card on every frame of the scroll. The header and the booking card over the film keep their glass. */
body .ideo-home .eyebrow,body .ideo-home .rm-get,body .ideo-home .rm-chip li,body .ideo-home .vx-chip{-webkit-backdrop-filter:none;backdrop-filter:none}
/* v139 (Kazi 16:57, 16:59): 10 to 11 inch tablets held upright. The film shows as a tall band under the menu.
   v141 (Kazi 17:22): the words sit up on the lower half of the film, as on a laptop, not below it as on a phone.
   v142 (Kazi 17:43): the words and the booking card all sit higher, and the card stands in the middle of the screen. */
@media (min-width:700px) and (max-width:1099px) and (orientation:portrait){
  body .ideo-home .hero{display:block;min-height:0}
  body .ideo-home .hero .media,body .ideo-home .scrim{inset:auto;top:0;left:0;right:0;height:calc(100vw * .84);overflow:hidden}
  body .ideo-home .hero .poster{background-position:58% 50%}
  body .ideo-home .hero video{object-position:58% 50%}
  body .ideo-home .scrim{background:linear-gradient(180deg,rgba(4,7,8,.66) 0%,rgba(4,7,8,.14) 12%,rgba(4,7,8,0) 18%,rgba(4,7,8,.08) 24%,rgba(4,7,8,.38) 34%,rgba(10,16,18,.66) 50%,rgba(18,27,29,.86) 72%,var(--page) 96%)}
  body .ideo-home .hero-in{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:calc(100vw * .84 * .3);padding-bottom:60px}
  body .ideo-home .hero-copy{max-width:660px}
  body .ideo-home h1{font-size:clamp(40px,6.2vw,56px)}
  body .ideo-home .hero-sub{max-width:54ch;font-size:18px}
  body .ideo-home .book{width:min(620px,100%);justify-self:center;margin-inline:auto}
  body .ideo-home .hero-foot{display:none}
}
/* v141 (audit): the bar over the booking panel lets a tap reach the month arrows under it; only the X takes taps */
body .ideo-home .modal-bar{pointer-events:none}body .ideo-home .modal-close{pointer-events:auto}
/* v144 (Kazi, 2026-10-19): "See your name the way patients will." A doctor types a name and a sample search
   shows it the way a patient would meet it; site.js (v144 block) does the rest. v146 (Kazi 04:44, "more elegant,
   attractive, clean"): the words sit beside the sample, which is there from the start and fills in as the name is typed. */
body .ideo-home .you{position:relative;isolation:isolate;padding:clamp(60px,9vh,116px) 0 clamp(36px,6vh,72px);background:var(--page)}
body .ideo-home .you::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 52% at 74% 54%,rgba(211,42,31,.07),rgba(211,42,31,0) 72%),radial-gradient(46% 60% at 18% 42%,rgba(47,96,104,.08),rgba(47,96,104,0) 72%)}
body .ideo-home .you-in{max-width:1180px;margin-inline:auto;padding-inline:clamp(18px,3.6vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:clamp(36px,5.5vw,92px)}
body .ideo-home .you h2{margin:0;font-weight:400;text-wrap:balance;font-size:clamp(28px,3.3vw,48px);line-height:1.08;letter-spacing:-.02em;color:var(--t1)}
body .ideo-home .you h2 em{font-style:italic;color:var(--crimson)}
body .ideo-home .you-ask{display:flex;gap:10px;width:min(500px,100%);margin:clamp(22px,3.2vh,32px) 0 0}
body .ideo-home .you-ask[hidden],body .ideo-home .you-go[hidden]{display:none}
body .ideo-home .you-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;padding:0 20px;border:1px solid var(--line-2);border-radius:999px;background:rgba(248,243,237,.04);cursor:text;transition:border-color .35s var(--ease),background-color .35s var(--ease)}
body .ideo-home .you-field:focus-within{border-color:rgba(211,42,31,.7);background:rgba(248,243,237,.06)}
body .ideo-home .you-dr{font-size:17px;color:var(--t3)}
body .ideo-home .you-field:has(input:placeholder-shown) .you-dr{display:none}
body .ideo-home .you-field input{flex:1 1 auto;min-width:0;height:48px;padding:0;border:0;background:none;font:inherit;font-size:17px;color:var(--t1);outline:none}
body .ideo-home .you-field input::placeholder{color:var(--t3);opacity:1}
body .ideo-home .you.is-ask .you-field{animation:you-nudge .5s var(--ease)}
@keyframes you-nudge{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
body .ideo-home .you-btn{flex:none}
body .ideo-home .you-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:clamp(22px,3.2vh,32px) 0 0;animation:you-in .6s var(--ease-out) backwards}
body .ideo-home .you-note{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--t3)}
body .ideo-home .you-change{position:relative;padding:6px 0;border:0;background:none;font:inherit;font-size:15px;color:var(--t3);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;cursor:pointer;transition:color .35s var(--ease)}
body .ideo-home .you-change:hover{color:var(--t1)}
body .ideo-home .you-change:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:4px}
/* the sample: a patient's search, waiting for the name */
body .ideo-home .you-card{position:relative;padding:clamp(20px,2.3vw,30px);border:1px solid rgba(248,243,237,.13);border-radius:26px;
  background:linear-gradient(165deg,rgba(34,48,51,.8),rgba(14,21,23,.84));
  box-shadow:0 44px 90px -48px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .8s var(--ease-out)}
body .ideo-home .you.is-found .you-card{border-color:rgba(211,42,31,.32)}
body .ideo-home .you-tag{position:absolute;top:-11px;right:24px;margin:0;padding:3px 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--page);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
body .ideo-home .you-bar{display:flex;align-items:center;gap:12px;min-height:52px;margin:0;padding:12px 20px;border:1px solid var(--line-2);border-radius:999px;background:rgba(248,243,237,.06);font-size:17px;color:var(--t3);transition:color .3s var(--ease)}
body .ideo-home .you.is-typing .you-bar,body .ideo-home .you.is-found .you-bar{color:var(--t1)}
body .ideo-home .you-bar svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--t3);stroke-width:1.6;stroke-linecap:round}
body .ideo-home .you-q{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .ideo-home .you-caret{flex:none;width:1.5px;height:1.15em;margin-left:-9px;background:var(--crimson);animation:you-blink 1.05s steps(1) infinite}
body .ideo-home .you.is-found .you-caret{display:none}
@keyframes you-blink{50%{opacity:0}}
body .ideo-home .you-res{margin:22px 6px 4px;opacity:.36;transition:opacity .7s var(--ease-out)}
body .ideo-home .you.is-found .you-res{opacity:1;animation:you-in .8s var(--ease-out) backwards}
@keyframes you-in{from{opacity:0;transform:translateY(10px)}}
body .ideo-home .you-site{display:flex;align-items:center;gap:10px;margin:0}
body .ideo-home .you-fav{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(211,42,31,.45);border-radius:50%;background:rgba(211,42,31,.14);font-style:normal;font-size:12px;line-height:1;color:#FF8A78}
body .ideo-home .you-url{min-width:0;font-size:13.5px;color:var(--t3);overflow-wrap:anywhere}
body .ideo-home .you-h{margin:12px 0 0;font-size:clamp(19px,1.7vw,23px);line-height:1.3;color:var(--t1);text-decoration:underline;text-decoration-color:rgba(211,42,31,.55);text-underline-offset:5px;text-decoration-thickness:1px}
body .ideo-home .you-s{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--t2)}
@media (max-width:899px){
  body .ideo-home .you-in{grid-template-columns:minmax(0,1fr);gap:clamp(36px,6vh,48px);max-width:640px}
  body .ideo-home .you h2{font-size:clamp(28px,5vw,40px)}
  body .ideo-home .you-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
  body .ideo-home .you-go{justify-content:center}
}
@media (pointer:coarse){body .ideo-home .you-change::after{content:"";position:absolute;inset:-6px -6px}}
@media (prefers-reduced-motion:reduce){body .ideo-home .you-caret,body .ideo-home .you.is-found .you-res,body .ideo-home .you-go{animation:none}}
/* press:start */
/* generated by tools/press.py: the hover looks, for a finger on a touch screen */
body .ideo-home .modal-close.is-press{background:var(--light);border-color:var(--light);color:var(--ink);transform:rotate(90deg)}
body .ideo-home .st-x.is-press{border-color:rgba(211,42,31,.7);background:rgba(211,42,31,.1)}
body .ideo-home .modal-close.is-press,body .ideo-home .st-x.is-press{background:var(--crimson);border-color:var(--crimson);color:#fff;transform:rotate(90deg)}
/* press:end */