/* iDEO child theme: the parts every page shares (tokens, header, menu sheet, buttons, footer).
   Every selector is scoped to an ideo- block and led by body, so Hello's reset.css and an
   Elementor kit's global styles can never out-rank it. */

:root{
  --ink:#171311;
  --ink-soft:#5B504A;
  --canvas:#FAF6F2;
  --crimson:#D32A1F;
  --crimson-deep:#9E1E16;
  --light:#F8F3ED;
  --page:#121B1D;   /* midnight petrol, from the hero film's cool opening shot; every dark tint in the theme shares its hue */
  --t1:#F8F3ED;
  --t2:rgba(248,243,237,.74);
  --t3:rgba(248,243,237,.56);
  --t4:rgba(248,243,237,.4);
  --line:rgba(248,243,237,.11);
  --line-2:rgba(248,243,237,.17);
  --serif:"Times New Roman",Tinos,Times,"Liberation Serif",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(3,5,5,.5),0 4px 22px rgba(3,5,5,.42),0 16px 60px rgba(3,5,5,.36);
  --head-h:92px;
  --bar:0px;           /* the WordPress admin bar, when a logged-in user sees it */
}
@media (max-width:699px){:root{--head-h:74px}}
body.admin-bar{--bar:32px}
@media (max-width:782px){body.admin-bar{--bar:46px}}

body .ideo-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body .ideo-skip{
  position:fixed;left:12px;top:calc(var(--bar) + 12px);z-index:100;
  padding:10px 16px;border-radius:999px;background:var(--light);color:var(--ink);
  font-family:var(--serif);font-size:15px;transform:translateY(-200%);transition:transform .3s var(--ease);
}
body .ideo-skip:focus{transform:none}

/* ================= header ================= */
body .ideo-top{position:absolute;top:0;left:0;width:1px;height:56px;pointer-events:none}
body .ideo-head{
  position:fixed;top:var(--bar);left:0;right:0;z-index:80;
  padding-top:env(safe-area-inset-top,0px);
  background:transparent;
  font-family:var(--serif);
}
body .ideo-head-in{
  height:var(--head-h);display:flex;align-items:center;gap:clamp(14px,3vw,46px);
  padding-inline:clamp(18px,3.6vw,56px);transition:height .7s var(--ease-out);
}
/* The glass: the page's own midnight petrol, clear enough to see the film and the page
   move behind it, with a bright hairline at its lower edge. The tint lives on its own layer
   and fades in whole; the blur sits on the header itself (v143: the page-change name below
   shuts a child's blur off from the page), and eases in alongside the tint. */
body .ideo-head::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(18,27,29,.74),rgba(18,27,29,.6));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.04),0 18px 50px -30px rgba(1,3,3,.85);
  transition:opacity .7s var(--ease-out);
}
body .ideo-head{transition:-webkit-backdrop-filter .7s var(--ease-out),backdrop-filter .7s var(--ease-out)}
body .ideo-head.is-stuck,body .ideo-head.is-solid{-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
body .ideo-head.is-stuck::before,body .ideo-head.is-solid::before{opacity:1}
body .ideo-head.is-solid::before{background:linear-gradient(180deg,rgba(18,27,29,.94),rgba(18,27,29,.88))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body .ideo-head::before{background:rgba(18,27,29,.96)}
}
body .ideo-head.is-stuck .ideo-head-in{height:66px}
/* inner pages: the header is solid, so the page starts below it */
body .ideo-head-space{height:calc(var(--head-h) + env(safe-area-inset-top,0px))}

body .ideo-brand{position:relative;display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
body .ideo-brand img{display:block;width:auto;max-width:none}
body .ideo-brand .mark-full{height:35px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
body .ideo-brand .mark-icon{
  height:40px;position:absolute;left:0;top:50%;opacity:0;
  transform:translateY(-50%) scale(.82);
  transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease);
}
body .ideo-head.is-stuck .ideo-brand .mark-full{opacity:0;transform:translateX(-5px) scale(.96)}
/* scrolled, the mark goes white: the red is then carried by one thing only, the button */
body .ideo-head.is-stuck .ideo-brand .mark-icon{
  opacity:1;transform:translateY(-50%) scale(1);
}
/* v136: the white mark is its own sharp SVG (a CSS filter made the browser redraw it as a blurry picture) */
body .ideo-head.is-stuck .ideo-brand .mark-icon:not(.mark-w){opacity:0}

body .ideo-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2.3vw,34px)}
body .ideo-nav a.link{
  position:relative;padding:6px 0;font-family:var(--serif);font-size:16px;color:var(--light);text-decoration:none;
  letter-spacing:.012em;-webkit-text-stroke:.32px currentColor;   /* a touch heavier than regular, still the serif */
  text-shadow:0 1px 14px rgba(3,5,5,.6);transition:color .55s var(--ease),text-shadow .55s var(--ease);
}
body .ideo-nav a.link::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
body .ideo-nav a.link:hover,body .ideo-nav a.link:focus{color:var(--light)}
body .ideo-nav a.link:hover::after,body .ideo-nav a.link[aria-current="page"]::after{transform:scaleX(1)}
body .ideo-head.is-stuck .ideo-nav a.link{text-shadow:none}

/* ================= buttons ================= */
body .ideo-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--serif);font-size:15.5px;font-weight:400;letter-spacing:.02em;line-height:1.2;
  border-radius:999px;border:1px solid transparent;cursor:pointer;padding:12px 26px;text-decoration:none;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
