/* iDEO Contact page (Kazi, 2026-10-10; v98 redesign): three clear ways in (WhatsApp, call, email), each saying what
   happens on a tap, then the short form beside the route a message takes. Footer without the wordmark and the clock.
   Fields, button and the sent note reuse the booking panel's styles (book.css, inside .ideo-home). */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{background:var(--page)}
body.ideo-site{margin:0;background:var(--page);color:var(--t1);font-family:var(--serif);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body .ideo-contact{display:block;max-width:1160px;margin:0 auto;padding:calc(var(--head-h,76px) + clamp(56px,9vh,104px)) clamp(18px,3.6vw,56px) 0;color:var(--t1)}
body .ideo-contact .ct-head{display:flex;flex-direction:column;align-items:center;text-align:center}
body .ideo-contact .ct-mark{display:flex;align-items:center;gap:14px;margin:0;font-size:11.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--t3)}
body .ideo-contact .ct-mark s{display:block;width:clamp(34px,6vw,76px);height:1px;background:var(--line-2)}
body .ideo-contact h1{max-width:16em;margin:22px 0 0;font-size:clamp(38px,5.2vw,72px);font-weight:400;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
body .ideo-contact h1 em{font-style:italic;color:var(--crimson)}
body .ideo-contact .ct-sub{max-width:52ch;margin:22px 0 0;font-size:17.5px;line-height:1.6;color:var(--t2);text-wrap:balance}

body .ideo-contact .ct-card{position:relative;padding:clamp(26px,3vw,40px);border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(160deg,rgba(248,243,237,.045),rgba(248,243,237,.012) 60%);box-shadow:0 24px 60px rgba(0,0,0,.22)}
body .ideo-contact .ct-card::before{content:"";position:absolute;left:clamp(26px,3vw,40px);top:-1px;width:56px;height:2px;border-radius:2px;background:var(--crimson)}
body .ideo-contact .ct-h{margin:0 0 26px;font-size:clamp(24px,2.2vw,30px);font-weight:400;line-height:1.15;letter-spacing:-.015em}
body .ideo-contact #ct-form{display:flex;flex-direction:column;gap:24px}
body .ideo-contact .ct-needs{margin:0;padding:0;border:0;min-width:0}
body .ideo-contact .ct-needs legend{padding:0;margin:0 0 12px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,243,237,.82)}
body .ideo-contact .ct-needs legend i{font-style:normal;font-weight:400;letter-spacing:.06em;text-transform:none;opacity:.7}
body .ideo-contact .ct-chips{display:flex;flex-wrap:wrap;gap:8px}
body .ideo-contact .ct-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 15px;border:1px solid var(--line-2);border-radius:999px;background:transparent;
  font:inherit;font-size:15px;line-height:1.2;color:var(--t2);cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
body .ideo-contact .ct-chip::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid currentColor;opacity:.55;transition:background .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
body .ideo-contact .ct-chip:hover{border-color:rgba(248,243,237,.4);color:var(--t1)}
body .ideo-contact .ct-chip[aria-pressed="true"]{border-color:rgba(211,42,31,.7);background:rgba(211,42,31,.12);color:var(--t1)}
body .ideo-contact .ct-chip[aria-pressed="true"]::before{background:var(--crimson);border-color:var(--crimson);opacity:1}
body .ideo-contact .ct-chip:focus-visible,body .ideo-contact .ct-book:focus-visible,body .ideo-contact .ct-wa:focus-visible,body .ideo-contact .ct-social a:focus-visible,body .ideo-contact .ct-v:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
body .ideo-contact .submit-row{margin-top:4px}


