/* ==========================================================================
   iceConnect Portal — portal.css
   Shared stylesheet for every portal page.

   Upload ONCE, then every page links to it. Change this file and all
   pages update together.

   Built on the iceConnect design tokens:
   https://brand.iceconnect.com/dist/theme.css
   ========================================================================== */

/* ==========================================================================
   iceConnect — Client Guide
   Slate & Brass v2.6 · tokens from brand.iceconnect.com/dist/theme.css
   ========================================================================== */
:root{
  --ic-slate:#0F172A; --ic-slate-800:#1E293B; --ic-slate-700:#334155;
  --ic-slate-500:#64748B; --ic-slate-200:#E2E8F0; --ic-slate-100:#F1F5F9;
  --ic-offwhite:#FAFAF8; --ic-white:#FFFFFF;
  --ic-brass:#C8A35B; --ic-brass-hover:#BC9550; --ic-brass-active:#B89149; --ic-brass-tint:#F6F3EB;
  --ic-steel:#4E7CA1; --ic-steel-hover:#456E8E;

  --ic-text-primary:var(--ic-slate); --ic-text-secondary:var(--ic-slate-500);
  --ic-text-on-accent:var(--ic-slate);
  --ic-bg-page:var(--ic-offwhite); --ic-bg-surface:var(--ic-white);
  --ic-bg-muted:var(--ic-slate-100); --ic-bg-accent:var(--ic-brass-tint);
  --ic-border-default:var(--ic-slate-200);
  --ic-action-primary:var(--ic-brass); --ic-focus-ring:var(--ic-brass);

  --ic-success-bg:#DCFCE7; --ic-success-base:#22C55E; --ic-success-text:#15803D;
  --ic-warning-bg:#FEF3C7; --ic-warning-base:#D97706; --ic-warning-text:#B45309;
  --ic-error-bg:#FEE2E2;   --ic-error-base:#DC2626;   --ic-error-text:#B91C1C;
  --ic-info-bg:#E8EFF5;    --ic-info-base:#4E7CA1;    --ic-info-text:#3B5F7D;

  /* Chart · categorical (in order) — used for CARES */
  --ic-chart-1:#4E7CA1; --ic-chart-2:#C8A35B; --ic-chart-3:#4F9D8C;
  --ic-chart-4:#8C6A93; --ic-chart-5:#C0795B; --ic-chart-6:#64748B;

  --ic-font-heading:'Bricolage Grotesque',system-ui,sans-serif;
  --ic-font-body:'DM Sans',system-ui,sans-serif;

  /* Type scale. brand.iceconnect.com/dist/theme.css is not enqueued here, so the
     sizes these rules reference must be declared locally — an undefined var makes
     the whole font-size declaration invalid and the element silently inherits. */
  --ic-size-sub:18px;      /* Subheading / H3 — matches .panel h3 */
  --ic-size-caption:11px;  /* Tracked uppercase metadata captions */

  --ic-space-2xs:4px; --ic-space-xs:8px; --ic-space-sm:12px; --ic-space-md:16px;
  --ic-space-lg:24px; --ic-space-xl:32px; --ic-space-2xl:48px; --ic-space-3xl:64px;

  --ic-radius-sm:6px; --ic-radius-md:8px; --ic-radius-lg:12px; --ic-radius-xl:20px; --ic-radius-full:9999px;
  --ic-elevation-sm:0 1px 2px rgba(15,23,42,.06);
  --ic-elevation-md:0 2px 8px rgba(15,23,42,.08);
  --ic-elevation-lg:0 8px 24px rgba(15,23,42,.12);
  --ic-motion-fast:120ms; --ic-motion-base:180ms; --ic-motion-slow:280ms;
  --ic-motion-ease:cubic-bezier(.2,0,0,1);
  /* The brand's single looping primitive, for "live" indicators only.
     brand.iceconnect.com/dist/tokens.json → motion.pulse. Declared locally for
     the same reason as the type scale above: theme.css is not enqueued here, and
     an undefined var invalidates the whole animation shorthand — the dot would
     then simply sit still with no error anywhere. */
  --ic-pulse-duration:2.4s; --ic-pulse-ease:ease-out;
  --ic-z-sticky:1100; --ic-z-overlay:1200; --ic-z-modal:1300;

  --nav-w:296px;
  --gutter:24px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--ic-space-lg);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0; background:var(--ic-bg-page); color:var(--ic-text-primary);
  font-family:var(--ic-font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--ic-font-heading);margin:0;letter-spacing:-.01em;}
p{margin:0 0 var(--ic-space-md);}
a{color:var(--ic-slate);}
/* WordPress/theme hardening: themes ship `a{color:#0073aa}` which can out-rank a
   bare element selector depending on load order. Anchor every link colour to an
   explicit rule inside the guide so the theme can never bleed through. */