body .ideo-btn-primary,body .ideo-btn-primary:focus{background:var(--crimson);color:#fff;border-color:transparent;box-shadow:0 16px 36px -20px rgba(211,42,31,.9)}
body .ideo-btn-primary:hover{background:var(--crimson-deep);color:#fff;border-color:transparent;transform:translateY(-1px)}
body .ideo-btn-primary:disabled{background:#D7CDC6;color:#8B807A;box-shadow:none;cursor:not-allowed;transform:none}
/* the one button that must be found: light glides across it once in a while. nothing pulses */
body .ideo-cta-glow{position:relative;overflow:hidden;isolation:isolate;font-weight:700}
body .ideo-cta-glow::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:36%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translate3d(0,0,0) skewX(-18deg);
  animation:ideo-sheen 5s var(--ease) infinite;
}
/* moved by transform (170% of the button = 472% of the light), so the graphics chip carries it, not the layout */
@keyframes ideo-sheen{0%,58%{transform:translate3d(0,0,0) skewX(-18deg)}84%,100%{transform:translate3d(472%,0,0) skewX(-18deg)}}
body .ideo-cta-glow:hover::after{animation:none;transform:translate3d(472%,0,0) skewX(-18deg)}
@media (pointer:coarse){body .ideo-btn{min-height:48px}}
/* v143 (Kazi: on a phone the small links should be easier to tap, lightly): each gets a
   larger invisible touch area around it; nothing on screen moves or changes look. */
@media (pointer:coarse){
  body .more,body .day-toggle,body .wp-chip,body .pq-link,body .st-dots button,body .ideo-foot-base a,body .dr-done-ask,
  body .cs-ask-link,body .cs-back,body .cs-next,body .ct-book{position:relative}
  body .more::after,body .day-toggle::after,body .wp-chip::after,body .pq-link::after,body .st-dots button::after,body .ideo-foot-base a::after,
  body .dr-done-ask::after,body .cs-ask-link::after,body .cs-back::after,body .cs-next::after,body .ct-book::after{content:"";position:absolute;inset:-10px -6px}
  body .wp-chip::after{inset:-3px}
  body .st-dots button::after{inset:-7px 0}
  body .pq-link::after,body .ct-book::after{inset:-4px -4px}
  body .dr-done-ask::after,body .cs-next::after,body .cs-ask-link::after{inset:-8px -6px}
}

body .ideo-burger,body .ideo-burger:hover,body .ideo-burger:focus{
  display:none;margin-left:auto;width:46px;height:46px;padding:0;border-radius:50%;
  border:1px solid rgba(248,243,237,.42);background:transparent;color:var(--light);cursor:pointer;
  align-items:center;justify-content:center;transition:border-color .55s var(--ease);
}
body .ideo-burger span{display:block;width:17px;height:1px;position:relative;background:var(--light);transition:background .3s var(--ease)}
body .ideo-burger span::before,body .ideo-burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1px;background:var(--light);
  transition:transform .45s var(--ease-out);
}
body .ideo-burger span::before{top:-5px}
body .ideo-burger span::after{top:5px}
body .ideo-burger:active{transform:scale(.94)}
/* open: the two outer bars close into a cross and the middle one leaves */
body .ideo-burger.open span{background:transparent}
body .ideo-burger.open span::before{transform:translateY(5px) rotate(45deg)}
body .ideo-burger.open span::after{transform:translateY(-5px) rotate(-45deg)}
body .ideo-burger.open{border-color:rgba(211,42,31,.75)}
body .ideo-head.is-stuck .ideo-burger{border-color:rgba(248,243,237,.34)}
body .ideo-head.is-stuck .ideo-burger.open{border-color:rgba(211,42,31,.75)}

/* ================= menu sheet (phones and tablets) ================= */
body .ideo-sheet{
  position:fixed;inset:0;z-index:70;display:none;
  /* v151: a phone held sideways is shorter than the menu, so the menu scrolls on its own */
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top,0px) + var(--bar) + 92px) 24px 36px;
  background:rgba(6,10,11,.93);font-family:var(--serif);
  backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);
}
body .ideo-sheet.open{display:block;animation:ideo-sheetIn .34s var(--ease) backwards}
@keyframes ideo-sheetIn{from{opacity:0}to{opacity:1}}
body .ideo-sheet nav{display:flex;flex-direction:column}
body .ideo-sheet nav a{
  font-size:30px;padding:15px 0;color:var(--light);text-decoration:none;
  border-bottom:1px solid rgba(248,243,237,.13);
}
/* you are here: the page you are on carries a small crimson light in the phone menu */
body .ideo-sheet nav a[aria-current="page"]::after{content:"";display:inline-block;width:7px;height:7px;margin:0 0 0 14px;border-radius:50%;vertical-align:middle;
  background:var(--crimson);box-shadow:0 0 0 4px rgba(211,42,31,.14),0 0 14px rgba(211,42,31,.55)}
body .ideo-sheet .ideo-btn{margin-top:28px;width:100%}
body .ideo-sheet.open nav a,body .ideo-sheet.open .ideo-btn{animation:ideo-sheetItem .5s var(--ease-out) backwards}
body .ideo-sheet.open nav a:nth-child(1){animation-delay:.05s}
body .ideo-sheet.open nav a:nth-child(2){animation-delay:.11s}
body .ideo-sheet.open nav a:nth-child(3){animation-delay:.17s}
body .ideo-sheet.open nav a:nth-child(4){animation-delay:.23s}
body .ideo-sheet.open nav a:nth-child(5){animation-delay:.29s}
body .ideo-sheet.open .ideo-btn{animation-delay:.34s}
@keyframes ideo-sheetItem{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  body .ideo-nav a.link,body .ideo-nav .ideo-btn{display:none}
  body .ideo-burger,body .ideo-burger:hover,body .ideo-burger:focus{display:flex}
}

/* ================= footer ================= */
body .ideo-foot{
  position:relative;background:var(--page);color:var(--light);font-family:var(--serif);
  padding:clamp(52px,8vh,96px) 0 calc(clamp(22px,3vh,30px) + env(safe-area-inset-bottom,0px));
}
body .ideo-foot-in{
  max-width:1440px;margin-inline:auto;padding-inline:clamp(18px,3.6vw,56px);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.7fr) minmax(0,1fr);
  gap:clamp(34px,4vw,72px);align-items:start;
}
body .ideo-foot-lead img{display:block;height:34px;width:auto;max-width:none}
body .ideo-foot-line{
  margin:22px 0 26px;max-width:22ch;color:var(--t1);
  font-size:clamp(24px,2.3vw,34px);line-height:1.12;letter-spacing:-.02em;font-weight:400;
}
body .ideo-foot-line em{font-style:italic;color:var(--crimson)}
body .ideo-foot-lab{
  display:block;margin:0 0 14px;font-size:10.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--t3);
}
body .ideo-foot-nav a,body .ideo-foot-contact a{
  display:table;padding:5px 0;color:var(--t2);text-decoration:none;font-size:16.5px;
  border-bottom:1px solid transparent;transition:color .35s var(--ease),border-color .35s var(--ease);
}
body .ideo-foot-nav a:hover,body .ideo-foot-contact a:hover{color:var(--light);border-bottom-color:var(--crimson)}
body .ideo-foot-contact p{margin:0 0 16px;color:var(--t2);font-size:15.5px;line-height:1.6;max-width:34ch;text-wrap:pretty}
body .ideo-foot-base{
  max-width:1440px;margin:clamp(40px,6vh,72px) auto 0;padding:18px clamp(18px,3.6vw,56px) 0;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  font-size:13px;letter-spacing:.02em;color:var(--t3);
}
body .ideo-foot-base p{margin:0}
@media (max-width:860px){
  body .ideo-foot-in{grid-template-columns:1fr 1fr}
  body .ideo-foot-lead{grid-column:1 / -1}
}
@media (max-width:520px){
  body .ideo-foot-in{grid-template-columns:1fr}
  body .ideo-foot .ideo-btn{width:100%}
}

