{"id":275,"date":"2026-06-28T11:58:27","date_gmt":"2026-06-28T15:58:27","guid":{"rendered":"https:\/\/www.preweb.site\/projects\/kanata-smile\/contact\/"},"modified":"2026-06-29T22:59:07","modified_gmt":"2026-06-30T02:59:07","slug":"contact","status":"publish","type":"page","link":"https:\/\/www.preweb.site\/projects\/kanata-smile\/contact\/","title":{"rendered":"Contact &#038; Book | Kanata Smiles Dental Clinic, Kanata"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"275\" class=\"elementor elementor-275\" data-elementor-settings=\"{&quot;element_pack_global_tooltip_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true}}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element- e-con-full e-flex e-con e-parent\" data-id=\"\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element- elementor-widget elementor-widget-html\" data-id=\"\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\"><style>\n\/* ==========================================================================\n   Kanata Smiles - Design Foundation (v2)\n   The shared contract. Every section uses these tokens + base components so\n   the page is coherent. Section variations explore LAYOUT within these tokens.\n   ========================================================================== *\/\n\n\n:root{\n  \/* Brand *\/\n  --navy:#0F2A45; --navy-700:#12324f; --navy-600:#1b3f60;\n  --cyan:#19BDD3; --cyan-600:#12abc1; --teal:#0E97AC; --teal-700:#0b7f91;\n  --cyan-50:#EFFAFC; --cyan-100:#E2F6F9; --cyan-200:#C9EEF3;\n  --amber:#FFB45A; --amber-600:#F59E2E; --amber-50:#FFF4E6;\n  \/* Neutrals *\/\n  --ink:#0F2A45; --slate:#536676; --slate-400:#8597a6;\n  --white:#FFFFFF; --paper:#FBFDFE; --mist:#F4F8FB; --line:#E6EEF3; --line-2:#D7E4ec;\n  \/* Gradients *\/\n  --grad-cyan:linear-gradient(120deg,#1FC4D8,#0E97AC);\n  --grad-navy:linear-gradient(125deg,#12324f,#0F2A45 60%,#0b2138);\n  --grad-amber:linear-gradient(120deg,#FFC074,#F59E2E);\n  --grad-hero:radial-gradient(120% 130% at 88% -10%,#E2F6F9 0%,#F1FAFC 38%,#FFFFFF 72%);\n  \/* Type scale (fluid) *\/\n  --fs-display:clamp(2.4rem,5.2vw,4rem);\n  --fs-h1:clamp(2.1rem,4.4vw,3.4rem);\n  --fs-h2:clamp(1.75rem,3.4vw,2.6rem);\n  --fs-h3:1.32rem; --fs-h4:1.08rem;\n  --fs-body:1.0625rem; --fs-sm:.9rem; --fs-xs:.8rem;\n  \/* Spacing scale *\/\n  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;\n  --s7:40px; --s8:56px; --s9:72px; --s10:96px; --s11:120px;\n  \/* Radius + shadow *\/\n  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;\n  --sh-sm:0 1px 2px rgba(15,42,69,.04),0 2px 6px rgba(15,42,69,.04);\n  --sh:0 4px 14px rgba(15,42,69,.06);\n  --sh-lg:0 14px 34px rgba(15,42,69,.09);\n  --sh-cyan:0 4px 12px rgba(14,151,172,.16);\n  --ring:0 0 0 4px rgba(25,189,211,.28);\n  --wrap:1200px; --gut:24px;\n  --ease:cubic-bezier(.2,.7,.2,1);\n}\n\n.ks-page *, .ks-page *::before, .ks-page *::after{box-sizing:border-box}\n.ks-page *{margin:0;padding:0}\n.ks-page{scroll-behavior:smooth;-webkit-text-size-adjust:100%}\n.ks-page{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}\n.ks-page h1, .ks-page h2, .ks-page h3, .ks-page h4, .ks-page h5{font-family:Poppins,sans-serif;line-height:1.14;color:var(--navy);font-weight:700;letter-spacing:-.02em}\n.ks-page h2{font-size:var(--fs-h2)} .ks-page h3{font-size:var(--fs-h3);font-weight:600} .ks-page h4{font-size:var(--fs-h4);font-weight:600}\n.ks-page p{color:var(--slate)} .ks-page strong{color:var(--ink)}\n.ks-page a{color:var(--teal);text-decoration:none;transition:color .2s}\n.ks-page img, .ks-page svg{display:block;max-width:100%}\n.ks-page ul{list-style:none}\n\n\/* Layout *\/\n.ks-page .container{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}\n.ks-page .section{padding-block:clamp(64px,8vw,112px)}\n.ks-page .section--tight{padding-block:clamp(44px,5vw,72px)}\n.ks-page .section--alt{background:var(--paper)}\n.ks-page .section--mist{background:var(--mist)}\n\n\/* Section header *\/\n.ks-page .shead{max-width:660px;margin-bottom:clamp(36px,5vw,56px)}\n.ks-page .shead--center{margin-inline:auto;text-align:center}\n.ks-page .eyebrow{display:inline-block;font-family:Poppins;font-weight:600;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}\n.ks-page .eyebrow--chip{background:var(--cyan-100);padding:7px 14px;border-radius:var(--r-pill);letter-spacing:.1em}\n.ks-page .shead p{margin-top:14px;font-size:1.05rem}\n\n\/* Buttons *\/\n.ks-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Poppins;font-weight:600;font-size:.98rem;line-height:1;padding:14px 24px;border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s;text-align:center}\n.ks-page .btn:focus-visible{outline:none;box-shadow:var(--ring)}\n.ks-page .btn--primary{background:var(--grad-cyan);color:#fff;box-shadow:0 3px 10px rgba(14,151,172,.16)}\n.ks-page .btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(14,151,172,.22)}\n.ks-page .btn--amber{background:var(--grad-amber);color:#43300c;box-shadow:0 3px 10px rgba(245,158,46,.18)}\n.ks-page .btn--amber:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(245,158,46,.24)}\n.ks-page .btn--ghost{background:#fff;color:var(--navy);border-color:var(--line-2)}\n.ks-page .btn--ghost:hover{border-color:var(--cyan);color:var(--teal);background:var(--cyan-50)}\n.ks-page .btn--light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.32)}\n.ks-page .btn--light:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}\n.ks-page .btn--lg{padding:16px 30px;font-size:1.02rem}\n.ks-page .btn--block{width:100%}\n\n\/* Chips + pills *\/\n.ks-page .chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 15px;font-size:var(--fs-sm);font-weight:500;color:var(--navy);box-shadow:var(--sh-sm)}\n.ks-page .chip svg{color:var(--teal);flex:0 0 auto}\n\n\/* Cards + grid *\/\n.ks-page .grid{display:grid;gap:24px}\n.ks-page .cols-2{grid-template-columns:repeat(2,1fr)}\n.ks-page .cols-3{grid-template-columns:repeat(3,1fr)}\n.ks-page .cols-4{grid-template-columns:repeat(4,1fr)}\n.ks-page .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}\n.ks-page .card--hover:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent}\n.ks-page .icon-badge{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:var(--cyan-100);color:var(--teal);flex:0 0 auto}\n.ks-page .icon-badge--grad{background:var(--grad-cyan);color:#fff}\n\n\/* Stacked label\/value (fixes run-together bug) *\/\n.ks-page .stack{display:flex;flex-direction:column}\n.ks-page .stack b{font-family:Poppins;font-weight:600;color:var(--navy);line-height:1.3}\n.ks-page .stack span{color:var(--slate);font-size:var(--fs-sm)}\n\n\/* Media frame *\/\n.ks-page .frame{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg)}\n.ks-page .frame img{width:100%;height:100%;object-fit:cover;display:block}\n\n\/* Reveal on scroll *\/\n.ks-page .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}\n.ks-page .reveal.in{opacity:1;transform:none}\n.ks-page .reveal-2{transition-delay:.08s}.ks-page .reveal-3{transition-delay:.16s}.ks-page .reveal-4{transition-delay:.24s}\n\n\/* Accessibility *\/\n.ks-page .skip{position:absolute;left:-9999px}\n.ks-page .skip:focus{left:16px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--sh)}\n.ks-page :where(a,button,input,select,textarea,summary):focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}\n@media (prefers-reduced-motion: reduce){.ks-page *{animation:none!important;transition:none!important}.ks-page .reveal{opacity:1;transform:none}}\n\n\/* Generic responsive collapse for grids *\/\n@media(max-width:960px){.ks-page .cols-4{grid-template-columns:repeat(2,1fr)}.ks-page .cols-3{grid-template-columns:repeat(2,1fr)}}\n@media(max-width:600px){.ks-page .cols-4, .ks-page .cols-3, .ks-page .cols-2{grid-template-columns:1fr}}\n\n\/* ==========================================================================\n   Section: FAQ  (namespace .s-faq)\n   Asymmetric two-column: sticky intro + reassurance CTA (left),\n   native <details> accordion list (right) that feeds FAQPage schema.\n   Custom animated plus\/minus indicator (default disclosure triangle hidden).\n   Uses foundation tokens + .card-like surfaces, .eyebrow, .btn, .icon-badge.\n   ========================================================================== *\/\n.ks-page .s-faq{position:relative;overflow:hidden}\n\n\/* Soft background motif, behind content, non-interactive *\/\n.ks-page .s-faq__blob{\n  position:absolute;\n  bottom:-16%;left:-12%;\n  width:min(560px,58vw);\n  z-index:0;\n  pointer-events:none;\n}\n.ks-page .s-faq .container{position:relative;z-index:1}\n\n\/* Asymmetric layout: intro column + wider accordion column *\/\n.ks-page .s-faq__grid{\n  display:grid;\n  grid-template-columns:minmax(280px,1fr) 1.4fr;\n  gap:clamp(32px,5vw,72px);\n  align-items:start;\n}\n\n\/* ---- LEFT: sticky intro ---- *\/\n.ks-page .s-faq__intro{position:sticky;top:96px}\n.ks-page .s-faq__title{font-size:var(--fs-h2);margin-bottom:var(--s4)}\n.ks-page .s-faq__lead{font-size:1.05rem;max-width:38ch}\n\n\/* Reassurance panel (still have a question) *\/\n.ks-page .s-faq__panel{\n  margin-top:var(--s7);\n  display:flex;\n  flex-direction:column;\n  align-items:flex-start;\n  gap:var(--s4);\n  padding:var(--s6);\n  background:radial-gradient(120% 130% at 0% 0%,var(--cyan-50) 0%,#fff 62%);\n  border:1px solid var(--line);\n  border-radius:var(--r-lg);\n  box-shadow:var(--sh-sm);\n}\n.ks-page .s-faq__panelicon{box-shadow:var(--sh-cyan)}\n.ks-page .s-faq__paneltext b{font-size:1.08rem}\n.ks-page .s-faq__paneltext span{margin-top:2px}\n.ks-page .s-faq__cta{align-self:stretch}\n\n\/* ---- RIGHT: accordion list ---- *\/\n.ks-page .s-faq__list{\n  display:flex;\n  flex-direction:column;\n  gap:var(--s3);\n  list-style:none;\n  margin:0;padding:0;\n}\n.ks-page .s-faq__item{\n  background:#fff;\n  border:1px solid var(--line);\n  border-radius:var(--r);\n  box-shadow:var(--sh-sm);\n  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);\n}\n.ks-page .s-faq__item:has(.s-faq__d[open]){\n  border-color:var(--cyan-200);\n  box-shadow:var(--sh);\n}\n\n\/* Summary: hide default triangle, provide our own indicator *\/\n.ks-page .s-faq__q{\n  list-style:none;\n  cursor:pointer;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:var(--s4);\n  padding:var(--s5) var(--s6);\n  font-family:Poppins,sans-serif;\n  font-weight:600;\n  font-size:var(--fs-h4);\n  color:var(--navy);\n  transition:color .25s var(--ease);\n}\n.ks-page .s-faq__q::-webkit-details-marker{display:none}\n.ks-page .s-faq__q:hover{color:var(--teal)}\n.ks-page .s-faq__item:has(.s-faq__d[open]) .s-faq__q{color:var(--teal)}\n.ks-page .s-faq__qtext{line-height:1.32}\n\n\/* Custom plus\/minus indicator: rotates to a minus on open *\/\n.ks-page .s-faq__ind{\n  flex:0 0 auto;\n  display:grid;\n  place-items:center;\n  width:38px;height:38px;\n  border-radius:var(--r-pill);\n  background:var(--cyan-100);\n  color:var(--teal);\n  transition:background .3s var(--ease),color .3s var(--ease),transform .35s var(--ease);\n}\n.ks-page .s-faq__q:hover .s-faq__ind{transform:scale(1.05)}\n\/* The vertical stroke of the plus collapses on open -> minus *\/\n.ks-page .s-faq__ind svg path:first-child{\n  transform-origin:center;\n  transition:transform .35s var(--ease),opacity .35s var(--ease);\n}\n.ks-page .s-faq__d[open] .s-faq__ind{\n  background:var(--grad-cyan);\n  color:#fff;\n  transform:rotate(180deg);\n}\n.ks-page .s-faq__d[open] .s-faq__ind svg path:first-child{\n  transform:scaleY(0);\n  opacity:0;\n}\n\n\/* Answer *\/\n.ks-page .s-faq__a{\n  padding:0 var(--s6) var(--s5);\n}\n.ks-page .s-faq__a p{margin:0;max-width:60ch}\n\n\/* Subtle open animation for the answer (respects reduced-motion via foundation) *\/\n.ks-page .s-faq__d[open] .s-faq__a{\n}\n\n\n\/* ---- Responsive ---- *\/\n@media(max-width:900px){\n  .ks-page .s-faq__grid{grid-template-columns:1fr;gap:var(--s7)}\n  .ks-page .s-faq__intro{position:static}\n  .ks-page .s-faq__lead{max-width:60ch}\n  .ks-page .s-faq__cta{align-self:flex-start}\n}\n@media(max-width:600px){\n  .ks-page .s-faq__q{padding:var(--s4) var(--s5);font-size:1.02rem}\n  .ks-page .s-faq__a{padding:0 var(--s5) var(--s4)}\n  .ks-page .s-faq__ind{width:34px;height:34px}\n  .ks-page .s-faq__panel{padding:var(--s5)}\n}\n\n\n\/* ==========================================================================\n   Kanata Smiles : Contact \/ Booking (.s-ct)\n   Split layout: brand navy info panel (details + map) beside an elevated\n   white form card. Foundation tokens only.\n   ========================================================================== *\/\n\n.ks-page .s-ct__layout{\n  display: grid;\n  grid-template-columns: 1.05fr 1fr;\n  gap: clamp(20px, 2.6vw, 36px);\n  align-items: stretch;\n}\n\n\/* ---- LEFT: brand-coloured info panel -------------------------------------- *\/\n.ks-page .s-ct__panel{\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--r-xl);\n  background: var(--grad-navy);\n  color: #fff;\n  box-shadow: var(--sh-lg);\n}\n\n\/* Soft cyan ambient glow (decorative) *\/\n.ks-page .s-ct__glow{\n  position: absolute;\n  top: -30%;\n  right: -20%;\n  width: 70%;\n  height: 70%;\n  background: radial-gradient(circle at center, rgba(31,196,216,.38), transparent 68%);\n  pointer-events: none;\n}\n\n.ks-page .s-ct__panel-body{\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: clamp(24px, 3vw, 40px);\n}\n\n.ks-page .s-ct__panel-title{\n  color: #fff;\n  font-size: var(--fs-h3);\n}\n.ks-page .s-ct__panel-lead{\n  color: rgba(226,246,249,.86);\n  margin-top: 10px;\n  font-size: var(--fs-sm);\n  max-width: 40ch;\n}\n\n.ks-page .s-ct__info{\n  list-style: none;\n  margin-top: clamp(20px, 2.6vw, 30px);\n  display: grid;\n  gap: clamp(14px, 1.8vw, 20px);\n}\n.ks-page .s-ct__info-item{\n  display: flex;\n  align-items: flex-start;\n  gap: var(--s4);\n}\n.ks-page .s-ct__info-ic{\n  flex: 0 0 auto;\n  display: grid;\n  place-items: center;\n  width: 46px;\n  height: 46px;\n  border-radius: var(--r-sm);\n  background: rgba(255,255,255,.10);\n  border: 1px solid rgba(255,255,255,.16);\n  color: var(--cyan);\n}\n.ks-page .s-ct__info .stack b{\n  color: #fff;\n  font-size: 1rem;\n}\n.ks-page .s-ct__info .stack span{\n  color: rgba(226,246,249,.82);\n  font-size: var(--fs-sm);\n  margin-top: 2px;\n}\n.ks-page .s-ct__info .stack a{\n  color: #fff;\n  font-weight: 600;\n  font-family: Poppins, sans-serif;\n  margin-top: 2px;\n  width: max-content;\n  transition: color .2s;\n}\n.ks-page .s-ct__info .stack a:hover{ color: var(--cyan); }\n\n\/* Map: rounded frame, pushed to the bottom of the panel *\/\n.ks-page .s-ct__map{\n  margin-top: auto;\n  padding-top: clamp(20px, 2.6vw, 28px);\n  border-radius: 0;\n  overflow: visible;\n  box-shadow: none;\n}\n.ks-page .s-ct__map iframe{\n  display: block;\n  width: 100%;\n  height: clamp(180px, 22vw, 230px);\n  border: 0;\n  border-radius: var(--r-lg);\n  box-shadow: 0 12px 28px rgba(0,0,0,.22);\n}\n\n\/* ---- RIGHT: form card ----------------------------------------------------- *\/\n.ks-page .s-ct__formcard{\n  padding: clamp(24px, 3vw, 40px);\n  border-color: var(--line);\n  box-shadow: var(--sh);\n}\n\n.ks-page .s-ct__form-title{\n  font-size: var(--fs-h3);\n  margin-bottom: clamp(16px, 2vw, 22px);\n}\n\n.ks-page .s-ct__field{ margin-bottom: var(--s4); }\n.ks-page .s-ct__field > label{\n  display: block;\n  font-family: Poppins, sans-serif;\n  font-weight: 600;\n  font-size: var(--fs-sm);\n  color: var(--navy);\n  margin-bottom: 7px;\n}\n\n\/* Two fields side by side (phone + email) *\/\n.ks-page .s-ct__row{\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--s4);\n}\n.ks-page .s-ct__row .s-ct__field{ margin-bottom: var(--s4); }\n\n\/* Inputs : clean, rounded, soft *\/\n.ks-page .s-ct__form input[type=\"text\"], .ks-page .s-ct__form input[type=\"tel\"], .ks-page .s-ct__form input[type=\"email\"], .ks-page .s-ct__form select{\n  width: 100%;\n  font: inherit;\n  color: var(--ink);\n  background: var(--paper);\n  border: 1.5px solid var(--line-2);\n  border-radius: var(--r-sm);\n  padding: 13px 15px;\n  line-height: 1.3;\n  transition: border-color .2s, box-shadow .2s, background .2s;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.ks-page .s-ct__form input::placeholder{ color: var(--slate-400); }\n\n.ks-page .s-ct__form input:focus, .ks-page .s-ct__form select:focus{\n  outline: none;\n  background: #fff;\n  border-color: var(--cyan);\n  box-shadow: var(--ring);\n}\n\n\/* Custom select caret *\/\n.ks-page .s-ct__select{ position: relative; }\n.ks-page .s-ct__select select{ padding-right: 44px; cursor: pointer; }\n.ks-page .s-ct__caret{\n  position: absolute;\n  top: 50%;\n  right: 14px;\n  transform: translateY(-50%);\n  color: var(--slate);\n  pointer-events: none;\n}\n\n\/* Consent *\/\n.ks-page .s-ct__consent{\n  display: flex;\n  align-items: flex-start;\n  gap: var(--s3);\n  margin: var(--s5) 0;\n  padding: 14px 16px;\n  background: var(--cyan-50);\n  border: 1px solid var(--cyan-100);\n  border-radius: var(--r-sm);\n}\n.ks-page .s-ct__consent input[type=\"checkbox\"]{\n  flex: 0 0 auto;\n  width: 20px;\n  height: 20px;\n  margin-top: 2px;\n  accent-color: var(--teal);\n  cursor: pointer;\n}\n.ks-page .s-ct__consent label{\n  font-size: var(--fs-sm);\n  color: var(--slate);\n  line-height: 1.5;\n  cursor: pointer;\n}\n\n.ks-page .s-ct__submit{ margin-top: var(--s2); }\n.ks-page .s-ct__submit svg{ transition: transform .25s var(--ease); }\n.ks-page .s-ct__submit:hover svg{ transform: translateX(3px); }\n\n\/* Note under the form *\/\n.ks-page .s-ct__note{\n  display: flex;\n  align-items: flex-start;\n  gap: var(--s2);\n  margin-top: var(--s4);\n  font-size: var(--fs-xs);\n  line-height: 1.5;\n  color: var(--slate);\n}\n.ks-page .s-ct__note svg{ flex: 0 0 auto; margin-top: 2px; color: var(--teal); }\n\n\/* Submitted state (replaces the form on success) *\/\n.ks-page .s-ct__done{\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 6px 0;\n}\n.ks-page .s-ct__done-ic{\n  display: grid;\n  place-items: center;\n  width: 54px;\n  height: 54px;\n  border-radius: 50%;\n  background: var(--cyan-50);\n  border: 1px solid var(--cyan-100);\n  color: var(--teal);\n  margin-bottom: 6px;\n}\n.ks-page .s-ct__done h3{ font-size: var(--fs-h3); color: var(--navy); }\n.ks-page .s-ct__done p{ color: var(--slate); font-size: var(--fs-sm); line-height: 1.6; max-width: 42ch; }\n\n\/* Error state on the note *\/\n.ks-page .s-ct__note--err{ color: #b00020; }\n.ks-page .s-ct__note--err svg{ color: #b00020; }\n\n\/* ---- Responsive ----------------------------------------------------------- *\/\n@media (max-width: 900px){\n  .ks-page .s-ct__layout{ grid-template-columns: 1fr; }\n  .ks-page .s-ct__map iframe{ height: clamp(200px, 40vw, 260px); }\n}\n@media (max-width: 560px){\n  .ks-page .s-ct__row{ grid-template-columns: 1fr; gap: 0; }\n}\n\n\/* ==========================================================================\n   Contact page  \u00b7  namespace .ct  (reuses .s-ct booking section from sections)\n   ========================================================================== *\/\n.ks-page .ct-hero{position:relative;overflow:hidden;background:var(--grad-hero)}\n.ks-page .ct-hero::before{content:\"\";position:absolute;inset:0;\n  background-image:radial-gradient(rgba(25,189,211,.12) 1.4px,transparent 1.6px);background-size:24px 24px;\n  -webkit-mask-image:radial-gradient(120% 95% at 92% -8%,#000,transparent 62%);\n          mask-image:radial-gradient(120% 95% at 92% -8%,#000,transparent 62%);pointer-events:none}\n.ks-page .ct-hero__inner{position:relative;max-width:780px;padding-block:clamp(38px,5vw,60px)}\n.ks-page .ct-bc{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm);color:var(--slate-400);margin-bottom:18px}\n.ks-page .ct-bc a{color:var(--slate)}.ks-page .ct-bc a:hover{color:var(--teal)}.ks-page .ct-bc b{color:var(--navy);font-weight:600}\n.ks-page .ct-hero h1{font-size:var(--fs-h1);margin-top:12px}\n.ks-page .ct-hero__lead{margin-top:16px;font-size:1.1rem;line-height:1.6;max-width:56ch}\n.ks-page .ct-facts{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}\n.ks-page .ct-fact{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);\n  border-radius:var(--r-pill);padding:10px 18px;box-shadow:var(--sh-sm)}\n.ks-page .ct-fact svg{color:var(--teal);flex:0 0 auto}\n.ks-page .ct-fact b{font-family:Poppins;font-weight:600;color:var(--navy);font-size:var(--fs-sm)}\n.ks-page .ct-fact span{color:var(--slate);font-size:var(--fs-sm)}\n\/* pull the booking section up a touch under the hero *\/\n.ks-page .ct-book{padding-top:clamp(40px,5vw,64px)}\n\n.ks-page .reveal{opacity:1 !important;transform:none !important}\n\n<\/style>\n<div class=\"ks-page\">\n<main>\n<!-- ============================ HERO ============================ -->\n<section class=\"ct-hero\">\n  <div class=\"container\">\n    <div class=\"ct-hero__inner reveal\">\n      <nav class=\"ct-bc\" aria-label=\"Breadcrumb\">\n        <a href=\"https:\/\/www.preweb.site\/projects\/kanata-smile\/\">Home<\/a><span>\/<\/span><b>Contact<\/b>\n      <\/nav>\n      <span class=\"eyebrow eyebrow--chip\">Contact &amp; book<\/span>\n      <h1>Book your visit in Kanata<\/h1>\n      <p class=\"ct-hero__lead\">Tell us a little about what you need and a time that suits you, and our team will call to confirm. Prefer to talk it through? Give us a call.<\/p>\n      <div class=\"ct-facts\">\n        <span class=\"ct-fact\"><svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6.5 3.5h3l1.6 4-2 1.5a12 12 0 0 0 5.4 5.4l1.5-2 4 1.6v3a2 2 0 0 1-2.2 2A16 16 0 0 1 4.5 5.7 2 2 0 0 1 6.5 3.5Z\"\/><\/svg> <b>(613) 592-6850<\/b><\/span>\n        <span class=\"ct-fact\"><svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 2\"\/><\/svg> <span>Mon to Thu, 8:30 am to 4:30 pm<\/span><\/span>\n        <span class=\"ct-fact\"><svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11Z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.6\"\/><\/svg> <span>300 March Road, Unit 200<\/span><\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ====================== BOOKING (info panel + map + form) ====================== -->\n<section id=\"contact\" class=\"section ct-book s-ct\" aria-labelledby=\"ct-form-title\">\n  <div class=\"container\">\n    <div class=\"s-ct__layout\">\n\n      <aside class=\"s-ct__panel reveal\" aria-labelledby=\"ct-info-title\">\n        <div class=\"s-ct__glow\" aria-hidden=\"true\"><\/div>\n        <div class=\"s-ct__panel-body\">\n          <h2 id=\"ct-info-title\" class=\"s-ct__panel-title\">Visit Kanata Smiles<\/h2>\n          <p class=\"s-ct__panel-lead\">New patients are welcome. Prefer to talk it through? Call us and we will help you find a time.<\/p>\n\n          <ul class=\"s-ct__info\" role=\"list\">\n            <li class=\"s-ct__info-item\">\n              <span class=\"s-ct__info-ic\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><path d=\"M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11Z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.6\"\/><\/svg><\/span>\n              <span class=\"stack\"><b>Visit us<\/b><span>300 March Road, Unit 200, Kanata, ON K2K 2E2<\/span><\/span>\n            <\/li>\n            <li class=\"s-ct__info-item\">\n              <span class=\"s-ct__info-ic\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><path d=\"M6.5 3.5h3l1.6 4-2 1.5a12 12 0 0 0 5.4 5.4l1.5-2 4 1.6v3a2 2 0 0 1-2.2 2A16 16 0 0 1 4.5 5.7 2 2 0 0 1 6.5 3.5Z\"\/><\/svg><\/span>\n              <span class=\"stack\"><b>Call us<\/b><a href=\"tel:+16135926850\">(613) 592-6850<\/a><\/span>\n            <\/li>\n            <li class=\"s-ct__info-item\">\n              <span class=\"s-ct__info-ic\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2.5\"\/><path d=\"m4 7 8 5 8-5\"\/><\/svg><\/span>\n              <span class=\"stack\"><b>Email us<\/b><a href=\"mailto:info@kanatasmiles.com\">info@kanatasmiles.com<\/a><\/span>\n            <\/li>\n            <li class=\"s-ct__info-item\">\n              <span class=\"s-ct__info-ic\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 2\"\/><\/svg><\/span>\n              <span class=\"stack\"><b>Hours<\/b><span>Monday to Thursday, 8:30 am to 4:30 pm<\/span><\/span>\n            <\/li>\n          <\/ul>\n\n          <div class=\"s-ct__map frame\">\n            <iframe title=\"Map to Kanata Smiles\" loading=\"lazy\" src=\"https:\/\/www.google.com\/maps?q=300+March+Road+Kanata+ON+K2K+2E2&output=embed\"><\/iframe>\n          <\/div>\n        <\/div>\n      <\/aside>\n\n      <div class=\"s-ct__formcard card reveal reveal-2\">\n        <form class=\"s-ct__form\" action=\"#\" method=\"post\" onsubmit=\"return false\" aria-labelledby=\"ct-form-title\">\n          <!-- WSIS_FORM:booking-request -->\n          <h2 id=\"ct-form-title\" class=\"s-ct__form-title\">Request an appointment<\/h2>\n\n          <div class=\"s-ct__field\">\n            <label for=\"ct-name\">Full name<\/label>\n            <input type=\"text\" id=\"ct-name\" name=\"name\" autocomplete=\"name\" placeholder=\"Your name\" required>\n          <\/div>\n\n          <div class=\"s-ct__row\">\n            <div class=\"s-ct__field\">\n              <label for=\"ct-phone\">Phone<\/label>\n              <input type=\"tel\" id=\"ct-phone\" name=\"phone\" autocomplete=\"tel\" inputmode=\"tel\" placeholder=\"(613) 000-0000\" required>\n            <\/div>\n            <div class=\"s-ct__field\">\n              <label for=\"ct-email\">Email<\/label>\n              <input type=\"email\" id=\"ct-email\" name=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required>\n            <\/div>\n          <\/div>\n\n          <div class=\"s-ct__field\">\n            <label for=\"ct-reason\">Reason for visit<\/label>\n            <div class=\"s-ct__select\">\n              <select id=\"ct-reason\" name=\"reason\" required>\n                <option value=\"\" selected>Please choose one<\/option>\n                <option value=\"checkup\">Check-up &amp; cleaning<\/option>\n                <option value=\"implants\">Dental implants<\/option>\n                <option value=\"invisalign\">Clear aligners<\/option>\n                <option value=\"cosmetic\">Cosmetic<\/option>\n                <option value=\"emergency\">Emergency<\/option>\n                <option value=\"other\">Other<\/option>\n              <\/select>\n              <svg class=\"s-ct__caret\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\n            <\/div>\n          <\/div>\n\n          <div class=\"s-ct__field\">\n            <label for=\"ct-times\">Preferred days \/ times<\/label>\n            <input type=\"text\" id=\"ct-times\" name=\"preferred_times\" placeholder=\"e.g. Tuesday mornings, or Thursday after 2 pm\">\n          <\/div>\n\n          <div class=\"s-ct__consent\">\n            <input type=\"checkbox\" id=\"ct-consent\" name=\"consent\" value=\"yes\" required>\n            <label for=\"ct-consent\">I agree to be contacted about my appointment request. (You can withdraw consent anytime.)<\/label>\n          <\/div>\n\n          <button type=\"submit\" class=\"btn btn--primary btn--block s-ct__submit\">\n            Request an appointment\n            <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M5 12h14\"\/><path d=\"m13 6 6 6-6 6\"\/><\/svg>\n          <\/button>\n\n          <p class=\"s-ct__note\">\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 11v5\"\/><path d=\"M12 8h.01\"\/><\/svg>\n            This is a request, not a confirmed appointment. We will call to confirm a time during office hours.\n          <\/p>\n        <\/form>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<\/main>\n<\/div>\n<script>\ndocument.querySelectorAll('.s-faq__list .s-faq__d').forEach(function(d){d.addEventListener('toggle',function(){if(!d.open)return;var l=d.closest('.s-faq__list');if(l)l.querySelectorAll('.s-faq__d[open]').forEach(function(o){if(o!==d)o.open=false;});});});\n(function(){var els=document.querySelectorAll('.reveal');if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('in');});return;}var io=new IntersectionObserver(function(en){en.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:.12});els.forEach(function(e){io.observe(e);});})();\n\/* Booking form -> Fluent Forms (form id 3) via admin-ajax.\n   Keeps the existing styled markup; submits in the background, no nonce needed.\n   NOTE: AJAX path is the staging WP root; update at go-live if WP moves. *\/\n(function(){\n  var form = document.querySelector('.ks-home .s-ct__form');\n  if(!form || form.dataset.wired) return;\n  form.dataset.wired = '1';\n  var AJAX = '\/projects\/kanata-smile\/wp-admin\/admin-ajax.php';\n  var FORM_ID = '3';\n  function val(n){ var el = form.querySelector('[name=\"'+n+'\"]'); return el ? el.value : ''; }\n\n  form.addEventListener('submit', function(e){\n    e.preventDefault();\n    if(form.checkValidity && !form.checkValidity()){ if(form.reportValidity) form.reportValidity(); return; }\n    var btn = form.querySelector('.s-ct__submit');\n    var origHTML = btn ? btn.innerHTML : '';\n    if(btn){ btn.disabled = true; btn.style.opacity = '.7'; btn.textContent = 'Sending...'; }\n\n    var d = new URLSearchParams();\n    d.append('full_name', val('name'));\n    d.append('phone', val('phone'));\n    d.append('email', val('email'));\n    d.append('reason', val('reason'));\n    d.append('preferred_times', val('preferred_times'));\n    if(form.querySelector('[name=\"consent\"]:checked')) d.append('consent[]', 'yes');\n\n    var body = new URLSearchParams();\n    body.append('action', 'fluentform_submit');\n    body.append('form_id', FORM_ID);\n    body.append('data', d.toString());\n\n    fetch(AJAX, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application\/x-www-form-urlencoded; charset=UTF-8', 'X-Requested-With': 'XMLHttpRequest' },\n      body: body.toString(),\n      credentials: 'same-origin'\n    })\n    .then(function(r){ return r.json().catch(function(){ return { success:false }; }); })\n    .then(function(res){\n      if(res && res.success){\n        var msg = (res.data && res.data.result && res.data.result.message)\n          ? res.data.result.message\n          : 'Thank you. Your request has been received. We will call to confirm a time during office hours.';\n        var card = form.closest('.s-ct__formcard');\n        if(card){\n          card.innerHTML = '<div class=\"s-ct__done\" role=\"status\">'\n            + '<span class=\"s-ct__done-ic\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><\/span>'\n            + '<h3>Request received<\/h3>'\n            + '<p>' + msg + '<\/p><\/div>';\n          card.scrollIntoView({ behavior:'smooth', block:'center' });\n        }\n      } else {\n        throw new Error('submit-failed');\n      }\n    })\n    .catch(function(){\n      if(btn){ btn.disabled = false; btn.style.opacity = ''; btn.innerHTML = origHTML; }\n      var note = form.querySelector('.s-ct__note');\n      if(note){\n        note.classList.add('s-ct__note--err');\n        note.innerHTML = 'Sorry, we could not send your request just now. Please call us at (613) 592-6850 and we will help you book.';\n      }\n    });\n  });\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home\/Contact Contact &amp; book Book your visit in Kanata Tell us a little about what you need and a time that suits you, and our team will call to confirm. Prefer to talk it through? Give us a call. (613) 592-6850 Mon to Thu, 8:30 am to 4:30 pm 300 March Road, Unit 200 Visit [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-275","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.preweb.site\/projects\/kanata-smile\/wp-json\/wp\/v2\/pages\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.preweb.site\/projects\/kanata-smile\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.preweb.site\/projects\/kanata-smile\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.preweb.site\/projects\/kanata-smile\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.preweb.site\/projects\/kanata-smile\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":7,"href":"https:\/\/www.preweb.site\/projects\/kanata-smile\/wp-json\/wp\/v2\/pages\/275\/revisions"}],"predecessor-version":[{"id":460,"href":"https:\/\/www.preweb.site\/projects\/kanata-smile\/wp-json\/wp\/v2\/pages\/275\/revisions\/460"}],"wp:attachment":[{"href":"https:\/\/www.preweb.site\/projects\/kanata-smile\/wp-json\/wp\/v2\/media?parent=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}