.icg a{color:var(--ic-slate);}
.icg .ilink{color:var(--ic-slate);}
.icg .nav a{color:#94A3B8;}
.icg .nav a.is-active,.icg .nav a:hover{color:var(--ic-white);}
.icg .qi__v{color:#CBD5E1;}
.icg .qi__v:hover{color:var(--ic-brass);}
.icg .sidebar__foot a{color:#94A3B8;}
.icg .sidebar__foot a:hover{color:var(--ic-brass);}
.icg .channel .value{color:var(--ic-slate);}
.icg .escperson a{color:var(--ic-slate);}
.icg .office address a{color:var(--ic-slate);}
.icg .foot a{color:#94A3B8;}
:is(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ic-focus-ring); outline-offset:2px; border-radius:var(--ic-radius-sm);
}
/* WordPress themes commonly style button:focus (not :focus-visible), which draws a
   box on MOUSE click as well as keyboard focus. Kill it on our own controls, then
   reinstate a keyboard-only ring below. Mouse users see nothing; keyboard users
   still get a visible focus indicator, so this does not harm accessibility. */
.icg :is(a,button):focus{outline:none;}
/* !important is warranted here: some themes set button:focus with !important, and a
   focus box on mouse click is a visual bug we must be able to override from inside
   a pasted fragment. The keyboard ring below is reinstated at the same weight. */
.icg .navgroup__btn:focus,
.icg .nav a:focus,
.icg .burger:focus{
  outline:none !important;
  border-color:transparent !important;
  background-image:none !important;
}
.icg .navgroup__btn:focus:not(:focus-visible),
.icg .nav a:focus:not(:focus-visible),
.icg .burger:focus:not(:focus-visible){
  box-shadow:none !important;
  background-color:transparent !important;
}
/* the active row keeps its brass bar even while focused by mouse */
.icg .nav a.is-active:focus:not(:focus-visible){
  box-shadow:inset 3px 0 0 var(--ic-brass) !important;
  background-color:rgba(200,163,91,.12) !important;
}
/* Keyboard-only focus ring, drawn inside the row so it can't overflow the rail. */
.icg .navgroup__btn:focus-visible,
.icg .nav a:focus-visible{
  outline:none !important;
  box-shadow:inset 0 0 0 2px var(--ic-brass) !important;
}
.icg .nav a.is-active:focus-visible{
  box-shadow:inset 3px 0 0 var(--ic-brass), inset 0 0 0 2px var(--ic-brass) !important;
}
.icg .burger:focus-visible{outline:2px solid var(--ic-brass) !important;outline-offset:2px;}
.skip{
  position:absolute;left:var(--ic-space-md);top:-100px;z-index:var(--ic-z-modal);
  background:var(--ic-brass);color:var(--ic-slate);font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:7px;text-decoration:none;transition:top var(--ic-motion-base) var(--ic-motion-ease);
}
.skip:focus{top:var(--ic-space-md);}

/* ==========================================================================
   Layout — floating nav + panelled main
   ========================================================================== */
/* ==========================================================================
   PAGE-BUILDER HARDENING  (why the sidebar is fixed, not sticky)
   position:sticky is silently disabled if ANY ancestor between the element and its
   scroll container has `overflow` set to anything but `visible`. WordPress themes
   and Elementor routinely set `overflow:hidden` (or `overflow-x:hidden`, which
   computes overflow-y to `auto` and breaks it just the same) on body, section and
   widget wrappers. From inside a pasted fragment we cannot reliably restyle every
   ancestor, so we do not depend on them: the sidebar is `position:fixed` and
   measured against the viewport, which no ancestor can veto. The main column is
   given a matching left margin to sit beside it.
   ========================================================================== */
.icg{position:relative;}

.shell{
  max-width:1440px;margin:0 auto;
  padding:var(--gutter);
  position:relative;
}
/* Reserve the rail's width; the fixed sidebar sits in it. */
.main{margin-left:calc(var(--nav-w) + var(--gutter));}

/* ---------- Floating sidebar ---------- */
.sidebar{
  position:fixed;top:var(--gutter);
  left:var(--rail-x,var(--gutter));
  width:var(--nav-w);
  background:var(--ic-slate);color:#94A3B8;
  border-radius:var(--ic-radius-xl);
  box-shadow:var(--ic-elevation-lg);
  padding:var(--ic-space-xl) 0 var(--ic-space-lg);
  max-height:calc(100vh - (var(--gutter) * 2));
  overflow-y:auto;
  z-index:var(--ic-z-sticky);
}
/* Overlay scrollbar: takes no layout width, so nav rows always reach the rail's
   right edge and nothing reflows when the bar appears or disappears. */
.sidebar{scrollbar-width:none;-ms-overflow-style:none;}
.sidebar::-webkit-scrollbar{width:0;height:0;background:transparent;}

.sidebar__brand{padding:0 var(--ic-space-xl) var(--ic-space-lg);}
.sidebar__brand img{width:140px;height:auto;display:block;}
.sidebar__eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ic-brass);margin:var(--ic-space-md) 0 0;
}

/* Collapsible groups */
/* ==========================================================================
   NAV CONTAINER — load-bearing.
   The host theme (Jupiter X) styles the bare <nav> element with
   display:flex; flex-direction:row; flex-wrap:wrap  for its own menus. That turns
   every .navgroup into a CONTENT-SIZED flex item (flex:0 1 auto), collapsing the
   groups to ~242px inside the 296px rail — so every row, every divider line and the
   brass active highlight stop ~54px short of the edge. We never set display on .nav
   ourselves, so the theme won a fight we weren't having. Pin block layout explicitly.
   ========================================================================== */
.nav{
  display:block !important;
  width:100% !important;
  box-sizing:border-box;
  padding:var(--ic-space-xs) 0;
}
.nav > *{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  flex:none !important;
  box-sizing:border-box;
}
.navgroup{width:100%;box-sizing:border-box;border-top:1px solid rgba(255,255,255,.07);}
.navgroup:first-of-type{border-top:0;}
.navgroup__btn{
  display:flex;align-items:center;gap:var(--ic-space-xs);
  position:relative;
  width:100%;box-sizing:border-box;
  /* Shorthand FIRST, then the override. Reversing these silently drops the reserved
     space and the chevron overlaps the label. */
  padding:14px var(--ic-space-xl);
  padding-right:calc(var(--ic-space-xl) + 22px);
  background:transparent;border:0;cursor:pointer;
  font-family:var(--ic-font-body);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#64748B;
  text-align:left;
  transition:color var(--ic-motion-fast) var(--ic-motion-ease);
}
.navgroup__btn:hover{color:#94A3B8;}
.navgroup__btn svg{
  position:absolute;right:var(--ic-space-xl);top:50%;
  width:14px;height:14px;stroke-width:2;flex:0 0 14px;
  transform-origin:center;
  transform:translateY(-50%);
  transition:transform var(--ic-motion-base) var(--ic-motion-ease);
}
.navgroup__btn[aria-expanded="false"] svg{transform:translateY(-50%) rotate(-90deg);}
/* Group headings keep their colour when active — no brass */
.navgroup__list{overflow:hidden;padding:2px 0 12px;}
.navgroup__btn[aria-expanded="false"] + .navgroup__list{display:none;}
/* No-JS fallback: until the script marks the nav as enhanced, ignore the collapsed
   state entirely so every link stays reachable if inline JS is stripped. */
.nav:not(.js) .navgroup__list{display:block !important;}
.nav:not(.js) .navgroup__btn svg{display:none;}

.nav a{
  display:flex;align-items:center;gap:11px;
  width:100%;box-sizing:border-box;
  padding:9px var(--ic-space-xl);
  min-height:37px;
  color:#94A3B8;text-decoration:none;
  font-size:13.5px;font-weight:500;line-height:1.4;
  /* Long labels must not wrap: a wrapped row is taller, so its highlight looks a
     different size from its neighbours. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--ic-motion-fast) var(--ic-motion-ease),color var(--ic-motion-fast) var(--ic-motion-ease);
}
.nav a svg{flex:0 0 16px;width:16px;height:16px;stroke-width:1.75;opacity:.7;}
.nav a:hover{background:rgba(255,255,255,.05);color:var(--ic-white);}
.nav a:hover svg{opacity:1;}
.nav a.is-active{
  background:rgba(200,163,91,.12);color:var(--ic-white);font-weight:700;
  box-shadow:inset 3px 0 0 var(--ic-brass);
}
.nav a.is-active svg{color:var(--ic-brass);opacity:1;}

.sidebar__foot{
  margin-top:var(--ic-space-sm);padding:var(--ic-space-lg) var(--ic-space-xl) 0;
  border-top:1px solid rgba(255,255,255,.07);font-size:12.5px;line-height:1.8;
}
.sidebar__foot a{display:block;color:#94A3B8;text-decoration:none;}
.sidebar__foot a:hover{color:var(--ic-brass);}
.sidebar__foot .sfk{
  display:block;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#475569;margin-top:8px;
}

/* ---------- Mobile bar ---------- */
.mobilebar{display:none;}
.scrim{display:none;}

/* ==========================================================================
   Main — every section is a rounded panel
   ========================================================================== */
.main{min-width:0;display:flex;flex-direction:column;gap:0;}

/* Flat sections on the page ground — cards inside carry the borders */
.panel{
  padding:var(--ic-space-3xl) var(--ic-space-2xl);
  border-top:1px solid var(--ic-border-default);
}
/* The filled surfaces (hero, CARES) never carry a divider */
.panel--slate{border-top:0;}
/* Nor does the section that immediately follows one */
.panel--slate + .panel{border-top:0;}
/* Only the hero, CARES and footer are filled surfaces */
.panel--slate{
  background:var(--ic-slate);color:var(--ic-white);
  border-top:0;border-radius:var(--ic-radius-xl);
  box-shadow:var(--ic-elevation-lg);
  padding:var(--ic-space-3xl) var(--ic-space-2xl);
}
/* One container width for every section — the brand portal uses a single
   .wrap for all content, so headings and left edges line up down the page. */
.inner{max-width:976px;margin:0 auto;}
/* Keep a comfortable reading measure for running prose without narrowing the
   section itself: the box stays aligned, only the line length is capped. */
.inner > p{max-width:68ch;}
.section__lede{max-width:62ch;}

/* ---------- Hero ---------- */
.hero{padding:var(--ic-space-3xl) var(--ic-space-2xl);margin-bottom:var(--ic-space-xl);}
#charter{margin:var(--ic-space-xl) 0;}
.foot{margin-top:var(--ic-space-xl);}
.hero__eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ic-brass);margin:0 0 var(--ic-space-md);
}
.hero h1{
  font-size:clamp(32px,4.6vw,52px);font-weight:800;line-height:1.0;
  letter-spacing:-.02em;margin-bottom:var(--ic-space-lg);
}
.h1-break{display:inline;}
.hero h1 em{font-style:normal;color:var(--ic-brass);}
.hero__lede{font-size:18px;line-height:1.55;color:#CBD5E1;max-width:60ch;margin:0;}
.hero__quick{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ic-space-lg);
  margin-top:var(--ic-space-xl);padding-top:var(--ic-space-lg);
  border-top:1px solid var(--ic-slate-700);
}
.qi{display:flex;gap:var(--ic-space-sm);align-items:stretch;}
.qi__box{
  flex:0 0 42px;align-self:stretch;
  display:grid;place-items:center;
  background:rgba(200,163,91,.12);
  border:1px solid rgba(200,163,91,.22);
  border-radius:var(--ic-radius-md);
  color:var(--ic-brass);
}
.qi__box svg{width:19px;height:19px;stroke-width:1.75;}
.qi__t{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.qi__k{
  display:block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#64748B;margin-bottom:3px;line-height:1.4;
}
.qi__v{
  display:inline-block;align-self:flex-start;
  font-size:14.5px;font-weight:500;
  color:#CBD5E1;text-decoration:none;line-height:1.4;
  border-bottom:1px solid transparent;
  transition:color var(--ic-motion-fast) var(--ic-motion-ease),
             border-color var(--ic-motion-fast) var(--ic-motion-ease);
}
.qi__v:hover{color:var(--ic-brass);border-bottom-color:rgba(200,163,91,.6);}
.qi__v{white-space:nowrap;}
.qi__v em{
  font-style:normal;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#64748B;margin-left:5px;
}

/* ---------- Section heads ---------- */
.section__num{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ic-brass);margin:0 0 var(--ic-space-sm);
}
.panel h2{
  font-size:clamp(24px,3vw,32px);font-weight:700;line-height:1.05;
  letter-spacing:-.01em;margin:0 0 var(--ic-space-md);
}
.section__lede{font-size:18px;line-height:1.55;color:var(--ic-text-secondary);max-width:62ch;margin:0 0 var(--ic-space-xl);}
.panel--slate .section__lede{color:#CBD5E1;}
.panel h3{font-size:18px;font-weight:700;line-height:1.25;margin:0 0 var(--ic-space-xs);}

/* ---------- Cards & grids ---------- */
.card{
  background:var(--ic-bg-surface);border:1px solid var(--ic-border-default);
  border-radius:var(--ic-radius-lg);padding:var(--ic-space-lg);box-shadow:var(--ic-elevation-sm);
}
.grid{display:grid;gap:var(--ic-space-md);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}

.channel{display:flex;gap:var(--ic-space-md);align-items:flex-start;}
.channel__icon{
  flex:0 0 40px;width:40px;height:40px;border-radius:var(--ic-radius-md);
  background:var(--ic-brass-tint);display:grid;place-items:center;color:var(--ic-slate);
}
.channel__icon svg{width:20px;height:20px;stroke-width:1.75;}
.channel__icon--brass{background:var(--ic-brass);}
.channel p{font-size:14.5px;color:var(--ic-text-secondary);margin:0;}
.channel .label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ic-text-secondary);margin-bottom:2px;
}
.channel .value{
  display:inline-block;font-size:15px;font-weight:700;color:var(--ic-slate);
  text-decoration:none;margin-bottom:var(--ic-space-xs);
  border-bottom:2px solid var(--ic-brass);padding-bottom:1px;
  transition:color var(--ic-motion-fast) var(--ic-motion-ease);
}
.channel .value:hover{color:var(--ic-brass-hover);}

.ilink{
  color:var(--ic-slate);font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--ic-brass);padding-bottom:1px;
  transition:color var(--ic-motion-fast) var(--ic-motion-ease);
}
.ilink:hover{color:var(--ic-brass-hover);}

/* ---------- Callout ---------- */
.callout{
  background:var(--ic-bg-accent);border-left:3px solid var(--ic-brass);
  border-radius:var(--ic-radius-md);padding:var(--ic-space-md) var(--ic-space-lg);
  display:flex;gap:var(--ic-space-sm);align-items:flex-start;
  margin:var(--ic-space-lg) 0 0;color:var(--ic-slate);
}
.callout svg{flex:0 0 19px;width:19px;height:19px;stroke-width:1.75;color:var(--ic-slate);margin-top:2px;}
.callout p{margin:0;font-size:14.5px;line-height:1.55;}

/* ==========================================================================
   SLO table
   ========================================================================== */
.tablewrap{
  background:var(--ic-bg-surface);border:1px solid var(--ic-border-default);
  border-radius:var(--ic-radius-lg);box-shadow:var(--ic-elevation-sm);overflow:hidden;
}
.scrollhint{
  display:none;align-items:center;gap:7px;
  font-size:12.5px;color:var(--ic-text-secondary);
  margin:0 0 var(--ic-space-xs);
}
.scrollhint svg{width:15px;height:15px;stroke-width:1.75;flex:0 0 15px;}
.slo{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;}
.slo thead th{
  font-family:var(--ic-font-body);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ic-text-secondary);text-align:left;
  background:var(--ic-bg-muted);padding:13px var(--ic-space-md);
  border-bottom:1px solid var(--ic-border-default);white-space:nowrap;
}
.slo tbody th,.slo tbody td{
  padding:15px var(--ic-space-md);text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--ic-border-default);
}
.slo tbody tr:last-child th,.slo tbody tr:last-child td{border-bottom:0;}
.slo tbody tr:hover{background:var(--ic-bg-muted);}
.slo__pri{width:1%;white-space:nowrap;}
.slo__num{
  font-family:var(--ic-font-body);font-size:14.5px;font-weight:700;
  color:var(--ic-slate);white-space:nowrap;
}
.slo__num span{
  display:block;font-size:12.5px;font-weight:400;color:var(--ic-text-secondary);margin-top:1px;
}
.slo__v{font-weight:700;color:var(--ic-slate);white-space:nowrap;}
.slo__eg{color:var(--ic-text-secondary);font-size:13.5px;line-height:1.5;min-width:230px;}

