/* =============================================================================
   Services page, second edition. Built 2026-10-09 from Adam Wood's Figma
   prototype ("New Services Page 10-5-26 Revisions"), which Escalate's team had
   already reviewed.

   Loaded only on a page whose content carries an sv2- class (functions.php),
   and inside the editor canvas, so the editing view matches the page.

   Rules use Services-specific classes; variables live on the sv2-brand section
   wrappers used by the approved content. The header uses sv2-header-crop.
   The colours the
   prototype added to the site palette (coral, the five panel tints, night) are
   held as --sv2- variables in one place. Two prototype choices were changed to
   match CONVENTIONS.md: counters start at 1 with no leading zero, and no orange
   or peach type sits on the brand blue (the closing panel's accent line).
   ========================================================================== */

.sv2-brand{
  --sv2-coral:#F0523D;
  --sv2-peach:#FFF0E7;
  --sv2-sky:#EAF2FF;
  --sv2-yellow:#FFF3BD;
  --sv2-mint:#DFF7ED;
  --sv2-night:#17204B;
  --sv2-green:#35B17D;
  --sv2-shadow:0 24px 70px rgba(19,31,104,.15);
}

/* ---------------------------------------------------------------- shared -- */
.sv2-eyebrow{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;line-height:1;color:var(--blue);margin:0 0 20px}
.sv2-section{padding-block:13px}
.sv2-section > .esc-wrap{max-width:1220px}

/* -------------------------------------------------- hero, with the phone -- */
.sv2-hero{position:relative;overflow:hidden;background:var(--sv2-sky);
  padding:clamp(72px,9vw,120px) 0 clamp(64px,7vw,96px)}
.sv2-hero::before,.sv2-hero::after{content:"";position:absolute;border-radius:50%;
  filter:blur(4px);pointer-events:none}
.sv2-hero::before{width:620px;height:620px;top:-240px;right:-180px;background:#D8DEFF;opacity:.55}
.sv2-hero::after{width:500px;height:500px;bottom:-260px;left:43%;background:#FFB197;opacity:.22}
.sv2-hero > .esc-wrap{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) 440px;gap:40px;align-items:center}
.sv2-hero h2{font-family:var(--display);font-size:clamp(48px,5.3vw,78px);line-height:.92;
  letter-spacing:-.05em;color:var(--blue);margin:0}
.sv2-hero h2 em,.sv2-intro h2 em{font-weight:inherit}
.sv2-hero__lede{color:var(--muted);font-size:18px;line-height:1.65;max-width:34em;margin:32px 0 0}
.sv2-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:34px}
.sv2-hero__actions .wp-block-buttons{margin:0}
.sv2-textlink{margin:0;font-weight:600;font-size:15px}
.sv2-textlink a{color:var(--ink);text-decoration:none}
.sv2-textlink a:hover{color:var(--blue)}
.sv2-proof{display:flex;flex-wrap:wrap;gap:38px;margin-top:64px}
.sv2-proof > div > *{margin:0}
.sv2-proof__n{font-family:var(--display);font-size:28px;line-height:1;letter-spacing:-.02em;color:var(--blue)}
.sv2-proof__l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px !important}

/* The library's conversation block was drawn for a dark band. On this light
   one the tabs and chips need dark ink, and the phone loses its satellites. */