/* three ways in, each says what a tap does */
body .ideo-contact .ct-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:clamp(44px,6vh,60px) 0 0}
body .ideo-contact .ct-way{position:relative;display:flex;flex-direction:column;gap:20px;min-width:0;padding:26px 26px 24px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(160deg,rgba(248,243,237,.05),rgba(248,243,237,.012) 62%);color:var(--t1);text-decoration:none;
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease),opacity .7s var(--ease)}
body .ideo-contact .ct-way:hover{border-color:rgba(248,243,237,.26);background:linear-gradient(160deg,rgba(248,243,237,.08),rgba(248,243,237,.02) 62%)}
body .ideo-contact .ct-way:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
body .ideo-contact .ct-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);color:var(--t1)}
body .ideo-contact .ct-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
body .ideo-contact .ct-ic .f{fill:currentColor;stroke:none}
body .ideo-contact .is-wa .ct-ic{border-color:rgba(37,211,102,.4);background:rgba(37,211,102,.07);color:#7FE3A6}
body .ideo-contact .ct-ic .ct-wa-i{width:22px;height:22px}
body .ideo-contact .ct-t{display:flex;flex-direction:column;gap:5px;min-width:0}
body .ideo-contact .ct-t small{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--t3)}
body .ideo-contact .ct-t b{font-weight:400;font-size:clamp(19px,1.55vw,22px);line-height:1.25;letter-spacing:-.005em;overflow-wrap:anywhere}
body .ideo-contact .ct-do{font-size:14.5px;line-height:1.4;color:var(--t2)}
body .ideo-contact .ct-go{position:absolute;right:24px;top:30px;width:18px;height:12px;fill:none;stroke:var(--crimson);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
body .ideo-contact .ct-way:hover .ct-go{transform:translateX(4px)}
body .ideo-contact .ct-ways[data-rise] .ct-way{opacity:0;transform:translateY(16px)}
body .ideo-contact .ct-ways[data-rise].is-up .ct-way{opacity:1;transform:none}
body .ideo-contact .ct-ways[data-rise].is-up .ct-way:nth-child(2){transition-delay:0s,0s,.08s,.08s}
body .ideo-contact .ct-ways[data-rise].is-up .ct-way:nth-child(3){transition-delay:0s,0s,.16s,.16s}

body .ideo-contact .ct-or{display:flex;align-items:center;gap:16px;margin:48px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--t3)}
body .ideo-contact .ct-or::before,body .ideo-contact .ct-or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-2))}
body .ideo-contact .ct-or::after{background:linear-gradient(90deg,var(--line-2),transparent)}

/* the form beside the route a message takes */
body .ideo-contact .ct-main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.78fr);gap:clamp(40px,5vw,76px);align-items:start;margin:30px 0 0}
body .ideo-contact .ct-next{padding-top:34px}
body .ideo-contact .ct-k{margin:0 0 22px;font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--t3)}
/* the signature: a crimson route that draws itself, and a small light that walks it now and then */
body .ideo-contact .ct-route{position:relative;margin:0;padding:0 0 0 30px;list-style:none;display:flex;flex-direction:column;gap:26px}
body .ideo-contact .ct-route::before{content:"";position:absolute;left:5px;top:8px;bottom:10px;width:1px;transform-origin:50% 0;
  background:rgba(211,42,31,.42);transition:transform 1.4s var(--ease-out,var(--ease))}
/* v101 (Kazi: the light broke the steps): the light now walks the line once, step to step, each step
   lighting as it arrives, then it rests and fades (contact.js). */
body .ideo-contact .ct-route::after{content:"";position:absolute;left:-4px;top:0;width:20px;height:20px;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 10px 10px,#FF4A36 0 2.6px,rgba(255,74,54,.55) 3.6px,rgba(255,74,54,0) 9px);
  transform:translate3d(0,var(--ct-y,0px),0);transition:transform 1s var(--ease),opacity .5s var(--ease)}