/* Priority pills — status token sets (tint bg · AA text) */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  border-radius:var(--ic-radius-full);padding:5px 13px 5px 10px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;border:1px solid;
}
.pill i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px;}
.pill--p1{background:var(--ic-error-bg);   color:var(--ic-error-text);   border-color:#FECACA;}
.pill--p2{background:var(--ic-warning-bg); color:var(--ic-warning-text); border-color:#FDE68A;}
.pill--p3{background:#FEFCE8;              color:#A16207;               border-color:#FDE68A;}
.pill--p4{background:var(--ic-success-bg); color:var(--ic-success-text); border-color:#BBF7D0;}
.pill--p5{background:var(--ic-info-bg);    color:var(--ic-info-text);    border-color:#CFDEEA;}

/* ---------- Tiers ---------- */
.tier{
  display:grid;grid-template-columns:132px 1fr;gap:var(--ic-space-lg);
  padding:var(--ic-space-lg) 0;border-top:1px solid var(--ic-border-default);
}
.tier:first-child{border-top:0;padding-top:0;}
.tier:last-child{padding-bottom:0;}
.tier__label{
  font-family:var(--ic-font-heading);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ic-slate);
  padding-left:var(--ic-space-sm);border-left:2px solid var(--ic-brass);
  line-height:1.35;height:fit-content;
}
.tier__label span{display:block;font-family:var(--ic-font-body);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ic-text-secondary);margin-top:3px;}
.tier p{margin:0;font-size:14.5px;color:var(--ic-text-secondary);line-height:1.6;}

/* ---------- Escalation ladder ----------
   Stage 1 branches by office (two helpdesk managers); stages 2-4 are a single common
   path. A vertical rail down the left ties the stages into one sequence, so the fork
   reads as "pick one of these two", not "here are five separate people". */
.escflow{display:flex;flex-direction:column;}
.escstage{
  position:relative;
  padding:0 0 var(--ic-space-lg) 46px;
}
/* the rail */
.escstage::before{
  content:"";position:absolute;left:15px;top:32px;bottom:0;
  width:2px;background:var(--ic-border-default);
}
.escstage--final::before{display:none;}

.escstage__head{
  display:flex;align-items:flex-start;gap:12px;
  margin:0 0 var(--ic-space-md) -46px;
  min-height:32px;
}
.escstage__head > div{padding-top:6px;}
.esccard__n{
  flex:0 0 32px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ic-brass);color:var(--ic-slate);
  font-family:var(--ic-font-heading);font-size:16px;font-weight:800;line-height:1;
  position:relative;z-index:1;
}
.escstage__lab{
  margin:0;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ic-text-secondary);line-height:1.5;
}
.escstage__sub{
  margin:4px 0 0;font-size:14px;color:var(--ic-text-secondary);line-height:1.55;
  max-width:52ch;
}

/* the fork */
.escsplit{display:grid;grid-template-columns:1fr 1fr;gap:var(--ic-space-md);}

.escperson{
  display:flex;flex-direction:column;
  background:var(--ic-bg-surface);border:1px solid var(--ic-border-default);
  border-radius:var(--ic-radius-lg);
  padding:var(--ic-space-lg);box-shadow:var(--ic-elevation-sm);
}
.escperson{border-left:3px solid var(--ic-brass);}
.escperson--wide{max-width:calc(50% - (var(--ic-space-md) / 2));}
.escperson__for{
  margin:0 0 var(--ic-space-sm);
  display:inline-block;align-self:flex-start;
  background:var(--ic-brass-tint);color:#7A6231;
  border-radius:var(--ic-radius-full);
  padding:3px 10px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.escperson h3{font-size:17px;margin:0 0 2px;}
.escperson__role{
  margin:0 0 var(--ic-space-sm);
  font-size:13px;color:var(--ic-text-secondary);font-weight:500;
}
.escperson__note{
  margin:0 0 var(--ic-space-md);
  font-size:14px;color:var(--ic-text-secondary);line-height:1.55;flex:1;
}
.escperson a{
  color:var(--ic-slate);text-decoration:none;font-size:13.5px;line-height:1.7;
  align-self:flex-start;
}
.escperson a:first-of-type{font-weight:700;}
.escperson a:hover{color:var(--ic-brass-hover);text-decoration:underline;}

/* ---------- Pillars ---------- */
.pillar{display:flex;gap:var(--ic-space-sm);align-items:flex-start;}
.pillar svg{flex:0 0 19px;width:19px;height:19px;stroke-width:1.75;color:var(--ic-brass);margin-top:3px;}
.pillar strong{display:block;font-family:var(--ic-font-heading);font-size:15.5px;font-weight:700;line-height:1.3;margin-bottom:3px;}
.pillar span{font-size:13.5px;color:var(--ic-text-secondary);line-height:1.5;}

/* ---------- Ticked lists ---------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;}
.ticks li svg{flex:0 0 17px;width:17px;height:17px;stroke-width:2;color:var(--ic-brass);margin-top:2px;}
.ticks--3{grid-template-columns:repeat(3,1fr);gap:10px var(--ic-space-lg);}

/* ---------- Licence table ---------- */
.lic{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;}
.lic th,.lic td{padding:14px var(--ic-space-md);text-align:left;border-bottom:1px solid var(--ic-border-default);vertical-align:top;}
.lic thead th{
  font-family:var(--ic-font-body);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ic-text-secondary);background:var(--ic-bg-muted);
}
.lic tbody th{font-family:var(--ic-font-heading);font-size:15.5px;font-weight:700;color:var(--ic-slate);white-space:nowrap;}
.lic tbody td{color:var(--ic-text-secondary);}
.lic tbody tr:last-child th,.lic tbody tr:last-child td{border-bottom:0;}

/* ---------- Scope ---------- */
.scope{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ic-space-md);}
.scope__card{padding:var(--ic-space-lg);border-radius:var(--ic-radius-lg);border:1px solid;}
.scope__card--in{background:var(--ic-success-bg);border-color:#BBF7D0;}
.scope__card--out{background:var(--ic-bg-muted);border-color:var(--ic-border-default);}
.scope__card h3{display:flex;align-items:center;gap:9px;margin-bottom:var(--ic-space-xs);}
.scope__card h3 svg{width:19px;height:19px;stroke-width:1.75;}
.scope__card--in h3{color:var(--ic-success-text);}
.scope__card--out h3{color:var(--ic-text-secondary);}
.scope__card p{font-size:14.5px;line-height:1.6;margin:0;color:var(--ic-slate);}
.scope__card--out p{color:var(--ic-text-secondary);}

/* ==========================================================================
   CARES — the signature graphic
   ========================================================================== */
.cares{margin-top:var(--ic-space-xl);}
.cares__svg{width:100%;height:auto;display:block;}
.cares__svg .letter{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:800;font-size:96px;
  text-anchor:middle;dominant-baseline:central;
  letter-spacing:-.02em;
}
.cares__svg .cap{
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:700;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;text-anchor:middle;
}
.cares__svg .body{
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:400;font-size:14px;fill:#64748B;text-anchor:middle;
}

/* Fallback list — shown only on narrow screens */
.cares__list{display:none;}
.careslist{display:grid;gap:var(--ic-space-sm);}
.careslist__item{
  display:flex;gap:var(--ic-space-md);align-items:flex-start;
  background:var(--ic-bg-surface);border:1px solid var(--ic-border-default);
  border-radius:var(--ic-radius-lg);padding:var(--ic-space-lg);box-shadow:var(--ic-elevation-sm);
  border-left:4px solid var(--c);
}
.careslist__letter{
  flex:0 0 52px;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--c);color:var(--ic-white);
  font-family:var(--ic-font-heading);font-size:26px;font-weight:800;line-height:1;
}
.careslist__item h3{font-size:15px;margin-bottom:4px;color:var(--c);letter-spacing:.06em;text-transform:uppercase;}
.careslist__item p{font-size:14.5px;color:var(--ic-text-secondary);line-height:1.55;margin:0;}

/* ---------- Security trade-off chart ---------- */
.chart{
  margin:var(--ic-space-xl) 0 var(--ic-space-lg);
  padding:var(--ic-space-lg);
  background:var(--ic-slate);border-radius:var(--ic-radius-lg);
}
.chart svg{width:100%;height:auto;display:block;}
.chart .ck{font-family:var(--ic-font-body);font-size:14px;font-weight:700;}
.chart .cs{font-family:var(--ic-font-body);font-size:10.5px;font-weight:700;letter-spacing:.12em;}
.chart .ca{font-family:var(--ic-font-body);font-size:12px;font-weight:500;}
.chart .cz{font-family:var(--ic-font-body);font-size:11.5px;font-weight:400;}
.chart figcaption{
  font-size:13.5px;color:var(--ic-text-secondary);line-height:1.55;
  margin-top:var(--ic-space-sm);
}

/* ---------- Offices ---------- */
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ic-space-md);}
.office h3{display:flex;align-items:center;gap:8px;font-size:16px;margin-bottom:var(--ic-space-xs);}
.office h3 svg{width:17px;height:17px;stroke-width:1.75;color:var(--ic-brass);}
.office address{font-style:normal;font-size:14px;color:var(--ic-text-secondary);line-height:1.65;}
.office address a{color:var(--ic-slate);text-decoration:none;font-weight:500;}
.office address a:hover{color:var(--ic-brass-hover);text-decoration:underline;}
.office__div{display:block;height:1px;background:var(--ic-border-default);margin:var(--ic-space-sm) 0;}
.office__k{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ic-text-secondary);margin:var(--ic-space-xs) 0 1px;
}
.office__k:first-of-type{margin-top:0;}
.office__k + a{display:block;}
.office__hq{
  display:inline-block;margin-left:auto;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ic-slate);background:var(--ic-brass);
  border-radius:var(--ic-radius-full);padding:3px 9px;
}

