/* Essential booking form on the site, against Easy!Appointments at book.essentialagency.ca.
   Written 2026-11-02, Essential Digital Agency tree, session "essential-tasks-due-2026-11-02", task B21981AC.
   The look is the Zoho form's (tiles, popovers, the Booking Summary drawer) in the site's own tokens. */
.eb { --eb-navy: #2E3D62; --eb-slate: #5E6373; --eb-hint: #6B7080; --eb-hint-grey: #4A5278; --eb-coral: #FF8257; --eb-coral-hover: #FF9470;
  --eb-tile: #F3F3F3; --eb-field: #E8E8E8; --eb-line: #D9DBE1; --eb-light: #FFFAF6; --eb-error: #B04A26; --eb-white: #FFFFFF; --eb-drawer: #F6F6F8;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: var(--eb-navy); line-height: 1.5; position: relative; }
.eb *, .eb *::before, .eb *::after { box-sizing: border-box; }
.eb button { font: inherit; color: inherit; }
.eb .eb-book, .eb .eb-submit { color: var(--eb-white); }
.eb { container-type: inline-size; }
.eb-tiles { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@container (min-width: 700px) { .eb-tiles { grid-template-columns: 1fr 1fr; gap: 40px; } .eb-tile, .eb-book { min-height: 88px; } }
@supports not (container-type: inline-size) { @media (min-width: 700px) { .eb-tiles { grid-template-columns: 1fr 1fr; gap: 40px; } } }
.eb-tile { display: flex; min-height: 76px; position: relative; }
.eb-tile-icon { flex: 0 0 90px; display: flex; align-items: center; justify-content: center; background: var(--eb-tile); color: var(--eb-coral); }
.eb-tile-icon svg { width: 24px; height: 24px; display: block; }
.eb-tile-field { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; background: var(--eb-field); padding: 12px 16px; }
.eb-value { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--eb-navy); }
.eb-sub { font-size: 12px; line-height: 1.4; color: var(--eb-hint-grey); margin-top: 2px; }
.eb-field-btn, .eb-select { display: block; width: 100%; margin: 0; padding: 4px 32px 4px 0; border: 0; border-radius: 0; background-color: transparent; text-align: left;
  color: var(--eb-navy); font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3e%3cpath fill='%232E3D62' d='M5 0l4 6H1zM5 16l4-6H1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 16px; }
.eb-field-btn:focus-visible, .eb-select:focus-visible, .eb-book:focus-visible, .eb-day:focus-visible, .eb-pill:focus-visible, .eb-nav:focus-visible, .eb-close:focus-visible, .eb-submit:focus-visible, .eb input:focus-visible, .eb textarea:focus-visible, .eb a:focus-visible { outline: 3px solid var(--eb-navy); outline-offset: 2px; }
.eb-book { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 76px; border: 0; border-radius: 0; background: var(--eb-coral); color: var(--eb-white); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 150ms linear; }
.eb-book:hover { background: var(--eb-coral-hover); }
.eb-book:disabled { background: var(--eb-field); color: var(--eb-hint-grey); cursor: default; }
/* Popovers: the calendar and the times, as the Zoho form's cards */
.eb-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; background: var(--eb-white); border-radius: 4px; box-shadow: 0 6px 24px rgba(46, 61, 98, 0.18); padding: 12px; width: 328px; max-width: calc(100vw - 32px); }
.eb-pop[hidden] { display: none; }
.eb-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.eb-cal-title { font-size: 14px; font-weight: 500; color: var(--eb-navy); }
.eb-nav { width: 32px; height: 32px; border: 1px solid transparent; border-radius: 3px; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--eb-navy); }
.eb-nav:hover { border-color: var(--eb-line); }
.eb-nav:disabled { color: var(--eb-hint); cursor: default; }
.eb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.eb-cal-row { display: contents; }
.eb-cal-row > [role="gridcell"] > .eb-day { width: 100%; }
.eb-dow { font-size: 12px; color: var(--eb-hint); text-align: center; padding: 4px 0; }
.eb-day { height: 36px; border: 0; border-radius: 3px; background: transparent; font-size: 13px; color: var(--eb-navy); cursor: pointer; }
.eb-day:hover:not(:disabled) { background: var(--eb-field); }
.eb-day:disabled { color: #A9ADB8; cursor: default; }
.eb-day[aria-pressed="true"] { background: #1F2430; color: var(--eb-white); border-radius: 2px; }
.eb-day.eb-today:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--eb-coral); }
.eb-group { font-size: 13px; color: var(--eb-slate); text-align: center; margin: 6px 0 8px; display: flex; align-items: center; gap: 10px; }
.eb-group::before, .eb-group::after { content: ""; flex: 1; height: 1px; background: var(--eb-line); }
.eb-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.eb-pill { height: 32px; border: 1px solid #5FA796; border-radius: 3px; background: var(--eb-white); font-size: 13px; color: var(--eb-navy); cursor: pointer; }
.eb-pill:hover { background: var(--eb-light); }
.eb-pill[aria-pressed="true"] { border: 2px solid var(--eb-navy); font-weight: 500; }
.eb-times { max-height: 300px; overflow: auto; padding: 4px; margin: -4px; }
.eb-empty { font-size: 14px; color: var(--eb-slate); padding: 8px 4px; }
/* The drawer: the Booking Summary and the details */
.eb-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000; }
.eb-backdrop[hidden] { display: none; }
.eb-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(625px, 100%); background: var(--eb-drawer); z-index: 1001; overflow: auto; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2); padding-bottom: 32px; }
.eb-drawer[hidden] { display: none; }
.eb-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--eb-white); border-bottom: 1px solid var(--eb-line); position: sticky; top: 0; z-index: 2; }
.eb-drawer-title { font-size: 17px; font-weight: 500; margin: 0; color: #1F2430; }
.eb-close { width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; color: var(--eb-navy); display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; }
.eb-close:hover { background: var(--eb-field); }
.eb-card { background: var(--eb-white); margin: 20px 28px 0; padding: 14px 16px; }
.eb-summary { display: flex; align-items: center; gap: 14px; }
.eb-badge { width: 50px; height: 50px; background: var(--eb-coral); color: var(--eb-navy); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; flex: 0 0 50px; }
.eb-summary-title { font-size: 15px; font-weight: 500; color: #1F2430; }
.eb-summary-sub { font-size: 12px; color: var(--eb-hint-grey); }
.eb-when { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 14px; color: #1F2430; }
.eb-when span { display: inline-flex; align-items: center; gap: 10px; }
.eb-when svg { width: 20px; height: 20px; color: var(--eb-coral); }
.eb-form-title { font-size: 15px; margin: 0 0 18px; font-weight: 400; color: #1F2430; }
.eb-form { max-width: 390px; margin: 0 auto; }
.eb-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 480px) { .eb-row-2 { grid-template-columns: 1fr 1fr; } }
.eb-fieldwrap { margin-bottom: 12px; }
.eb label { display: block; font-size: 14px; color: #1F2430; margin-bottom: 4px; }
.eb .eb-req { color: var(--eb-error); }
.eb input[type="text"], .eb input[type="email"], .eb input[type="tel"], .eb input[type="url"], .eb textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #8A8E99; border-radius: 3px; background: var(--eb-white); font: inherit; font-size: 14px; color: #1F2430; }
.eb textarea { min-height: 100px; resize: vertical; }
.eb input::placeholder, .eb textarea::placeholder { color: #6B7080; }
.eb input[aria-invalid="true"], .eb textarea[aria-invalid="true"] { border: 2px solid var(--eb-error); }
.eb-err { font-size: 13px; color: var(--eb-error); margin-top: 4px; }
.eb-err:empty { display: none; }
.eb-alert { background: #FFF2EC; border-left: 4px solid var(--eb-error); color: var(--eb-error); padding: 10px 12px; font-size: 14px; margin: 0 0 14px; }
.eb-alert:empty { display: none; }
.eb-submit { width: 100%; min-height: 48px; border: 0; border-radius: 3px; background: var(--eb-coral); color: var(--eb-white); font-size: 15px; font-weight: 500; cursor: pointer; margin-top: 8px; transition: background-color 150ms linear; }
.eb-submit:hover { background: var(--eb-coral-hover); }
.eb-submit:disabled { background: var(--eb-field); color: var(--eb-hint-grey); cursor: default; }
.eb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.eb-done { padding: 8px 0; }
.eb-done h3 { font-family: "Poppins", var(--eb-font, inherit); font-size: 22px; margin: 0 0 10px; color: var(--eb-navy); }
.eb-done p { font-size: 15px; color: #1F2430; margin: 0 0 10px; }
.eb-done a { color: var(--eb-navy); }
.eb-status { font-size: 14px; color: var(--eb-slate); margin-top: 10px; min-height: 1em; }
.eb-alt { font-size: 14px; color: var(--eb-slate); margin: 14px 0 0; }
.eb-alt a { color: var(--eb-navy); }
.eb-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 20; }
.eb-scrim[hidden] { display: none; }
.eb-status:empty { display: none; }
.eb-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .eb *, .eb *::before, .eb *::after { transition: none !important; animation: none !important; } }

.eb-done:focus { outline: none; }

/* Spacing as the Zoho embed sat on the site (Brent's "spacing is off", 2026-11-02 22:45 AST): the tile area 1,040 px wide and
   centred, about 100 px below the intro on desktop and 40 px on phones, flush to the top inside the popup. */
.eb { max-width: 1040px; margin: 40px auto 0; }
@media (min-width: 1025px) { .eb { margin-top: 100px; } }
[class*="ui-popup"] .eb { margin-top: 0; }
.eb-field-btn, .eb-select { padding-right: 22px; background-position: right 4px center; }
@container (max-width: 420px) { .eb-tile-field { padding: 12px 12px; } .eb-select { font-size: 13px; } }
/* ".eb button { font: inherit }" outranked the tile values; all tile text at the Zoho form's one size. */
.eb .eb-field-btn { font-size: 14px; font-weight: 500; line-height: 1.4; }
.eb .eb-book { font-size: 14px; font-weight: 500; padding: 0; }
@container (max-width: 420px) { .eb .eb-field-btn { font-size: 14px; } }
/* The popup, as the Zoho embed sat in it: one centred column about 608 px wide, a little below the top. */
[class*="ui-popup"] .eb { max-width: 608px; margin: 56px auto 24px; padding: 0 16px; }

/* ---- The Affirm theme's form look (Brent's ask of 2026-11-03, reference affirm.uicore.co/pages/contact/) ----
   Fields: no border, fill #F8F8F8, radius 10px, about 58px tall, text 16-17px weight 500; labels above in 12px bold
   capitals with 1px letter-spacing in grey; buttons radius 10px, bold 17px; focus darkens the fill (and keeps a navy
   ring for keyboard users). Colours stay Essential's: navy text, coral accents and buttons. */
.eb { --eb-fill: #F8F8F8; --eb-fill-focus: #EBEBEB; --eb-cap: #6B7080; --eb-radius: 10px; }
.eb-tiles { gap: 22px; }
@container (min-width: 700px) { .eb-tiles { gap: 26px 40px; } }
.eb-cell { display: flex; flex-direction: column; min-width: 0; }
.eb-cap { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--eb-cap); line-height: 1.6; margin-bottom: 10px; }
.eb-cell-btn { justify-content: flex-end; }
@container (max-width: 699px) { .eb-cell-btn .eb-cap { display: none; } .eb-cell-btn { margin-top: 4px; } }
.eb .eb-tile { min-height: 58px; border-radius: var(--eb-radius); background: var(--eb-fill); transition: background-color 150ms linear; }
@container (min-width: 700px) { .eb .eb-tile, .eb .eb-book { min-height: 58px; } }
.eb .eb-tile:focus-within { background: var(--eb-fill-focus); }
.eb .eb-tile-icon { flex: 0 0 52px; background: transparent; border-radius: var(--eb-radius) 0 0 var(--eb-radius); }
.eb .eb-tile-icon svg { width: 21px; height: 21px; }
.eb .eb-tile-field { background: transparent; padding: 9px 15px 9px 0; border-radius: 0 var(--eb-radius) var(--eb-radius) 0; }
.eb .eb-value, .eb .eb-field-btn, .eb .eb-select { font-size: 16px; font-weight: 500; color: var(--eb-navy); }
.eb .eb-sub { font-size: 12px; }
.eb .eb-tile-btn { background: transparent; }
.eb .eb-book { min-height: 58px; border-radius: var(--eb-radius); font-size: 17px; font-weight: 700; }
.eb .eb-pop { border-radius: var(--eb-radius); box-shadow: 0 12px 40px rgba(46, 61, 98, 0.16); top: calc(100% + 8px); }
.eb .eb-day { border-radius: 8px; }
.eb .eb-day[aria-pressed="true"] { background: var(--eb-navy); border-radius: 8px; }
.eb .eb-pill { border: 0; border-radius: 8px; background: var(--eb-fill); height: 38px; font-weight: 500; }
.eb .eb-pill:hover { background: var(--eb-fill-focus); }
.eb .eb-pill[aria-pressed="true"] { background: var(--eb-navy); color: var(--eb-white); border: 0; }
/* The drawer */
.eb .eb-drawer { background: #F6F6F8; }
.eb .eb-card { border-radius: var(--eb-radius); }
.eb .eb-badge { border-radius: 8px; }
.eb label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--eb-cap); margin-bottom: 10px; }
.eb label .eb-req { color: var(--eb-cap); }
.eb .eb-form-title { font-size: 17px; font-weight: 500; color: var(--eb-navy); }
.eb input[type="text"], .eb input[type="email"], .eb input[type="tel"], .eb input[type="url"], .eb textarea { border: 0; border-radius: var(--eb-radius); background: var(--eb-fill); min-height: 58px; padding: 9px 15px; font-size: 16px; font-weight: 500; color: #1F2430; transition: background-color 150ms linear; }
.eb textarea { min-height: 166px; }
.eb input:focus, .eb textarea:focus { background: var(--eb-fill-focus); }
.eb input[aria-invalid="true"], .eb textarea[aria-invalid="true"] { border: 0; box-shadow: inset 0 0 0 2px var(--eb-error); }
.eb .eb-fieldwrap { margin-bottom: 22px; }
.eb .eb-submit { width: auto; min-height: 61px; padding: 22px 40px; border-radius: var(--eb-radius); font-size: 17px; font-weight: 700; line-height: 17px; margin-top: 4px; }
.eb .eb-row { gap: 0 20px; }
.eb .eb-form { max-width: none; margin: 0; }
.eb .eb-card { padding: 18px 20px; }
@container (min-width: 480px) { .eb .eb-value, .eb .eb-field-btn, .eb .eb-select { font-size: 17px; } }
.eb input[type="text"], .eb input[type="email"], .eb input[type="tel"], .eb input[type="url"], .eb textarea { font-size: 17px; }

/* ---- The site's own button (Brent's ask of 2026-11-03): the coral pill used for "Book a 15-minute strategy call"
   across essentialagency.ca, read from the live page: radius 50px, Roboto 15px bold, 24px by 50px padding, white text,
   hover #CD5C36. ---- */
.eb .eb-book, .eb .eb-submit { border-radius: 50px; font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 15px; letter-spacing: normal; padding: 24px 50px; min-height: 63px; width: auto; max-width: 100%; white-space: normal; color: var(--eb-white); background: var(--eb-coral); transition: background-color 150ms linear; }
.eb .eb-book:hover, .eb .eb-submit:hover { background: #CD5C36; }
.eb .eb-book:disabled, .eb .eb-submit:disabled { background: var(--eb-field); color: var(--eb-hint-grey); }
.eb .eb-tile-btn { justify-content: flex-start; align-items: center; min-height: 58px; }
@container (max-width: 699px) { .eb .eb-book { width: 100%; } }
@container (max-width: 360px) { .eb .eb-book, .eb .eb-submit { padding: 22px 24px; } }
@container (max-width: 300px) { .eb .eb-select { font-size: 14px; } }

/* The popup's coral panel already lists the phone and an email (Brent's "hide in popup", 2026-11-03). */
[class*="ui-popup"] .eb-alt { display: none; }

/* The booking page's card (an inner section with the class eb-card-host), laid out as the popup: one centred column, no contact line (2026-11-03). */
.eb-card-host .eb { max-width: 608px; margin: 56px auto 24px; padding: 0 16px; }
.eb-card-host .eb-alt { display: none; }
@container (min-width: 420px) { .eb-card-host .eb .eb-book, [class*="ui-popup"] .eb .eb-book { width: auto; } }
@media (max-width: 575px) { .eb-card-host .eb { padding: 0 4px; margin-top: 32px; } }
@container (max-width: 360px) { .eb .eb-select { font-size: 15px; } }
@container (max-width: 300px) { .eb .eb-select { font-size: 14px; } }

/* The service tile on one line, the same height as the others (2026-11-03). */
.eb .eb-tile-service .eb-tile-field { flex-direction: row; flex-wrap: wrap; align-items: baseline; align-content: center; column-gap: 8px; }
.eb .eb-tile-service .eb-sub { margin-top: 0; font-size: 13px; }
.eb .eb-tile-service .eb-tile-field { justify-content: flex-start; }
@container (max-width: 400px) { .eb .eb-tile-service .eb-value { font-size: 15px; } .eb .eb-tile-service .eb-sub { font-size: 12px; } .eb .eb-tile-service .eb-tile-field { column-gap: 6px; } }