body .ideo-contact .ct-route.is-walk::after{opacity:1}
body .ideo-contact .ct-route li.is-lit::before{background:var(--crimson);box-shadow:0 0 0 4px rgba(211,42,31,.14)}
body .ideo-contact .ct-route li::before{transition:background .45s var(--ease),box-shadow .45s var(--ease)}
body .ideo-contact #write{scroll-margin-top:calc(var(--head-h,76px) + 20px)}
body .ideo-contact .ct-route li{position:relative;display:flex;flex-direction:column;gap:4px}
body .ideo-contact .ct-route li::before{content:"";position:absolute;left:-30px;top:6px;width:11px;height:11px;border-radius:50%;border:1px solid rgba(211,42,31,.75);background:var(--page);box-sizing:border-box}
body .ideo-contact .ct-route li:first-child::before{background:var(--crimson);box-shadow:0 0 0 4px rgba(211,42,31,.14)}
body .ideo-contact .ct-route b{font-weight:400;font-size:19px;line-height:1.3;color:var(--t1)}
body .ideo-contact .ct-route span{font-size:15px;line-height:1.55;color:var(--t2)}
body .ideo-contact .ct-next[data-rise] .ct-route::before{transform:scaleY(0)}
body .ideo-contact .ct-next[data-rise].is-up .ct-route::before{transform:none}
body .ideo-contact .ct-next[data-rise] .ct-route li{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body .ideo-contact .ct-next[data-rise].is-up .ct-route li{opacity:1;transform:none}
body .ideo-contact .ct-next[data-rise].is-up .ct-route li:nth-child(2){transition-delay:.35s}
body .ideo-contact .ct-next[data-rise].is-up .ct-route li:nth-child(3){transition-delay:.7s}
body .ideo-contact .ct-pick{margin:34px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
body .ideo-contact .ct-pick p{margin:0 0 6px;font-size:15px;color:var(--t2)}
body .ideo-contact .ct-book{display:inline-flex;align-items:center;gap:10px;padding:4px 0;border:0;background:none;font:inherit;font-size:18px;color:#FF6A55;cursor:pointer}
body .ideo-contact .ct-book .ct-go{position:static;width:16px;height:10px}
body .ideo-contact .ct-book:hover .ct-go{transform:translateX(4px)}
body .ideo-contact .ct-book:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}

/* where to find us, one quiet line */
body .ideo-contact .ct-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;margin:clamp(48px,4.2vw + 28px,84px) 0 0;padding:26px 0 34px;border-top:1px solid var(--line)}
body .ideo-contact .ct-follow{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--t3)}
body .ideo-contact .ct-handle{margin-left:6px;letter-spacing:.04em;text-transform:none;font-weight:400;font-size:14px;color:var(--t2)}
body .ideo-contact .ct-social{display:flex;gap:10px}
body .ideo-contact .ct-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);color:var(--t1);transition:border-color .35s var(--ease),background .35s var(--ease)}
body .ideo-contact .ct-social a:hover{border-color:rgba(211,42,31,.7);background:rgba(211,42,31,.1)}
body .ideo-contact .ct-social a:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
body .ideo-contact .ct-social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
body .ideo-contact .ct-social .f{fill:currentColor;stroke:none}
body .ideo-contact .ct-where{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:17px;color:var(--t1)}
body .ideo-contact .ct-where i{width:7px;height:7px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 4px rgba(211,42,31,.14)}