/* ---------- Footer ---------- */
.foot{
  background:var(--ic-slate);color:#94A3B8;
  border-radius:var(--ic-radius-xl);
  padding:var(--ic-space-2xl);
  box-shadow:var(--ic-elevation-lg);
}
.foot img{width:140px;height:auto;margin-bottom:var(--ic-space-lg);}
.foot__note{font-size:14px;line-height:1.6;max-width:56ch;margin:0 0 var(--ic-space-lg);}
/* Legal block: not running prose, so it must NOT inherit the 68ch reading measure,
   which was re-wrapping each <br> line mid-phrase. Let it use the full width and
   break only where we tell it to. */
.inner > p.foot__legal,
.foot__legal{
  max-width:none;
  font-size:12.5px;line-height:1.7;color:#64748B;
  padding-top:var(--ic-space-lg);border-top:1px solid var(--ic-slate-700);
  margin:0;
}
/* Direct children only. Each top-level span is one legal line and gets its own
   row — but the copyright line contains a nested <span class="ic-year"> for the
   auto-updating year, and a bare `.foot__legal span` rule would promote THAT to
   a block too, splitting "Copyright © 2026 iceConnect" across three lines. The
   child combinator keeps the year inline where it belongs. */
.foot__legal > span{display:block;text-wrap:pretty;}
.foot__legal b{font-weight:500;color:#94A3B8;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  :root{--gutter:16px;}
  /* On narrow screens the hard break lands mid-phrase; let the heading wrap naturally. */
  .h1-break{display:none;}
  .shell{display:block;padding:var(--ic-space-md);}
  .main{margin-left:0;}   /* no rail on touch layouts; sidebar is a drawer */
  .mobilebar{
    display:flex;align-items:center;justify-content:space-between;gap:var(--ic-space-md);
    position:sticky;top:var(--ic-space-md);z-index:var(--ic-z-sticky);
    background:var(--ic-slate);border-radius:var(--ic-radius-lg);
    padding:var(--ic-space-sm) var(--ic-space-md);
    margin:var(--ic-space-md) var(--ic-space-md) 0;
    box-shadow:var(--ic-elevation-lg);
  }
  .mobilebar img{width:124px;height:auto;display:block;}
  .burger{
    display:inline-flex;align-items:center;gap:8px;
    background:transparent;border:1px solid var(--ic-slate-700);color:var(--ic-white);
    font-family:var(--ic-font-body);font-size:13px;font-weight:700;
    border-radius:7px;padding:9px 13px;cursor:pointer;min-height:44px;
  }
  .burger svg{width:18px;height:18px;stroke-width:1.75;}
  .sidebar{
    position:fixed;top:var(--ic-space-md);
    left:var(--ic-space-md);   /* overrides --rail-x on touch layouts */
    width:min(320px,86vw);max-height:calc(100dvh - (var(--ic-space-md) * 2));
    transform:translateX(calc(-100% - var(--ic-space-md) - 8px));
    transition:transform var(--ic-motion-slow) var(--ic-motion-ease);
    z-index:var(--ic-z-modal);
  }
  .sidebar.is-open{transform:translateX(0);}
  .scrim{
    display:block;position:fixed;inset:0;background:rgba(15,23,42,.6);
    opacity:0;pointer-events:none;transition:opacity var(--ic-motion-base) var(--ic-motion-ease);
    z-index:var(--ic-z-overlay);
  }
  .scrim.is-open{opacity:1;pointer-events:auto;}
  .nav a{min-height:44px;}
  .navgroup__btn{min-height:44px;}
  .qi__v,.ilink{display:inline-block;padding:2px 0;}
  .main{gap:0;}
  .panel{padding:var(--ic-space-2xl) var(--ic-space-md);}
  .panel--slate{padding:var(--ic-space-2xl) var(--ic-space-lg);}
}
@media (max-width:860px){
  .cares__svg{display:none;}
  .cares__list{display:block;}
  .grid--3,.offices{grid-template-columns:1fr;}
  .escsplit{grid-template-columns:1fr;}
  .escperson--wide{max-width:none;}
  .ticks--3{grid-template-columns:repeat(2,1fr);}
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .slo{min-width:760px;}
  .scrollhint{display:flex;}
}
@media (max-width:640px){
  .panel{padding:var(--ic-space-xl) var(--ic-space-sm);}
  .panel--slate{padding:var(--ic-space-xl) var(--ic-space-md);}
  .grid--2,.scope,.ticks--3{grid-template-columns:1fr;}
  .hero__quick{grid-template-columns:1fr;gap:var(--ic-space-md);}
  .tier{grid-template-columns:1fr;gap:var(--ic-space-sm);}
  .lic{min-width:0;}
  .lic tbody th{white-space:normal;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ==========================================================================
   GeneratePress wrapper guards

   GeneratePress wraps everything in #page.grid-container.container, which
   applies a max-width and auto margins. That constrains our full-bleed
   layout and throws off the fixed sidebar's position calculation.
   These rules release every wrapper between <body> and our markup.
   ========================================================================== */

.icep-portal-page #page,
.icep-portal-page #page.grid-container,
.icep-portal-page .grid-container,
.icep-portal-page .container,
.icep-portal-page .site,
.icep-portal-page .site-content,
.icep-portal-page #content,
.icep-portal-page .content-area,
.icep-portal-page .site-main,
.icep-portal-page .entry-content,
.icep-portal-page .icep-canvas {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  display: block !important;
}

/* GeneratePress's separate-containers mode adds card styling we don't want */
.icep-portal-page .inside-article,
.icep-portal-page .separate-containers .inside-article {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Empty footer wrapper GeneratePress prints even with the footer removed */
.icep-portal-page .site-footer:empty { display: none; }

/* The admin bar offsets fixed elements when logged in */
body.admin-bar .mobilebar { top: 32px; }
body.admin-bar .sidebar { top: calc(var(--ic-space-lg) + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .mobilebar { top: 46px; }
  body.admin-bar .sidebar { top: calc(var(--ic-space-lg) + 46px); }
}

/* Fluent Forms — inherit the brand rather than the plugin's defaults */
.ff-el-group { margin-bottom: var(--ic-space-lg); }

.ff-el-input--label label {
  font-family: var(--ic-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ic-text-primary) !important;
  margin-bottom: var(--ic-space-2xs) !important;
}
.ff-el-is-required.asterisk-right label:after { color: var(--ic-error-text) !important; }

.ff-el-form-control {
  font-family: var(--ic-font-body) !important;
  font-size: 14px !important;
  color: var(--ic-text-primary) !important;
  background: var(--ic-bg-surface) !important;
  border: 1px solid var(--ic-border-default) !important;
  border-radius: 7px !important;
  padding: 10px 13px !important;
  min-height: 44px !important;
  box-shadow: none !important;
  transition: border-color 120ms, box-shadow 120ms;
}
.ff-el-form-control:focus {
  outline: none !important;
  border-color: var(--ic-brass) !important;
  box-shadow: 0 0 0 3px var(--ic-brass-tint) !important;
}
.ff-el-form-control::placeholder { color: var(--ic-text-secondary) !important; opacity: 1; }

textarea.ff-el-form-control { min-height: 120px !important; }

.ff-el-help-message {
  font-family: var(--ic-font-body) !important;
  font-size: 12.5px !important;
  color: var(--ic-text-secondary) !important;
  margin-top: var(--ic-space-2xs) !important;
}

.ff-el-is-error .ff-el-form-control {
  border-color: var(--ic-error-base) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}
.error.text-danger, .ff-el-is-error .error {
  font-family: var(--ic-font-body) !important;
  font-size: 12.5px !important;
  color: var(--ic-error-text) !important;
  font-weight: 500 !important;
}

.ff-btn-submit,
.ff_submit_btn_wrapper button {
  font-family: var(--ic-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: var(--ic-brass) !important;
  color: var(--ic-slate) !important;
  border: 0 !important;
  border-radius: 7px !important;
  padding: 11px 20px !important;
  min-height: 44px !important;
  cursor: pointer;
  transition: background 120ms;
}
.ff-btn-submit:hover,
.ff_submit_btn_wrapper button:hover { background: var(--ic-brass-hover) !important; }
.ff-btn-submit:focus-visible { outline: 2px solid var(--ic-brass) !important; outline-offset: 2px; }


/* Form sitting inside one of our cards shouldn't double up on padding */
.card .frm-fluent-form { margin: 0; }

/* ==========================================================================
   Nav group safety net

   .nav:not(.js) .navgroup__list forces every group open when the script
   hasn't run. That is the correct no-JS fallback, but it means a script
   failure looks like "nothing expands". This makes the state visible:
   without JS the chevrons hide and all links show, which is usable.
   ========================================================================== */

.icep-portal-page .nav:not(.js) .navgroup__list { display: block !important; }
.icep-portal-page .nav:not(.js) .navgroup__btn { cursor: default; }

/* ==========================================================================
   LINK TREATMENT — brass underline on hover only

   Replaces the always-on brass border with a hover-only one. The border is
   transparent at rest so nothing shifts when it appears.
   ========================================================================== */

.icg .ilink,
.icg .channel .value {
  border-bottom-color: transparent !important;
  transition: color var(--ic-motion-fast) var(--ic-motion-ease),
              border-color var(--ic-motion-fast) var(--ic-motion-ease);
}
.icg .ilink:hover,
.icg .ilink:focus-visible,
.icg .channel .value:hover,
.icg .channel .value:focus-visible {
  border-bottom-color: var(--ic-brass) !important;
  color: var(--ic-brass-hover);
}

/* ==========================================================================
   ESCALATION — prominent first step
   ========================================================================== */

.escfirst {
  background: var(--ic-brass-tint);
  border: 1px solid rgba(200,163,91,.42);
  border-left: 3px solid var(--ic-brass);
  border-radius: var(--ic-radius-lg);
  padding: var(--ic-space-lg);
  margin-bottom: var(--ic-space-xl);
  display: flex;
  gap: var(--ic-space-md);
  align-items: flex-start;
}
.escfirst > svg {
  width: 22px; height: 22px; flex: 0 0 22px;
  stroke-width: 1.75; color: var(--ic-brass); margin-top: 2px;
}
.escfirst h3 {
  margin: 0 0 var(--ic-space-2xs);
  font-size: var(--ic-size-sub);
  line-height: 1.25;
  color: var(--ic-slate);
}
.escfirst p {
  margin: 0 0 var(--ic-space-sm);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ic-text-primary);
}
.escfirst p:last-child { margin-bottom: 0; }
.escfirst__q {
  display: block;
  border-left: 2px solid rgba(200,163,91,.55);
  padding-left: var(--ic-space-md);
  font-size: 13.5px;
  font-style: italic;
  color: var(--ic-text-secondary);
}
.escfirst__tag {
  display: inline-block;
  font-size: var(--ic-size-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ic-brass);
  margin-bottom: var(--ic-space-2xs);
}

.escthen {
  font-size: var(--ic-size-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ic-text-secondary);
  margin: 0 0 var(--ic-space-md);
}

/* ==========================================================================
   PAYMENT OPTIONS — ranked
   ========================================================================== */

.pay { display: grid; gap: var(--ic-space-md); margin-bottom: var(--ic-space-lg); }

.payopt {
  position: relative;
  display: flex;
  gap: var(--ic-space-md);
  align-items: flex-start;
  background: var(--ic-bg-surface);
  border: 1px solid var(--ic-border-default);
  border-radius: var(--ic-radius-lg);
  padding: var(--ic-space-lg);
  box-shadow: var(--ic-elevation-sm);
}
.payopt--preferred {
  border-color: rgba(200,163,91,.5);
  box-shadow: inset 3px 0 0 var(--ic-brass), var(--ic-elevation-sm);
}

.payopt__rank {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ic-slate-100);
  color: var(--ic-text-secondary);
  font-family: var(--ic-font-heading);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.payopt--preferred .payopt__rank { background: var(--ic-brass); color: var(--ic-slate); }

.payopt__body { flex: 1 1 auto; min-width: 0; }

.payopt__head {
  display: flex; align-items: center; gap: var(--ic-space-sm);
  flex-wrap: wrap; margin-bottom: var(--ic-space-2xs);
}
.payopt__head h3 { margin: 0; font-size: var(--ic-size-sub); line-height: 1.25; }

.paytag {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--ic-radius-full);
  background: var(--ic-brass-tint); color: #6E5C3C;
  border: 1px solid rgba(200,163,91,.45);
}
.paytag--fee {
  background: var(--ic-warning-bg); color: var(--ic-warning-text);
  border-color: #FDE68A;
}

.payopt p { margin: 0 0 var(--ic-space-sm); font-size: 14px; line-height: 1.55; color: var(--ic-text-secondary); }
.payopt p:last-child { margin-bottom: 0; }

.paybtn {
  display: inline-flex; align-items: center; gap: var(--ic-space-xs);
  font-family: var(--ic-font-body);
  font-size: 14px; font-weight: 700;
  background: var(--ic-brass); color: var(--ic-slate);
  border-radius: 7px; padding: 10px 18px;
  text-decoration: none; min-height: 44px; box-sizing: border-box;
  transition: background var(--ic-motion-fast) var(--ic-motion-ease);
}
.paybtn:hover { background: var(--ic-brass-hover); color: var(--ic-slate); }
.paybtn:focus-visible { outline: 2px solid var(--ic-brass); outline-offset: 2px; }
.paybtn svg { width: 15px; height: 15px; stroke-width: 2; }

.paybtn--ghost {
  background: transparent; color: var(--ic-slate);
  border: 1px solid var(--ic-border-default);
}
.paybtn--ghost:hover { background: var(--ic-slate-100); color: var(--ic-slate); }

.paybank {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--ic-space-md);
  font-size: 13.5px;
  margin-top: var(--ic-space-xs);
}
.paybank dt { color: var(--ic-text-secondary); font-weight: 500; }
.paybank dd {
  margin: 0; font-weight: 600; color: var(--ic-slate);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .payopt { flex-direction: column; gap: var(--ic-space-sm); }
  .paybtn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   CONTACT ROUTES — horizontal layout

   Replaces the previous stacked cards. The icon sits left, content right,
   so titles never wrap onto a second line even in a narrow column. Uses
   the brand's Label style (DM Sans 600 · 13px, sentence case) for headings
   rather than tracked uppercase, which the brand reserves for metadata
   captions such as "Prepared for".
   ========================================================================== */

.routes { display: grid; gap: var(--ic-space-md); }
.routes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.routes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.route {
  display: block;
  background: var(--ic-bg-surface);
  border: 1px solid var(--ic-border-default);
  border-radius: var(--ic-radius-lg);
  padding: var(--ic-space-lg);
  box-shadow: var(--ic-elevation-sm);
  transition: border-color var(--ic-motion-base) var(--ic-motion-ease),
              box-shadow var(--ic-motion-base) var(--ic-motion-ease);
}
.route:hover { border-color: rgba(200,163,91,.45); box-shadow: var(--ic-elevation-md); }

.route--primary { box-shadow: inset 3px 0 0 var(--ic-brass), var(--ic-elevation-sm); }
.route--primary:hover { box-shadow: inset 3px 0 0 var(--ic-brass), var(--ic-elevation-md); }

/* Icon and heading on one row, vertically centred against each other */
.route__head {
  display: flex;
  align-items: center;
  gap: var(--ic-space-sm);
  margin-bottom: var(--ic-space-md);
}

.route__icon {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: var(--ic-radius-md);
  display: grid; place-items: center;
  background: var(--ic-brass-tint);
  color: var(--ic-brass);
}
.route__icon svg { width: 18px; height: 18px; stroke-width: 1.75; }

.route__body { min-width: 0; }

/* Card heading — matches the payment cards: brand Subheading (H3),
   Bricolage 700 · 18px. Vertically centred against the icon. */
.route__title {
  margin: 0;
  font-family: var(--ic-font-heading);
  font-size: var(--ic-size-sub);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ic-text-primary);
  letter-spacing: 0;
  text-transform: none;
}

/* The destination is the hero of the card */
.route__dest {
  display: inline-block;          /* hugs the text — brass never runs full width */
  max-width: 100%;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ic-slate);
  text-decoration: none;
  word-break: break-word;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
  transition: color var(--ic-motion-fast) var(--ic-motion-ease),
              border-color var(--ic-motion-fast) var(--ic-motion-ease);
}
.route__dest:hover,
.route__dest:focus-visible {
  color: var(--ic-brass-hover);
  border-bottom-color: var(--ic-brass);
}

/* Two numbers in one card: each on its own row, office name inline and muted */
.route__lines { display: grid; gap: var(--ic-space-sm); }
.route__line { display: block; }
.route__where {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ic-text-secondary);
  white-space: nowrap;
  margin-bottom: 1px;
}

