/* ==========================================================================
   Arceon — Stage 1 visual layer  ·  revision 2 (mobile refinement pass)
   Tokens, typography, spacing, buttons, cards and section bands.
   Content, pricing, positioning and business information are NOT touched.
   Delete this file and its loader to restore the previous appearance exactly.

   Revision 2 changes, all from Anita's review of the staging site:
     1. service card actions are real buttons now (padding, height, arrow gap)
     2. paragraph type and vertical rhythm reduced
     3. hero made more compact, wording untouched
     4. footer layout fixed; clearance added for the fixed cookie consent bar
     5. final blue panel button made distinct and AA compliant
     6. two defects in revision 1 corrected: the hero fine print never matched
        (p:last-child cannot match when a buttons block follows), and the
        CTA panel button lost the cascade to a higher-specificity rule
   ========================================================================== */

:root{
  --arc-navy-950:#0D2440;
  --arc-navy-800:#123A5E;
  --arc-blue-700:#0056A7;
  --arc-blue-600:#1863DC;
  --arc-blue-100:#EAF1FB;
  --arc-blue-50:#F4F8FD;
  --arc-ink:#131A24;
  --arc-body:#47535F;
  --arc-muted:#6B7885;
  --arc-line:#E4EAF2;
  --arc-surface:#FFFFFF;
  --arc-r-card:14px;
  --arc-r-btn:10px;
  --arc-gutter:clamp(1.125rem, 0.9rem + 1.1vw, 3.5rem);
  /* vertical rhythm, tightened from revision 1 */
  --arc-band-pad:clamp(1.9rem, 1.5rem + 1.9vw, 3.4rem);
  --arc-flow:0.8rem;
}

/* ---------- type scale (responsive, clamp-based) ---------- */
.wp-site-blocks{
  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--arc-body);
  -webkit-font-smoothing:antialiased;
}

/* !important on the base colours is deliberate: block-level inline styles and theme
   global styles both target these elements, so the design layer must win explicitly.
   Every section rule below is at least as specific, so it still overrides these. */
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4{
  font-family:inherit;
  color:var(--arc-ink) !important;
  text-wrap:balance;
}

