/* COR Push Menu — Figma "Menu Expanded" (653:5141) + "Search Menu" (653:5154)
   Colours from Elementor Global Colors: primary #1A4348 · secondary #259596 · accent #B8DCFC */
:root{
  --cor-push-speed: 550ms;
  --cor-push-ease: cubic-bezier(.65, 0, .35, 1);
  --cor-push-w: 0px;
  --cor-header-h: 104px;
  --cor-green: var(--e-global-color-primary, #1A4348);
  --cor-agave: var(--e-global-color-secondary, #259596);
  --cor-blue: var(--e-global-color-accent, #B8DCFC);
  --cor-charcoal: #2D2926; --cor-gray: #888B8D;
  --cor-sans: "CircularXX", "Circular", "Helvetica Neue", Arial, sans-serif;
  --cor-serif: "utile-display", "Utile Display", Georgia, serif;
}
html{ overflow-x: clip; }

/* ---------- the pushed page ---------- */
#cor-page-shell{ position: relative; left: 0; min-height: 100vh; background: #fff;
  transition: left var(--cor-push-speed) var(--cor-push-ease); }
body.cor-push-left  #cor-page-shell{ left: var(--cor-push-w); }
body.cor-push-right #cor-page-shell{ left: calc(var(--cor-push-w) * -1); }
body.cor-push-left, body.cor-push-right{ overflow: hidden; }

/* ---------- CS-119: ground the panels before the JS has run ----------
   Everything in the block below is scoped to .cor-menu-panel / .cor-search-panel,
   and those classes are added at runtime by step 1 of cor-push-menu.js — the
   widgets were never given them in Elementor, so the markup ships without them.
   Open a panel in the window before that script finishes (on the home page that
   is the whole intro, which is also when the JS is rebuilding <body> into
   #cor-page-shell) and the panel renders as Elementor's bare off-canvas: no
   ground behind the menu, white links straight on the hero.

   These two rules tell the panels apart by what is inside them rather than by a
   class that arrives late — the search panel is the one holding [cor_site_search].
   No !important, so the class-based rules below still take over the moment the
   JS lands. */
.e-off-canvas:not(:has(.cor-ss)) .e-off-canvas__main{ background: var(--cor-green); }
.e-off-canvas:has(.cor-ss) .e-off-canvas__main{ background: #EAF4FE; }

/* ---------- panel mechanics: we own the slide, Elementor owns open/closed state (aria-hidden) ---------- */
.e-off-canvas.cor-menu-panel, .e-off-canvas.cor-search-panel{ z-index: 100000; }
.e-off-canvas.cor-menu-panel .e-off-canvas__overlay, .e-off-canvas.cor-search-panel .e-off-canvas__overlay{ background: transparent !important; }
.e-off-canvas.cor-menu-panel .e-off-canvas__main, .e-off-canvas.cor-search-panel .e-off-canvas__main{
  animation: none !important; opacity: 1 !important;
  transition: transform var(--cor-push-speed) var(--cor-push-ease);
  height: 100vh !important; top: 0 !important; overflow-y: auto; padding: 0 !important;
}
.e-off-canvas.cor-menu-panel .e-off-canvas__main{ left: 0 !important; right: auto !important; transform: translateX(-100%);
  width: clamp(360px, 33vw, 760px) !important; background: var(--cor-green) !important; }
.e-off-canvas.cor-search-panel .e-off-canvas__main{ right: 0 !important; left: auto !important; transform: translateX(100%);
  width: clamp(420px, 57.6vw, 1140px) !important; background: #EAF4FE !important; }
.e-off-canvas.cor-menu-panel[aria-hidden="false"] .e-off-canvas__main,
.e-off-canvas.cor-search-panel[aria-hidden="false"] .e-off-canvas__main{ transform: translateX(0); }
/* let the slide-out finish before Elementor hides the panel */
.e-off-canvas.cor-menu-panel, .e-off-canvas.cor-search-panel{ transition: visibility 0s linear var(--cor-push-speed); }
.e-off-canvas.cor-menu-panel[aria-hidden="false"], .e-off-canvas.cor-search-panel[aria-hidden="false"]{ transition: visibility 0s; }
/* Elementor's own close icon off — a "CLOSE" heading in the panel is used instead */
.e-off-canvas.cor-menu-panel .e-off-canvas__close-button, .e-off-canvas.cor-search-panel .e-off-canvas__close-button{
  position: absolute; top: 0; right: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
/* Elementor's content wrapper + the panel's inner container: full width, no bg / no padding (the panel bg is the only bg) */
.e-off-canvas.cor-menu-panel .e-off-canvas__content, .e-off-canvas.cor-search-panel .e-off-canvas__content,
.e-off-canvas.cor-menu-panel .e-off-canvas__content > .e-con, .e-off-canvas.cor-search-panel .e-off-canvas__content > .e-con,
.e-off-canvas.cor-menu-panel .e-off-canvas__main > .e-con, .e-off-canvas.cor-search-panel .e-off-canvas__main > .e-con{
  background: transparent !important; background-image: none !important; padding: 0 !important; margin: 0 !important;
  min-height: 100vh; width: 100% !important; max-width: none !important; flex: 1 1 auto; position: static; }
.e-off-canvas.cor-menu-panel .e-off-canvas__main, .e-off-canvas.cor-search-panel .e-off-canvas__main{ position: absolute !important; }
/* The WP admin bar, on logged-in views only, pushes the whole page down with
   html{margin-top:32px} (46px below 782px). The panels sit at top:0 and were ignoring
   it, so every panel — and with it the CLOSE heading — was that much higher than the
   MENU / SEARCH trigger it lines up with. Measured: trigger centre 84, CLOSE centre 52,
   and with the bar simulated away both land on 52. Logged-out visitors were never
   affected; this only ever showed to us. */
body.admin-bar .e-off-canvas.cor-menu-panel .e-off-canvas__main,
body.admin-bar .e-off-canvas.cor-search-panel .e-off-canvas__main{
  top: 32px !important; height: calc(100vh - 32px) !important; }
@media screen and (max-width: 782px){
  body.admin-bar .e-off-canvas.cor-menu-panel .e-off-canvas__main,
  body.admin-bar .e-off-canvas.cor-search-panel .e-off-canvas__main{
    top: 46px !important; height: calc(100vh - 46px) !important; }
}

/* ---------- Header bar: MENU / SEARCH triggers (any header heading linked to an off-canvas action) ---------- */
[data-elementor-type="header"] .elementor-widget-heading a[href*="off_canvas"],
[data-elementor-type="header"] .elementor-widget-heading a[href*="off_canvas"] *{
  font-family: var(--cor-sans) !important; font-weight: 500 !important; font-size: 16px !important; line-height: 1 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--cor-green) !important; text-decoration: none !important;
  transition: color .2s linear; }
[data-elementor-type="header"] .elementor-widget-heading a[href*="off_canvas"]:hover,
[data-elementor-type="header"] .elementor-widget-heading a[href*="off_canvas"]:hover *{ color: var(--cor-agave) !important; }
/* Intro states: while the header sits over a full-screen image (home loader `cor-hl-header--onimage`, portfolio hero intro
   `cor-prj-intro-header`) the triggers are white and ease back to Midnight as the frame lands. Must outrank the rule above. */
[data-elementor-type="header"].cor-hl-header .elementor-widget-heading a[href*="off_canvas"],
[data-elementor-type="header"].cor-hl-header .elementor-widget-heading a[href*="off_canvas"] *,
[data-elementor-type="header"].cor-prj-intro-header .elementor-widget-heading a[href*="off_canvas"],
[data-elementor-type="header"].cor-prj-intro-header .elementor-widget-heading a[href*="off_canvas"] *{ transition: color .7s ease; }
[data-elementor-type="header"].cor-hl-header--onimage .elementor-widget-heading a[href*="off_canvas"],
[data-elementor-type="header"].cor-hl-header--onimage .elementor-widget-heading a[href*="off_canvas"] *,
[data-elementor-type="header"].cor-prj-intro-header:not(.cor-prj-intro-header--landing) .elementor-widget-heading a[href*="off_canvas"],
[data-elementor-type="header"].cor-prj-intro-header:not(.cor-prj-intro-header--landing) .elementor-widget-heading a[href*="off_canvas"] *{ color: #fff !important; }

/* ---------- CLOSE headings (Heading widget with CSS class "cor-close") ---------- */
.cor-close, .cor-close .elementor-widget-container{ pointer-events: auto; }
.cor-close .elementor-heading-title a{ display: inline-block; padding: 8px 4px; margin: -8px -4px; }   /* bigger hit area */
.cor-close .elementor-heading-title, .cor-close .elementor-heading-title a{
  font-family: var(--cor-sans) !important; font-weight: 500 !important; font-size: 16px !important; line-height: 1 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important; cursor: pointer; }
/* --cor-close-top is written per panel by cor-push-menu.js: it measures where the CLOSE text
   actually lands, compares it with the MENU / SEARCH trigger's centre, and corrects by the
   difference. The --cor-header-h fallback below is only for before the script runs; it is a
   guess at the header's height (104px, 72px on phones), and on phones the real header is not
   that tall, which left CLOSE a few pixels above the trigger it lines up with. */
.cor-menu-panel .cor-close{ position: absolute !important; top: var(--cor-close-top, calc(var(--cor-header-h) / 2 - 8px)); right: 40px; margin: 0 !important; width: auto !important; z-index: 10; }
.cor-menu-panel .cor-close .elementor-heading-title, .cor-menu-panel .cor-close .elementor-heading-title a{ color: var(--cor-blue) !important; }
.cor-search-panel .cor-close{ position: absolute !important; top: var(--cor-close-top, calc(var(--cor-header-h) / 2 - 8px)); left: 92px; right: auto; margin: 0 !important; width: auto !important; z-index: 10; }  /* flush with the search pill's left edge */
.cor-search-panel .cor-close .elementor-heading-title, .cor-search-panel .cor-close .elementor-heading-title a{ color: var(--cor-green) !important; }
/* CLOSE colour, keyed on the close ACTION rather than on the cor-close class.
   The panels live inside the header document, so cor-home-loader.css's
   `.cor-hl-header--onimage a{ color:#fff !important }` — a bare descendant selector —
   also matches the CLOSE anchors while the header is over the hero, which is the
   "before the frame comes in" window. The class-based rules above outrank it, but only
   for as long as the widget still carries `cor-close`; these do not depend on that, and
   they cover a child element inside the anchor if Elementor ever renders one.
   Verified: this matches both CLOSE anchors and neither MENU/SEARCH trigger. */
.e-off-canvas.cor-menu-panel a[href*="off_canvas"][href*="close"],
.e-off-canvas.cor-menu-panel a[href*="off_canvas"][href*="close"] *{ color: var(--cor-blue) !important; }
.e-off-canvas.cor-search-panel a[href*="off_canvas"][href*="close"],
.e-off-canvas.cor-search-panel a[href*="off_canvas"][href*="close"] *{ color: var(--cor-green) !important; }

/* ---------- MENU: Elementor Nav Menu widget (Vertical) ---------- */
.cor-menu-panel .elementor-widget-nav-menu{ margin: 0 !important; padding: var(--cor-header-h) 40px 60px 5vw !important; width: 100% !important; }
.cor-menu-panel .elementor-nav-menu--main, .cor-menu-panel .elementor-nav-menu--main .elementor-nav-menu, .cor-menu-panel .elementor-nav-menu--main .elementor-nav-menu > li{ display: block; width: 100%; }
.cor-menu-panel .elementor-menu-toggle, .cor-menu-panel .elementor-nav-menu--dropdown.elementor-nav-menu__container{ display: none !important; }
.cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li > a{
  font-family: var(--cor-serif) !important; font-weight: 500 !important; font-size: 48px !important; line-height: 72px !important;
  letter-spacing: 0 !important; color: #fff !important; padding: 0 !important; margin: 0 !important; background: transparent !important; text-transform: none !important; }
.cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a,
.cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li.cor-open > a,
.cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within > a,
.cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li > a:hover,
.cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li > a:focus{ color: var(--cor-blue) !important; }
.cor-menu-panel .sub-arrow, .cor-menu-panel .elementor-item:after, .cor-menu-panel .elementor-item:before{ display: none !important; }
/* sub-menus: collapsed until you hover / focus / tap the parent; expand with an ease */
.cor-menu-panel .elementor-nav-menu--main .sub-menu{
  display: block !important; position: static !important; visibility: visible !important; transform: none !important;
  box-shadow: none !important; background: transparent !important; border: 0 !important;
  padding: 0 0 0 40px !important; margin: 0 !important; width: auto !important; min-width: 0 !important;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s var(--cor-push-ease), opacity .3s linear, padding .45s var(--cor-push-ease); }
.cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li:hover > .sub-menu,
.cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li.cor-open > .sub-menu,
.cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within > .sub-menu{
  max-height: 600px; opacity: 1 !important; padding-bottom: 14px !important; }
.cor-menu-panel .elementor-nav-menu--main .sub-menu li a{
  font-family: var(--cor-sans) !important; font-weight: 500 !important; font-size: 24px !important; line-height: 70px !important;
  letter-spacing: 2px !important; text-transform: uppercase !important; color: #fff !important; padding: 0 !important; background: transparent !important; white-space: nowrap; }
.cor-menu-panel .elementor-nav-menu--main .sub-menu li a:hover, .cor-menu-panel .elementor-nav-menu--main .sub-menu li.current-menu-item > a{ color: var(--cor-blue) !important; }
/* CS-267 (23 Sep): removed the 8px margin-top on the last item (Contact); it made the Insights to Contact gap bigger than the others. */

/* ---------- SEARCH: [cor_site_search] ---------- */
.cor-search-panel .elementor-widget-shortcode{ margin: 0 !important; width: 100% !important; }
.cor-ss{ padding: var(--cor-header-h) 80px 60px 92px; font-family: var(--cor-sans); }
.cor-ss__form{ margin: 0; }
/* the pill — selectors + !important outrank the Hello theme's reset.css input[type="search"] (1px #666 border, 3px radius) */
.cor-ss input.cor-ss__input, .cor-ss input.cor-ss__input[type="search"], .cor-ss input.cor-ss__input:focus, .cor-ss input.cor-ss__input:focus-visible{
  box-sizing: border-box; width: 100%; height: 82px; padding: 0 35px; margin: 0; border: 0 !important; border-radius: 41px !important; background: #fff !important;
  font: 400 28px/82px var(--cor-sans); color: var(--cor-charcoal); box-shadow: none !important; -webkit-appearance: none; appearance: none; outline: none !important; }
.cor-ss input.cor-ss__input::placeholder{ color: var(--cor-charcoal); opacity: 1; }
.cor-ss input.cor-ss__input::-webkit-search-decoration, .cor-ss input.cor-ss__input::-webkit-search-cancel-button{ -webkit-appearance: none; }
/* Both pill shadow lists are TWO shadows, always, in the same order — see the block at
   the end of this file. A one-shadow base and a two-shadow focus state interpolate by
   padding the short list at the end, so the agave ring animates out of the 100vmax white
   fill and the whole field flashes agave. Hello's reset.css puts `transition: all .3s` on
   this input, so that interpolation is live whenever the inline transition is not masking it. */
.cor-ss input.cor-ss__input:focus-visible{ box-shadow: 0 0 0 1px var(--cor-agave) inset, inset 0 0 0 100vmax #FFFFFF !important; }
.cor-ss__results{ margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }
.cor-ss__item{ display: flex; align-items: center; gap: 30px; text-decoration: none !important; color: inherit; }
.cor-ss__thumb{ flex: none; width: 138px; height: 138px; border-radius: 10px; overflow: hidden; background: #fff; }
.cor-ss__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cor-ss__eyebrow{ display: block; margin-bottom: 8px; font: 700 18px/1 var(--cor-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--cor-agave); }
.cor-ss__title{ display: inline-flex; align-items: center; gap: 12px; font: 500 32px/35px var(--cor-serif); color: var(--cor-green); }
.cor-ss__title svg{ width: 22px; height: 22px; color: var(--cor-agave); transition: transform .3s var(--cor-push-ease); }
.cor-ss__item:hover .cor-ss__title{ color: var(--cor-agave); }
.cor-ss__item:hover .cor-ss__title svg{ transform: translateX(6px); }
.cor-ss__all{ display: inline-block; margin-top: 10px; font: 700 18px/1.35 var(--cor-sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--cor-agave) !important; text-decoration: underline !important; text-underline-offset: 5px; }
.cor-ss__empty{ margin: 0; font-size: 18px; color: var(--cor-gray); }

@media (max-width: 1200px){
  /* CS-42: the nav used to scale here — top level 48→40px, sub-menu 24→18px with
     the leading dropping 70→50px. Makayla asked whether the sub-menu was even the
     same style as desktop; it always was, it was just two sizes smaller. The menu
     now holds ONE size at every width, so what is drawn on a phone is what is
     drawn on a desktop.
     Checked before removing it, with the real fonts loaded: the widest top-level
     item is Solutions at 184px and the widest sub-item is WHO WE ARE at 178px,
     against 295px of usable width inside the 88vw panel on a 390px phone. Nothing
     comes close to wrapping. If a much longer menu item is ever added, that is the
     number to re-check — not this breakpoint. */
  .cor-ss{ padding: var(--cor-header-h) 40px 40px 40px; }
  .cor-search-panel .cor-close{ left: 40px; }
  .cor-ss input/* CS-122: this block was written with a bare .cor-ss__input, which the base
     rule above outranks, so the phone sizing never applied and the placeholder
     rendered at 28px and truncated to "What are you searchin". It now repeats
     the base rule's own selector list so the two match on specificity. */
  /* the pill — selectors + !important outrank the Hello theme's reset.css input[type="search"] (1px #666 border, 3px radius) */
.cor-ss input.cor-ss__input, .cor-ss input.cor-ss__input[type="search"], .cor-ss input.cor-ss__input:focus, .cor-ss input.cor-ss__input:focus-visible{ height: 64px; font-size: 20px; line-height: 64px; padding: 0 24px; }
  .cor-ss__thumb{ width: 96px; height: 96px; } .cor-ss__title{ font-size: 24px; line-height: 28px; } .cor-ss__eyebrow{ font-size: 14px; }
}
/* CS-206 (21 Sep) - the panel type had one size for every screen: 48px/72px main links,
   24px/70px sub-links, set once above with no responsive step. On a phone the panel is
   88vw, so "Solutions" and "Portfolio" ran nearly edge to edge and the list read larger
   than the page heading behind it. Two steps down, sized so the line box stays a
   comfortable tap target (52px on phones, well over the 44px minimum). */
@media (max-width: 1024px){
  .cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li > a{
    font-size: 40px !important; line-height: 60px !important; }
  .cor-menu-panel .elementor-nav-menu--main .sub-menu li a{
    font-size: 20px !important; line-height: 56px !important; }
}
@media (max-width: 780px){
  /* CS-206 continued - phones. This sits inside the 780px block rather than its own,
     so it stays later in the file than the 1024px step above and cannot be outranked. */
  .cor-menu-panel .elementor-nav-menu--main > .elementor-nav-menu > li > a{
    font-size: 32px !important; line-height: 52px !important; }
  .cor-menu-panel .elementor-nav-menu--main .sub-menu li a{
    font-size: 18px !important; line-height: 46px !important; }
  .cor-menu-panel .elementor-nav-menu--main .sub-menu{ padding-left: 24px !important; }

  :root{ --cor-header-h: 72px; }
  .e-off-canvas.cor-menu-panel .e-off-canvas__main{ width: 88vw !important; }
  .e-off-canvas.cor-search-panel .e-off-canvas__main{ width: 92vw !important; }
  .cor-menu-panel .elementor-widget-nav-menu{ padding: var(--cor-header-h) 24px 40px 24px !important; }
  .cor-menu-panel .cor-close{ right: 24px; }
  .cor-search-panel .cor-close{ left: 24px; }
  /* MENU / SEARCH / CLOSE on phones: 16px Circular at 500, 2px tracking — the
     same weight as desktop. CS-160 (17 Sep): this block shipped at 700, which
     made the phone header read heavier than every other screen. The block still
     has to exist, for the reason below. Header template 191
     carries its own max-width:1024px and max-width:767px typography on .elementor-heading-title
     (the h2 around the link), so this is restated inside a media block of its own — same
     specificity as the base rule, but later, so a mobile override cannot outrank it.
     The selector covers the CLOSE anchors too: their href carries the off_canvas action. */
  [data-elementor-type="header"] .elementor-widget-heading a[href*="off_canvas"],
  [data-elementor-type="header"] .elementor-widget-heading a[href*="off_canvas"] *,
  .cor-close .elementor-heading-title, .cor-close .elementor-heading-title a{
    font-family: var(--cor-sans) !important; font-weight: 500 !important;
    font-size: 16px !important; line-height: 1 !important; letter-spacing: 2px !important; }
  .cor-ss{ padding: var(--cor-header-h) 24px 40px 24px; }
}
@media (prefers-reduced-motion: reduce){ #cor-page-shell, .e-off-canvas__main{ transition: none !important; } }
/* Elementor's off-canvas is position:fixed inside the header — fine, the shell moves with `left`, not transform */

/* CS-121: the panel carries an inline style written by Elementor —
   transition: background-color 700ms !important; background-color: transparent !important;
   swapped to the real colour on open. An inline !important cannot be beaten from a
   stylesheet, so the ground arrives as something that is not background-color: a
   pseudo-element behind the panel's own content. cor-push-menu.js additionally
   strips that inline declaration at init, which is what lets the transform below
   transition — but the pseudo is what keeps the panel legible if the JS never runs. */
.e-off-canvas__main{ isolation: isolate; }
.e-off-canvas__main::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1;
  background:#1A4348; opacity:1; pointer-events:none; }
.e-off-canvas.cor-search-panel .e-off-canvas__main::before{ background:#EAF4FE; }
/* The ground does NOT animate, on purpose. The motion in this component is the
   panel sliding in (transform, below) and the page sliding out (#cor-page-shell).
   1.2.0 also cross-faded this ground over 700ms; because the panel arrives in
   550ms, the menu slid in ahead of its own background and the whole thing read as
   a fade instead of a slide. One thing moves, and it is the panel.
   Polarity matters: the ground is opaque BY DEFAULT and only switched off while
   the panel is CLOSED — no, not any more. 1.2.2 switched the ground off with
   [aria-hidden="true"], and since aria-hidden flips the instant you hit CLOSE while
   the transform takes 550ms to slide out, the background vanished and the text slid
   out on its own. The ground is now simply always painted: when the panel is closed
   it is off-screen and hidden, so there is nothing to switch off. That also makes
   this maximally fail-safe — there is no state, and no rule that has to match, for
   the panel to have a background.
   isolation:isolate makes __main a stacking context so the z-index:-1 pseudo sits
   behind the panel's content. (A z-index:0 pseudo with the children lifted instead
   covers the search field's white pill — reproduced in the lab, it was the 1.1.1
   bug.) */

/* Elementor writes that same inline background-color:transparent!important on
   the search field, not just on the panel — which is why the white pill vanished
   with the panel ground. Same technique, same reason. */
/* the pill — selectors + !important outrank the Hello theme's reset.css input[type="search"] (1px #666 border, 3px radius) */
/* TWO shadows in both states, same order, so only the ring's COLOUR interpolates.
   With a one-shadow base the lists differ in length; the shorter one is padded at the
   END, which pairs `white 100vmax` with `agave 1px` and animates the agave ring down
   from full-field — the search box flashing solid agave as the panel slides in.
   Hello's reset.css sets `transition: all .3s` on this input, so that interpolation runs
   as soon as anything stops masking it. Keep the ring first in both: shadows paint in
   order, first on top, so the ring has to sit above the fill. */
.cor-ss input.cor-ss__input, .cor-ss input.cor-ss__input[type="search"], .cor-ss input.cor-ss__input:focus, .cor-ss input.cor-ss__input:focus-visible{ box-shadow: 0 0 0 1px transparent inset, inset 0 0 0 100vmax #FFFFFF !important; }
/* keep the focus ring AND the fill: first shadow in the list paints on top */
/* the pill — selectors + !important outrank the Hello theme's reset.css input[type="search"] (1px #666 border:focus-visible, 3px radius) */
.cor-ss input.cor-ss__input:focus-visible, .cor-ss input.cor-ss__input[type="search"]:focus-visible, .cor-ss input.cor-ss__input:focus:focus-visible, .cor-ss input.cor-ss__input:focus-visible:focus-visible{ box-shadow: 0 0 0 1px var(--cor-agave) inset, inset 0 0 0 100vmax #FFFFFF !important; }