/* A sub-note under a destination, e.g. "Choose option 4" */
.route__sub {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ic-text-secondary);
}

.route__note {
  margin: var(--ic-space-sm) 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ic-text-secondary);
}

@media (max-width: 1100px) {
  .routes--3 { grid-template-columns: 1fr; }
  .routes--2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .route { padding: var(--ic-space-md); }
}

/* Screen-reader-only text (used for "opens in a new tab") */
.icg .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}


/* Breathing room above the billing sub-heading */
.icg #accounts .routes { margin-top: var(--ic-space-xs); }
.icg #accounts h3 { margin-top: var(--ic-space-2xl); }
.icg #accounts h3:first-of-type { margin-top: 0; }


/* ==========================================================================
   PAYMENT PAGE — Fluent Forms address & payment fields
   ========================================================================== */

/* ---- Narrow form column ----
   Payment section's column at 75% of the page's 976px → 732px. Heading, lede,
   card and security note all share it, so the section reads as one contained
   task rather than a form dropped into a full-width page.

   Left-aligned, not centred (margin-left:0), so "02 · Your payment" keeps the
   same left edge as every other section's heading down the page — matches the
   feedback form's .inner--form. Scoped to #pay so no other section moves.

   max-width alone: on a phone the panel padding already brings the column below
   732px, so it simply fills the width there with no separate breakpoint. The
   address block inside stays a flex row and wraps its cells as the space
   demands; below 640px it stacks full-width via the existing rule. */
#pay .inner {
  max-width: 732px;
  margin-left: 0;
  margin-right: auto;
}

/* ---- Address block ----
   Fluent Forms lays the address cells out with its own padding, which makes
   the horizontal and vertical gaps drift apart. Neutralise that and drive
   both from a single flex `gap`. The two values are row-gap then column-gap;
   nudge the first number until the spacing looks even. */
.formcard .ff-name-address-wrapper .ff-t-container {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 20px;
  margin: 0 0 26px 0;
}
.formcard .ff-name-address-wrapper .ff-t-container:last-child { margin-bottom: 0; }

.formcard .ff-name-address-wrapper .ff-t-cell {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.formcard .ff-name-address-wrapper .ff-el-group {
  margin-bottom: 0 !important;
}

/* The address group's own label needs separating from the fields below it */
.formcard .ff-name-address-wrapper > .ff-el-input--label { margin-bottom: var(--ic-space-xs); }

/* And the whole address block from whatever follows it */
.formcard .ff-name-address-wrapper { margin-bottom: var(--ic-space-lg); }

/* On narrow screens the cells stack full-width; the flex gap still spaces them */
@media (max-width: 640px) {
  .formcard .ff-name-address-wrapper .ff-t-cell { flex-basis: 100%; }
}

/* ---- Radio rows ----
   The support-time options are long labels. */
.formcard .ff-el-form-check { margin-bottom: var(--ic-space-2xs); }
.formcard .ff-el-form-check-label {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ic-text-primary) !important;
}

/* ---- £ prefix on the amount fields ---- */
.formcard .ff_input-group-text {
  background: var(--ic-bg-muted) !important;
  border: 1px solid var(--ic-border-default) !important;
  border-right: 0 !important;
  color: var(--ic-text-secondary) !important;
  font-family: var(--ic-font-body) !important;
  border-radius: 7px 0 0 7px !important;
}
.formcard .ff_input-group .ff-el-form-control { border-radius: 0 7px 7px 0 !important; }

/* ---- Calculated fields: processing fee & total ----
   Left as ordinary inputs — the formula engine, the £ prefix and the
   plugin's own layout all work as designed. Only the fill changes, so the
   two read as outputs rather than things to fill in. */
.formcard input[readonly].ff-el-form-control {
  background: var(--ic-bg-muted) !important;
  cursor: default;
}

/* The total is the figure that matters — brass tint and larger type */
.formcard #ff_3_total_payment_amount {
  background: var(--ic-brass-tint) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  height: auto !important;
}
.formcard .ff-el-group:has(#ff_3_total_payment_amount) .ff_input-group-text {
  background: var(--ic-brass-tint) !important;
  font-size: 20px !important;
}

/* ---- Stripe card element — match our input styling ---- */
.formcard .ff_stripe_card_element {
  padding: 12px 13px !important;
  min-height: 44px !important;
}