body .ideo-head :focus-visible,body .ideo-sheet :focus-visible,body .ideo-foot :focus-visible{
  outline:2px solid var(--crimson);outline-offset:3px;border-radius:2px
}
body .ideo-head .ideo-btn:focus-visible,body .ideo-foot .ideo-btn:focus-visible{border-radius:999px}

@media (prefers-reduced-motion:reduce){
  body .ideo-head *,body .ideo-sheet *,body .ideo-foot *,body .ideo-head,body .ideo-sheet{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important
  }
  body .ideo-cta-glow::after{display:none}
}
/* hidden tabs pause every loop on the page */


/* iPhone haptics (see site.js): an invisible switch over everything that can be pressed */
body .ideo-hap{position:absolute;inset:0;z-index:3;margin:0;padding:0;cursor:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
body .ideo-hap-input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;padding:0;
  visibility:hidden;pointer-events:none}
body button:disabled > .ideo-hap,body [aria-disabled="true"] > .ideo-hap{pointer-events:none}

/* v17 (Kazi): a calmer footer. No button (the header keeps one, always in view); the line
   carries it; the third column names what a doctor gets, phase by phase. */
body .ideo-foot{border-top:1px solid var(--line)}
body .ideo-foot-in{grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr) minmax(0,.75fr)}
body .ideo-foot-lead img{height:28px}
body .ideo-foot-line{margin:24px 0 0;max-width:11em;font-size:clamp(30px,3.1vw,46px);line-height:1.06}
body .ideo-foot-brand a{display:flex;align-items:baseline;gap:12px;width:max-content}
body .ideo-foot-brand a i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--crimson)}

/* v24 (Kazi): the footer is the page's last frame. The hero opened on rings round a globe;
   the footer closes on that globe, seen from orbit: one huge line above its horizon, a
   crimson rim of light along it, a ring crossing it with a comet on its way round, and the
   links standing on the planet, mirrored about its axis. The globe rises into place once. */
body .ideo-foot{overflow:hidden;isolation:isolate;border-top:0;padding:clamp(80px,11vh,130px) 0 0;text-align:center}
body .ideo-foot-in{display:block;max-width:1440px;margin-inline:auto;padding-inline:clamp(18px,3.6vw,56px)}
body .ideo-foot-mark{display:block;height:24px;width:auto;margin:0 auto;opacity:.92}
body .ideo-foot-line{max-width:none;margin:clamp(22px,3vh,34px) auto 0;font-size:clamp(42px,6.6vw,104px);line-height:.98;letter-spacing:-.035em;
  color:var(--t1);text-wrap:balance}