@media (max-width:959px){
  body .ideo-contact .ct-ways{grid-template-columns:1fr;gap:10px}
  body .ideo-contact .ct-way{flex-direction:row;align-items:center;gap:16px;padding:18px 52px 18px 18px;border-radius:18px}
  body .ideo-contact .ct-go{top:50%;right:20px;margin-top:-6px}
  body .ideo-contact .ct-main{grid-template-columns:1fr;gap:48px}
  body .ideo-contact .ct-next{padding-top:0}
}
@media (max-width:599px){
  body .ideo-contact{padding-top:calc(var(--head-h,64px) + 44px)}
  body .ideo-contact .ct-ways{margin-top:36px}
  body .ideo-contact .ct-ic{width:44px;height:44px;flex:none}
  body .ideo-contact .ct-t b{font-size:18px}
  body .ideo-contact .ct-do{font-size:13.5px}
  body .ideo-contact .ct-or{margin-top:40px}
  body .ideo-contact .ct-card{border-radius:18px;padding:24px 18px}
  body .ideo-contact .ct-card::before{left:18px}
  body .ideo-contact .ct-end{flex-direction:column;gap:14px;padding-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  body .ideo-contact *{transition:none!important}
  body .ideo-contact .ct-route::after{display:none}
  body .ideo-contact [data-rise] .ct-way,body .ideo-contact [data-rise] .ct-route li{opacity:1!important;transform:none!important}
  body .ideo-contact .ct-next[data-rise] .ct-route::before{transform:none}
}
/* v102: the footer is the home footer again; the last line sits about 130px above its wordmark */
body .ideo-contact .ct-end{padding-bottom:18px}

/* v129 (Kazi 2026-10-18): the way you point at lights up and says hello. The icon lifts, a ring goes out once,
   a light passes over it, and a short welcome line pops up beside it. Pointer devices only; calm with reduced motion. */
body .ideo-contact .ct-ic{position:relative;background-image:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;background-repeat:no-repeat;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)}
body .ideo-contact .ct-ic::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid currentColor;opacity:0;pointer-events:none}
body .ideo-contact .ct-hi{position:absolute;left:86px;top:31px;padding:7px 12px 8px;border-radius:12px 12px 12px 3px;background:#F8F3ED;color:#121B1D;
  font-size:14px;line-height:1.2;white-space:nowrap;box-shadow:0 10px 28px rgba(0,0,0,.35);opacity:0;transform:translate(-6px,4px) scale(.9);transform-origin:0 100%;
  transition:opacity .3s var(--ease),transform .4s var(--ease);pointer-events:none}
body .ideo-contact .is-wa .ct-hi{background:#DCF8C6}
@media (hover:hover) and (pointer:fine){
  body .ideo-contact .ct-way:hover .ct-ic,body .ideo-contact .ct-way:focus-visible .ct-ic{transform:translateY(-3px) scale(1.07);color:#F8F3ED;border-color:rgba(211,42,31,.6);
    box-shadow:0 0 0 6px rgba(211,42,31,.09),0 12px 28px rgba(211,42,31,.22);background-position:-30% 0;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),background-position .9s var(--ease) .1s}
  body .ideo-contact .is-wa:hover .ct-ic,body .ideo-contact .is-wa:focus-visible .ct-ic{color:#B9F5CF;border-color:rgba(37,211,102,.7);box-shadow:0 0 0 6px rgba(37,211,102,.1),0 12px 28px rgba(37,211,102,.2)}
  body .ideo-contact .ct-way:hover .ct-ic::before,body .ideo-contact .ct-way:focus-visible .ct-ic::before{animation:ct-ping 1.3s var(--ease) .05s 2}
  body .ideo-contact .ct-way:hover .ct-hi,body .ideo-contact .ct-way:focus-visible .ct-hi{opacity:1;transform:none;transition-delay:.12s}
}
@keyframes ct-ping{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.65)}}
/* v149 (Kazi 2026-10-19 07:49, Contact: "the popup came nicely on mouse hover, now it does not come"): it was switched
   off below 1100px, so a narrower browser window (or the preview with the comments open) never showed it. It now shows
   at every width a mouse is used: beside the icon while the three ways stand side by side, above the icon once they
   stack. With the doctor's name on this device the bubble greets them by name on a first line of its own
   (WhatsApp "Hi", Call "Hello", Email "Dear"), and the usual line follows. */