/* ---- Submit button ----
   Overrides the per-form pink style saved in Fluent Forms. Better fixed at
   source (Form 3 → Styler) so the inline <style> stops being printed at all. */

/* The wrapper holds the button and, during submission, whatever status element
   Fluent Forms injects alongside it. As a flex row that status sits BESIDE the
   button rather than dropping onto a line of its own; the button keeps its
   natural width because a flex item does not stretch on the main axis. */
.formcard .ff_submit_btn_wrapper {
  display: flex;
  align-items: center;
  gap: var(--ic-space-md);
  flex-wrap: wrap;
}

/* Form 3 is Make a Payment, form 5 is Client Feedback. Both are listed by id
   because the plugin writes its own per-form button colours into an inline
   <style> block, which a generic .ff-btn-submit rule loses to. */
.formcard form.fluent_form_3 .ff-btn-submit,
.formcard form.fluent_form_3 .wpf_has_custom_css.ff-btn-submit,
.formcard form.fluent_form_5 .ff-btn-submit,
.formcard form.fluent_form_5 .wpf_has_custom_css.ff-btn-submit {
  background-color: var(--ic-brass) !important;
  color: var(--ic-slate) !important;
  border-radius: 7px !important;
}
.formcard form.fluent_form_3 .ff-btn-submit:hover,
.formcard form.fluent_form_3 .wpf_has_custom_css.ff-btn-submit:hover,
.formcard form.fluent_form_5 .ff-btn-submit:hover,
.formcard form.fluent_form_5 .wpf_has_custom_css.ff-btn-submit:hover {
  background-color: var(--ic-brass-hover) !important;
  color: var(--ic-slate) !important;
}

/* ---- Security note beneath the form ----
   `.inner > p` caps running prose at a 68ch reading measure, which is right
   for body copy but makes this note wrap short of the form's width. Released
   here, as with .foot__legal. The padlock sits inline so the sentence reflows
   as one block; `text-wrap: pretty` avoids orphaning the last word. */
.inner > p.formnote,
.formnote {
  max-width: none;
  margin: var(--ic-space-md) 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ic-text-secondary);
  text-wrap: pretty;
}
.formnote > svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.75;
  vertical-align: -3px;
  margin-right: 6px;
  color: var(--ic-text-secondary);
}

/* ==========================================================================
   PAYMENT CONFIRMATION
   Fluent Forms prints its own <style> blocks inline with the payment
   shortcodes, so those load after portal.css and win on source order.
   Overriding them needs !important throughout.
   ========================================================================== */

/* The receipt keeps the .card that framed the form — it is the same white surface
   the client was just looking at, so the page does not appear to lose a panel at
   the moment of payment. Only the plugin's OWN success box inside it is stripped.

   Specificity matters here: Fluent Forms' default skin styles the success box as
   `.ff-default .ff-message-success` (two classes) with its own !important, so a
   bare `.ff-message-success` !important rule LOSES the tie on specificity and the
   plugin's green-bordered box survives. Leading with .formcard clears it. */
.formcard .ff-message-success,
.formcard .ff-default .ff-message-success,
.formcard .fluentform .ff-message-success {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--ic-text-primary) !important;
  font-family: var(--ic-font-body) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}
.ff-message-success p { text-align: left !important; }
.ff-message-success p:empty { display: none !important; }

/* The transient "Processing…" / "Confirming…" status. It carries .ff-message-success
   too, so the reset above already strips the plugin's bordered box; this restates it
   as quiet caption text sitting beside the submit button. Two classes, and later in
   the file, so it beats the block above on the shared properties. */
.formcard .ff-message-success.ff_msg_temp {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--ic-text-secondary) !important;
  line-height: 1.4 !important;
}

.paydone__eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ic-success-text) !important;
  margin: 0 0 var(--ic-space-sm) !important;
  /* Brand rule: a supporting colour is only a status indicator when it is paired
     with an icon or text — green alone must never be the whole signal. */
  display: flex !important;
  align-items: center;
  gap: 7px;
}
/* Sized well above the 11px caps beside it so the tick, not the green, is what
   reads first. stroke-width is set here rather than as an SVG attribute because
   this field's sanitiser is selective about what it keeps.

   Descendant selector, NOT `> svg`: this markup is pasted into a field that
   sanitises it, and anything that wraps the icon in an extra element breaks a
   direct-child rule — at which point the SVG falls back to its default intrinsic
   size and renders enormous. Matching at any depth removes that failure mode. */
.paydone__eyebrow svg {
  width: 20px; height: 20px; flex: 0 0 20px;
  max-width: 20px; max-height: 20px;
  stroke-width: 2.25;
}
.paydone h3 {
  font-family: var(--ic-font-heading) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--ic-text-primary) !important;
  margin: 0 0 var(--ic-space-md) !important;
}
.paydone__lede {
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--ic-text-secondary) !important;
  margin: 0 0 var(--ic-space-xl) !important;
  /* No reading measure here. A 60ch cap is right for running prose but this is two
     short sentences — it broke after "further" and left the rest of the line empty.
     text-wrap: pretty still prevents a single orphaned word on the last line. */
  max-width: none;
  text-wrap: pretty;
}

/* ---- Payment summary strip ---- */
.ff-message-success .ffp_payment_info {
  background: var(--ic-bg-muted) !important;
  box-shadow: none !important;
  border: 1px solid var(--ic-border-default) !important;
  border-radius: var(--ic-radius-lg) !important;
  color: var(--ic-text-primary) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ic-space-lg) !important;
  padding: var(--ic-space-lg) !important;
  margin: 0 0 var(--ic-space-lg) !important;
}
.ff-message-success .ffp_payment_info_item {
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
.ff-message-success .ffp_item_heading {
  font-family: var(--ic-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ic-text-secondary) !important;
  margin-bottom: 3px !important;
}
.ff-message-success .ffp_item_value {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ic-text-primary) !important;
  font-variant-numeric: tabular-nums;
}

/* ---- Order items table ---- */
.ff-message-success .ffp_table {
  border: 1px solid var(--ic-border-default) !important;
  border-radius: var(--ic-radius-lg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  font-family: var(--ic-font-body) !important;
  font-size: 14.5px !important;
  margin: 0 0 var(--ic-space-xl) !important;
}
.ff-message-success .ffp_table thead {
  background: var(--ic-bg-muted) !important;
}
.ff-message-success .ffp_table thead th {
  font-family: var(--ic-font-body) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ic-text-secondary) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ic-border-default) !important;
  padding: 13px var(--ic-space-md) !important;
}
.ff-message-success .ffp_table tbody td {
  border: 0 !important;
  border-bottom: 1px solid var(--ic-border-default) !important;
  padding: 14px var(--ic-space-md) !important;
  color: var(--ic-text-primary) !important;
  font-variant-numeric: tabular-nums;
}
.ff-message-success .ffp_order_items_table tr { border: 0 !important; }
.ff-message-success .ffp_table tfoot { border-top: 0 !important; }
.ff-message-success .ffp_table tfoot th,
.ff-message-success .ffp_table tfoot td {
  border: 0 !important;
  border-top: 1px solid var(--ic-border-default) !important;
  padding: 13px var(--ic-space-md) !important;
  font-weight: 700 !important;
  color: var(--ic-text-primary) !important;
  font-variant-numeric: tabular-nums;
}
.ff-message-success .ffp_total_row:last-child th,
.ff-message-success .ffp_total_row:last-child td {
  background: var(--ic-brass-tint) !important;
  font-size: 16px !important;
}

/* Sub-Total and Total come from the plugin's {payment.order_items} template, which
   the form builder does not expose — so they are suppressed here instead.
   Sub-Total only differs from Total when the plugin prints a discount or tax row
   between them. `:first-child:nth-last-child(2)` matches Sub-Total ONLY when it and
   Total are the tfoot's only two rows, i.e. exactly when they must be equal and the
   repetition is noise. Add a coupon and the count becomes 3, this stops matching,
   and Sub-Total reappears on its own. Do not simplify to :not(:last-child) — that
   would hide a genuine discount line. */
.ff-message-success .ffp_table tfoot .ffp_total_row:first-child:nth-last-child(2) {
  display: none !important;
}

/* ---- Help footer ---- */
.paydone__help {
  border-top: 1px solid var(--ic-border-default);
  padding-top: var(--ic-space-lg);
}
.paydone__help p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: var(--ic-text-secondary) !important;
  margin: 0 0 var(--ic-space-xs) !important;
}
.paydone__help p:last-child { margin-bottom: 0 !important; }
.paydone__help a {
  color: var(--ic-slate) !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--ic-motion-fast) var(--ic-motion-ease);
}
.paydone__help a:hover { border-bottom-color: var(--ic-brass) !important; }

@media (max-width: 640px) {
  .ff-message-success .ffp_payment_info { gap: var(--ic-space-md) !important; }
  .ff-message-success .ffp_table { font-size: 13.5px !important; }
  .ff-message-success .ffp_table thead th,
  .ff-message-success .ffp_table tbody td { padding: 10px var(--ic-space-sm) !important; }
}


/* ==========================================================================
   CLIENT FEEDBACK  (/feedback, Fluent Form 5)
   ========================================================================== */

/* ---- Narrow form column ----
   The form panel gets its own column, narrower than the page's 976px: heading,
   lede and card all share it, so the section reads as one short task rather
   than a form dropped into a full-width page.

   Left-aligned, not centred. `.inner` centres a 976px column, so every other
   section's heading shares one left edge down the page; centring a 680px column
   would push this section's heading ~148px inward and break that line. Killing
   the auto left margin keeps the edge and lets the section simply be shorter. */
.inner--form {
  max-width: 680px;
  margin-left: 0;
  margin-right: auto;
}

/* ---- Submit button alignment ----
   The button sat indented from the inputs above it by exactly --ic-space-md.

   Cause: Fluent Forms clearfixes every group —
     .fluentform .ff-el-group:before, :after { content:" "; display:table }
   — and we make the submit wrapper a flex row (see .ff_submit_btn_wrapper above,
   which puts the "Processing…" status beside the button rather than under it).
   Inside a flex container those pseudo-elements become FLEX ITEMS, so ::before
   is the first item, the button is the second, and the wrapper's `gap` lands
   between them and shoves the button right.

   Neither rule causes this on its own, which is why nothing in the plugin's
   stylesheet looks wrong. Dropping the pseudo-elements from the flex row fixes
   it; the clearfix has no job here anyway, since flex already contains its
   items. Affects the payment form as well, which had the same offset. */
