.elementor-488 .elementor-element.elementor-element-5590530a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-488 .elementor-element.elementor-element-7ffc763f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-488 .elementor-element.elementor-element-7b3df692{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-488 .elementor-element.elementor-element-2dccdf1a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-488 .elementor-element.elementor-element-451e1851{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-488 .elementor-element.elementor-element-1b0d4a8c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS *//* ══════════════════════════════════════════════════════════════════════
   Dyotatech AI · www.dyotatech.ai
   BOOKING PAGE CSS  (v1.1, 1 Oct 2026; booking card now holds the Google Calendar booking page)
   Where:  Page "Book" (www.dyotatech.ai/book) → Edit with Elementor →
           ⚙ Page Settings → Advanced → Custom CSS  (REPLACE whatever is there)
   Needs:  dyotatech-site-css.css already in Site Settings → Custom CSS
           (tokens, buttons, base, header, footer). This file adds only what
           the booking page needs. Header, footer and dark/light toggle are
           the site's own (Theme Builder); nothing for them is in this page.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Section: background, spacing contract, faint logo mark, grid lines ──
   Contract (mockup v2): padding-top clamp(44px,6vw,80px), padding-bottom
   clamp(56px,7vw,96px). !important because Elementor applies panel padding
   through (0,3,0) variables. */
.e-con.dt-bk{position:relative;overflow:hidden;background:var(--band);border-bottom:1px solid var(--line);
  padding:clamp(44px,6vw,80px) 0 clamp(56px,7vw,96px) !important;scroll-margin-top:84px}
.e-con.dt-bk::before{content:"" !important;display:block;position:absolute;inset:-80px -120px auto auto;width:560px;height:560px;opacity:.06;pointer-events:none;
  background:var(--dt-mark-url) center / contain no-repeat;z-index:0}
.e-con.dt-bk::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px);background-size:calc(100% / 12) 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}

/* ── 2. Inner: 12 columns, 24px gap; copy = columns 1–6, card = columns 7–12 ── */
.e-con.dt-bk-inner{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.e-con.dt-bk-copy{grid-column:1 / span 6;display:flex;flex-direction:column;align-items:flex-start}
.e-con.dt-bk-side{grid-column:7 / span 6;padding-left:clamp(0px,2vw,24px)}

/* ── 3. Copy column. Spacing: kicker→title 18, title→lede 20, lede→points 30, points→tagline 28 ── */
.e-con.dt-scope .dt-bk-kicker .elementor-heading-title{display:flex;align-items:center;gap:9px}
.e-con.dt-scope .dt-bk-kicker .elementor-heading-title::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.elementor .e-con.dt-scope .dt-bk-title .elementor-heading-title{font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1.07}
.elementor .e-con > .elementor-widget.dt-bk-title{margin-top:18px}
.elementor .e-con > .elementor-widget.dt-bk-lede{margin-top:20px}
.elementor .e-con .dt-bk-lede p{max-width:34em}
.elementor .e-con > .elementor-widget.dt-bk-pts{margin-top:30px;width:100%;max-width:30em}
.elementor .e-con.dt-scope .dt-bk-pts ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.elementor .e-con.dt-scope .dt-bk-pts li{position:relative;margin:0;padding:12px 0 12px 28px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:.98rem;line-height:1.6}
.elementor .e-con.dt-scope .dt-bk-pts li::before{content:"";position:absolute;left:3px;top:19px;width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.elementor .e-con.dt-scope .dt-bk-pts li strong{color:var(--ink);font-weight:600}
.elementor .e-con > .elementor-widget.dt-bk-tag{margin-top:28px}
.elementor .e-con.dt-scope .dt-bk-tag p{display:flex;align-items:center;gap:12px;margin:0;font-size:.92rem;color:var(--ink-2)}
.elementor .e-con.dt-scope .dt-bk-tag p::before{content:"";flex:0 0 22px;width:22px;height:2px;background:var(--accent)}

/* ── 4. Booking card: a light card in both modes (like the QR tile on the flyer).
   It holds Google's booking page, which Google draws in light colours and which
   cannot be restyled, so the card around it is fixed to match ── */
.e-con.dt-bk-card{background:#FFFFFF;color:#16140F;border:1px solid var(--line-2);border-top:3px solid var(--accent);
  border-radius:0 0 6px 6px;box-shadow:0 40px 80px -48px var(--shadow);overflow:hidden}
.e-con.dt-bk-card-head{padding:26px 26px 18px;border-bottom:1px solid #E7E3DE}
.e-con.dt-scope .dt-bk-card-title .elementor-heading-title{font-family:var(--dt-display);font-size:1.45rem;font-weight:400;letter-spacing:-.02em;line-height:1.2;color:#16140F}
.elementor .e-con > .elementor-widget.dt-bk-card-sub{margin-top:4px}
.elementor .e-con.dt-scope .dt-bk-card-sub p{margin:0;font-size:.92rem;color:#55504A}
.elementor .e-con.dt-bk-card > .elementor-widget.dt-bk-form{padding:0;background:#FFFFFF}
.e-con.dt-scope .dt-bk-form iframe.dt-bk-frame{display:block;width:100%;height:720px;min-height:720px;border:0;background:#FFFFFF}
.elementor .e-con.dt-bk-card > .elementor-widget.dt-bk-note{padding:14px 26px 18px;border-top:1px dashed #D8D2CB}
.elementor .e-con.dt-scope .dt-bk-note p{margin:0;font-size:.78rem;color:#55504A}

/* ── 5. Tablet and phone ── */
@media (max-width:1080px){
  .e-con.dt-bk-copy,.e-con.dt-bk-side{grid-column:1 / -1}
  .e-con.dt-bk-side{padding-left:0;margin-top:40px}
}
@media (max-width:760px){
  .e-con.dt-bk-card-head{padding:22px 18px 16px}
  .e-con.dt-scope .dt-bk-form iframe.dt-bk-frame{height:780px;min-height:780px}
  .elementor .e-con.dt-bk-card > .elementor-widget.dt-bk-note{padding:12px 18px 16px}
}

/* ── 6. Focus and reduced motion ── */
.e-con.dt-bk-card :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .e-con.dt-bk-card *,.e-con.dt-bk-card *::before,.e-con.dt-bk-card *::after{transition:none !important;animation:none !important}
}/* End custom CSS */