body .ideo-foot-line em{font-style:italic;color:var(--crimson)}
body .ideo-foot-ground{position:relative;margin-top:clamp(64px,9vw,120px);padding:clamp(72px,8.5vw,118px) clamp(18px,3.6vw,56px) 0}
body .ideo-foot-globe{position:absolute;z-index:-1;left:50%;top:0;width:max(1500px,150vw);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(60% 9% at 50% 0%,rgba(211,42,31,.2),rgba(211,42,31,0) 100%),
    linear-gradient(180deg,#101a1c 0%,#0c1315 6%,#0a1012 30%);
  box-shadow:0 -1px 0 0 rgba(255,106,85,.6),0 -14px 42px -12px rgba(211,42,31,.38),0 -70px 150px -50px rgba(211,42,31,.26)}
body .ideo-foot-globe::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(rgba(248,243,237,.11) 1px,transparent 1.4px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(50% 14% at 50% 0%,#000,transparent);mask-image:radial-gradient(50% 14% at 50% 0%,#000,transparent)}
body .ideo-foot-base{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px 24px;max-width:1440px;
  margin:clamp(64px,8vw,104px) auto 0;padding:20px 0 calc(22px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(248,243,237,.08)}
body .ideo-foot-base p:first-child{text-align:left}
body .ideo-foot-top{justify-self:end;display:inline-flex;align-items:center;gap:8px;color:var(--t3);text-decoration:none;font-size:13px;letter-spacing:.02em;
  transition:color .35s var(--ease)}
body .ideo-foot-top:hover{color:var(--light)}
body .ideo-foot-base p a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .35s var(--ease),border-color .35s var(--ease)}
body .ideo-foot-base p a:hover,body .ideo-foot-base p a[aria-current]{color:var(--light);border-bottom-color:var(--crimson)}
body .ideo-foot-top svg{width:10px;height:14px;fill:none;stroke:var(--crimson);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
body .ideo-foot-top:hover svg{transform:translateY(-3px)}
/* the arrival: the line settles, then the globe rises and its rim lights */
body .ideo-foot[data-rise] .ideo-foot-line{opacity:0;transform:translateY(18px)}
body .ideo-foot[data-rise] .ideo-foot-globe{opacity:0;transform:translate(-50%,90px)}
body .ideo-foot.is-up .ideo-foot-line{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.2s var(--ease-out)}
body .ideo-foot.is-up .ideo-foot-globe{opacity:1;transform:translateX(-50%);transition:opacity 1.4s var(--ease) .25s,transform 2s var(--ease-out) .25s}
@media (max-width:699px){
  body .ideo-foot-line{font-size:clamp(36px,11vw,50px)}
  body .ideo-foot-ground{padding-top:64px}
  body .ideo-foot-globe{width:420vw}
  body .ideo-foot-globe::after{-webkit-mask-image:radial-gradient(30% 6% at 50% 0%,#000,transparent);mask-image:radial-gradient(30% 6% at 50% 0%,#000,transparent)}
  body .ideo-foot-base{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px}
  body .ideo-foot-base p:first-child{text-align:center}
  body .ideo-foot-top{justify-self:center;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  body .ideo-foot[data-rise] .ideo-foot-line{transform:none}
  body .ideo-foot[data-rise] .ideo-foot-globe{transform:translateX(-50%)}
  body .ideo-foot-comet{display:none}
}

/* v26 (Kazi: the tagline repeated the hero, the steps were generic): the footer now speaks to
   the doctor in the present, with Dhaka's own time, and the planet carries the ten countries
   our team has worked in, written along its rim and turning slowly past. */
body .ideo-foot-now{display:inline-flex;align-items:center;gap:9px;margin:clamp(26px,3.4vh,38px) 0 0;padding:6px 14px 6px 12px;border:1px solid var(--line-2);border-radius:999px;
  font-size:12.5px;letter-spacing:.08em;color:var(--t2);font-variant-numeric:tabular-nums}
body .ideo-foot-now i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--crimson)}
body .ideo-foot-now 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}
@keyframes ideo-foot-ping{0%{transform:scale(.4);opacity:.9}80%,100%{transform:scale(1.9);opacity:0}}
body .ideo-foot-line{max-width:14em;margin:clamp(18px,2.4vh,26px) auto 0;font-size:clamp(40px,5.8vw,92px)}
body .ideo-foot-sub{margin:clamp(16px,2.2vh,24px) 0 0;font-size:clamp(17px,1.4vw,20px);color:var(--t2)}
body .ideo-foot-lands{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
body .ideo-foot-lands text{font-family:var(--serif);font-size:6.4px;letter-spacing:.32em;text-transform:uppercase;fill:rgba(248,243,237,.62)}
body .ideo-foot-lands .sep{fill:var(--crimson)}
body .ideo-foot-where{position:relative;margin:0;font-size:15px;color:var(--t3);text-wrap:balance}
body .ideo-foot-where b{font-weight:400;color:var(--t1)}
body .ideo-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(22px,3vw,44px);margin:clamp(40px,6vw,64px) auto 0;max-width:760px}
body .ideo-foot-nav a{padding:4px 0;font-size:16px;color:var(--t2);text-decoration:none;border-bottom:1px solid transparent;transition:color .35s var(--ease),border-color .35s var(--ease)}
body .ideo-foot-nav a:hover{color:var(--light);border-bottom-color:var(--crimson)}
@media (max-width:699px){
  body .ideo-foot-line{font-size:clamp(34px,10vw,46px)}
  body .ideo-foot-lands text{font-size:8px}
  body .ideo-foot-where{font-size:14px;padding:0 12px}
  body .ideo-foot-nav{gap:8px 22px;max-width:320px}
  body .ideo-foot-nav a{font-size:15px}
}
@media (prefers-reduced-motion:reduce){body .ideo-foot-now i::after{animation:none}}
/* v29 (Kazi): after "Our team has worked in", the places type themselves one after another, the
   way the search box above types its experts. A hidden copy of the longest name holds the width,
   so the line never shifts while it types. */
body .ideo-foot .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body .ideo-foot-where{font-size:clamp(15px,1.25vw,18px);white-space:nowrap}
body .ideo-foot-where .ft-type{display:inline-grid;text-align:left;vertical-align:bottom}
body .ideo-foot-where .ft-size,body .ideo-foot-where .ft-typed{grid-area:1/1;white-space:nowrap}
body .ideo-foot-where .ft-size{visibility:hidden}
body .ideo-foot-where .ft-typed::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.16em;background:var(--crimson);
  animation:ideo-ft-blink 1.05s steps(1) infinite}
@keyframes ideo-ft-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){body .ideo-foot-where .ft-typed::after{display:none}}

/* v30: a small red light circles the menu button, the way a light circles a globe, with a short
   fading trail behind it. Reduced motion leaves the light resting at the top. */
body .ideo-burger{position:relative}
body .ideo-burger::before,body .ideo-burger::after{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;animation:ideo-orbit 5.5s linear infinite}
body .ideo-burger::before{inset:-1px;background:conic-gradient(transparent 0deg 280deg,rgba(211,42,31,.8) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px))}
body .ideo-burger::after{background:radial-gradient(circle at 50% 3.5px,#FF4A36 2.6px,rgba(255,74,54,.35) 3.4px,transparent 6px);filter:drop-shadow(0 0 3px rgba(255,74,54,.9))}
@keyframes ideo-orbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ body .ideo-burger::before,body .ideo-burger::after{animation:none} }

/* v31 (Kazi: the header links should read as a menu at a glance, with a red line, not a white one):
   the three links sit together in one quiet capsule, and the line under them is crimson. */
body .ideo-nav .ideo-links{display:flex;align-items:center;gap:2px;padding:4px 6px;border:1px solid rgba(248,243,237,.16);border-radius:999px;
  background:rgba(14,21,23,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .55s var(--ease),background-color .55s var(--ease)}
body .ideo-head.is-stuck .ideo-nav .ideo-links{border-color:rgba(248,243,237,.12);background:rgba(248,243,237,.03)}
body .ideo-nav .ideo-links a.link{padding:7px clamp(12px,1.3vw,18px);color:rgba(248,243,237,.8)}
body .ideo-nav .ideo-links a.link::after{left:clamp(12px,1.3vw,18px);right:clamp(12px,1.3vw,18px);bottom:3px;height:1.5px;border-radius:2px;background:var(--crimson)}
body .ideo-nav .ideo-links a.link:hover,body .ideo-nav .ideo-links a.link:focus-visible{color:var(--light)}
body .ideo-nav .ideo-links a.link:focus-visible{outline:none}
body .ideo-nav .ideo-links a.link:focus-visible::after{transform:scaleX(1)}
@media (max-width:860px){ body .ideo-nav .ideo-links{display:none} }
/* v53 (Kazi: set the three links apart, elegantly): a fading hairline between them, and the link under
   the pointer lifts into its own soft segment while the hairlines beside it step back */
body .ideo-nav .ideo-links a.link{border-radius:999px;transition:color .55s var(--ease),text-shadow .55s var(--ease),background-color .45s var(--ease)}
body .ideo-nav .ideo-links a.link + a.link::before{content:"";position:absolute;left:-2px;top:50%;width:1px;height:18px;margin-top:-9px;pointer-events:none;
  background:linear-gradient(180deg,rgba(248,243,237,0),rgba(248,243,237,.34) 50%,rgba(248,243,237,0));transition:opacity .45s var(--ease)}
body .ideo-nav .ideo-links a.link:hover,body .ideo-nav .ideo-links a.link:focus-visible{background-color:rgba(248,243,237,.07)}
body .ideo-nav .ideo-links a.link:hover::before,body .ideo-nav .ideo-links a.link:hover + a.link::before,
body .ideo-nav .ideo-links a.link:focus-visible::before,body .ideo-nav .ideo-links a.link:focus-visible + a.link::before{opacity:0}

/* The footer's quiet hook (Kazi: "you found us too", small, blinking, and it opens the form):
   one line in the voice of the page, a crimson light breathing beside it. */
body .ideo-foot-hook{margin:clamp(22px,3vh,32px) 0 0}
body .ideo-foot-hook button,body .ideo-foot-hook a{display:inline-flex;align-items:center;gap:11px;padding:8px 2px;border:0;border-bottom:1px solid transparent;background:none;
  font:inherit;font-size:clamp(15px,1.15vw,17px);color:var(--t2);text-decoration:none;cursor:pointer;transition:color .45s var(--ease),border-color .45s var(--ease)}
body .ideo-foot-hook em{font-style:italic;color:var(--t1)}
body .ideo-foot-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-foot-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}
@keyframes ideo-hook-blink{0%,100%{opacity:1}50%{opacity:.25}}
body .ideo-foot-hook svg{width:15px;height:10px;fill:none;stroke:var(--crimson);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
body .ideo-foot-hook button:hover,body .ideo-foot-hook a:hover{color:var(--t1);border-bottom-color:var(--crimson)}
body .ideo-foot-hook button:hover svg,body .ideo-foot-hook a:hover svg{transform:translateX(3px)}
body .ideo-foot-hook button:focus-visible,body .ideo-foot-hook a:focus-visible{outline:1px solid var(--crimson);outline-offset:4px}
@media (max-width:699px){ body .ideo-foot-hook button,body .ideo-foot-hook a{gap:9px;font-size:15px;text-align:left} }
@media (prefers-reduced-motion:reduce){ body .ideo-foot-hook i,body .ideo-foot-hook i::after{animation:none} }

/* v36 (Kazi: the two lines under the headline should be one, and unique): one line answers the
   headline, "You found us. Now let them find you.", with the crimson light breathing before it.
   The underline is always there, drawn thin, and fills red on hover; one tap opens the form. */
body .ideo-foot-hook{margin:clamp(18px,2.6vh,28px) 0 0}
body .ideo-foot-hook button,body .ideo-foot-hook a{gap:12px;padding:6px 2px 7px;font-size:clamp(17px,1.45vw,21px);color:var(--t1);border-bottom:0;
  background:linear-gradient(var(--crimson),var(--crimson)) left bottom/0 1px no-repeat,linear-gradient(var(--line-2),var(--line-2)) left bottom/100% 1px no-repeat;
  transition:color .45s var(--ease),background-size .6s var(--ease)}
body .ideo-foot-hook em{color:var(--crimson)}
body .ideo-foot-hook button:hover,body .ideo-foot-hook a:hover{background-size:100% 1px,100% 1px}
@media (max-width:699px){ body .ideo-foot-hook button,body .ideo-foot-hook a{gap:10px;font-size:17px;white-space:nowrap} }

/* v38 (Kazi: say "patients" plainly; YOU in capitals with a gloss): a soft light sweeps across
   the crimson YOU every few seconds, with a faint red glow under it. */
body .ideo-foot-hook em{display:inline-block;padding:0 .1em 0 .04em;font-style:italic;text-transform:uppercase;letter-spacing:.05em;color:var(--crimson);
  background:linear-gradient(100deg,var(--crimson) 0%,var(--crimson) 38%,#FFE1D9 50%,var(--crimson) 62%,var(--crimson) 100%) 100% 0/260% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 7px rgba(211,42,31,.45));
  }
/* v101: the sweep is started by site.js, once every 4.2 s while the footer is on screen, so the
   word rests (and costs nothing) between sweeps. */
body .ideo-foot-hook em.is-gloss{animation:ideo-you-gloss 1.7s var(--ease)}
@keyframes ideo-you-gloss{from{background-position:100% 0}to{background-position:0 0}}
@media (max-width:699px){ body .ideo-foot-hook button,body .ideo-foot-hook a{gap:8px;font-size:clamp(14px,4vw,17px)} }
@media (prefers-reduced-motion:reduce){ body .ideo-foot-hook em{animation:none;background-position:0 0} }

/* v39 (Kazi: no full stop; the underline looked cheap): no line at all now. The words stand on
   their own, and the way in is a small round door beside them, a red light circling its rim like
   the menu button's. On hover the door fills crimson. */
body .ideo-foot-hook button,body .ideo-foot-hook a{gap:16px;padding:4px 0;background:none;font-size:clamp(17px,1.45vw,21px);color:var(--t1)}
body .ideo-foot-hook button:hover,body .ideo-foot-hook a:hover{background:none;color:#fff}
body .ideo-foot-hook i{display:none}
body .ideo-foot-hook em{padding-right:.04em}
@media (max-width:699px){
  body .ideo-foot-hook button,body .ideo-foot-hook a{gap:14px;max-width:310px;font-size:17px;line-height:1.35;white-space:normal;text-align:left}
}
@media (max-width:699px){ body .ideo-foot-hook .ft-l{display:block} }

/* v45 (Kazi: the round door felt apart from the words; make something beautiful with the line):
   the line itself leads on. A thin crimson stroke runs out of YOU to an arrowhead, and a small
   light travels along it, again and again, like a patient on the way to you. On hover the
   stroke reaches further. */
body .ideo-foot-go{position:relative;flex:none;display:inline-block;width:64px;height:12px;transition:width .6s var(--ease)}
body .ideo-foot-go::before{content:"";position:absolute;left:0;right:1px;top:5.5px;height:1px;background:linear-gradient(90deg,rgba(211,42,31,0),rgba(211,42,31,.55) 35%,var(--crimson))}
/* v97 (Kazi: the light raced off the screen after reaching the arrow): the run used container units inside
   @keyframes, which not every browser reads (Safari can take the whole screen's width instead of the line's).
   The light now sits at the right end of a strip as long as the line and travels by the strip's own length. */
body .ideo-foot-go::after{content:"";position:absolute;right:-3px;top:-4px;width:calc(100% + 3px);height:20px;pointer-events:none;
  background:radial-gradient(circle at right 9px top 10px,#FF4A36 0 2.6px,rgba(255,74,54,.6) 3.6px,rgba(255,74,54,0) 9px);
  opacity:0;animation:ideo-go-run 2.8s var(--ease) infinite}
@keyframes ideo-go-run{0%{transform:translate3d(calc(12px - 100%),0,0);opacity:0}18%{opacity:1}78%{opacity:1}100%{transform:translate3d(0,0,0);opacity:0}}
body .ideo-foot-go svg{position:absolute;right:0;top:1px;width:6px;height:10px;fill:none;stroke:var(--crimson);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body .ideo-foot-hook button:hover .ideo-foot-go,body .ideo-foot-hook a:hover .ideo-foot-go{width:88px}
@media (max-width:699px){ body .ideo-foot-go{width:44px} body .ideo-foot-hook button:hover .ideo-foot-go{width:44px} }
@media (prefers-reduced-motion:reduce){ body .ideo-foot-go::after{animation:none;opacity:0} }
@media (max-width:699px){ body .ideo-foot-hook button,body .ideo-foot-hook a{align-items:flex-end} body .ideo-foot-go{margin-bottom:.36em} }
/* v46 (Kazi: bring the line closer to YOU) */
body .ideo-foot-hook button,body .ideo-foot-hook a{gap:7px}
body .ideo-foot-go::before{background:linear-gradient(90deg,rgba(211,42,31,.3),rgba(211,42,31,.65) 35%,var(--crimson))}
@media (max-width:699px){ body .ideo-foot-hook button,body .ideo-foot-hook a{gap:6px} }
/* v47 (Kazi: YOU a touch bolder): a thin crimson outline thickens the letters without a heavy bold */
body .ideo-foot-hook em{-webkit-text-stroke:.35px var(--crimson)}
/* v48 (Kazi: the menu light was too fat and sat off the ring): a smaller light, centred exactly
   on the ring's 1px line, and a trail no wider than the ring itself */
body .ideo-burger::before{-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - 1px))}
body .ideo-burger::after{background:radial-gradient(circle at 50% 3.5px,#FF4A36 0 1.55px,rgba(255,74,54,0) 2.2px);filter:drop-shadow(0 0 2.5px rgba(255,74,54,.85))}

/* v49 laser light over the logo: white-hot on the red wordmark at the top, red on the white mark once scrolled.
   v52 (Kazi: it ran too fast): it now swings slowly to and fro, a calm sine glide each way with a breath at each end */
body .ideo-brand .mark-shine{position:absolute;left:0;top:50%;width:104px;height:35px;transform:translateY(-50%);pointer-events:none}
body .ideo-brand .mark-shine i{position:absolute;inset:0;overflow:hidden;-webkit-mask:url(../img/ideo-logo.svg) left center/auto 100% no-repeat;mask:url(../img/ideo-logo.svg) left center/auto 100% no-repeat}
body .ideo-brand .mark-shine i::before{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:100%;background:linear-gradient(104deg,transparent calc(50% - 16px),rgba(255,190,176,.16) calc(50% - 8px),rgba(255,226,218,.42) 50%,rgba(255,190,176,.16) calc(50% + 8px),transparent calc(50% + 16px));transform:translateX(calc(-50% - 18px));animation:ideo-laser-a 8.4s cubic-bezier(.45,.05,.55,.95) 1.2s infinite}
body .ideo-head.is-stuck .ideo-brand .mark-shine{width:42px;height:40px}
body .ideo-head.is-stuck .ideo-brand .mark-shine i{-webkit-mask-image:url(../img/ideo-icon.svg);mask-image:url(../img/ideo-icon.svg)}
/* v150 (Kazi 2026-10-19: the red light through the white mark, about .3 deeper): a truer red, .4 to .58 at its core */
body .ideo-head.is-stuck .ideo-brand .mark-shine i::before{background:linear-gradient(104deg,transparent calc(50% - 14px),rgba(250,95,75,.2) calc(50% - 7px),rgba(250,105,85,.58) 50%,rgba(250,95,75,.2) calc(50% + 7px),transparent calc(50% + 14px));animation-name:ideo-laser-b;animation-delay:.3s}
@keyframes ideo-laser-a{0%,5%{transform:translateX(calc(-50% - 12px))}45%,55%{transform:translateX(calc(50% + 12px))}95%,100%{transform:translateX(calc(-50% - 12px))}}
@keyframes ideo-laser-b{0%,5%{transform:translateX(calc(-50% - 12px))}45%,55%{transform:translateX(calc(50% + 12px))}95%,100%{transform:translateX(calc(-50% - 12px))}}
@media (prefers-reduced-motion:reduce){body .ideo-brand .mark-shine{display:none}}

/* v50 the footer clock opens: Dhaka beside the visitor's time, or any city */
body .ideo-foot-clock{position:relative;z-index:6;display:inline-block;margin:clamp(26px,3.4vh,38px) 0 0}
body button.ideo-foot-now{margin:0;background:rgba(248,243,237,.02);font:inherit;font-size:12.5px;letter-spacing:.08em;color:var(--t2);cursor:pointer;transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
body button.ideo-foot-now:hover,body .ideo-foot-clock.is-open button.ideo-foot-now{border-color:rgba(211,42,31,.6);background:rgba(211,42,31,.07);color:var(--t1)}
body button.ideo-foot-now:focus-visible{outline:1px solid var(--crimson);outline-offset:3px}
body .ideo-foot-now .tz-cue{display:inline-flex;align-items:center;gap:6px;margin-left:3px;padding-left:12px;border-left:1px solid var(--line-2);color:#FF6A55;letter-spacing:.06em}
body .ideo-foot-now .tz-cue svg{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
body .ideo-foot-clock.is-open .tz-cue svg{transform:rotate(180deg)}
body .ideo-tz{position:absolute;left:50%;top:calc(100% + 12px);width:min(380px,calc(100vw - 32px));padding:20px 20px 18px;border:1px solid var(--line-2);border-radius:20px;
  background:linear-gradient(170deg,rgba(30,42,45,.97),rgba(14,21,23,.97));box-shadow:0 30px 70px -20px rgba(0,0,0,.75),inset 0 1px 0 rgba(248,243,237,.06);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:left;font-variant-numeric:tabular-nums;
  opacity:0;transform:translate(-50%,-6px) scale(.97);transform-origin:50% 0;transition:opacity .28s var(--ease),transform .38s var(--ease)}
body .ideo-tz::before{content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;margin-left:-5px;border:1px solid var(--line-2);border-width:1px 0 0 1px;background:rgb(30,42,45);transform:rotate(45deg)}
body .ideo-foot-clock.is-open .ideo-tz{opacity:1;transform:translate(-50%,0) scale(1)}
body .ideo-tz p{margin:0}
body .ideo-tz .tz-row{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
body .ideo-tz .tz-row i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 3px rgba(211,42,31,.2);transform:translateY(-1px)}
body .ideo-tz .tz-row.is-you i{background:#F8F3ED;box-shadow:0 0 0 3px rgba(248,243,237,.14)}
body .ideo-tz .tz-row b{font-size:15px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body .ideo-tz .tz-row small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
body .ideo-tz .tz-row span{margin-left:auto;font-family:var(--serif);font-size:24px;line-height:1;color:var(--t1);white-space:nowrap}
body .ideo-tz .tz-gap{margin-top:14px;font-size:15px;line-height:1.4;color:var(--t2)}
body .ideo-tz .tz-gap em{font-style:italic;color:#FF6A55}
body .ideo-tz .tz-bar{position:relative;height:10px;margin:16px 0 0;border-radius:999px;overflow:visible;
  background:linear-gradient(90deg,#0B1A2B 0%,#13263A 18%,#3A3A55 24%,#B9875C 29%,#E9D9B8 38%,#F4EBD6 50%,#E9D9B8 62%,#C27A4E 72%,#4A3550 78%,#13263A 84%,#0B1A2B 100%);
  box-shadow:inset 0 0 0 1px rgba(248,243,237,.1)}
body .ideo-tz .tz-open{position:absolute;top:-3px;bottom:-3px;border-radius:999px;border:1.5px solid var(--crimson);background:rgba(211,42,31,.28);box-shadow:0 0 12px rgba(211,42,31,.45)}
body .ideo-tz .tz-now{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#F8F3ED;box-shadow:0 0 0 3px rgba(14,21,23,.9),0 2px 8px rgba(0,0,0,.6)}
body .ideo-tz .tz-now.is-on{background:#FF4A36;box-shadow:0 0 0 3px rgba(14,21,23,.9),0 0 12px rgba(255,74,54,.9)}
body .ideo-tz .tz-now::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid currentColor;color:#F8F3ED;opacity:0;animation:ideo-foot-ping 2.8s var(--ease-out) infinite}
body .ideo-tz .tz-now.is-on::after{color:#FF4A36}
body .ideo-tz .tz-scale{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
body .ideo-tz .tz-hours{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--t3)}
body .ideo-tz .tz-pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
body .ideo-tz .tz-pick button{padding:6px 11px;border:1px solid var(--line-2);border-radius:999px;background:none;font:inherit;font-size:13px;color:var(--t2);cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
body .ideo-tz .tz-pick button:hover{border-color:rgba(211,42,31,.6);color:var(--t1)}
body .ideo-tz .tz-pick button[aria-pressed="true"]{border-color:var(--crimson);background:var(--crimson);color:#fff}
body .ideo-tz .tz-pick button:focus-visible,body .ideo-tz .tz-find input:focus-visible{outline:1px solid var(--crimson);outline-offset:2px}
body .ideo-tz .tz-find{display:flex;align-items:center;gap:9px;margin-top:10px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;transition:border-color .3s var(--ease)}
body .ideo-tz .tz-find:focus-within{border-color:rgba(211,42,31,.6)}
body .ideo-tz .tz-find[hidden]{display:none}
body .ideo-tz .tz-find svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--t3);stroke-width:1.5;stroke-linecap:round}
body .ideo-tz .tz-find input{flex:1;min-width:0;height:38px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--t1)}
body .ideo-tz .tz-find input::placeholder{color:var(--t3)}
body .ideo-tz .tz-find input:focus{outline:none}
@media (max-width:420px){ body .ideo-tz{padding:18px 16px 16px} body .ideo-tz .tz-row span{font-size:21px} }
@media (prefers-reduced-motion:reduce){ body .ideo-tz{transition:none} body .ideo-tz .tz-now::after{animation:none} }

/* v51 place search (footer clock and booking form): type any city, state or country */
body .tz-combo{position:relative;margin-top:10px}
body .tz-find{display:flex;align-items:center;gap:9px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:rgba(248,243,237,.02);transition:border-color .3s var(--ease)}
body .tz-find:focus-within{border-color:rgba(211,42,31,.6)}
body .tz-find svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--t3);stroke-width:1.5;stroke-linecap:round}
body .tz-find input{flex:1;min-width:0;height:38px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--t1)}
body .tz-find input::placeholder{color:var(--t3)}
body .tz-find input:focus{outline:none}
body .tz-list{margin:6px 0 0;padding:5px;list-style:none;border:1px solid var(--line-2);border-radius:14px;background:rgba(10,16,18,.92);max-height:264px;overflow:auto;text-align:left}
body .tz-list[hidden]{display:none}
body .tz-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;padding:8px 11px;border-radius:10px;cursor:pointer}
body .tz-list li b{grid-column:1;font-size:14.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .tz-list li span{grid-column:1;font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .tz-list li time{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--serif);font-size:16px;color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}
body .tz-list li[aria-selected="true"]{background:rgba(211,42,31,.16)}
body .tz-list li[aria-selected="true"] time{color:#FF6A55}
body .tz-list li.is-none{display:block;cursor:default;font-size:13px;color:var(--t3)}
/* the clock's call to action: open now, book straight away */
body .ideo-tz .tz-go{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:11px 16px 11px 14px;border:1px solid var(--line-2);border-radius:14px;background:rgba(248,243,237,.03);font:inherit;text-align:left;color:var(--t1);cursor:pointer;transition:border-color .4s var(--ease),background .4s var(--ease)}
body .ideo-tz .tz-go i{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:var(--t3)}
body .ideo-tz .tz-go span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
body .ideo-tz .tz-go b{font-size:15.5px;font-weight:600}
body .ideo-tz .tz-go small{font-size:12.5px;line-height:1.4;color:var(--t3)}
body .ideo-tz .tz-go svg{flex:none;width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
body .ideo-tz .tz-go:hover{border-color:rgba(211,42,31,.6);background:rgba(211,42,31,.08)}
body .ideo-tz .tz-go:hover svg{transform:translateX(3px)}
body .ideo-tz .tz-go:focus-visible{outline:1px solid var(--crimson);outline-offset:2px}
body .ideo-tz .tz-go.is-on{border-color:transparent;background:linear-gradient(180deg,#DA3224,#BC2418);box-shadow:0 14px 30px -14px rgba(211,42,31,.8)}
body .ideo-tz .tz-go.is-on small{color:rgba(255,255,255,.82)}
body .ideo-tz .tz-go.is-on i{background:#fff}
body .ideo-tz .tz-go.is-on i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #fff;opacity:0;animation:ideo-foot-ping 2.4s var(--ease-out) infinite}
body .ideo-tz .tz-go.is-on:hover{background:linear-gradient(180deg,#E23A2B,#C42A1D)}
@media (prefers-reduced-motion:reduce){ body .ideo-tz .tz-go.is-on i::after{animation:none} }

/* v54 (Kazi): the red line comes the moment the pointer is over a header link, drawn out from the middle
   with a soft glow, not only after a click */
body .ideo-nav .ideo-links a.link::after{height:2px;transform-origin:50% 50%;box-shadow:0 0 8px rgba(211,42,31,.55);
  transition:transform .26s cubic-bezier(.2,.7,.2,1)}
body .ideo-nav .ideo-links a.link:hover::after,body .ideo-nav .ideo-links a.link:focus-visible::after,
body .ideo-nav .ideo-links a.link[aria-current="page"]::after{transform:scaleX(1)}

/* v54-55 the footer links (Kazi: set them apart like the header, but no box in the footer): fading
   hairlines between the links and the red line under the hovered one, with no capsule or segment
   around them; on phones two by two, with a hairline between the rows */
body .ideo-foot .ideo-foot-nav{display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:2px;max-width:none;
  margin:clamp(40px,6vw,64px) auto 0;padding:0;border:0;border-radius:0;background:none}
body .ideo-foot .ideo-foot-nav a{position:relative;display:block;padding:8px clamp(14px,1.5vw,20px);border:0;border-radius:999px;
  font-size:16px;color:rgba(248,243,237,.78);text-decoration:none;white-space:nowrap;
  transition:color .4s var(--ease),background-color .4s var(--ease)}
body .ideo-foot .ideo-foot-nav a + a::before{content:"";position:absolute;left:-2px;top:50%;width:1px;height:18px;margin-top:-9px;pointer-events:none;
  background:linear-gradient(180deg,rgba(248,243,237,0),rgba(248,243,237,.32) 50%,rgba(248,243,237,0));transition:opacity .4s var(--ease)}
/* v152 (Kazi 2026-10-20: no lines under the footer links; a red dot shows the page you are on) */
body .ideo-foot .ideo-foot-nav a::after{content:"";position:absolute;left:50%;bottom:0;width:6px;height:6px;margin-left:-3px;border-radius:50%;
  background:var(--crimson);box-shadow:0 0 0 3px rgba(211,42,31,.14),0 0 10px rgba(211,42,31,.55);opacity:0;transform:scale(.4);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
body .ideo-foot .ideo-foot-nav a:hover,body .ideo-foot .ideo-foot-nav a:focus-visible{color:var(--light);outline:none}
body .ideo-foot .ideo-foot-nav a[aria-current="page"]{display:flex;align-items:center;justify-content:center}
/* v153 (Kazi 2026-10-20): the dot sits just left of the page name */
body .ideo-foot .ideo-foot-nav a[aria-current="page"]::after{position:static;order:-1;flex:none;margin:0 9px 0 0;opacity:1;transform:none}
body .ideo-foot .ideo-foot-nav a[aria-current="page"]{color:var(--light)}
body .ideo-foot .ideo-foot-nav a:hover::before,body .ideo-foot .ideo-foot-nav a:hover + a::before,
body .ideo-foot .ideo-foot-nav a:focus-visible::before,body .ideo-foot .ideo-foot-nav a:focus-visible + a::before{opacity:0}
@media (max-width:560px){
  body .ideo-foot .ideo-foot-nav{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px 2px;padding:0;
    background:linear-gradient(90deg,rgba(248,243,237,0),rgba(248,243,237,.16) 18%,rgba(248,243,237,.16) 82%,rgba(248,243,237,0)) 50% 50%/86% 1px no-repeat}
  body .ideo-foot .ideo-foot-nav a{padding:9px 16px;font-size:15px;text-align:center}
  body .ideo-foot .ideo-foot-nav a + a::before{display:none}
  body .ideo-foot .ideo-foot-nav a:nth-child(even)::before{display:block}
  body .ideo-foot .ideo-foot-nav a:nth-child(odd):hover + a::before{opacity:0}
}

/* v56 (Kazi: a big dark band after the footer links): the copyright row now sits close under the links,
   so the page ends cleanly; on phones the bottom row is a little tighter too */
body .ideo-foot .ideo-foot-base{margin-top:clamp(30px,3.6vw,48px);padding-top:16px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media (max-width:699px){
  body .ideo-foot .ideo-foot-base{margin-top:30px;gap:6px}
  body .ideo-foot .ideo-foot-top{margin-top:2px}
}

/* ================= calm and light (Kazi, 2026-10-10: pages must change and scroll without a jolt) ================= */
/* from one page to the next: the header stays put, the old page fades, the new one settles in */
@view-transition{navigation:auto}
body .ideo-head{view-transition-name:ideo-head}
::view-transition-old(root){animation:ideo-vt-out .42s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:ideo-vt-in .5s cubic-bezier(.2,0,0,1) both}
::view-transition-group(ideo-head){animation-duration:.42s}
@keyframes ideo-vt-out{to{opacity:0}}
@keyframes ideo-vt-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),::view-transition-group(ideo-head){animation:none}
}
/* a part of the page that is off screen rests: its endless loops pause until it comes back (site.js) */
body .ideo-rest{animation-play-state:paused!important}
/* iDEO is always written with a small i, even inside a line set in capitals */
body .ideo-name{text-transform:none!important}

/* Justified paragraphs whose line breaks site.js chose: the browser keeps them as planned. */
body [data-lines]{text-wrap:wrap!important;-webkit-hyphens:manual!important;hyphens:manual!important}
body [data-measuring]{text-align:left!important;text-wrap:wrap!important;-webkit-hyphens:manual!important;hyphens:manual!important}
/* v103 (Kazi): only the home page footer has the wordmark, iDEO Time and the closing lines;
   every other page's footer opens on the globe */
body .ideo-foot.is-short{padding-top:72px}
body .ideo-foot.is-short .ideo-foot-ground{margin-top:0}
/* v148 (Kazi 2026-10-19 07:36, Contact: "this line does not blend smoothly into the footer"): on the short footers the
   globe's glow reached the footer's top edge and was cut there, leaving a hard band. The top of the footer now fades
   from the page's own colour, so the page runs into the glow without an edge, as on Home. */
body .ideo-foot.is-short::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:56px;pointer-events:none;
  background:linear-gradient(180deg,var(--page) 0,rgba(18,27,29,.55) 22px,rgba(18,27,29,0) 100%)}

/* v129: a small note when a call or email link copies the number or address on a computer (site.js, Reach us) */
.ideo-copied{position:fixed;left:50%;bottom:28px;z-index:2147483000;margin:0;padding:12px 18px;border:1px solid rgba(248,243,237,.16);border-radius:999px;
  background:rgba(18,27,29,.94);color:#F8F3ED;font:15px/1.3 Tinos,"Times New Roman",serif;box-shadow:0 14px 40px rgba(0,0,0,.4);
  opacity:0;transform:translate(-50%,12px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.ideo-copied.is-on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.ideo-copied{transition:none}}
/* v141 (audit): while a menu, booking panel or story is open the page behind it does not scroll */
html:has(> body[style*="overflow: hidden"]){overflow:hidden}