.formcard .ff_submit_btn_wrapper::before,
.formcard .ff_submit_btn_wrapper::after {
  content: none !important;
  display: none !important;
}

/* ---- Wider tier label column ----
   The stock 132px label column is sized for "Straight away" / "Same day".
   "One working day" is longer and wraps in it. Widened here as a modifier
   rather than globally, so the payment and guide pages keep their proportions.
   Applied to every tier in the card, or the three labels stop lining up. */
.tier--wide { grid-template-columns: 168px 1fr; }
@media (max-width: 640px) {
  /* Restated because this block sits after the responsive section, where the
     one-column stack for .tier is defined at equal specificity. */
  .tier--wide { grid-template-columns: 1fr; }
}

/* ---- Confirmation: negative-rating variant ----
   The success eyebrow is green with a tick. Over "sorry the service hasn't been
   what it should be" that reads as celebrating the complaint, so this variant
   goes steel-blue: an acknowledgement, not a result. */
.paydone__eyebrow--alert { color: var(--ic-info-text) !important; }

/* ---- Confirmation: Google review ask ---- */
.revask {
  background: var(--ic-brass-tint);
  border: 1px solid rgba(200,163,91,.35);
  border-radius: var(--ic-radius-lg);
  padding: var(--ic-space-lg);
  margin: 0 0 var(--ic-space-xl);
}
.revask--plain {
  background: var(--ic-bg-muted);
  border-color: var(--ic-border-default);
}
.revask__k {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ic-text-secondary) !important;
  margin: 0 0 var(--ic-space-xs) !important;
}
.revask__lede {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: var(--ic-text-primary) !important;
  margin: 0 0 var(--ic-space-md) !important;
}
.revask--plain .revask__lede { margin-bottom: 0 !important; }
.revask__note {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--ic-text-secondary) !important;
  margin: var(--ic-space-sm) 0 0 !important;
}

/* The confirmation renders inside .ff-message-success, whose reset strips
   backgrounds and padding from its descendants' inherited styles — and the
   theme's link colour otherwise wins over .paybtn. Restated with !important
   so the CTA survives in there. */
.ff-message-success .paybtn {
  background: var(--ic-brass) !important;
  color: var(--ic-slate) !important;
  text-decoration: none !important;
  border: 0 !important;
  padding: 10px 18px !important;
  border-radius: 7px !important;
}
.ff-message-success .paybtn:hover { background: var(--ic-brass-hover) !important; }

@media (max-width: 640px) {
  .ff-message-success .paybtn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   TICKET ESCALATION  (/ticket-escalation, Fluent Form 6)
   ========================================================================== */

/* ---- Ticket ID chip ----
   Sits under the hero lede when ?ticketid= carried a usable reference. Ships
   `hidden` in the markup and is revealed by the page script, so a cached page,
   a bad parameter or blocked JS all fail the same quiet way: no chip, and the
   form simply asks for the ID instead.

   `display` is set on the [hidden] state too. A UA's `[hidden]{display:none}`
   is a plain element-less rule that any `display` declaration here would beat,
   which would leave an empty chip on every page that has no ticket ID. */
.tchip {
  display: inline-flex;
  align-items: center;
  gap: var(--ic-space-xs);
  margin: var(--ic-space-lg) 0 0;
  padding: 9px var(--ic-space-md);
  background: rgba(200,163,91,.12);
  border: 1px solid rgba(200,163,91,.32);
  border-radius: var(--ic-radius-full);
  line-height: 1.3;
}
.tchip[hidden] { display: none; }

.tchip > svg {
  width: 17px; height: 17px; flex: 0 0 17px;
  stroke-width: 1.75;
  color: var(--ic-brass);
}
.tchip__k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94A3B8;
}
.tchip__v {
  font-size: 15px;
  font-weight: 700;
  color: var(--ic-white);
  /* Tabular figures stop the digits jittering between different ticket refs,
     and the ID must never break across lines — half a reference is unreadable. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* At this width "Ticket ID" plus a 10-character reference stops fitting on
     one line inside a pill, and the pill's radius mangles the wrap. Drop the
     caption and keep the value, which is the part that carries the meaning. */
  .tchip__k { display: none; }
}

/* ---- Ticket ID field, once the page has filled it ----
   Added by the script when the URL supplied the reference. The row is hidden
   rather than removed: the input keeps carrying the value, so the field still
   submits and still satisfies its required check. Fluent Forms' validator
   reads `.value`, not visibility, so this is safe.

   Only ever set by JS, so with JS off the class is never applied and the field
   stays visible for the person to type into. */
.formcard .ff-el-group.is-prefilled { display: none !important; }


/* ==========================================================================
   LEGAL  (/legal)
   ========================================================================== */

/* ---- Footer note on one line ----
   The default .foot__note inherits `.inner > p { max-width: 68ch }`, a reading
   measure that is right for the prose notes on the other pages but forces the
   legal page's one-sentence contact note to wrap mid-line. Released here so it
   sits on a single line on desktop; it still wraps naturally once the viewport
   is too narrow to hold it. Two selectors, matching the .foot__legal override,
   so this beats `.inner > p` on specificity (0,2,1 vs 0,1,1). */
.inner > p.foot__note--wide,
.foot__note--wide { max-width: none; }

/* ---- Embedded PDF ----
   One bordered surface holding a title bar and the document, so the viewer
   reads as a framed object on the page rather than a hole punched through it.
   `overflow: hidden` lets the container's radius clip the iframe's square
   corners — without it the frame juts out of the rounded box. */
.pdfbox {
  background: var(--ic-bg-surface);
  border: 1px solid var(--ic-border-default);
  border-radius: var(--ic-radius-lg);
  box-shadow: var(--ic-elevation-sm);
  overflow: hidden;
}

.pdfbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ic-space-md);
  flex-wrap: wrap;
  padding: var(--ic-space-md) var(--ic-space-lg);
  background: var(--ic-bg-muted);
  border-bottom: 1px solid var(--ic-border-default);
}
.pdfbox__title {
  display: flex;
  align-items: center;
  gap: var(--ic-space-xs);
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ic-text-primary);
}
.pdfbox__title > svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  stroke-width: 1.75;
  color: var(--ic-brass);
}

/* A compact variant of the standard action button — full-size .paybtn has a
   44px min-height, which makes the title bar taller than the title needs. */
.paybtn--sm {
  font-size: 13px;
  padding: 8px 14px;
  min-height: 38px;
}
.paybtn--sm svg { width: 14px; height: 14px; }

/* Tall enough to show a full page of A4 at a readable size, but never so tall
   that the page's own scrollbar disappears behind the document's — at which
   point the wheel gets captured by the PDF and the page feels stuck. */
.pdfbox__frame {
  display: block;
  width: 100%;
  height: clamp(520px, 76vh, 940px);
  border: 0;
  background: var(--ic-bg-muted);
}

/* Shown only on narrow screens; see the breakpoint below. */
.pdfbox__alt { display: none; }

@media (max-width: 860px) {
  /* Mobile browsers do not reliably render a PDF inside an iframe: iOS Safari
     paints only the first page with no scrolling, and Android Chrome usually
     paints nothing. Both fail silently — a blank grey box with no error — so
     the frame is removed here rather than left to break, and the document is
     handed to the OS reader instead. */
  .pdfbox__frame { display: none; }

  .pdfbox__alt {
    display: block;
    padding: var(--ic-space-lg);
  }
  .pdfbox__alt p {
    margin: 0 0 var(--ic-space-md);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ic-text-secondary);
  }
  .pdfbox__alt .paybtn { width: 100%; justify-content: center; }
}

/* ---- Registered company details ----
   Same two-column term/value grid as .paybank, restated under its own name so
   the legal page does not depend on a class owned by the payment page. */
.reginfo {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--ic-space-sm) var(--ic-space-lg);
  margin: 0;
  font-size: 14.5px;
}
.reginfo dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ic-text-secondary);
  /* Nudged down so the caption's cap-height sits level with the value beside
     it, which is 3.5px larger. */
  padding-top: 2px;
}
.reginfo dd {
  margin: 0;
  font-weight: 600;
  color: var(--ic-text-primary);
}

@media (max-width: 640px) {
  /* The 190px caption column leaves too little room for an address on a phone;
     stack instead, with the gap doing the grouping. */
  .reginfo { grid-template-columns: 1fr; gap: var(--ic-space-2xs); }
  .reginfo dt { padding-top: var(--ic-space-sm); }
  .reginfo dt:first-child { padding-top: 0; }
}


/* ==========================================================================
   REMOTE SUPPORT  (/remote)
   ========================================================================== */

/* ---- Embedded ScreenConnect session ----
   Same framed-object treatment as the legal PDF (.pdfbox), under its own name so
   the two pages don't share a class — but with one deliberate difference: this
   frame is NOT hidden on mobile. A cross-origin web app renders in an iframe on
   phones; a PDF does not, which is the only reason .pdfbox swaps to a link there.

   The host (iceconnect.screenconnect.com) sends no X-Frame-Options and no CSP
   frame-ancestors, so the iframe connects the client's browser directly to
   ScreenConnect. No Advanced iFrame proxy — the session's WebSocket traffic
   stays off the WordPress server, where a proxy could disrupt it. */
.embedbox {
  background: var(--ic-bg-surface);
  border: 1px solid var(--ic-border-default);
  border-radius: var(--ic-radius-lg);
  box-shadow: var(--ic-elevation-sm);
  overflow: hidden;
}

.embedbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ic-space-md);
  flex-wrap: wrap;
  padding: var(--ic-space-md) var(--ic-space-lg);
  background: var(--ic-bg-muted);
  border-bottom: 1px solid var(--ic-border-default);
}
.embedbox__title {
  display: flex;
  align-items: center;
  gap: var(--ic-space-xs);
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ic-text-primary);
}
/* A live-status dot rather than an icon — reads as "this is an active, secure
   channel". Green from the success token, paired with the "Secure remote
   session" label so colour is never the only signal.

   The pulse is the brand's .ic-dot primitive, reproduced exactly rather than
   approximated: an expanding box-shadow ring that radiates and fades by 70% of
   the loop, leaving the last 30% as a rest beat before it repeats. Values from
   brand.iceconnect.com/dist/theme.css and tokens.json → motion.pulse.

   The colour is carried as an RGB triplet in --ic-gc, as the brand component
   does, because rgba() needs the channels separately — a hex custom property
   cannot be given an alpha. 34,197,94 is --ic-success-base (#22C55E); the two
   are kept in step by hand, which is the one wrinkle in this approach. Set
   --ic-gc on the element to reuse the pulse in another status colour. */