.sv2-hero .esc-orbit{min-height:0}
.sv2-hero .esc-tabs{max-width:none}
.sv2-hero .esc-tabs button{background:#fff;border-color:var(--line);color:var(--muted)}
.sv2-hero .esc-tabs button:hover{color:var(--ink)}
.sv2-hero .esc-tabs button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.sv2-hero .esc-chip{background:var(--blue);color:#fff}
.sv2-hero .esc-chip:nth-child(2){background:#FFB197;color:var(--ink)}
.sv2-hero .esc-phone{box-shadow:0 0 0 1px rgba(120,124,142,.5),0 35px 70px rgba(18,28,90,.25)}

/* ------------------------------------------------------- centred intro -- */
.sv2-intro{text-align:center;padding:clamp(80px,9vw,108px) 0 clamp(48px,6vw,70px)}
.sv2-intro > .esc-wrap{max-width:820px}
.sv2-intro .sv2-eyebrow{margin-bottom:20px}
.sv2-intro h2{font-family:var(--display);font-size:clamp(46px,6vw,78px);line-height:.96;
  letter-spacing:-.045em;margin:0}
.sv2-intro p:not(.sv2-eyebrow){color:var(--muted);font-size:17px;line-height:1.7;max-width:610px;margin:26px auto 0}

/* -------------------------------------------------------------- panels -- */
.sv2-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:34px;
  overflow:hidden;min-height:650px;background:var(--sv2-peach)}
.sv2-panel--peach{background:var(--sv2-peach)}
.sv2-panel--yellow{background:var(--sv2-yellow)}
.sv2-panel--night{background:var(--sv2-night);color:#fff}
.sv2-panel--sky{background:var(--sv2-sky)}
.sv2-panel--mint{background:var(--sv2-mint)}
.sv2-panel__copy{display:flex;flex-direction:column;justify-content:center;padding:72px 50px 72px 72px}
.sv2-panel__copy > *{margin-block:0}
.sv2-panel__copy > .sv2-eyebrow{margin-bottom:20px}
.sv2-panel__copy h2{font-family:var(--display);font-size:clamp(42px,4.3vw,64px);line-height:.94;
  letter-spacing:-.04em;max-width:500px;color:inherit}
.sv2-panel__sub{font-family:var(--display);font-size:23px;font-weight:600;line-height:1.2;
  max-width:480px;margin-top:24px !important}
.sv2-panel__body{color:var(--muted);font-size:15px;line-height:1.7;max-width:500px;margin-top:18px !important}
.sv2-benefit{position:relative;max-width:500px;margin-top:30px !important;padding:22px 0 0 34px;
  border-top:1px solid rgba(22,22,29,.12);font-size:13px;font-weight:600;line-height:1.5}
.sv2-benefit::before{content:"\2713";position:absolute;left:0;top:22px;width:22px;height:22px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.sv2-panel__media{display:grid;place-items:center;min-width:0;padding:48px}
.sv2-panel__extra{grid-column:1 / -1}
.sv2-panel--reverse .sv2-panel__copy{order:2;padding:72px 72px 72px 50px}
.sv2-panel--reverse .sv2-panel__media{order:1}
.sv2-panel--reverse .sv2-panel__extra{order:3}
.sv2-panel--night .sv2-eyebrow{color:#9EABFF}
.sv2-panel--night .sv2-panel__body{color:rgba(255,255,255,.68)}
.sv2-panel--night .sv2-benefit{border-color:rgba(255,255,255,.15)}
.sv2-panel--night .sv2-benefit::before{background:#fff;color:var(--sv2-night)}

.sv2-visual{position:relative;width:100%;height:100%;min-height:490px;border-radius:26px}
.sv2-visual > *{margin:0}

/* 1. The phone on coral */
.sv2-visual--text{background:var(--sv2-coral);overflow:hidden}
.sv2-visual--text::before{content:"";position:absolute;top:-100px;right:-110px;width:340px;height:340px;
  border-radius:50%;border:55px solid rgba(255,255,255,.15)}
.sv2-phone{position:absolute;top:52px;left:50%;transform:translateX(-50%) rotate(-2deg);width:300px;height:540px;
  border:9px solid var(--ink);border-radius:36px;background:#F5F6FA;padding:20px 16px 16px;overflow:hidden;
  box-shadow:0 28px 60px rgba(84,26,17,.25);color:var(--ink)}
.sv2-phone > *{margin:0}
.sv2-phone__top{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:44px;
  padding:6px 0 14px 66px;border-bottom:1px solid var(--line)}
.sv2-phone__top::before{content:"\2039";position:absolute;left:0;top:2px;color:var(--blue);font-size:25px;line-height:1.3}
.sv2-phone__top::after{content:"E";position:absolute;left:22px;top:6px;width:31px;height:31px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.sv2-phone__top > *{margin:0}
.sv2-phone__name{font-size:11px;font-weight:700;line-height:1.3}
.sv2-phone__role{font-size:8px;color:var(--muted)}
.sv2-phone__messages{display:flex;flex-direction:column;gap:9px;padding-top:32px}
.sv2-phone__messages > *{margin:0}
.sv2-msg{max-width:80%;padding:11px 13px;border-radius:16px;font-size:10px;line-height:1.35}
.sv2-msg--in{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.sv2-msg--out{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.sv2-msg-time{align-self:flex-end;font-size:7px;color:var(--muted)}
.sv2-phone__input{position:absolute;left:16px;right:16px;bottom:18px;margin:0;padding:8px 40px 8px 13px;
  border:1px solid var(--line);border-radius:20px;background:#fff;color:#9496A0;font-size:9px}
.sv2-phone__input::after{content:"\2191";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-size:10px;display:grid;place-items:center}

/* The small white cards that float over a visual */
.sv2-float{position:absolute;z-index:2;background:#fff;color:var(--ink);border-radius:13px;box-shadow:var(--sv2-shadow);
  padding:13px 16px 13px 56px;min-height:56px;display:flex;flex-direction:column;justify-content:center}
.sv2-float > *{margin:0}
.sv2-float::before{content:"\2713";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  border-radius:50%;background:var(--sv2-green);color:#fff;font-weight:700;display:grid;place-items:center}
.sv2-float--blue::before{background:var(--blue)}
.sv2-float--app::before{content:"\2301"}
/* Card text at a readable size on phones: the lines under the titles were 8px
   (stress test and Codex, 15 Oct 2026). */
.sv2-float__t{font-size:13px;font-weight:700;line-height:1.3}
.sv2-float__s{font-size:12px;line-height:1.35;color:var(--muted);margin-top:2px !important}
.sv2-visual--text .sv2-float{right:17px;bottom:28px}

/* 2. The support tiles */
.sv2-visual--supports{background:#FFF9DF;padding:25px;overflow:hidden}
.sv2-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sv2-tile{position:relative;aspect-ratio:1;border-radius:15px;padding:15px;background:#fff;color:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end}
.sv2-tile > p{margin:0;font-size:11px;font-weight:700;line-height:1.25}
.sv2-tile::before{position:absolute;top:15px;left:15px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.75);display:grid;place-items:center;font-size:14px;color:var(--ink)}
.sv2-tile:nth-child(1)::before{content:"\2197"}
.sv2-tile:nth-child(2)::before{content:"\25C7"}
.sv2-tile:nth-child(3)::before{content:"\25CB"}
.sv2-tile:nth-child(4)::before{content:"\FF0B"}
.sv2-tile:nth-child(5)::before{content:"\25C7"}
.sv2-tile:nth-child(6)::before{content:"\263C"}
.sv2-tile:nth-child(7)::before{content:"\26A1"}
.sv2-tile:nth-child(8)::before{content:"\2713"}
.sv2-tile--coral{background:#FF9D88}
.sv2-tile--blue{background:var(--blue);color:#fff}
.sv2-tile--blue::before{background:rgba(255,255,255,.25);color:#fff}
.sv2-tile--yellow{background:#FFD865}
.sv2-tile--cream{background:var(--cream)}
.sv2-total{position:absolute;right:25px;bottom:25px;width:calc((100% - 50px) * .6667 - 3px);height:calc((100% - 50px) / 3 - 7px);
  border-radius:15px;background:var(--ink);color:#fff;display:flex;align-items:center;gap:14px;padding:18px}
.sv2-total > *{margin:0}
.sv2-total__n{font-family:var(--display);font-size:44px;line-height:1}
.sv2-total__l{font-size:10px;line-height:1.4;max-width:12ch}

/* Branded page fixes, 11 Oct 2026 (Codex review): the tiles sit in a 4 by 2
   grid with the dark card as its own row, so nothing is hidden under it and no
   label clips on a phone. */
/* A 3 by 3 grid: eight tiles and the dark card as the ninth square, so nothing
   is hidden under it and no label breaks (four across split "Transportation"). */
.sv2-brand .sv2-visual--supports{height:auto;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sv2-brand .sv2-tiles{display:contents}
.sv2-brand .sv2-tile{aspect-ratio:1;min-height:0;padding:12px}
.sv2-brand .sv2-tile::before{top:12px;left:12px}
.sv2-brand .sv2-tile > p{font-size:10.5px}
.sv2-brand .sv2-total{position:static;width:auto;height:auto;aspect-ratio:1;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;gap:6px;padding:12px}
.sv2-brand .sv2-total__n{font-size:34px}
.sv2-brand .sv2-total__l{font-size:10px;max-width:none}
/* The heading over the six cards is a styled label (headings stop at h3) */
.sv2-featured__title{font-family:var(--display);font-size:32px;line-height:1;letter-spacing:-.03em;margin:0 0 30px !important;font-weight:700;color:var(--ink)}
/* Dashboard text at a readable size, darker green for contrast */
.sv2-brand .sv2-dash__kicker,.sv2-brand .sv2-stat__l,.sv2-brand .sv2-stat__d{font-size:9.5px}
.sv2-brand .sv2-chart__t{font-size:10.5px}
.sv2-brand .sv2-stat__d{color:#1B7A55}
/* Zilla Slab is loaded at 500, 600 and 700 only. Display figures that set no
   weight fell to 500 and read off-brand beside the home page's 700 stat cards
   (Rene, 12 Oct). Every display figure on the page now sets the site's weight. */
.sv2-brand .sv2-proof__n,.sv2-brand .sv2-total__n,.sv2-brand .sv2-stat__n{font-weight:700}
.sv2-brand .sv2-proof__n{font-size:30px;letter-spacing:-.01em}
.sv2-brand .sv2-dash__title{font-weight:600}
/* The ghost button on the pale blue band: white, as the site's ghost buttons
   read on the home page (transparent made it look washed out). */
.sv2-hero .wp-block-button.is-style-esc-ghost > .wp-block-button__link{background:#fff}
/* The Pause control on the light hero */
.sv2-hero .esc-tabs .esc-tabs__pause{border-color:var(--line-strong);color:var(--muted);background:none}
@media (max-width:500px){
  .sv2-brand .sv2-visual--supports{grid-template-columns:repeat(2,1fr)}
  .sv2-brand .sv2-tile{aspect-ratio:auto;min-height:110px}
  .sv2-brand .sv2-total{grid-column:1 / -1;aspect-ratio:auto;flex-direction:row;align-items:center;gap:14px;padding:18px}
  .sv2-brand .sv2-tile > p{font-size:12px}
  .sv2-brand .sv2-dash{width:100%;border-radius:16px;grid-template-columns:52px 1fr}
  .sv2-brand .sv2-visual--dash{padding:28px 14px 0}
  .sv2-brand .sv2-stats{grid-template-columns:1fr 1fr}
  .sv2-brand .sv2-stat:nth-child(3){display:none}
  /* The two number boxes read tall on phones, 98 by 118 (Rene, 15 Oct 2026):
     tighter lines and padding, then square. */
  .sv2-brand .sv2-dash{grid-template-columns:52px minmax(0,1fr)}
  .sv2-brand .sv2-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sv2-brand .sv2-stat{aspect-ratio:1;min-width:0;padding:10px}
  .sv2-brand .sv2-stat__l,.sv2-brand .sv2-stat__d{line-height:1.25;overflow-wrap:anywhere}
  .sv2-brand .sv2-stat__n{line-height:1.1;margin-top:4px !important}
}

/* The six cards under the tiles */
.sv2-featured{margin:0 72px;padding:40px 0 54px;border-top:1px solid rgba(22,22,29,.14)}
.sv2-featured > .sv2-eyebrow{margin-bottom:10px}
.sv2-featured > h3{font-family:var(--display);font-size:32px;line-height:1;letter-spacing:-.03em;margin:0 0 30px}
.sv2-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sv2-card{display:flex;flex-direction:column;align-items:flex-start;min-height:205px;padding:22px;border-radius:18px;
  background:rgba(255,255,255,.76);border:1px solid rgba(22,22,29,.08)}
.sv2-card > *{margin:0}
.sv2-card__n{display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:36px;padding:0 12px;
  border-radius:12px;font-size:11px;font-weight:700;background:#CBD5F4;color:#5868B8}
.sv2-card:nth-child(3n+2) .sv2-card__n{background:#F2D2B5;color:#A66331}
.sv2-card:nth-child(3n) .sv2-card__n{background:#BFE0D2;color:#397B63}
.sv2-card h3{font-family:var(--display);font-size:20px;line-height:1.05;margin:auto 0 8px}
.sv2-card p:last-child{color:var(--muted);font-size:12px;line-height:1.55}

/* 3 and 4. The photographs */
.sv2-visual--photo{overflow:hidden}
.sv2-visual--photo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(transparent 48%,rgba(7,10,30,.62))}
.sv2-visual--photo .wp-block-image{position:absolute;inset:0;margin:0}
.sv2-visual--photo .wp-block-image img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.sv2-avail{position:absolute;z-index:2;top:28px;left:28px;right:28px;display:grid;
  grid-template-columns:auto 1fr auto;column-gap:11px;align-items:center;padding:15px;border-radius:14px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink)}
.sv2-avail::before{content:"";grid-row:1 / 3;width:10px;height:10px;border-radius:50%;background:#2EB37E;
  box-shadow:0 0 0 5px rgba(46,179,126,.14)}
.sv2-avail > *{margin:0}
.sv2-avail__t{font-size:13px;font-weight:700;grid-column:2}
.sv2-avail__s{font-size:12px;line-height:1.35;color:var(--muted);grid-column:2}
.sv2-avail__time{grid-column:3;grid-row:1 / 3;font-family:var(--display);font-size:20px;font-weight:700;color:var(--blue)}
.sv2-caption{position:absolute;z-index:2;left:30px;right:30px;bottom:30px;font-family:var(--display);
  font-size:27px;font-weight:600;color:#fff;line-height:1.15}
.sv2-visual--photo .sv2-float--one{top:30px;right:24px}
.sv2-visual--photo .sv2-float--two{bottom:30px;left:24px}
.sv2-pill{position:absolute;z-index:2;right:25px;bottom:30px;padding:11px 14px 11px 25px;border-radius:999px;
  background:rgba(18,25,64,.62);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:10px;font-weight:600;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sv2-pill::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:6px;height:6px;
  border-radius:50%;background:#6FE1AC}

/* The app row under panel 4 */
.sv2-apps{display:flex;align-items:center;justify-content:space-between;gap:36px;margin:0 72px;
  padding:32px 0 36px;border-top:1px solid rgba(22,22,29,.12)}
.sv2-apps > *{margin:0}
.sv2-apps__title > *{margin:0}
.sv2-apps__title .sv2-eyebrow{margin-bottom:10px}
.sv2-apps__title h3{font-family:var(--display);font-size:31px;line-height:1;letter-spacing:-.03em}
.sv2-apps__options{display:flex;align-items:center;gap:28px}
.sv2-apps__options > *{margin:0}
.sv2-apps__options .wp-block-image img{display:block;height:52px;width:auto}
.sv2-apps__options .sv2-badge--google img{height:78px;margin:-13px}
/* The web browser option drawn as a badge beside the App Store and Google Play
   badges: black, rounded, icon then two lines, the same height (Adam Wood, 13 Oct
   2026). It does not link anywhere, on purpose. */
.sv2-browser{display:grid;grid-template-columns:auto auto;align-content:center;column-gap:10px;
  height:52px;box-sizing:border-box;padding:0 16px 0 12px;border-radius:9px;background:#000;
  border:1px solid #A6A6A6;color:#fff}
.sv2-browser > *{margin:0}
.sv2-browser > .wp-block-image{grid-row:1 / span 2;align-self:center}
.sv2-browser .wp-block-image img{height:30px;width:30px;object-fit:contain;filter:invert(1)}
.sv2-browser p{font-size:11px;font-weight:500;line-height:1.15;color:#fff}
.sv2-browser .sv2-browser__n{font-size:19px;font-weight:600;letter-spacing:-.01em}

/* 5. The dashboard */
.sv2-visual--dash{background:var(--blue);padding:55px 0 0 35px;overflow:hidden;min-height:490px}
.sv2-dash{display:grid;grid-template-columns:90px 1fr;width:calc(100% + 50px);height:435px;border-radius:16px 0 0 0;
  background:#fff;color:var(--ink);overflow:hidden;box-shadow:0 25px 70px rgba(9,24,115,.4)}
.sv2-dash > *{margin:0}
.sv2-dash__nav{border-right:1px solid var(--line);padding:22px 14px}
.sv2-dash__nav > *{margin:0}
.sv2-dash__brand{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:-.02em}
.sv2-dash__nav::after{content:"";display:block;width:55px;height:7px;margin-top:38px;border-radius:4px;background:#B6C0FF;
  box-shadow:0 19px 0 var(--line),0 38px 0 var(--line)}
.sv2-dash__body{padding:28px 24px}
.sv2-dash__body > *{margin:0}
.sv2-dash__kicker{font-size:7px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.sv2-dash__title{font-family:var(--display);font-size:19px;margin-top:5px !important}
.sv2-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px !important}
.sv2-stat{border:1px solid var(--line);border-radius:8px;padding:12px}
.sv2-stat > *{margin:0}
.sv2-stat__l{font-size:7px;color:var(--muted)}
.sv2-stat__n{font-family:var(--display);font-size:22px;margin-top:6px !important}
.sv2-stat__d{font-size:7px;color:#25966B;margin-top:3px !important}
.sv2-chart{border:1px solid var(--line);border-radius:8px;height:190px;margin-top:9px !important;padding:15px}
.sv2-chart > *{margin:0}
.sv2-chart__t{font-size:8px;font-weight:700}
.sv2-bars{display:flex;align-items:flex-end;gap:11px;height:112px;margin-top:10px !important;border-bottom:1px solid var(--line)}
.sv2-bars > *{margin:0;flex:none;width:17px;border-radius:3px 3px 0 0;background:var(--blue);opacity:.75}
.sv2-bars > :nth-child(1){height:38%}.sv2-bars > :nth-child(2){height:52%}.sv2-bars > :nth-child(3){height:44%}
.sv2-bars > :nth-child(4){height:63%}.sv2-bars > :nth-child(5){height:56%}.sv2-bars > :nth-child(6){height:72%}
.sv2-bars > :nth-child(7){height:88%;opacity:1}
.sv2-visual--dash .sv2-float{right:18px;bottom:18px}

/* 6. Integrations, the existing grid inside a panel */
.sv2-intpanel{background:var(--mist);border-radius:34px;padding:76px 72px 54px}
.sv2-intpanel .esc-integrations__grid .wp-block-image{background:#fff}
.sv2-intpanel .esc-head{margin:0;text-align:left;max-width:760px}
.sv2-intpanel .esc-head h2{font-family:var(--display);font-size:clamp(42px,5vw,67px);line-height:.98;letter-spacing:-.04em}

/* ---------------------------------------------------------- closing panel -- */
.sv2-closing{position:relative;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
  gap:40px;min-height:420px;padding:74px;border-radius:34px;background:var(--blue);color:#fff}
.sv2-closing::before{content:"";position:absolute;top:-240px;right:-120px;width:430px;height:430px;border-radius:50%;
  border:70px solid rgba(255,255,255,.12);pointer-events:none}
.sv2-closing > *{position:relative;z-index:1;margin:0}
.sv2-closing > div > *{margin:0}
.sv2-closing .sv2-eyebrow{color:#BAC4FF}
.sv2-closing h2{font-family:var(--display);font-size:clamp(46px,6vw,78px);line-height:.96;letter-spacing:-.045em;color:#fff}
.sv2-closing__action{justify-self:end;max-width:380px}
.sv2-closing__action p{color:rgba(255,255,255,.78);font-size:16px;line-height:1.6;margin:0 0 26px}

/* ------------------------------------------------------------- responsive -- */
@media (max-width:1050px){
  .sv2-hero > .esc-wrap{grid-template-columns:1fr;gap:56px}
  .sv2-panel{grid-template-columns:1fr 1fr;min-height:610px}
  .sv2-panel__copy,.sv2-panel--reverse .sv2-panel__copy{padding:55px 34px}
  .sv2-panel__media{padding:34px}
  .sv2-featured,.sv2-apps{margin-inline:34px}
  .sv2-pill{display:none}
}
@media (max-width:780px){
  .sv2-proof{gap:24px;margin-top:44px}
  .sv2-panel{grid-template-columns:1fr;min-height:0;border-radius:26px}
  .sv2-panel--reverse .sv2-panel__copy,.sv2-panel--reverse .sv2-panel__media{order:initial}
  .sv2-panel__copy,.sv2-panel--reverse .sv2-panel__copy{padding:50px 28px 30px}
  .sv2-panel__copy h2{font-size:46px}
  .sv2-panel__sub{font-size:20px}
  .sv2-panel__media{padding:22px}
  .sv2-visual{min-height:470px}
  .sv2-featured,.sv2-apps{margin-inline:28px}
  .sv2-cards{grid-template-columns:repeat(2,1fr)}
  .sv2-apps{flex-direction:column;align-items:flex-start}
  .sv2-apps__options{flex-wrap:wrap;gap:16px}
  .sv2-intpanel{border-radius:26px;padding:54px 28px 38px}
  .sv2-closing{grid-template-columns:1fr;border-radius:26px;padding:60px 28px}
  .sv2-closing__action{justify-self:start}
}
@media (max-width:500px){
  .sv2-hero h2{font-size:56px}
  .sv2-panel__copy h2{font-size:40px}
  .sv2-panel__media{padding:16px}
  .sv2-visual{min-height:430px}
  .sv2-phone{width:258px;top:35px}
  .sv2-visual--text .sv2-float{right:8px}
  .sv2-cards{grid-template-columns:1fr}
  .sv2-card{min-height:170px}
  .sv2-visual--supports{padding:14px}
  .sv2-tiles{gap:7px}
  .sv2-tile{padding:10px}
  .sv2-tile::before{top:10px;left:10px}
  .sv2-total{right:14px;bottom:14px;width:calc((100% - 28px) * .6667 - 2px);height:calc((100% - 28px) / 3 - 5px);padding:12px}
  .sv2-total__n{font-size:34px}
  .sv2-avail{top:14px;left:14px;right:14px}
  .sv2-caption{font-size:22px;left:20px;bottom:20px}
  .sv2-visual--photo .sv2-float--one{top:14px;right:12px}
  .sv2-visual--photo .sv2-float--two{bottom:14px;left:12px}
  .sv2-visual--dash{padding:38px 0 0 18px}
  .sv2-dash{grid-template-columns:60px 1fr}
  .sv2-dash__body{padding:24px 13px}
  .sv2-bars{gap:7px}
  .sv2-bars > *{width:12px}
  .sv2-closing h2{font-size:48px}
}

/* =============================================================================
   Adam's layout in Escalate's own clothes (sv2-brand), 9 Oct 2026.
   Rene: rebuild the page exactly as Adam built it, with our elements. Every
   section of the faithful rebuild carries sv2-brand; these rules swap his
   palette, accents and photo frames for the site's. Nothing structural moves.
   ========================================================================== */
.sv2-brand{--sv2-coral:var(--blue)}

/* Hero: a plain mist band, ink headline with the accent line in blue (as the
   home page headline does it), site buttons, tabs and chips in brand colours. */
.sv2-brand.sv2-hero{background:var(--mist)}
.sv2-brand.sv2-hero::before,.sv2-brand.sv2-hero::after{display:none}
.sv2-brand.sv2-hero h2{color:var(--ink);font-size:clamp(42px,4.4vw,64px);line-height:1;letter-spacing:-.035em}
.sv2-brand .sv2-hero__actions .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.9rem}
.sv2-brand .sv2-proof{gap:16px}
.sv2-brand .sv2-proof > div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;min-width:150px}
/* Three equal boxes in one row, labels wrap inside them; the longer "Of ways to
   keep a shift on track" label pushed the third box onto its own row (15 Oct 2026). */
.sv2-brand .sv2-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.sv2-brand .sv2-proof > div{min-width:0}
@media (max-width:600px){.sv2-brand .sv2-proof{grid-template-columns:1fr}}
.sv2-brand .sv2-proof__l{letter-spacing:.06em}
.sv2-brand.sv2-hero .esc-chip:nth-child(2){background:var(--orange);color:var(--ink)} /* exact brand orange, ink label (CONVENTIONS) */
/* The phone in Adam's flat style, not the home page's silver handset, so the
   two pages never show the same phone (Rene, 9 Oct). */
.sv2-brand.sv2-hero .esc-phone{background:var(--ink);padding:9px;border-radius:42px;width:290px;
  box-shadow:0 35px 70px rgba(18,28,90,.22)}
.sv2-brand.sv2-hero .esc-phone .vol,.sv2-brand.sv2-hero .esc-phone .pwr{display:none}
.sv2-brand.sv2-hero .esc-screen{border-radius:33px;background:#F4F5F9}
.sv2-brand.sv2-hero .esc-notch{top:8px;width:76px;height:20px;background:var(--ink)}
.sv2-brand.sv2-hero .esc-bar{padding-top:38px}
/* No decorative rings: Adam's prototype drew them, the site never uses them */
.sv2-brand .sv2-visual--text::before,.sv2-brand .sv2-closing::before{display:none}

/* Intro and the section headings: the site's display weight and tracking */
.sv2-brand.sv2-intro h2,.sv2-brand .sv2-panel__copy h2,.sv2-brand .sv2-intpanel .esc-head h2{
  letter-spacing:-.025em;line-height:1.04}
.sv2-brand.sv2-intro .esc-eyebrow{justify-content:center}
.sv2-brand .sv2-panel__copy > .esc-eyebrow{margin-bottom:1rem}
.sv2-brand .sv2-intpanel > .esc-eyebrow{margin-bottom:1rem}

/* Panels: the site's radius and palette */
.sv2-brand .sv2-panel,.sv2-brand .sv2-intpanel{border-radius:var(--r-lg)}
.sv2-panel--mist{background:var(--mist)}
.sv2-panel--cream{background:var(--cream)}
.sv2-panel--ink{background:#1F2229;color:#fff}
/* The Human panel on the brand blue, white type as on the site's blue bands */
.sv2-panel--blue{background:var(--blue);color:#fff}
.sv2-panel--blue .esc-eyebrow{color:#fff}
.sv2-panel--blue .esc-eyebrow::before{background:var(--orange)}
.sv2-panel--blue .sv2-panel__body{color:rgba(255,255,255,.82)}
.sv2-panel--blue .sv2-benefit{border-color:rgba(255,255,255,.22)}
.sv2-brand .sv2-panel--blue .sv2-benefit::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3CF5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
/* Every other section sits on the page's white with no panel (Rene, 9 Oct) */
.sv2-panel--plain,.sv2-intpanel--plain{background:transparent}
.sv2-brand .sv2-panel--plain .sv2-visual--supports{box-shadow:0 18px 50px rgba(19,31,104,.08)}
.sv2-panel--ink .esc-eyebrow{color:#fff}
.sv2-panel--ink .sv2-panel__body{color:rgba(255,255,255,.7)}
.sv2-panel--ink .sv2-benefit{border-color:rgba(255,255,255,.15)}
.sv2-panel--ink .sv2-benefit::before{background:#fff;color:#1F2229}
.sv2-brand .sv2-benefit{font-size:14px}
.sv2-brand .sv2-benefit::before{content:"";background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/62% no-repeat}
.sv2-panel--ink .sv2-benefit::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2229' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}

/* 1. The phone sits on the brand blue with the orange plate behind it */
.sv2-brand .sv2-visual--text{background:var(--blue);box-shadow:-14px 14px 0 var(--orange);overflow:hidden}
.sv2-brand .sv2-visual--text::before{border-color:rgba(255,255,255,.12)}
.sv2-brand .sv2-phone{box-shadow:0 28px 60px rgba(9,24,115,.35)}

/* 2. The tiles in brand colours: blue, white, mist and a pale orange fill */
.sv2-brand .sv2-visual--supports{background:#fff;border:1px solid var(--line)}
.sv2-brand .sv2-tile--coral{background:var(--orange)}
.sv2-brand .sv2-tile--yellow{background:var(--mist)}
.sv2-brand .sv2-tile--cream{background:var(--cream)}
.sv2-brand .sv2-tile::before{background:#fff}
.sv2-brand .sv2-tile--blue::before{background:rgba(255,255,255,.2)}
.sv2-brand .sv2-total{background:#1F2229}
.sv2-brand .sv2-card{background:#fff;border-color:var(--line)}
.sv2-brand .sv2-card:nth-child(3n) .sv2-card__n{background:var(--mist);color:var(--blue)}
.sv2-brand .sv2-card__n{background:var(--mist);color:var(--blue)}
.sv2-brand .sv2-card:nth-child(3n+2) .sv2-card__n{background:var(--orange);color:var(--ink)}
.sv2-brand .sv2-featured{border-color:rgba(22,22,29,.1)}

/* 3 and 4. Photographs in the site's arch on an orange plate. The arch is on
   the image, not the frame, so Adam's floating cards can overhang the edge
   the way the stat cards do on the home page hero. */
.sv2-brand .sv2-visual--photo{overflow:visible;border-radius:0;max-width:440px;margin-inline:auto}
.sv2-brand .sv2-visual--photo .wp-block-image{border-radius:220px 220px 14px 14px;overflow:hidden;
  box-shadow:-16px 16px 0 var(--orange)}
.sv2-brand .sv2-visual--photo::after{border-radius:220px 220px 14px 14px}
.sv2-panel--ink .sv2-visual--photo .wp-block-image{box-shadow:-16px 16px 0 var(--blue)}
.sv2-brand .sv2-visual--photo .wp-block-image img{border-radius:0}
/* The outline plate on the Human photo: the arch with a thin orange line
   offset behind it in place of the solid plate (Rene, 9 Oct) */
.sv2-brand .sv2-visual--outline .wp-block-image{box-shadow:none}
.sv2-brand .sv2-visual--outline::before{content:"";position:absolute;inset:0;transform:translate(-18px,18px);
  border:3px solid var(--orange);border-radius:220px 220px 14px 14px}
/* The second shape: the corner arch, one corner swept into the arch's curve,
   on the same offset plate. A sibling of the arch, not a copy of it. */
.sv2-brand .sv2-visual--corner{max-width:none}
.sv2-brand .sv2-visual--corner .wp-block-image,
.sv2-brand .sv2-visual--corner::after{border-radius:14px 200px 14px 14px}
.sv2-brand .sv2-visual--corner .wp-block-image{box-shadow:-16px 16px 0 var(--blue)}
.sv2-brand .sv2-visual--corner.sv2-visual--outline .wp-block-image{box-shadow:none}
.sv2-brand .sv2-visual--corner.sv2-visual--outline::before{border-radius:14px 200px 14px 14px;border-color:var(--blue)}
.sv2-brand .sv2-avail{top:auto;bottom:96px;left:-36px;right:auto;width:300px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sv2-shadow)}
.sv2-brand .sv2-caption{bottom:28px;left:28px;right:28px;font-size:24px}
.sv2-brand .sv2-visual--photo .sv2-float--one{top:30%;right:-34px}
.sv2-brand .sv2-visual--photo .sv2-float--two{bottom:28px;left:-34px}
/* The "Night shift covered" pill stays (Rene kept Adam's wording, finding 12, 12 Oct) */
.sv2-brand .sv2-float{border:1px solid var(--line)}

/* The app row: badges at the site's size */
.sv2-brand .sv2-apps{border-color:rgba(22,22,29,.1)}

/* 5. The dashboard keeps the blue frame, now with the orange plate */
.sv2-brand .sv2-visual--dash{box-shadow:-14px 14px 0 var(--orange)}

/* The closing panel as the site's blue panel: radius and accent only */
.sv2-brand .sv2-closing{border-radius:var(--r-lg)}
.sv2-brand .sv2-closing .esc-eyebrow{color:#fff}
.sv2-brand .sv2-closing h2{letter-spacing:-.03em;line-height:1.02}

@media (max-width:780px){
  .sv2-brand .sv2-avail{left:12px;right:12px;width:auto;bottom:80px}
  .sv2-brand .sv2-visual--photo .sv2-float--one{right:8px;top:24px}
  .sv2-brand .sv2-visual--photo .sv2-float--two{left:8px}
}

/* =============================================================================
   Section 1 directions (sv2-d-), 12 Oct 2026. Three on-brand ways to show "as
   easy as sending a text", on the review page /section-1-directions/. All on
   the arch and offset plate; colours at exact brand values only.
   ========================================================================== */
.sv2-d{position:relative;width:100%;max-width:480px;margin-inline:auto;min-height:520px}
.sv2-d > *{margin:0}
.sv2-d-arch{position:absolute;inset:0 44px 0 0;border-radius:240px 240px 18px 18px;background:var(--blue);
  box-shadow:-16px 16px 0 var(--orange)}
.sv2-d-msgs{display:flex;flex-direction:column;gap:12px}
.sv2-d-msgs > *{margin:0}
.sv2-d-msg{max-width:86%;padding:15px 19px;border-radius:20px;font-size:18px;line-height:1.35;font-weight:500;
  box-shadow:0 10px 30px rgba(9,24,115,.14)}
.sv2-d-msg--in{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px}
.sv2-d-msg--out{align-self:flex-end;background:var(--orange);color:var(--ink);border-bottom-right-radius:6px}
.sv2-d .sv2-d-card{right:0;bottom:22px}
.sv2-d-note{margin-top:22px !important;font-size:13px;color:var(--muted);font-style:italic}
/* A: the conversation is the image */
.sv2-d--a .sv2-d-msgs{position:relative;z-index:2;padding:205px 0 120px 30px}
/* B: the messages on a real person */
.sv2-d--b .wp-block-image{position:absolute;inset:0 70px 40px 0;border-radius:240px 240px 18px 18px;overflow:hidden;
  box-shadow:-16px 16px 0 var(--orange)}
.sv2-d--b .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}
.sv2-d--b .sv2-d-msgs{position:absolute;z-index:2;right:0;top:300px;width:70%}
.sv2-d--b .sv2-d-msg{font-size:15px;padding:12px 15px}
.sv2-d--b .sv2-d-card{right:auto;left:-18px;bottom:0}
/* C: the site's phone, upright, in an arch window */
.sv2-d--c{clip-path:inset(-60px -60px 0 -60px)}
.sv2-d--c .sv2-d-arch{inset:0 24px 0 24px}
.sv2-d-phone{position:absolute;z-index:2;left:50%;transform:translateX(-50%);top:170px;width:270px;height:470px;
  border:6px solid #9a9eae;border-radius:44px;background:var(--mist);overflow:hidden;box-shadow:0 30px 60px rgba(9,24,115,.3)}
.sv2-d-phone > *{margin:0}
.sv2-d-bar{position:relative;background:#fff;padding:34px 16px 10px 58px;border-bottom:1px solid var(--line)}
.sv2-d-bar > *{margin:0}
.sv2-d-bar::before{content:"E";position:absolute;left:16px;top:34px;width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:#fff;font-family:var(--display);font-weight:700;font-size:13px;display:grid;place-items:center}
.sv2-d-bar__t{font-size:13px;font-weight:600;line-height:1.2}
.sv2-d-bar__s{font-size:10.5px;color:var(--muted)}
.sv2-d-msgs--phone{padding:14px 12px;gap:8px}
.sv2-d-msgs--phone .sv2-d-msg{font-size:13px;padding:10px 13px;border-radius:16px;box-shadow:none;font-weight:400}
.sv2-d-msgs--phone .sv2-d-msg--in{border:1px solid var(--line);border-bottom-left-radius:5px}
.sv2-d-msgs--phone .sv2-d-msg--out{background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.sv2-d--c .sv2-d-card{right:-8px;bottom:70px;z-index:3}
@media (max-width:780px){
  .sv2-d{min-height:470px;max-width:100%}
  .sv2-d--a .sv2-d-msgs{padding:130px 0 100px 20px}
  .sv2-d-msg{font-size:16px}
  /* B on a phone: the photo, then the conversation overlapping its foot, then
     the result card, all in flow so nothing covers a message or is clipped. */
  .sv2-d--b{min-height:0}
  .sv2-d--b .wp-block-image{position:relative;inset:auto;height:380px;margin:0 40px 0 16px !important}
  .sv2-d--b .sv2-d-msgs{position:relative;top:auto;right:auto;width:88%;margin:-96px 0 0 auto !important}
  .sv2-d--b .sv2-d-card{position:relative;left:auto;right:auto;bottom:auto;width:fit-content;margin:16px 0 0 16px !important}
}

/* The phone mock-ups drift a little, like the home page phone, and stop for
   anyone who has asked for less motion. */
@media (prefers-reduced-motion:no-preference){
  .sv2-float{animation:sv2Float 6s ease-in-out infinite}
  @keyframes sv2Float{0%,100%{translate:0 0}50%{translate:0 -6px}}
}

/* Services header photo is portrait (Adobe 527286981): keep her face in the
   wide header band (Rene's pick, 12 Oct 2026). */
.esc-peek--header .esc-peek__img.sv2-header-crop img{object-position:50% 40%}

/* Section 5 dashboard on brand (Rene, 12 Oct 2026): brand colours at exact
   values only (no tints, no opacity shades, no off-palette green), the real
   Escalate logo in place of a typed wordmark, and the brand orange marking the
   latest bar. Later in the file, so these win over the earlier sv2 rules. */
.sv2-brand .sv2-dash__brand{font-size:0;width:100%;height:12px;
  background:url(../img/logo-blue.png) left center/contain no-repeat}
.sv2-brand .sv2-dash__nav::after{background:var(--blue);max-width:100%;box-shadow:0 19px 0 var(--line),0 38px 0 var(--line)}
.sv2-brand .sv2-stat__d{color:var(--blue);font-weight:600}
.sv2-brand .sv2-bars > *{opacity:1;background:var(--blue)}
.sv2-brand .sv2-bars > :nth-child(7){background:var(--orange)}
.sv2-brand .sv2-dash{box-shadow:none;border-radius:14px 0 0 0}
.sv2-brand .sv2-visual--dash .sv2-float::before{background:var(--blue)}
/* Breathing room between the closing call to action and the footer (Rene, 12 Oct 2026). */
.sv2-section:has(.sv2-closing){padding-bottom:clamp(56px,7vw,96px)}
/* Support card numbers: one style for all, so no colour reads as a category
   (Rene, 12 Oct 2026). Peach from Adam Wood's Figma prototype in place of the
   brand orange, at Adam's request and Rene's choice (15 Oct 2026). A one-off
   until the site-wide colour update; fold it into the new palette then. */
.sv2-brand .sv2-card .sv2-card__n,
.sv2-brand .sv2-card:nth-child(3n) .sv2-card__n,
.sv2-brand .sv2-card:nth-child(3n+2) .sv2-card__n{background:#F2D2B5;color:#A66331}
/* No off-palette green on the Services page (Rene, 12 Oct 2026): confirmation
   ticks and the availability dot in brand blue; the dot on the dark "Night shift
   covered" pill in brand orange, since blue does not show on ink. */
.sv2-brand .sv2-float::before,.sv2-brand .sv2-avail::before{background:var(--blue)}
.sv2-brand .sv2-pill::before{background:var(--orange)}

/* The FAQ keeps its approved spacing now that WordPress reads the whole page as
   blocks (15 Oct 2026). Until then a stray closing tag left the FAQ as raw HTML;
   once parsed, its wrapper gets is-layout-flow, and tokens.css's
   `.is-layout-flow>*{margin-block-start:revert}` plus WordPress's flow-layout
   bottom reset swapped the theme's margins (questions 0 / .4em, answers 0 / 1.1em)
   for browser defaults, making the FAQ 68 to 90px taller. */
#questions > .esc-wrap.is-layout-flow > h3{margin-block:0 .4em}
#questions > .esc-wrap.is-layout-flow > p{margin-block:0 1.1em}

/* =============================================================================
   Get Support page. Built 2026-10-20 from Adam Wood's prototype
   (esca3-0.figma.site/get-support), in the same branded direction as the
   Services page: his layout, the site's own eyebrows, colours and buttons.
   Every class is gs-; the sections also carry sv2-brand so this sheet loads.
   Icons are Lucide outlines (ISC licence), drawn as CSS masks so they stay
   blocks an editor can move.
   ========================================================================== */
:root{
  --gs-i-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  --gs-i-text:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M13 8H7'/%3E%3Cpath d='M17 12H7'/%3E%3C/svg%3E");
  --gs-i-app:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  --gs-i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

/* The icon tile: a blue rounded square with a white outline icon, placed at the
   top left of its box. On the blue support line it turns white with a blue icon. */
.gs-icon{position:relative}
.gs-icon::before{content:"";position:absolute;left:0;top:0;width:52px;height:52px;border-radius:14px;background:var(--blue)}
.gs-icon::after{content:"";position:absolute;left:14px;top:14px;width:24px;height:24px;background:#fff;
  -webkit-mask:var(--gs-i) center / contain no-repeat;mask:var(--gs-i) center / contain no-repeat}
.gs-icon--phone{--gs-i:var(--gs-i-phone)}
.gs-icon--text{--gs-i:var(--gs-i-text)}
.gs-icon--app{--gs-i:var(--gs-i-app)}
.gs-icon--mail{--gs-i:var(--gs-i-mail)}

/* 1. Hero: no phone, so one column, with Adam's two paragraphs side by side. */
.gs-hero{padding:clamp(72px,9vw,120px) 0 clamp(64px,8vw,104px)}
.gs-hero > .esc-wrap{display:block;max-width:1220px}
.gs-hero h1{font-family:var(--display);font-size:clamp(48px,6vw,84px);line-height:.95;
  letter-spacing:-.045em;color:var(--ink);max-width:11em;margin:0}
.gs-hero__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);max-width:900px;margin-top:40px}
.gs-hero__cols > p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}

.gs-section{padding-block:clamp(28px,4vw,48px)}

/* 2. The support line. */
.gs-line{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  border-radius:28px;padding:44px 48px}
.gs-line__copy{padding-left:84px;min-height:52px}
.gs-line__copy::before{background:#fff}
.gs-line__copy::after{background:var(--blue)}
.gs-line__copy > *{margin:0}
.gs-line__k{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.gs-line__n{font-family:var(--display);font-size:clamp(34px,4vw,46px);font-weight:700;line-height:1.1;
  letter-spacing:-.02em;margin-top:6px !important}
.gs-line__n a{color:#fff;text-decoration:none}
.gs-line__n a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.gs-line__s{font-size:14px;opacity:.85;margin-top:6px !important}
.gs-line__actions{margin:0;gap:12px}
.gs-line .wp-block-button.is-style-esc-ghost > .wp-block-button__link{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.gs-line .wp-block-button.is-style-esc-ghost > .wp-block-button__link:hover{background:#fff;color:var(--blue)}

/* 3. Three ways to reach the team. */
.gs-options{padding-top:clamp(56px,7vw,96px)}
.gs-options h2{font-family:var(--display);font-size:clamp(40px,4.6vw,64px);line-height:.98;
  letter-spacing:-.04em;max-width:9em;margin:0 0 44px}
.gs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gs-card{display:flex;flex-direction:column;background:var(--mist);border:1px solid var(--line);
  border-radius:24px;padding:28px;min-height:300px}
.gs-card::before{left:28px;top:28px}
.gs-card::after{left:42px;top:42px}
.gs-card > *{margin:0}
.gs-card h3{font-family:var(--display);font-size:30px;line-height:1.1;letter-spacing:-.02em;margin-top:auto;padding-top:100px}
.gs-card > p{color:var(--muted);font-size:15px;line-height:1.6;margin-top:12px}
.gs-card .gs-card__link{margin-top:18px;font-size:15px;font-weight:600}
.gs-card__link a{color:var(--blue);text-decoration:none}
.gs-card__link a::after{content:" \2192"}
.gs-card__link a:hover{text-decoration:underline;text-underline-offset:4px}

/* 4. The app panel and the two contact cards under it. */
.gs-app{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;
  background:var(--cream);border-radius:34px;padding:clamp(40px,5vw,64px)}
.gs-app__copy > *{margin:0}
.gs-app h2{font-family:var(--display);font-size:clamp(40px,4.6vw,64px);line-height:.98;letter-spacing:-.04em;max-width:6em}
.gs-app__copy > .esc-eyebrow,.gs-options .esc-eyebrow{margin-bottom:18px}
/* Zilla Slab sets old-style figures by default; a phone number reads better level. */
.gs-line__n,.gs-contact__v,.gs-card__link{font-variant-numeric:lining-nums}
.gs-app__copy > p:last-child{color:var(--muted);font-size:15px;line-height:1.65;max-width:30em;margin-top:20px}
.gs-app .sv2-apps__options{flex-wrap:wrap}
.gs-contacts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.gs-contact{border:1px solid var(--line);border-radius:22px;padding:24px 24px 24px 100px;min-height:52px}
.gs-contact::before{left:24px;top:50%;margin-top:-26px}
.gs-contact::after{left:38px;top:50%;margin-top:-12px}
.gs-contact > *{margin:0}
.gs-contact__k{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.gs-contact__v{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.2;margin-top:4px !important;overflow-wrap:anywhere}
.gs-contact__v a{color:var(--ink);text-decoration:none}
.gs-contact__v a:hover{color:var(--blue)}

@media (max-width:900px){
  .gs-cards{grid-template-columns:1fr}
  .gs-card{min-height:0}
  .gs-card h3{padding-top:84px}
  .gs-app{grid-template-columns:1fr}
}
@media (max-width:760px){
  .gs-hero__cols,.gs-contacts{grid-template-columns:1fr}
  .gs-line{padding:32px 24px}
  .gs-line__copy{padding-left:0;padding-top:72px}
  .gs-line__actions{width:100%}
  .gs-contact{padding-left:92px}
  /* The headline's break matches Adam's desktop line; on a phone it would leave "when" alone on a line. */
  .gs-hero h1 br{display:none}
  .gs-contact__v{font-size:19px}
  .gs-contact{min-width:0}
  .gs-contact{padding-right:16px}
}