body .ideo-contact .ct-hi{z-index:1}
body .ideo-contact .ct-hi b{display:block;margin-bottom:2px;font-weight:700;overflow-wrap:anywhere}
body .ideo-contact .ct-way:hover,body .ideo-contact .ct-way:focus-visible{z-index:2}
/* stacked ways: the bubble sits inside its own tile, left of the arrow, so it never covers the tile above or slips under the header */
@media (max-width:959px) and (min-width:640px){
  body .ideo-contact .ct-hi{left:auto;right:56px;top:0;bottom:0;height:-webkit-fit-content;height:fit-content;margin:auto 0;white-space:normal;max-width:calc(100% - 330px);border-radius:12px 12px 3px 12px;transform:translate(6px,0) scale(.92);transform-origin:100% 50%}
}
@media (max-width:639px){
  body .ideo-contact .ct-hi{left:12px;top:auto;bottom:calc(100% - 12px);transform:translate(0,6px) scale(.92)}
}
@media (prefers-reduced-motion:reduce){
  body .ideo-contact .ct-way:hover .ct-ic,body .ideo-contact .ct-way:focus-visible .ct-ic{transform:none}
  body .ideo-contact .ct-way:hover .ct-ic::before,body .ideo-contact .ct-way:focus-visible .ct-ic::before{animation:none}
  body .ideo-contact .ct-hi{transition:opacity .2s linear;transform:none!important}
}

/* v134 (Kazi 2026-10-18): Call and Email carry their own colour before the mouse arrives, as WhatsApp carries its green:
   Call in a light petrol teal (from the brand's midnight petrol; Kazi 13:18: not red), Email in a calm mail blue; hover deepens the same colour */
body .ideo-contact .is-call .ct-ic{border-color:rgba(94,186,180,.42);background-color:rgba(94,186,180,.08);color:#8FD3CC}
body .ideo-contact .is-mail .ct-ic{border-color:rgba(110,170,235,.42);background-color:rgba(110,170,235,.07);color:#9CC7F2}
body .ideo-contact .is-call .ct-hi{background:#DDF3F1}
body .ideo-contact .is-mail .ct-hi{background:#DDEBFB}
@media (hover:hover) and (pointer:fine){
  body .ideo-contact .is-call:hover .ct-ic,body .ideo-contact .is-call:focus-visible .ct-ic{color:#BDEAE5;border-color:rgba(94,186,180,.75);box-shadow:0 0 0 6px rgba(94,186,180,.1),0 12px 28px rgba(94,186,180,.2)}
  body .ideo-contact .is-mail:hover .ct-ic,body .ideo-contact .is-mail:focus-visible .ct-ic{color:#C4DFFA;border-color:rgba(110,170,235,.75);box-shadow:0 0 0 6px rgba(110,170,235,.1),0 12px 28px rgba(110,170,235,.2)}
}
/* v138 (Kazi): on a touch screen the tile plays its wave first (site.js adds .is-tap), then the call, mail or WhatsApp opens */
body .ideo-contact .ct-way.is-tap{border-color:rgba(248,243,237,.26);background:linear-gradient(160deg,rgba(248,243,237,.08),rgba(248,243,237,.02) 62%)}
body .ideo-contact .ct-way.is-tap .ct-go{transform:translateX(4px)}
body .ideo-contact .ct-way.is-tap .ct-ic{transform:translateY(-3px) scale(1.07);color:#F8F3ED;border-color:rgba(211,42,31,.6);box-shadow:0 0 0 6px rgba(211,42,31,.09),0 12px 28px rgba(211,42,31,.22);background-position:-30% 0;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),background-position .6s var(--ease)}
body .ideo-contact .is-wa.is-tap .ct-ic{color:#B9F5CF;border-color:rgba(37,211,102,.7);box-shadow:0 0 0 6px rgba(37,211,102,.1),0 12px 28px rgba(37,211,102,.2)}
body .ideo-contact .is-call.is-tap .ct-ic{color:#BDEAE5;border-color:rgba(94,186,180,.75);box-shadow:0 0 0 6px rgba(94,186,180,.1),0 12px 28px rgba(94,186,180,.2)}
body .ideo-contact .is-mail.is-tap .ct-ic{color:#C4DFFA;border-color:rgba(110,170,235,.75);box-shadow:0 0 0 6px rgba(110,170,235,.1),0 12px 28px rgba(110,170,235,.2)}
body .ideo-contact .ct-way.is-tap .ct-ic::before{animation:ct-ping .75s var(--ease) 0s 1}