.embedbox__dot {
  --ic-gc: 34,197,94;
  width: 9px; height: 9px; flex: 0 0 9px;
  border-radius: 50%;
  background: rgb(var(--ic-gc, 34,197,94));
  animation: ic-pulse var(--ic-pulse-duration) var(--ic-pulse-ease) infinite;
}
@keyframes ic-pulse {
  0%       { box-shadow: 0 0 0 0   rgba(var(--ic-gc, 34,197,94), 0.7); }
  70%,100% { box-shadow: 0 0 0 8px rgba(var(--ic-gc, 34,197,94), 0); }
}

/* Reduced motion: the brand's own fallback — no animation, and a static ring so
   the dot still reads as a status rather than a full stop.

   Needed explicitly, and with !important, because the blanket rule in the
   responsive section (`*{animation-duration:.01ms!important}`) is right for
   transitions but wrong for an infinite loop: at 0.01ms this would strobe
   rather than stop. Being later in the file is not enough to beat it — that
   rule carries !important, so this must too. */
@media (prefers-reduced-motion: reduce) {
  .embedbox__dot {
    animation: none !important;
    box-shadow: 0 0 0 3px rgba(var(--ic-gc, 34,197,94), 0.25);
  }
}

/* Tall enough for the ScreenConnect join UI and, once connected, its status and
   chat panel — but capped so the page's own scrollbar never vanishes behind the
   frame's, which would trap the wheel inside the iframe. Set to 75% of the
   original clamp(620/82vh/900): a shorter frame also lifts ScreenConnect's
   vertically-centred code field toward the top of the box. */
.embedbox__frame {
  display: block;
  width: 100%;
  height: clamp(465px, 61.5vh, 675px);
  border: 0;
  background: var(--ic-bg-muted);
}

/* ---- Bring the code box up ----
   Remote is a task page: the goal is to reach the code field with little or no
   scrolling. The signature hero is trimmed here — shorter type, tighter padding,
   no bottom margin — and the Connect section's top padding is cut, so the frame
   sits high on the page rather than below ~600px of preamble. Scoped to this
   page through .hero--tight and #connect, both of which live only here.

   These sit at the end of the file, so at equal specificity they win over the
   base .hero / .panel--slate rules and the responsive overrides alike. */
.hero--tight {
  /* Equal top and bottom: the hero holds only the heading now, so the space
     above and below it must match or it looks lopsided. */
  padding-top: var(--ic-space-xl);
  padding-bottom: var(--ic-space-xl);
  margin-bottom: 0;
}
.hero--tight h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 0;   /* heading only — nothing follows it inside the hero */
}

/* Pull the form section up against the hero and shorten its run-in. */
#connect { padding-top: var(--ic-space-xl); }


/* ==========================================================================
   WELCOME — NEW CLIENT ONBOARDING  (/welcome, Fluent Form 4)

   THIS BLOCK IS THE ONLY COPY. It used to be duplicated as a paste-able extract
   in client-onboarding/, which only ever created two files to keep in step.
   Edit here, then paste the whole file into Appearance → Theme File Editor →
   portal.css, or re-upload the theme zip.

   Everything here is scoped to .formcard, and the button rule to form 4, so
   no other portal page can be affected.
   ========================================================================== */

/* ---- Submit button ----
   Form 4 is New Client Intake. Listed by id alongside 3 and 5 for the same
   reason: the plugin writes its own per-form button colours into an inline
   <style> block, which a generic .ff-btn-submit rule loses to on source order.
   The form's own button is set to full width in the Fluent Forms editor;
   min-width is released here so it sits at its natural size like every other
   button in the portal. */
.formcard form.fluent_form_4 .ff-btn-submit,
.formcard form.fluent_form_4 .wpf_has_custom_css.ff-btn-submit {
  background-color: var(--ic-brass) !important;
  color: var(--ic-slate) !important;
  border-color: var(--ic-brass) !important;
  border-radius: 7px !important;
  min-width: 0 !important;
  width: auto !important;
}
.formcard form.fluent_form_4 .ff-btn-submit:hover,
.formcard form.fluent_form_4 .wpf_has_custom_css.ff-btn-submit:hover {
  background-color: var(--ic-brass-hover) !important;
  border-color: var(--ic-brass-hover) !important;
  color: var(--ic-slate) !important;
}

/* ---- Section breaks ----
   This is the only portal form long enough to be divided into sections, so the
   plugin's section-break styling has never been touched before now. Untouched
   it prints a plain <h3> in the body font with no separation, and five of those
   down a five-minute form give the client nothing to navigate by.

   Separated by white space alone — no rule. The brass counter caption and the
   Bricolage heading are already a strong enough break, and a line as well made it
   read as a divider bolted on top of a heading rather than as one thing. That
   includes the plugin's own <hr>, which it prints inside every section break and
   which is hidden further down.

   THE ACTUAL MARKUP, confirmed from the rendered page — worth writing down,
   because two earlier guesses at it were wrong:

     <form class="fluent_form_4">
       <div class="ff-el-group ff-hpsf-container">   <- honeypot, display:none
       <input type="hidden" ...> x3                  <- token, nonce, referer
       <div class="ff-el-group ff-el-section-break ff_left">
         <h3 class="ff-el-section-title">…</h3>
         <div class="ff-section_break_desk">…</div>
         <hr>
       </div>
       …fields, wrapped in .ff-field_container / .ff-t-container…

   The section break IS the .ff-el-group — not a child of one — so :has(> …) never
   matched, and the honeypot IS an .ff-el-group sibling before the first section,
   so a plain "preceded by a group" test matched the first section too and gave it
   the very top margin we were trying to remove. Both are fixed below. */
.formcard .ff-el-section-break,
.formcard .ff_section_break_wrapper {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: var(--ic-space-lg);
}

/* The plugin's own rule inside the section break. Same reasoning as the border
   above: the heading and its brass caption are the break. */
.formcard .ff-el-section-break hr { display: none !important; }

/* Air above every section EXCEPT the first, which opens the form and has nothing
   to be separated from — leading space there just reads as a gap at the top of
   the card.

   A preceding-sibling test, not :first-child: the three hidden inputs above are
   direct children of the form, so "first child" is not the same question as
   "first section". The honeypot must be excluded by name for the reason in the
   markup note above — it is the one .ff-el-group that sits before section 01.

   65px is --ic-space-2xl (48px) plus a third again. Written as a literal rather
   than a calc() on the token because it is a one-off optical value for this form,
   not a new step in the spacing scale — the fields between sections are dense, so
   the gap has to be larger than the scale's own step to read as a break. */
.formcard .ff-el-group:not(.ff-hpsf-container) ~ .ff-el-section-break,
.formcard .ff-t-container ~ .ff-el-section-break,
.formcard .ff-field_container ~ .ff-el-section-break {
  margin-top: 65px !important;
}

/* The counter runs on the form, so the numbers renumber themselves if a
   section is ever added, removed or reordered in the form editor. */
.formcard form.fluent_form_4 { counter-reset: ffsec; }
.formcard .ff-el-section-break { counter-increment: ffsec; }
.formcard .ff-el-section-break::before {
  content: "Section " counter(ffsec, decimal-leading-zero);
  display: block;
  font-family: var(--ic-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ic-brass);
  margin-bottom: var(--ic-space-xs);
}

.formcard .ff-el-section-break h3,
.formcard .ff-el-section-break .ff-el-section-title {
  font-family: var(--ic-font-heading) !important;
  font-size: var(--ic-size-sub) !important;   /* 18px — the brand floor for Bricolage */
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em;
  color: var(--ic-text-primary) !important;
  margin: 0 0 var(--ic-space-xs) !important;
}

/* The description below each heading. Capped at a reading measure so it does
   not run the full width of the card, matching .section__lede on the page. */
.formcard .ff-el-section-break .ff-section_break_desk,
.formcard .ff-el-section-break .ff-section-break-desk {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ic-text-secondary);
  max-width: 62ch;
}
.formcard .ff-el-section-break .ff-section_break_desk p:last-child,
.formcard .ff-el-section-break .ff-section-break-desk p:last-child { margin-bottom: 0; }

/* ---- Phone fields: room for the country flag ----
   THIS IS OUR BUG, not the plugin's. The Phone/Mobile field uses intl-tel-input,
   which overlays a flag-and-dropdown box on the left of the input and then makes
   room for it by setting padding-left on the input as an INLINE style, measured
   at runtime from the box it just drew.

   An inline style loses to an !important declaration, and the base field rule
   (`.ff-el-form-control { padding: 10px 13px !important }`, ~line 835) is a
   shorthand carrying !important — so it resets padding-left to 13px and the
   number is typed underneath the flag. No other portal form hits this because
   none of them use the Pro phone field.

   Restated here at the same weight, scoped to inputs that are actually inside an
   .iti wrapper. 52px matches intl-tel-input's own default for a flag with the
   dropdown arrow; --separate-dial-code adds the dial code beside the flag and
   needs more, so it is given its own value. */
.formcard .iti input.ff-el-form-control,
.formcard .iti input[type="tel"] {
  padding-left: 52px !important;
}
.formcard .iti--separate-dial-code input.ff-el-form-control,
.formcard .iti--separate-dial-code input[type="tel"] {
  padding-left: 92px !important;
}

/* The flag box is absolutely positioned over the input, so it inherits none of
   the field's border radius. Nudged in by a pixel so it sits inside the border
   rather than on it, and given the input's own radius on the left corners.

   Both class sets are listed because intl-tel-input renamed them: the version
   running here (v25 — confirmed from the rendered markup) uses
   .iti__country-container / .iti__selected-country, while v17 and earlier used
   .iti__flag-container / .iti__selected-flag. Whichever ships, one pair matches
   and the other is inert. */
.formcard .iti__country-container,
.formcard .iti__flag-container { padding: 1px 0 1px 1px; }
.formcard .iti__selected-country,
.formcard .iti__selected-flag { border-radius: 7px 0 0 7px; }

/* ---- Terms and conditions ----
   The consent line is the last thing before the button and carries a link, so
   it gets a little more room than the repeat-contact radios above it. */
.formcard .ff-el-tc { margin-bottom: var(--ic-space-lg); }
.formcard .ff-el-tc p { margin: 0; font-size: 14px; line-height: 1.5; }
.formcard .ff-el-tc a { color: var(--ic-slate); text-decoration: underline; }
.formcard .ff-el-tc a:hover { color: var(--ic-brass-hover); }