.wp-site-blocks h1{
  font-size:clamp(1.62rem, 1.2rem + 1.9vw, 2.7rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.022em;
}

.wp-site-blocks h2{
  font-size:clamp(1.3rem, 1.08rem + 0.95vw, 1.95rem);
  font-weight:700;
  line-height:1.26;
  letter-spacing:-0.016em;
  margin-block:0 0.5rem;
}

.wp-site-blocks h3{
  font-size:clamp(1rem, 0.95rem + 0.2vw, 1.12rem);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-0.004em;
  margin-block:0 0.45rem;
}

.wp-site-blocks p{
  font-size:clamp(0.9rem, 0.88rem + 0.12vw, 0.975rem);
  line-height:1.58;
  color:var(--arc-body) !important;
}

/* short blue accent rule above every section heading, in place of invented labels */
.arceon-band .wp-block-heading:is(h2)::before{
  content:"";
  display:block;
  width:32px;
  height:3px;
  border-radius:3px;
  background:var(--arc-blue-600);
  margin-bottom:0.7rem;
}

/* ---------- shared vertical rhythm ----------
   The theme spaces sibling blocks at 1.2rem. Tightened here to 0.8rem so sections
   stop feeling airy without losing separation between elements. */
.arceon-band > * + *,
.arceon-hero > * + *,
.arceon-cta-panel > * + *{
  margin-block-start:var(--arc-flow) !important;
}

/* ---------- header ---------- */
.arceon-site-header{
  border-bottom-color:var(--arc-line) !important;
  background:var(--arc-surface) !important;
  padding-top:0.65rem !important;
  padding-bottom:0.65rem !important;
  padding-left:var(--arc-gutter) !important;
  padding-right:var(--arc-gutter) !important;
  box-shadow:0 1px 0 rgba(13,36,64,.04);
  position:relative;
  z-index:20;
}

.arceon-site-header img{ width:44px !important; height:auto; }

.arceon-site-header .wp-block-site-title{
  font-weight:800 !important;
  font-size:1rem !important;
  letter-spacing:0.18em;
  text-transform:uppercase;
  line-height:1 !important;
}
.arceon-site-header .wp-block-site-title a{ color:var(--arc-navy-950) !important; text-decoration:none; }

.arceon-site-header .wp-block-site-tagline{
  color:var(--arc-muted) !important;
  font-size:0.78rem !important;
  line-height:1.35;
  margin-top:0.28rem !important;
}

/* the tagline crowds a 390px header; the line still appears in the H1 and the footer */
@media (max-width:640px){
  .arceon-site-header .wp-block-site-tagline{ display:none; }
}

.arceon-site-header .wp-block-navigation{ font-size:0.94rem !important; font-weight:600; }
.arceon-site-header .wp-block-navigation a{ color:var(--arc-navy-950); text-decoration:none; }
.arceon-site-header .wp-block-navigation a:hover{ color:var(--arc-blue-700); }

/* ---------- hero band ---------- */
.arceon-hero{
  position:relative;
  background:var(--arc-navy-950) !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 140'><path d='M0 136 C 98 129, 208 84, 336 2' fill='none' stroke='%234C8FE8' stroke-width='8' stroke-linecap='round' opacity='0.28'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right -34px bottom -26px !important;
  background-size:250px 103px !important;
  padding-top:clamp(1.6rem, 1.3rem + 1.4vw, 3rem) !important;
  padding-bottom:clamp(1.9rem, 1.55rem + 1.6vw, 3.4rem) !important;
  padding-left:var(--arc-gutter) !important;
  padding-right:var(--arc-gutter) !important;
}
.arceon-hero h1{ color:#fff !important; margin-block:0 0.7rem; max-width:24ch; }
.arceon-hero p{ color:#C6D4E6 !important; max-width:62ch; }
.arceon-hero .wp-block-heading{ color:#fff !important; }

/* the existing eyebrow line, uppercased and set in blue.
   :first-of-type / :last-of-type are used rather than :first-child / :last-child
   because the hero's final child is a buttons block, so p:last-child never matched. */
.arceon-hero .wp-block-paragraph:first-of-type{
  color:#7FB3F0 !important;
  font-size:0.688rem !important;
  font-weight:700 !important;
  letter-spacing:0.13em !important;
  text-transform:uppercase;
  margin-block:0 0.55rem !important;
}

/* reassurance line after the buttons */
.arceon-hero .wp-block-paragraph:last-of-type{
  color:#9DB0C8 !important;
  font-size:0.8125rem !important;
  line-height:1.5 !important;
  margin-block-start:0.85rem !important;
  max-width:56ch;
}
.arceon-hero .wp-block-buttons{ margin-block:0 0.1rem; }

/* ---------- bands ---------- */
.arceon-band{
  padding-top:var(--arc-band-pad) !important;
  padding-bottom:var(--arc-band-pad) !important;
  padding-left:var(--arc-gutter) !important;
  padding-right:var(--arc-gutter) !important;
}
.arceon-band p{ max-width:66ch; }

.arceon-band-tint{
  background:var(--arc-blue-50) !important;
  border-top:1px solid var(--arc-line) !important;
  border-bottom:1px solid var(--arc-line) !important;
}

.arceon-band-navy{ background:var(--arc-navy-800) !important; }
.arceon-band-navy h2,
.arceon-band-navy h3{ color:#fff !important; }
.arceon-band-navy p{ color:#BFD0E4 !important; }
.arceon-band-navy .wp-block-heading:is(h2)::before{ background:#5B9BE8; }

/* the method section's paragraphs become a ruled credibility panel */
.arceon-band-navy .wp-block-paragraph{
  max-width:70ch;
  padding-left:1rem;
  border-left:3px solid var(--arc-blue-600);
}

/* ---------- final call-to-action panel ---------- */
.arceon-cta-panel{
  background:var(--arc-blue-600) !important;
  border-radius:18px;
  padding:clamp(1.4rem, 1.05rem + 1.7vw, 2.6rem) !important;
  max-width:74rem;
  margin-left:auto !important;
  margin-right:auto !important;
}
.arceon-cta-panel h2,
.arceon-cta-panel h3{ color:#fff !important; }
/* #EDF3FD on #1863DC = 4.88:1, clears WCAG AA for normal text.
   The previous #DCE8F9 measured 4.40:1 and failed. */
.arceon-cta-panel p{ color:#EDF3FD !important; }
.arceon-cta-panel .wp-block-heading:is(h2)::before{ background:rgba(255,255,255,.8); }

/* The final CTA button. This selector must out-specify
   .wp-block-button:not(.is-style-outline) .wp-block-button__link  [0,3,0],
   which previously won and painted the button blue on a blue panel. This is [0,5,0]. */
.arceon-cta-panel .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background:#FFFFFF !important;
  border:2px solid #FFFFFF !important;
  color:#0B3D75 !important;              /* 10.83:1 on white */
  font-size:1rem !important;
  font-weight:800 !important;
  letter-spacing:0.01em;
  min-height:54px;
  padding:1rem 1.6rem !important;
  box-shadow:0 8px 20px -8px rgba(4,26,54,.55);
}
.arceon-cta-panel .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background:#EAF2FC !important;
  border-color:#EAF2FC !important;
  color:#0B3D75 !important;
}
/* focus ring that stays visible against the blue panel */
.arceon-cta-panel .wp-block-button__link:focus-visible{
  outline:3px solid #FFFFFF !important;
  outline-offset:3px;
  border-radius:10px;
}

/* ---------- service cards ---------- */
.arceon-cards{ gap:0.85rem !important; row-gap:0.85rem !important; }

.arceon-cards .wp-block-column{
  background:var(--arc-surface) !important;
  border:1px solid var(--arc-line) !important;
  border-radius:var(--arc-r-card);
  padding:1rem;
  box-shadow:0 1px 2px rgba(13,36,64,.05), 0 10px 24px -18px rgba(13,36,64,.22);
  display:flex;
  flex-direction:column;
}
.arceon-band-tint .arceon-cards .wp-block-column{ border-color:#DCE4EE !important; }
.arceon-band-navy .arceon-cards .wp-block-column{ background:#fff !important; border-color:transparent !important; }
.arceon-band-navy .arceon-cards .wp-block-column h3{ color:var(--arc-navy-950) !important; }
.arceon-band-navy .arceon-cards .wp-block-column p{ color:var(--arc-body) !important; }

.arceon-cards .wp-block-column h3{ color:var(--arc-navy-950) !important; margin-block:0 0.4rem; }
.arceon-cards .wp-block-column p{
  font-size:0.9rem !important;
  line-height:1.55 !important;
  margin-block:0 0.85rem;
}

/* price, moved out of the heading into its own element */
.arceon-cards .arceon-price{
  display:inline-block;
  align-self:flex-start;
  background:var(--arc-blue-100);
  border:1px solid #CFE0F6;
  border-radius:999px;
  color:#0B4C8C !important;               /* 7.61:1 on #EAF1FB */
  font-size:0.75rem !important;
  font-weight:700 !important;
  letter-spacing:0.01em;
  line-height:1 !important;
  padding:0.4rem 0.65rem !important;
  margin-block:0 0.65rem !important;
}

/* the standard price, stated beside the founding price so the two are never confused */
.arceon-cards .arceon-price-note{
  display:block;
  font-size:0.72rem !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  color:#6B7885 !important;
  margin-block:0 0.6rem !important;
  padding:0 !important;
}

/* card actions are real buttons: full width, 46px tall, comfortable padding,
   and the arrow is spaced by flex gap rather than literal spaces. */
.arceon-cards .wp-block-buttons{
  margin-top:auto;
  width:100% !important;
}
.arceon-cards .wp-block-button{ width:100% !important; }

.arceon-cards .wp-block-button__link{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:100% !important;
  box-sizing:border-box;
  min-height:46px !important;
  padding:0.7rem 1rem !important;
  background:var(--arc-blue-50) !important;
  border:1px solid #D3E0F2 !important;
  border-radius:9px !important;
  color:var(--arc-blue-700) !important;   /* 6.82:1 on #F4F8FD */
  font-size:0.9rem !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  text-decoration:none;
}
.arceon-cards .wp-block-button__link::after{
  content:"\2192";
  margin-left:0.5rem;
  font-size:1.05em;
  line-height:1;
  transition:transform .15s ease;
}
.arceon-cards .wp-block-button__link:hover{
  background:#E4EEFA !important;
  border-color:#BFD5EF !important;
  color:var(--arc-blue-600) !important;   /* 4.56:1 on #E4EEFA */
}
.arceon-cards .wp-block-button__link:hover::after{ transform:translateX(3px); }

/* ---------- buttons ---------- */
.wp-block-button__link{
  border-radius:var(--arc-r-btn) !important;
  font-weight:700 !important;
  font-size:0.95rem !important;
  padding:0.9rem 1.4rem !important;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background:var(--arc-blue-600) !important;
  border:1.5px solid var(--arc-blue-600) !important;
  color:#fff !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background:var(--arc-blue-700) !important;
  border-color:var(--arc-blue-700) !important;
}
/* secondary button in the hero */
.arceon-hero .wp-block-buttons:nth-of-type(2) .wp-block-button__link{
  background:transparent !important;
  border:1.5px solid #fff !important;
  color:#fff !important;
}
.arceon-hero .wp-block-buttons:nth-of-type(2) .wp-block-button__link:hover{
  background:rgba(255,255,255,.14) !important;
}
/* outline buttons elsewhere on light backgrounds read navy */
.arceon-band .is-style-outline .wp-block-button__link{
  border-color:var(--arc-navy-950) !important;
  color:var(--arc-navy-950) !important;
}
.arceon-band-navy .is-style-outline .wp-block-button__link{
  border-color:#fff !important;
  color:#fff !important;
}

@media (max-width:700px){
  .arceon-hero .wp-block-buttons,
  .arceon-cta-panel .wp-block-buttons,
  .arceon-band-navy .wp-block-buttons{ width:100%; }
  .arceon-hero .wp-block-button,
  .arceon-cta-panel .wp-block-button,
  .arceon-band-navy .wp-block-button{ width:100%; }
}

/* ---------- deliverables list ---------- */
.arceon-band .wp-block-list{ padding-left:0 !important; list-style:none; }
.arceon-band .wp-block-list li{
  position:relative;
  padding-left:1.9rem;
  margin-bottom:0.6rem;
  font-size:0.925rem;
  line-height:1.55;
  color:#3B4752;
}
.arceon-band .wp-block-list li::before{
  content:"";
  position:absolute;
  left:0; top:0.1em;
  width:1.1rem; height:1.1rem;
  border-radius:50%;
  background:var(--arc-blue-100);
  border:1px solid #CFE0F6;
}
.arceon-band .wp-block-list li::after{
  content:"";
  position:absolute;
  left:0.355rem; top:0.36em;
  width:0.4rem; height:0.21rem;
  border-left:1.9px solid var(--arc-blue-700);
  border-bottom:1.9px solid var(--arc-blue-700);
  transform:rotate(-45deg);
}

/* ---------- footer ----------
   The cookie consent bar is position:fixed pinned to bottom:0 and full width below
   576px, and CookieYes adds no class we can hook, so the footer carries permanent
   clearance at mobile widths. The legal links also sit above the copyright line now,
   so the least critical element is nearest the banner. */
.arceon-site-footer{
  background:var(--arc-navy-950) !important;
  border-top-color:transparent !important;
  padding-top:clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem) !important;
  padding-bottom:clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem) !important;
  padding-left:var(--arc-gutter) !important;
  padding-right:var(--arc-gutter) !important;
}
.arceon-site-footer p{ color:#93A6BE !important; }
.arceon-site-footer .wp-block-paragraph:first-of-type,
.arceon-site-footer .wp-block-paragraph:first-of-type p,
.arceon-site-footer strong{ color:#fff !important; }

.arceon-site-footer .wp-block-navigation{ font-size:0.875rem !important; }
.arceon-site-footer .wp-block-navigation ul,
.arceon-site-footer .wp-block-navigation .wp-block-navigation__container{
  flex-wrap:wrap !important;
  gap:0.25rem 1.15rem !important;
}
.arceon-site-footer .wp-block-navigation a{
  color:#C6D4E6 !important;              /* 10.39:1 on navy */
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;                        /* comfortable tap target */
  padding-block:0.15rem;
  border-bottom:1px solid transparent;
}
.arceon-site-footer .wp-block-navigation a:hover,
.arceon-site-footer .wp-block-navigation a:focus-visible{
  color:#fff !important;
  border-bottom-color:var(--arc-blue-600);
}

/* the copyright line, moved out to its own row below the links */
.arceon-footer-legal{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:1.25rem !important;
  padding-top:0.9rem !important;
}
.arceon-footer-legal p{
  color:#7E93AE !important;
  font-size:0.8125rem !important;
  line-height:1.5 !important;
  margin:0 !important;
}

/* Footer clearance for the consent banner is CONDITIONAL, not permanent.
   CookieYes toggles .cky-hide (display:none when hidden) and adds no body class, so
   :has() is the only way to react to the banner actually being on screen. This keeps
   the links clear while the banner is up, and leaves no dead space once it is dismissed. */
@media (max-width:576px){
  /* fallback for any browser without :has() — modest, and the banner is dismissible */
  .arceon-site-footer{ padding-bottom:6rem !important; }
}
@supports selector(:has(*)){
  @media (max-width:576px){
    /* nothing on screen */
    .arceon-site-footer{ padding-bottom:2.5rem !important; }
    /* the full consent banner is up and pinned to the bottom */
    body:has(.cky-consent-container:not(.cky-hide)) .arceon-site-footer{
      padding-bottom:11rem !important;
    }
    /* only the small circular revisit control is up */
    body:has(.cky-consent-container.cky-hide):has(.cky-btn-revisit-wrapper:not(.cky-revisit-hide)) .arceon-site-footer{
      padding-bottom:5rem !important;
    }
  }
}

/* ---------- cookie consent control ----------
   CookieYes injects its CSS at runtime after this stylesheet, so these overrides
   carry !important. They only tighten and bound the banner; nothing is hidden and
   no consent option is removed. */
@media (max-width:576px){
  .cky-consent-container{
    max-height:74vh !important;
  }
  .cky-consent-bar{
    padding:14px 16px !important;
    max-height:74vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .cky-notice .cky-title{ font-size:15px !important; line-height:1.35 !important; }
  .cky-notice-des, .cky-notice-des *{ font-size:12.5px !important; line-height:1.5 !important; }
  .cky-notice-btn-wrapper{ margin-top:10px !important; }
  .cky-btn{ padding:11px 16px !important; min-height:44px !important; }
}
/* ---------- the floating consent control ----------
   CookieYes anchors this 45px circle at bottom-left 15px with z-index 999999.
   At 390px that reaches 38px into the text column, so it sits over the start of
   left-aligned lines and the left edge of the full-width card buttons. It is moved
   to the bottom-right, where the ragged-right margin absorbs it, where it is clear
   of the left-aligned footer links, and where on desktop it falls in the empty
   margin outside the constrained content column. */
.cky-btn-revisit-wrapper{
  left:auto !important;
  right:16px !important;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 2px 10px rgba(4,26,54,.30) !important;
}
/* the plugin anchors the hover tooltip for a left-side button; mirrored here since
   the control now renders on the right. Touch devices never show this. */
.cky-btn-revisit-wrapper:hover::before{
  content:attr(data-tooltip) !important;
  position:absolute !important;
  background:#4e4b66 !important;
  color:#ffffff !important;
  left:auto !important;
  right:calc(100% + 7px) !important;
  font-size:12px !important;
  line-height:16px !important;
  width:max-content !important;
  padding:4px 8px !important;
  border-radius:4px !important;
}
.cky-btn-revisit-wrapper:hover::after{
  position:absolute !important;
  content:"" !important;
  border:5px solid transparent !important;
  left:auto !important;
  right:calc(100% + 2px) !important;
  border-right-width:0 !important;
  border-left-color:#4e4b66 !important;
}

/* ---------- accessibility ---------- */
.wp-site-blocks a:focus-visible,
.wp-site-blocks button:focus-visible,
.wp-block-button__link:focus-visible,
.arceon-site-footer .wp-block-navigation a:focus-visible{
  outline:2px solid var(--arc-blue-600);
  outline-offset:2px;
  border-radius:4px;
}
.arceon-site-footer .wp-block-navigation a:focus-visible,
.arceon-hero .wp-block-button__link:focus-visible{
  outline-color:#fff;
}
@media (prefers-reduced-motion:reduce){
  .wp-site-blocks *{ transition:none !important; animation:none !important; }
}