/* ==========================================================================
   NOVA  ·  MS Web Arts component layer
   --------------------------------------------------------------------------
   Loaded from Avada-Child-Theme/nova. Every token below resolves to an Avada
   Global Option, so changing a colour or a typography set in Avada Options
   updates every component here. Only values Avada element settings cannot
   express live in this file.
   ========================================================================== */

:root{
  /* Brand palette, mapped straight onto the Avada global colour variables */
  --nova-white:var(--awb-color1,#ffffff);
  --nova-surface:var(--awb-color2,#f9f9fb);
  --nova-rule:var(--awb-color3,#c4c4c4);
  --nova-green-600:var(--awb-color4,#189a66);
  --nova-green-500:var(--awb-color5,#19cf86);
  --nova-navy:var(--awb-color6,#00032a);
  --nova-ink:var(--awb-color7,#282828);
  --nova-black:var(--awb-color8,#000000);
  --nova-mint-400:var(--awb-custom_color_1,#23ffa7);
  --nova-grey:var(--awb-custom_color_2,#646464);

  /* Typography, mapped onto the Avada global typography sets */
  --nova-font:var(--awb-typography4-font-family,"HelveticaNowDisplay Regular",Helvetica,Arial,sans-serif);
  --nova-font-bold:var(--awb-typography1-font-family,"HelveticaNowDisplay Bold",Helvetica,Arial,sans-serif);
  --nova-font-med:var(--awb-typography2-font-family,"HelveticaNowDisplay Medium",Helvetica,Arial,sans-serif);
  --nova-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Derived: hairlines, mint tints, elevation, motion */
  --nova-line:rgba(0,3,42,.08);
  --nova-line-strong:rgba(0,3,42,.14);
  --nova-mint-050:#eefaf4;
  --nova-mint-100:#d9f5e7;
  --nova-shadow-md:0 8px 28px rgba(0,3,42,.07);
  --nova-t:.2s;
}

/* --------------------------------------------------------------------------
   1. Section header  (centred title + supporting line)
   -------------------------------------------------------------------------- */
.fusion-body .nova-sechead > .fusion-column-wrapper{max-width:760px;margin-left:auto;margin-right:auto}

/* --------------------------------------------------------------------------
   2. Card shell  (applied to an Avada column; chrome itself is set in the
      column settings, only the hover state needs CSS)
   -------------------------------------------------------------------------- */
.nova-card > .fusion-column-wrapper{transition:box-shadow var(--nova-t),transform var(--nova-t),border-color var(--nova-t)}
.nova-card:hover > .fusion-column-wrapper{box-shadow:var(--nova-shadow-md);border-color:transparent;transform:translateY(-3px)}
/* keeps the card foot pinned to the bottom so a row of cards lines up */
.nova-card > .fusion-column-wrapper{display:flex;flex-direction:column;height:100%}
.nova-card > .fusion-column-wrapper > .fusion-builder-row-inner:last-child{margin-top:auto}

/* --------------------------------------------------------------------------
   3. Card head element  [msw_card_head]
   -------------------------------------------------------------------------- */
.nova-cardhead{display:flex;align-items:center;gap:16px}
.nova-cardhead__ico{width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center}
.nova-cardhead__ico img{width:28px;height:28px;object-fit:contain;display:block;margin:0}
.nova-cardhead__body{min-width:0}
.nova-cardhead .nova-cardhead__title{font-family:var(--nova-font-bold);font-weight:400;font-size:22px;line-height:1.25;
  letter-spacing:-.02em;margin:0 0 3px;color:var(--nova-black)}
.nova-cardhead__for{font-family:var(--nova-font-bold);font-weight:400;font-size:12px;line-height:1.4;
  letter-spacing:.06em;text-transform:uppercase;color:var(--nova-green-600)}

/* --------------------------------------------------------------------------
   4. Fact strip element  [msw_facts]
   -------------------------------------------------------------------------- */
.nova-facts{display:grid;grid-template-columns:repeat(var(--nova-facts-cols,3),1fr);
  border-top:1px solid var(--nova-line);border-bottom:1px solid var(--nova-line);padding:16px 0}
.nova-facts__item{font-family:var(--nova-font);font-size:12px;line-height:1.4;letter-spacing:.04em;
  text-transform:uppercase;color:var(--nova-grey);padding-left:20px}
.nova-facts__item:first-child{padding-left:0}
.nova-facts__item + .nova-facts__item{border-left:1px solid var(--nova-line)}
.nova-facts__value{display:block;font-family:var(--nova-font-bold);font-weight:400;font-size:17px;
  line-height:1.3;letter-spacing:normal;text-transform:none;color:var(--nova-black);margin-bottom:3px}

/* --------------------------------------------------------------------------
   5. Checklist  (native Avada checklist, tuned to the card scale)
   -------------------------------------------------------------------------- */
.nova-checks .fusion-li-item{padding-top:4px;padding-bottom:4px}
.nova-checks .fusion-li-item-content{font-size:15px;line-height:1.55;color:var(--nova-black)}

/* --------------------------------------------------------------------------
   6. Card foot  (native Avada buttons; the secondary reads as a text link)
   -------------------------------------------------------------------------- */
.nova-textbtn .fusion-button{padding-left:0!important;padding-right:0!important}
.nova-textbtn .fusion-button-text{text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px;text-decoration-color:var(--nova-rule);transition:text-decoration-color var(--nova-t)}
.nova-textbtn .fusion-button:hover .fusion-button-text{text-decoration-color:currentColor}

/* --------------------------------------------------------------------------
   7. Comparison table element  [msw_compare_table] + [msw_compare_row]
   -------------------------------------------------------------------------- */
.nova-tablewrap{overflow-x:auto;border-radius:14px;background:var(--nova-white);-webkit-overflow-scrolling:touch}
.nova-table{width:100%;border-collapse:collapse;min-width:840px;margin:0;background:var(--nova-white);
  font-family:var(--nova-font);color:var(--nova-black)}
.nova-table th,.nova-table td{padding:20px;text-align:left;vertical-align:top;font-size:15px;
  border:0;border-bottom:1px solid var(--nova-line);background:none}
.nova-table thead th{font-family:var(--nova-font-bold);font-weight:400;font-size:13px;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.08em;color:var(--nova-grey);padding-bottom:14px;
  background:var(--nova-mint-050);border-bottom:1px solid var(--nova-line-strong)}
.nova-table tbody tr:last-child td{border-bottom:0}
.nova-table tbody tr{transition:background var(--nova-t)}
.nova-table tbody tr:hover{background:var(--nova-mint-050)}
.nova-table__id{display:flex;align-items:center;gap:12px}
.nova-table__ico{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center}
.nova-table__ico img{width:22px;height:22px;display:block;margin:0}
.nova-table__name{font-family:var(--nova-font-bold);font-weight:400;font-size:16px;line-height:1.3}
.nova-table__name small{display:block;font-family:var(--nova-font);font-size:13px;color:var(--nova-grey);margin-top:3px}
.nova-table__price{display:inline-block;padding:5px 13px;border-radius:999px;background:var(--nova-mint-100);
  color:var(--nova-green-600);font-family:var(--nova-font-bold);font-weight:400;white-space:nowrap}
.nova-table__note{display:block;margin-top:6px;font-size:13px;color:var(--nova-grey)}
.nova-table__time{white-space:nowrap;font-family:var(--nova-font-bold);font-weight:400}
.nova-table__cta{display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border-radius:4px;
  background:var(--nova-green-500);color:var(--nova-white);font-family:var(--nova-font-bold);font-weight:400;
  font-size:13px;line-height:1.2;white-space:nowrap;transition:background var(--nova-t),color var(--nova-t)}
.nova-table__cta:hover,.nova-table__cta:focus{background:var(--nova-green-600);color:var(--nova-white)}

/* --------------------------------------------------------------------------
   8. Testimonial head element  [msw_quote_head]
   -------------------------------------------------------------------------- */
.nova-quotehead{display:flex;align-items:center;gap:12px}
.nova-quotehead__av{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--nova-font-bold);font-weight:400;font-size:15px;letter-spacing:.01em;color:var(--nova-navy)}
.nova-quotehead__body{min-width:0}
.nova-quotehead__name{display:block;font-family:var(--nova-font-bold);font-weight:400;font-size:15px;line-height:1.3;color:var(--nova-black)}
.nova-quotehead__org{display:block;font-family:var(--nova-font);font-size:13px;line-height:1.4;color:var(--nova-grey)}

/* --------------------------------------------------------------------------
   9. Process step marker element  [msw_step_marker]
   -------------------------------------------------------------------------- */
.nova-stepmark{display:flex;align-items:center;gap:14px}
.nova-stepmark__dot{width:11px;height:11px;flex:none;border-radius:50%;background:var(--nova-green-500);
  box-shadow:0 0 0 5px var(--nova-mint-100)}
.nova-stepmark__line{flex:1;height:1px}
.nova-stepmark--dashed .nova-stepmark__line{opacity:.45;background-repeat:repeat-x;background-size:12px 1px;
  background-image:linear-gradient(to right,var(--nova-green-500) 0 6px,transparent 6px 100%)}
.nova-stepmark--solid .nova-stepmark__line{background:var(--nova-line)}

/* --------------------------------------------------------------------------
   10. Process panel  (rounded white panel that clips its mint footer)
   -------------------------------------------------------------------------- */
.nova-panel > .fusion-column-wrapper{overflow:hidden;border-radius:inherit}
.nova-callout > .fusion-column-wrapper{align-items:baseline}

/* --------------------------------------------------------------------------
   11. Responsive  (matches the design breakpoints where they sit inside
       Avada's own medium/small ranges)
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .nova-cardhead .nova-cardhead__title{font-size:20px}
}
@media (max-width:680px){
  /* the two-up service grid folds to one column here, ahead of Avada's 570px */
  .fusion-body .fusion-flex-container.nova-grid--2 > .fusion-builder-row > .fusion-layout-column{
    width:100%;max-width:100%;margin-right:0;margin-left:0}
  .nova-facts{grid-template-columns:1fr 1fr}
  .nova-facts__item:nth-child(3){padding-left:0;border-left:0;padding-top:14px;grid-column:1 / -1}
  .nova-card__foot > .fusion-column-wrapper{flex-wrap:wrap}
}
@media (max-width:570px){
  .nova-cardhead{gap:14px}
  .nova-cardhead__ico{width:46px;height:46px;border-radius:12px}
  .nova-cardhead__ico img{width:25px;height:25px}
}
@media (prefers-reduced-motion:reduce){
  .nova-card:hover > .fusion-column-wrapper{transform:none}
}
/* --------------------------------------------------------------------------
   12. Rhythm for the custom elements
      (they render no wrapper Avada can space, so the gap lives here)
   -------------------------------------------------------------------------- */
.nova-cardhead{margin-bottom:20px}
.nova-facts{margin-bottom:20px}
.nova-quotehead{margin-bottom:12px}
.nova-stepmark{margin-bottom:28px}

/* --------------------------------------------------------------------------
   13. Process panel internals
   -------------------------------------------------------------------------- */
/* hairline between steps, drawn inside the panel so the rounded corners clip */
.nova-step + .nova-step > .fusion-column-wrapper{box-shadow:inset 1px 0 0 var(--nova-line)}
.nova-stepno p{font-family:var(--nova-mono);margin:0}
.nova-step__p p{max-width:30ch;text-wrap:pretty;margin:0}

.nova-callout > .fusion-column-wrapper{align-items:baseline;flex-wrap:wrap}
.nova-callout .fusion-text{flex:1 1 auto;min-width:0}
.nova-callout .fusion-text:first-child{flex:0 0 auto}
.nova-callout .fusion-text p{margin:0;text-wrap:pretty}
.nova-callout .fusion-text:last-child p{max-width:78ch}

@media (max-width:1024px){
  /* stacked steps turn the vertical rule into a horizontal one */
  .nova-step + .nova-step > .fusion-column-wrapper{box-shadow:inset 0 1px 0 var(--nova-line)}
  .nova-step__p p{max-width:none}
}
/* --------------------------------------------------------------------------
   14. Checklist scale inside a service card
       Avada exposes these as custom properties on the list, so the element's
       own settings stay in charge and only the card scale is overridden.
   -------------------------------------------------------------------------- */
.nova-checks{--awb-circle-yes-font-size:11px!important;--awb-content-margin:28px!important}

/* --------------------------------------------------------------------------
   15. Comparison table as cards
       Below 1100px the six columns no longer fit the content width, so the
       table reflows into one card per service rather than scrolling sideways.
       Each cell prints its column heading from the data-label the row element
       inherits from the table head.
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .nova-tablewrap{overflow:visible;background:none;border-radius:0}
  .nova-table{display:block;min-width:0;background:none}
  .nova-table thead{display:none}
  .nova-table tbody{display:block}

  .nova-table tr{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;
    background:var(--nova-white);border-radius:14px;padding:24px;margin-bottom:16px}
  .nova-table tr:last-child{margin-bottom:0}
  .nova-table tbody tr:hover{background:var(--nova-white)}

  .nova-table td{display:block;padding:0;border:0;font-size:15px}
  .nova-table td[data-label]::before{content:attr(data-label);display:block;
    font-family:var(--nova-font-bold);font-weight:400;font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--nova-grey);margin-bottom:6px}

  /* service identity spans the card and carries the divider */
  .nova-table td:nth-child(1){grid-column:1 / -1;padding-bottom:18px;
    border-bottom:1px solid var(--nova-line)}
  .nova-table td:nth-child(2){grid-column:1 / -1}
  /* price and timeline pair up, echoing the service card fact strip */
  .nova-table td:nth-child(3){grid-column:1}
  .nova-table td:nth-child(4){grid-column:2}
  .nova-table td:nth-child(5){grid-column:1 / -1}
  .nova-table td:nth-child(6){grid-column:1 / -1}

  .nova-table__cta{width:100%;padding:13px 18px;font-size:15px}
}
@media (max-width:359px){
  .nova-table tr{padding:20px}
  .nova-table td:nth-child(3),.nova-table td:nth-child(4){grid-column:1 / -1}
}

/* --------------------------------------------------------------------------
   16. Plugin proof panel  (dark inset panel + [msw_proof_list])
   -------------------------------------------------------------------------- */
.nova-proof h2 em{font-style:normal;color:var(--nova-mint-400)}

.nova-prooflist{border-top:1px solid rgba(255,255,255,.14)}
.nova-prooflist__item{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;
  padding:24px 24px 24px 16px;border-bottom:1px solid rgba(255,255,255,.14);
  color:inherit;text-decoration:none;transition:background var(--nova-t)}
.nova-prooflist__item:hover,.nova-prooflist__item:focus{background:rgba(255,255,255,.05);color:inherit}
.nova-prooflist__logo{grid-row:span 2;width:44px;height:44px;border-radius:11px;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center}
.nova-prooflist__logo img{width:28px;height:28px;object-fit:contain;display:block;margin:0}
.nova-prooflist__logo i{font-size:17px;line-height:1;color:var(--nova-mint-400)}
.nova-prooflist__title{display:block;font-family:var(--nova-font-bold);font-weight:400;font-size:19px;
  line-height:1.3;letter-spacing:-.015em;color:#fff;margin-bottom:6px}
.nova-prooflist__desc{display:block;font-family:var(--nova-font);font-size:14.5px;line-height:1.6;
  color:rgba(255,255,255,.62);text-wrap:pretty}

@media (max-width:570px){
  .nova-prooflist__item{padding:20px 8px 20px 0;column-gap:14px}
  .nova-prooflist__title{font-size:17px}
}
/* ==========================================================================
   CUSTOM DEVELOPMENT SERVICE PAGE
   Sections 17-22. Same rule as above: tokens only, no brand hex.
   ========================================================================== */
:root{--nova-mint-200:#caf4e3}

/* --------------------------------------------------------------------------
   17. Sticky in-page navigation  [msw_subnav] + [msw_subnav_link]
       The container carries sticky="on", so Avada owns the offset under the
       sticky header and this file only draws the bar.
   -------------------------------------------------------------------------- */
.nova-subnav-wrap{z-index:150;-webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);box-shadow:inset 0 -1px 0 var(--nova-line)}
.nova-subnav{display:flex;align-items:center;gap:24px;width:100%;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nova-subnav::-webkit-scrollbar{display:none}
.nova-subnav__link{padding:16px 0;font-family:var(--nova-font);font-size:15px;line-height:1.5;
  color:var(--nova-grey);white-space:nowrap;text-decoration:none;border-bottom:2px solid transparent;
  transition:color var(--nova-t),border-color var(--nova-t)}
.nova-subnav__link:hover,.nova-subnav__link:focus,.nova-subnav__link.is-active{
  color:var(--nova-black);border-bottom-color:var(--nova-green-500)}
.nova-subnav__cta{margin-left:auto;padding-block:10px}
.nova-subnav__btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:4px;
  background:var(--nova-mint-100);color:var(--nova-green-600);white-space:nowrap;text-decoration:none;
  font-family:var(--nova-font-bold);font-weight:400;font-size:15px;line-height:1.2;
  transition:background var(--nova-t),color var(--nova-t)}
.nova-subnav__btn:hover,.nova-subnav__btn:focus{background:var(--nova-mint-200);color:var(--nova-green-600)}
.nova-subnav__btn i{font-size:14px;line-height:1}
@media (max-width:680px){
  /* on a phone the jump links earn less room than a permanent booking bar */
  .nova-subnav{gap:0}
  .nova-subnav__link{display:none}
  .nova-subnav__cta{margin-left:0;width:100%;padding-block:12px}
  .nova-subnav__btn{width:100%;justify-content:center}
}
@media print{.nova-subnav-wrap{display:none}}
/* --------------------------------------------------------------------------
   18. Overview: "When custom is the better answer"
       Three columns divided by a hairline. The design bleeds the grid 32px
       past the container so card text still lines up with the section head;
       here the outer padding is dropped instead, which reads identically and
       cannot push a scrollbar onto a narrow screen.
   -------------------------------------------------------------------------- */
.nova-why__col + .nova-why__col > .fusion-column-wrapper{box-shadow:inset 1px 0 0 var(--nova-line)}
.nova-whyhead__h2 h2{max-width:16ch;text-wrap:pretty}
.nova-whyhead__lead p{max-width:46ch;margin:0;text-wrap:pretty}
.nova-why__num{--awb-content-margin:17px!important}
.nova-why__num .fusion-li-item{padding-top:0;padding-bottom:0}
.nova-why__num .fusion-li-item-content{font-family:var(--nova-mono);font-size:12px;line-height:1.4;
  letter-spacing:.14em;color:var(--nova-grey)}
.nova-why__p p{margin:0;text-wrap:pretty}
@media (max-width:900px){
  .fusion-body .nova-why > .fusion-column-wrapper > .fusion-builder-row-inner > .fusion-layout-column{
    width:100%;max-width:100%;margin-left:0;margin-right:0}
  .nova-why__col > .fusion-column-wrapper{padding-left:0!important;padding-right:0!important}
  .nova-why__col + .nova-why__col > .fusion-column-wrapper{box-shadow:inset 0 1px 0 var(--nova-line)}
}

/* --------------------------------------------------------------------------
   19. Scope panels: "What is in, and what is not"
       Chrome is set in the column settings; only the list scale lives here.
   -------------------------------------------------------------------------- */
.nova-scopelist{--awb-circle-yes-font-size:12px!important;--awb-content-margin:34px!important}
.nova-scopelist .fusion-li-item{padding-top:5px;padding-bottom:5px}
.nova-scopelist .fusion-li-item-content{font-size:16px;line-height:1.6;color:var(--nova-black)}
.nova-scopelist--out .fusion-li-item-content{color:var(--nova-grey)}
/* --------------------------------------------------------------------------
   20. Process timeline  [msw_timeline] + [msw_timeline_item]
       A dot per step with the rule running between them. No Avada element
       draws a connector through a list, so this one is custom.
   -------------------------------------------------------------------------- */
.nova-timeline{list-style:none;margin:0;padding:0;display:grid;gap:32px}
.nova-timeline__item{position:relative;padding-left:44px}
.nova-timeline__item::before{content:"";position:absolute;left:9px;top:8px;width:12px;height:12px;
  border-radius:50%;background:var(--nova-green-500);box-shadow:0 0 0 4px var(--nova-mint-100)}
.nova-timeline__item::after{content:"";position:absolute;left:14px;top:26px;bottom:-32px;width:2px;
  background:var(--nova-line-strong)}
.nova-timeline__item:last-child::after{display:none}
.nova-timeline__title{display:block;font-family:var(--nova-font-bold);font-weight:400;font-size:17px;
  line-height:1.45;letter-spacing:-.01em;color:var(--nova-black);margin-bottom:2px;text-wrap:pretty}
.nova-timeline__badge{display:inline-flex;align-items:center;margin-left:8px;vertical-align:2px;
  padding:5px 12px;border-radius:999px;background:var(--nova-surface);color:var(--nova-grey);
  font-family:var(--nova-font-bold);font-weight:400;font-size:13px;line-height:1.2;letter-spacing:.01em;
  white-space:nowrap}
.nova-mint .nova-timeline__badge{background:var(--nova-white)}
.nova-timeline__text{display:block;color:var(--nova-grey);font-family:var(--nova-font);
  font-size:15px;line-height:1.65;text-wrap:pretty}
.nova-narrow > .fusion-column-wrapper{max-width:820px;margin-left:auto;margin-right:auto}
@media (max-width:570px){
  .nova-timeline__badge{margin-left:0;margin-top:6px;vertical-align:baseline}
}
/* --------------------------------------------------------------------------
   21. Case study split: pill, arrow link, and the quote beside it
   -------------------------------------------------------------------------- */
.fusion-body .nova-casequote{align-self:center!important}
.nova-noav .nova-quotehead__av{display:none}
.nova-pill p{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  background:var(--nova-mint-100);color:var(--nova-green-600);font-family:var(--nova-font-bold);
  font-weight:400;font-size:13px;line-height:1.3;letter-spacing:.01em;margin:0}
.nova-linkbtn i{transition:transform var(--nova-t)}
.nova-linkbtn:hover i{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   22. "Not quite what you need?" service cards
       The foot link is the real anchor; it stretches over the card so the
       whole tile is clickable without nesting one link inside another.
   -------------------------------------------------------------------------- */
.nova-svccard > .fusion-column-wrapper{position:relative;display:flex;flex-direction:column;height:100%;
  transition:border-color var(--nova-t),box-shadow var(--nova-t),transform var(--nova-t)}
.nova-svccard:hover > .fusion-column-wrapper{border-color:var(--nova-green-500);
  box-shadow:0 18px 40px rgba(0,3,42,.08);transform:translateY(-4px)}
.nova-svccard--dark:hover > .fusion-column-wrapper{border-color:var(--nova-black);
  box-shadow:0 18px 40px rgba(0,3,42,.18)}
/* Avada wraps each element in a bare div, so the flex item is that div, not the
   element itself: the foot is pushed down and centred one level up */
.nova-svccard > .fusion-column-wrapper > div{text-align:center}
.nova-svccard:not(.nova-svccard--dark) > .fusion-column-wrapper > div:last-child{margin-top:auto}
.nova-svccard .nova-cardfoot{padding-top:14px}
/* Avada positions the button itself, which would trap the stretched hit area */
.nova-svccard .fusion-button{position:static!important}
/* the foot link is the real anchor and stretches over the tile, so the whole card
   is clickable without nesting one link inside another */
.nova-svccard .nova-cardfoot::after{content:"";position:absolute;inset:0;z-index:1}
.nova-svccard .fusion-imageframe{margin-bottom:0}
@media (prefers-reduced-motion:reduce){
  .nova-svccard:hover > .fusion-column-wrapper{transform:none}
}
.nova-noav{margin-top:20px;margin-bottom:0}
.nova-svccard--dark > .fusion-column-wrapper{justify-content:center}

/* ==========================================================================
   SERVICE PAGES  ·  sections 23-26
   Shared by all six service pages, built from nova/services-pages.php.
   Same rule as above: tokens only, no brand hex.
   ========================================================================== */

/* --------------------------------------------------------------------------
   23. Deliverables grid  ("What you get")
       The grid itself is a copy of the Custom Development page's columns, so
       only the icon block needs a rule.
   -------------------------------------------------------------------------- */
.nova-feat .fusion-imageframe{display:block}

/* --------------------------------------------------------------------------
   24. Baseline strip  (what every build includes, whatever the service)
       Deliberately a row of short labels rather than more cards: the six cards
       above are what tells one service from another.
   -------------------------------------------------------------------------- */
.nova-baseline > .fusion-column-wrapper{border-top:1px solid rgba(0,3,42,.08);padding-top:28px}
.fusion-body .nova-baseline__list{display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:28px;row-gap:8px;margin:0}
.nova-baseline__list .fusion-li-item{margin:0!important;padding:0}
.nova-baseline__list .fusion-li-item-content{color:var(--awb-color7);font-size:14px}

/* --------------------------------------------------------------------------
   25. Pricing plans
       Drawn to match the site pricing table (wpguy_pricing_plan): white card,
       1px rule, 15px radius, black full-width button under the price, then the
       delivery line and the included list. The highlighted tier wears a black
       banner above it, which is why the column may not clip.
   -------------------------------------------------------------------------- */
.fusion-body .nova-plan,
.fusion-body .nova-plan > .fusion-column-wrapper{--awb-overflow:visible;overflow:visible}
.nova-plan > .fusion-column-wrapper{position:relative}
.fusion-body .nova-plan--pop > .fusion-column-wrapper{border-top-left-radius:0;border-top-right-radius:0}

.nova-plan__flag{position:absolute;left:-1px;right:-1px;bottom:100%;padding:10px;
  background:var(--awb-color8);border:1px solid var(--awb-color8);
  border-top-left-radius:20px;border-top-right-radius:20px}
.nova-plan__flag p{margin:0}

.nova-plan__blurb p{margin:0;min-height:96px}
.nova-plan__price p{margin:0}

.fusion-body .nova-plan__meta{display:flex;flex-wrap:wrap;column-gap:20px;row-gap:6px;margin:0 0 30px}
.nova-plan__meta .fusion-li-item{margin:0!important;padding:0}
.nova-plan__meta .fusion-li-item-content{color:var(--awb-custom_color_2);font-size:14px;white-space:nowrap}

.nova-plan__feathead p{margin:0}
.fusion-body .nova-plan__feats{margin:0}
.nova-plan__feats .fusion-li-item{margin:0 0 4px!important;padding:0}
.nova-plan__feats .fusion-li-item-content{color:var(--awb-custom_color_2);font-size:15px}

.nova-plan .nova-plan__cta{display:block;width:100%;text-align:center}

/* --------------------------------------------------------------------------
   26. The note that sits under the plans
   -------------------------------------------------------------------------- */
.fusion-body .nova-note > .fusion-column-wrapper{max-width:860px;margin-left:auto;margin-right:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.nova-note .fusion-text p{text-align:center}

@media (max-width:1024px){
  .nova-plan__blurb p{min-height:0}
  .fusion-body .nova-plan__meta{column-gap:12px}
}