/* LucentStar shared styles, version 2026-10-14.e3eb79d8d1. Generated by build.py from styles/: do not edit here. */
/* Tokens: colour, type, motion and layout values shared by every page.
   Change a value here and it changes everywhere. */
:root{
  --white:#FFFFFF;--cloud:#F5F6F8;--line:#E4E7EC;--navy:#0B0F1A;--text:#1E2433;--muted:#5B6475;--field:#7A8394;
  --green:#00E676;--green-2:#00C866;--green-tint:#E6FBF0;--amber:#FFB300;--amber-tint:#FFF4D6;--amber-ink:#7A5200;--err:#B42318;--err-tint:#FEF3F2;
  --s-bg:#0B0F1A;--s-surface:#151B2E;--s-surface-2:#1B2237;--s-border:#232B42;--s-text:#F5F7FA;--s-muted:#94A3B8;--s-muted-2:#8391A7;
  --a-ink:#24105E;--a-2:#50398C;--a-3:#7759B3;--a-lav:#F2EFFC;--a-page:#F7F7FB;--a-border:#E2E1EC;--a-yellow:#F2CF35;--a-muted:#656379;--a-hl:#E4DBFA;

  /* "Lucent" in product wordmarks on light backgrounds: the brand blue
     #0B0F1A, confirmed by the owner (28 September 2026). It is the same
     value as the navy. On dark backgrounds Lucent is white. */
  --wm-lucent:var(--navy);

  /* Accent roles. Components use these, never a raw colour, so a page theme
     can restyle buttons, links, heading emphasis and the contact launcher in
     one place. The main website's accent is the brand green #00E676. */
  --accent:var(--green);          /* filled buttons, open markers, confirmation icon */
  --accent-hover:var(--green-2);
  --accent-on:var(--navy);        /* label colour on an accent fill */
  --accent-glow:rgba(0,160,80,.9);
  --em:var(--green);              /* heading emphasis (owner decision, 28 Sep 2026) */
  --link-line:var(--green);       /* text link underline */
  --launcher:var(--navy);         /* floating Contact us control */
  --launcher-hover:#1B2233;
  --launcher-ic:var(--green);
  --chip-on:var(--navy);          /* chosen topic in the enquiry form */

  --f:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --f-inter:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:180ms;--t-med:320ms;--t-slow:680ms;
  --hdr:68px;--fab-clear:88px;
  color-scheme:light;
}

/* LucentAlbedo page theme (page file: theme: albedo). The Albedo purple
   palette replaces the green accent. White labels read at 5.4:1 on #7759B3
   and 9.1:1 on #50398C, and #7759B3 heading emphasis is 5.4:1 on white. */
.theme-albedo{
  --accent:var(--a-3);--accent-hover:var(--a-2);--accent-on:var(--white);--accent-glow:rgba(80,57,140,.7);
  --em:var(--a-3);--link-line:var(--a-3);
  --launcher:var(--a-2);--launcher-hover:var(--a-ink);--launcher-ic:var(--a-hl);
  --chip-on:var(--a-2);
}

html{background:var(--white);scroll-padding-top:calc(var(--hdr) + 16px);scroll-padding-bottom:var(--fab-clear);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--f);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
svg{display:block}
a{color:var(--navy);text-decoration:none}
button{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:8px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
main,footer{overflow-x:clip}
/* Layout */
.wrap{width:100%;max-width:1264px;margin-inline:auto;padding-inline:32px}
.sec{padding-block:144px}
.sec-cloud{background:var(--cloud)}
.sec-head{max-width:760px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .lead{margin-top:20px}
.sec-head.center .lead{margin-inline:auto}

/* Type */
/* Page title: the main heading of every page uses this one style (Poppins
   700, 40 to 80px), so new pages inherit it. .h-display and .h-page are kept
   as aliases for older templates. */
.h-title,.h-display,.h-page{font-weight:700;font-size:clamp(40px,5.6vw,80px);line-height:1.04;letter-spacing:-.035em;color:var(--navy);text-wrap:balance}
.h2{font-weight:600;font-size:clamp(32px,3.6vw,52px);line-height:1.1;letter-spacing:-.03em;color:var(--navy);text-wrap:balance}
.h3{font-weight:600;font-size:clamp(22px,1.7vw,28px);line-height:1.25;letter-spacing:-.018em;color:var(--navy);text-wrap:balance}
.lead{font-size:clamp(18px,1.35vw,21px);line-height:1.6;color:var(--text);max-width:36em;text-wrap:pretty}
.eyebrow{font-weight:500;font-size:15px;color:var(--muted);margin-bottom:14px}
p{text-wrap:pretty}
/* Heading emphasis: text colour only, never an underline or highlight bar.
   On the main website it is the brand green #00E676. The owner chose it on
   28 September 2026 knowing it is 1.67:1 on white, below the WCAG AA text
   minimum, so it is used only for emphasis inside large display headings,
   never for body text, links or small labels. A page theme can change it. */
.em{color:var(--em)}

/* Page opening: the title, introduction and actions at the top of every page */
.opening{text-align:center;max-width:1040px}
.opening .h-title{max-width:var(--title-measure,20ch);margin-inline:auto}
.intro{font-size:clamp(18px,1.35vw,21px);line-height:1.6;color:var(--text);max-width:40em;margin:28px auto 0;text-wrap:pretty}
.opening .cta-row{justify-content:center;margin-top:40px}
.opening-left{text-align:left}
.opening-left .h-title,.opening-left .intro{margin-inline:0}
.opening-left .cta-row{justify-content:flex-start}
/* Inner page opening: the same spacing as the homepage opening */
.page-hero{padding-block:88px 24px}
@media (max-width:999px){.page-hero{padding-block:64px 16px}}
@media (max-width:599px){.page-hero{padding-block:44px 8px}.opening .cta-row{flex-direction:column;gap:6px}.opening .cta-row .btn{width:100%}}

@media (max-width:760px){.wrap{padding-inline:20px}}
@media (max-width:599px){body{font-size:16px}.wrap{padding-inline:16px}}
/* Section spacing on tablets and phones */
@media (max-width:999px){.sec{padding-block:104px}}
@media (max-width:599px){.sec{padding-block:80px}}
/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;border:1.5px solid transparent;font:600 16px/1.2 var(--f);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease),transform var(--t-fast) var(--ease)}
/* Filled pill in the page accent (green on the main site, purple on LucentAlbedo) */
.btn-primary{background:var(--accent);color:var(--accent-on)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 10px 24px -14px var(--accent-glow)}
/* White pill: product sections on the homepage and quieter actions */
.btn-secondary{background:var(--white);color:var(--navy);border-color:var(--navy)}
.btn-secondary:hover{background:var(--navy);color:var(--white)}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.btn .ic{width:18px;height:18px}

/* Text links are underlined in the page accent. Pill buttons, navigation
   items and heading emphasis are never underlined. */
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:16px;color:var(--navy);text-decoration:none}
.tlink > span:first-child,.ul{text-decoration-line:underline;text-decoration-color:var(--link-line);text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-skip-ink:auto;transition:text-decoration-thickness var(--t-fast) var(--ease),text-underline-offset var(--t-fast) var(--ease)}
.tlink:hover > span:first-child,a:hover > .ul,.ul:hover{text-decoration-thickness:3.5px}
.tlink .ic{width:18px;height:18px;transition:transform var(--t-med) var(--ease)}
.tlink:hover .ic{transform:translateX(4px)}
.tlink.down:hover .ic{transform:translateY(3px)}
/* Inline links inside sentences */
.ilink{font-weight:600;color:var(--navy);text-decoration-line:underline;text-decoration-color:var(--link-line);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-thickness var(--t-fast) var(--ease)}
.ilink:hover{text-decoration-thickness:3.5px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}

/* A discreet note beside examples that use fictional businesses or results */
.ex-note{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.ex-note .ic{width:15px;height:15px}

.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.dot-s{background:var(--green);box-shadow:0 0 0 2px var(--navy)}
.dot-a{background:var(--a-3);box-shadow:0 0 0 2px var(--a-ink)}
.dot-n{background:var(--line);box-shadow:0 0 0 2px var(--navy)}   /* a product without its own colour yet */

/* Skip link */
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--navy);color:var(--white);padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:500;transition:top var(--t-fast) var(--ease)}
.skip:focus,.skip:focus-visible{top:12px;outline:3px solid var(--navy);outline-offset:3px}
/* Brand marks shared by every LucentStar site (also in the shared export).

   Product wordmark: one component, written by build.py (wordmark()) and never
   by hand. "Lucent" is dark #0B0F1A, with a light backing
   on dark surfaces; the product half keeps its own colour on both. The two halves are
   inline spans with no space between them, so the accessible name and copied
   text stay the full product name. Product names in headings, cards, navigation and inline copy use this
   treatment. Coloured primary buttons keep their readable inherited label colour. Colours: Signal #00E676, Alba #7759B3, other products navy (white on
   dark) until they are given a colour. */
.wm{font-weight:700;white-space:nowrap}
.wm-light .wm-lead{color:var(--wm-lucent)}
.wm-dark{background:var(--white);border-radius:4px;padding:0 .12em}
.wm-dark .wm-lead{color:var(--wm-lucent)}
.wm-signal .wm-tail{color:var(--green)}
.wm-albedo .wm-tail{color:var(--a-3)}
.wm-albedo.wm-dark .wm-tail{background:var(--white);border-radius:4px;padding:0 .12em}
.wm-neutral.wm-light .wm-tail{color:var(--navy)}
.wm-neutral.wm-dark .wm-tail{color:var(--s-muted)}

/* Availability label, next to a product name (header menu, tiles, page
   openings). Filled, no border. Shared, because the header menu uses it. */
.status{display:inline-flex;align-items:center;gap:6px;margin-left:4px;padding:6px 10px;border-radius:99px;background:var(--white);font:500 12.5px/1 var(--f);color:var(--navy);white-space:nowrap}
.status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--field)}
.status-live::before{background:var(--green)}
.pm-name .status{background:var(--cloud)}

/* Product label above a heading: dot, wordmark and status (showcases, page
   openings, the sign-in screen). Shared, because the sign-in screen uses it. */
.chip-prod{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:99px;background:var(--cloud);font-weight:600;font-size:15px;color:var(--navy);margin-bottom:20px}
.chip-a{background:var(--a-lav)}

/* Four-point star: the LucentStar separator and list marker. Decorative only:
   drawn by CSS (::before) or an aria-hidden SVG, so assistive technology never
   reads it. One size and one gap everywhere. */
:root{
  --star-size:12px;--star-gap:13px;--star-colour:var(--navy);
  --star-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 15.6 8.4 24 12 15.6 15.6 12 24 8.4 15.6 0 12 8.4 8.4Z'/%3E%3C/svg%3E");
}
.star{display:inline-block;width:var(--star-size);height:var(--star-size);flex:0 0 auto;fill:var(--star-colour)}
.star-list li{position:relative;padding-left:calc(var(--star-size) + var(--star-gap))}
.star-list li::before{content:'';position:absolute;left:0;top:calc(.775em - var(--star-size) / 2);width:var(--star-size);height:var(--star-size);background:var(--star-colour);-webkit-mask:var(--star-mask) center/contain no-repeat;mask:var(--star-mask) center/contain no-repeat}
/* A separator line that starts with the star: star, gap, then a hairline */
.star-rule{position:relative;padding-top:16px;background:linear-gradient(var(--line),var(--line)) calc(var(--star-size) + var(--star-gap)) 0/100% 1px no-repeat}
.star-rule::before{content:'';position:absolute;left:0;top:calc(var(--star-size) / -2 + .5px);width:var(--star-size);height:var(--star-size);background:var(--star-colour);-webkit-mask:var(--star-mask) center/contain no-repeat;mask:var(--star-mask) center/contain no-repeat}
@media (forced-colors:active){
  .star-list li::before,.star-rule::before{background:CanvasText}
}

/* Inline branded mentions retain surrounding weight. Primary filled actions
   inherit their readable label colour: never green on a green button. */
.wm-copy{font-weight:inherit}
.btn-primary .wm .wm-lead,.btn-primary .wm .wm-tail{color:inherit}
/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.98);border-bottom:1px solid transparent;transition:border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.hdr.is-scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px -22px rgba(11,15,26,.35)}
.hdr-in{display:flex;align-items:center;gap:20px;height:var(--hdr)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--navy);flex:0 0 auto}
.brand svg{width:34px;height:34px}
.brand-word{font-weight:600;font-size:18px;letter-spacing:-.02em}
.brand-word span{font-weight:400;color:var(--muted)}
.nav{margin-left:28px}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:500 15.5px/1 var(--f);text-decoration:none;cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.nav-link:hover{background:var(--cloud);color:var(--navy)}
/* Current section: shown by text colour only (grey items, the current one in navy) */
.nav-link.is-active,.nav-link.is-current{color:var(--navy)}
.nav-btn .ic{width:16px;height:16px;transition:transform var(--t-med) var(--ease)}
.nav-btn[aria-expanded="true"]{background:var(--cloud);color:var(--navy)}
.nav-btn[aria-expanded="true"] .ic{transform:rotate(180deg)}
.nav-prod{position:relative}
.prod-menu{position:absolute;top:calc(100% + 12px);left:-10px;width:680px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:10px;background:var(--white);border:1px solid var(--line);border-radius:22px;box-shadow:0 28px 60px -28px rgba(11,15,26,.35);opacity:0;transform:translateY(-8px) scale(.985);transform-origin:top left;transition:opacity 200ms var(--ease),transform 260ms var(--ease)}
.prod-menu.is-open{opacity:1;transform:none}
.pm-item{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;text-decoration:none;color:var(--text);transition:background-color var(--t-fast) var(--ease)}
.pm-item:hover{background:var(--cloud)}
.pm-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-weight:600;font-size:16.5px;color:var(--navy)}
.pm-desc{font-size:14.5px;line-height:1.5;color:var(--muted)}
.pm-go{margin-top:4px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--navy)}
.pm-go .ic{width:16px;height:16px;transition:transform var(--t-med) var(--ease)}
.pm-item:hover .pm-go .ic{transform:translateX(4px)}
.pm-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding:14px 18px 8px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.pm-foot a{color:var(--navy);font-weight:600;text-decoration-line:underline;text-decoration-color:var(--link-line);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-thickness var(--t-fast) var(--ease)}
.pm-foot a:hover{text-decoration-thickness:3.5px}
.hdr-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.signin{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--muted);font:500 15px/1 var(--f);text-decoration:none;transition:color var(--t-fast),background-color var(--t-fast)}
.signin:hover{color:var(--navy);background:var(--cloud)}
.signin[aria-current="page"]{color:var(--navy)}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);color:var(--navy);font:500 15px/1 var(--f);cursor:pointer;transition:border-color var(--t-fast)}
.menu-btn:hover{border-color:var(--navy)}
.mb-ic{position:relative;width:18px;height:12px}
.mb-ic i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform var(--t-med) var(--ease),top var(--t-med) var(--ease)}
.mb-ic i:first-child{top:1px}
.mb-ic i:last-child{top:9px}
.menu-btn[aria-expanded="true"] .mb-ic i:first-child{top:5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .mb-ic i:last-child{top:5px;transform:rotate(-45deg)}
.m-menu{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 30px 40px -30px rgba(11,15,26,.3);max-height:calc(100vh - var(--hdr));overflow:auto;opacity:0;transform:translateY(-8px);transition:opacity 220ms var(--ease),transform 280ms var(--ease)}
.m-menu.is-open{opacity:1;transform:none}
.mm-list > li{border-bottom:1px solid var(--line);opacity:0;transform:translateY(-6px);transition:opacity 260ms var(--ease),transform 320ms var(--ease);transition-delay:calc(var(--i,0) * 40ms)}
.m-menu.is-open .mm-list > li{opacity:1;transform:none}
.mm-a{display:flex;align-items:center;justify-content:space-between;min-height:58px;color:var(--navy);text-decoration:none;font-weight:500;font-size:18px}
.mm-a .ic{width:18px;height:18px}
.mm-label{padding-top:16px;font-size:14px;font-weight:500;color:var(--muted)}
.mm-prod{display:flex;flex-direction:column;gap:4px;padding:12px 0;text-decoration:none;color:var(--text)}
.mm-prod:last-child{padding-bottom:18px}
.mm-prod .pm-name{font-size:17px}
.mm-cta{padding:22px 0 10px}
.mm-cta .btn{width:100%}
.mm-quiet{display:flex;flex-wrap:wrap;gap:4px 24px;padding:6px 0 24px}
.mm-quiet a{display:inline-flex;align-items:center;min-height:44px;color:var(--navy);font-weight:500;text-decoration-line:underline;text-decoration-color:var(--link-line);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-thickness var(--t-fast) var(--ease)}
.mm-quiet a:hover{text-decoration-thickness:3.5px}
@media (max-width:1079px){
  .nav,.hdr-end .signin{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:599px){.hdr-talk{display:none}}
@media (max-width:359px){.brand-word span{display:none}}
/* Questions (expandable) */
.faq{max-width:860px;margin:48px auto 0;border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:18px 4px;border:0;background:none;text-align:left;cursor:pointer;font-weight:500;font-size:18px;color:var(--navy);border-radius:12px;transition:background-color var(--t-fast) var(--ease),padding var(--t-med) var(--ease)}
.faq-q:hover{background:var(--cloud);padding-inline:14px}
.pm{position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--cloud);transition:background-color var(--t-med) var(--ease)}
.pm::before,.pm::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--navy);transition:transform var(--t-med) var(--ease)}
.pm::after{transform:rotate(90deg)}
.faq-q[aria-expanded="true"] .pm{background:var(--accent)}
.faq-q[aria-expanded="true"] .pm::before,.faq-q[aria-expanded="true"] .pm::after{background:var(--accent-on)}
.faq-q[aria-expanded="true"] .pm::after{transform:rotate(90deg) scaleX(0)}
/* Collapsed answers use visibility:hidden (after the closing movement), so
   screen readers and the Tab key skip them until they are opened. Without
   JavaScript the answers stay open. */
.faq-a{display:grid;grid-template-rows:1fr}
html.motion .faq-a,html.still .faq-a{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows 360ms var(--ease),visibility 0s linear 360ms}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 4px 24px;max-width:44em;font-size:16.5px;line-height:1.65}
html.motion .faq-a p{opacity:0;transform:translateY(-4px);transition:opacity 300ms var(--ease),transform 360ms var(--ease)}
html.motion .faq-i.is-open .faq-a,html.still .faq-i.is-open .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows 360ms var(--ease),visibility 0s}
html.motion .faq-i.is-open .faq-a p{opacity:1;transform:none}
@media (max-width:599px){.faq-q{font-size:17px}}
/* Contact */
.talk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:start}
.talk .lead{margin-top:20px}
.talk-alt{margin-top:40px;display:flex;flex-direction:column;gap:20px}
.talk-row{display:flex;gap:14px;align-items:flex-start}
.talk-ic{flex:0 0 44px;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--line);color:var(--navy)}
.talk-row p{font-size:16px;line-height:1.55}
.talk-row strong{display:block;font-weight:600;color:var(--navy)}
.email-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:2px}
.email{font-weight:500;color:var(--navy);user-select:all}
.copy{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:99px;border:1.5px solid var(--line);background:var(--white);font:500 13.5px/1 var(--f);color:var(--navy);cursor:pointer;transition:border-color var(--t-fast),background-color var(--t-fast)}
.copy:hover{border-color:var(--navy)}
.copy .ic{width:15px;height:15px}
.form-card{background:var(--white);border-radius:28px;padding:36px;box-shadow:0 0 0 1px var(--line),0 30px 60px -44px rgba(11,15,26,.45)}
.f{display:flex;flex-direction:column;gap:24px}
.f-label{display:block;font-weight:500;font-size:15.5px;line-height:1.4;color:var(--navy);margin-bottom:8px}
.f-opt{font-weight:400;color:var(--muted)}
.f-hint{font-size:14px;line-height:1.5;color:var(--muted);margin:-2px 0 10px}
.f-input{display:block;width:100%;min-height:52px;padding:12px 16px;font:400 16px/1.5 var(--f);color:var(--text);background:var(--white);border:1.5px solid var(--field);border-radius:14px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease)}
.f-input:hover{border-color:var(--navy)}
.f-input:focus{outline:none;border-color:var(--navy)}
.f-input:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
textarea.f-input{min-height:140px;resize:vertical}
.f-input[aria-invalid="true"]{border-color:var(--err);border-width:2px}
.f-err{display:flex;gap:8px;align-items:flex-start;color:var(--err);font-weight:500;font-size:15px;line-height:1.45;margin:0 0 8px}
.f-err .ic{width:18px;height:18px;margin-top:1px}
.f-summary{border:2px solid var(--err);border-radius:16px;padding:18px 20px;background:var(--err-tint)}
.f-summary h3{font-weight:600;font-size:17px;color:var(--navy)}
.f-summary li{margin-top:8px}
.f-summary a{color:var(--err);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.f-topics{border:0;padding:0;margin:0;min-width:0}
.f-chips{display:flex;flex-wrap:wrap;gap:10px}
.f-chip{position:relative}
.f-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.f-chip label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:99px;cursor:pointer;font:500 15px/1 var(--f);color:var(--text);background:var(--white);transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.f-chip label:hover{border-color:var(--navy)}
.f-chip label:active{transform:scale(.97)}
.f-chip input:checked + label{background:var(--chip-on);border-color:var(--chip-on);color:var(--white)}
.f-chip input:focus-visible + label{outline:3px solid var(--navy);outline-offset:2px}
.f-fail{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--err);background:var(--err-tint);border-radius:16px;padding:16px 18px;font-size:15px;line-height:1.55}
.f-fail .ic{width:20px;height:20px;color:var(--err);margin-top:2px}
.f-fail strong{display:block;color:var(--navy);font-weight:600}
.f-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}   /* the enquiry notice, then the send button */
.f-send{position:relative;overflow:hidden}
.f-send .f-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--navy);transform-origin:left;transform:scaleX(0);opacity:0}
.f-send.is-sending .f-bar{opacity:.55;animation:sendBar 1300ms var(--ease-io) forwards}
@keyframes sendBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.f-send[aria-disabled="true"]{cursor:progress}
.f-privacy{max-width:40em;font-size:14px;line-height:1.55;color:var(--muted)}
.f-privacy a{color:var(--navy);font-weight:600;text-decoration-line:underline;text-decoration-color:var(--link-line);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-thickness var(--t-fast) var(--ease)}
.f-privacy a:hover{text-decoration-thickness:3.5px}
.f-proto{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13.5px;line-height:1.5;color:var(--muted)}   /* separated by .star-rule (03b-brand.css) */
.f-proto .ic{width:16px;height:16px}
.f-proto button{min-height:32px;padding:0 10px;border-radius:99px;border:1px solid var(--line);background:var(--white);font:500 13px/1 var(--f);color:var(--navy);cursor:pointer}
.f-proto button[aria-pressed="true"]{background:var(--err-tint);border-color:var(--err);color:var(--err)}
.f-done{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.f-done-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--accent);color:var(--accent-on)}
.f-done-ic .ic{width:26px;height:26px}
.f-done h3{font-weight:600;font-size:24px;line-height:1.3;color:var(--navy);letter-spacing:-.01em}
.f-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;font:600 15.5px/1 var(--f);color:var(--navy);text-decoration-line:underline;text-decoration-color:var(--link-line);text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-thickness var(--t-fast) var(--ease)}
.f-link:hover{text-decoration-thickness:3.5px}
.f-link .ic{width:18px;height:18px;transition:transform var(--t-med) var(--ease)}
.f-link:hover .ic{transform:translateX(4px)}
html.motion .f-summary,html.motion .f-fail,html.motion .f-done{animation:fIn 320ms var(--ease)}
@keyframes fIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:599px){
  .form-card{padding:24px 18px;border-radius:22px}
  .f-send{width:100%}
}
/* Footer */
.ftr{border-top:1px solid var(--line);padding-block:72px 32px;background:var(--white)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:40px}
.ftr-brand p{margin-top:16px;font-size:15px;line-height:1.6;color:var(--muted);max-width:18em}
.ftr-h{font-weight:600;font-size:14px;color:var(--navy)}
.ftr-list{margin-top:8px}
.ftr-list a{display:inline-flex;align-items:center;min-height:34px;color:var(--muted);text-decoration:none;font-size:15px;transition:color var(--t-fast)}
.ftr-list a:hover{color:var(--navy);text-decoration-line:underline;text-decoration-color:var(--link-line);text-decoration-thickness:2px;text-underline-offset:4px}
.ftr-base{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;font-size:14px;line-height:1.5;color:var(--muted)}
.ftr-base a{color:var(--text);font-weight:600;text-decoration-line:underline;text-decoration-color:var(--link-line);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-thickness var(--t-fast) var(--ease)}
.ftr-base a:hover{text-decoration-thickness:3.5px}
.proto-note{margin-top:16px;font-size:13px;color:var(--muted)}
@media (max-width:999px){
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-brand{grid-column:1/-1}
}
@media (max-width:599px){.ftr-grid{grid-template-columns:minmax(0,1fr)}}
/* Floating "Contact us" launcher and compact enquiry panel.
   The panel reuses the contact form's fields, validation and sending code.
   It never opens by itself.

   Movement (scripts/06-enquiry.js, Web Animations): the panel slides up from
   the launcher with a light fade (from the bottom edge on phones) while the
   backdrop fades, both with the same duration and easing.
     open   220ms (250ms on phones), cubic-bezier(.22,1,.36,1)
     close  180ms (200ms on phones), cubic-bezier(.33,1,.68,1)
   The dialog only closes once the exit movement has finished. With reduced
   motion the panel opens and closes instantly. */
.fab{position:fixed;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 18px;border:0;border-radius:999px;background:var(--launcher);color:var(--white);font:600 15.5px/1 var(--f);cursor:pointer;box-shadow:0 16px 32px -16px rgba(11,15,26,.65),0 2px 6px rgba(11,15,26,.16);visibility:hidden;opacity:0;transform:translateY(14px) scale(.96);transition:opacity 220ms var(--ease),transform 320ms var(--ease),visibility 0s linear 320ms,background-color var(--t-fast) var(--ease)}
.fab.is-shown{visibility:visible;opacity:1;transform:none;transition:opacity 220ms var(--ease),transform 320ms var(--ease),visibility 0s,background-color var(--t-fast) var(--ease)}
.fab:hover{background:var(--launcher-hover)}
.fab.is-shown:active{transform:scale(.97)}
.fab .ic{width:20px;height:20px;color:var(--launcher-ic)}
.fab:focus-visible{outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 3px var(--white),0 16px 32px -16px rgba(11,15,26,.65)}

/* The dialog covers the screen; the backdrop and panel sit inside it */
.enq{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--text);font-family:var(--f);overflow:hidden}
.enq::backdrop{background:transparent}
.enq-scrim{position:absolute;inset:0;background:rgba(11,15,26,.28)}
.enq-panel{position:absolute;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;width:min(440px,calc(100vw - 48px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);border-radius:24px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 40px 80px -30px rgba(11,15,26,.5);overflow:hidden;transform-origin:100% 100%}
.enq-in{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:22px 24px 26px}
.enq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.enq-h{padding-top:6px;font-weight:600;font-size:22px;line-height:1.25;letter-spacing:-.01em;color:var(--navy)}
.enq-x{flex:0 0 44px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--cloud);color:var(--navy);cursor:pointer;transition:background-color var(--t-fast) var(--ease)}
.enq-x:hover{background:#E8EBEF}
.enq-x .ic{width:20px;height:20px}
.enq-lead{margin-top:4px;font-size:15.5px;line-height:1.55;color:var(--text)}
.enq .f{gap:18px;margin-top:22px}
.enq .f-input{min-height:48px}
.enq textarea.f-input{min-height:112px}
.enq .f-actions{gap:12px}
.enq .f-send{width:100%}
.enq .f-done{margin-top:18px}
html.enq-lock{overflow:hidden}

@media (max-width:599px){
  .fab{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:48px;padding:0 18px 0 14px;font-size:15px}
  .enq-panel{left:0;right:0;bottom:0;width:100%;max-height:92vh;max-height:92dvh;border-radius:24px 24px 0 0;transform-origin:50% 100%}
  .enq-in{padding:18px 16px calc(22px + env(safe-area-inset-bottom,0px))}
}
/* Reduced motion: complete static story */
html.still *,html.still *::before,html.still *::after{transition-duration:0s !important;transition-delay:0s !important;animation-duration:0s !important;animation-delay:0s !important;scroll-behavior:auto !important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0s !important;transition-delay:0s !important;animation-duration:0s !important;animation-delay:0s !important}
}
.consent-banner{position:fixed;bottom:12px;left:12px;z-index:40;max-width:min(440px,calc(100vw - 24px));padding:18px;background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 30px #0b0f1a22;font:14px/1.5 var(--f)}
.consent-banner .btn{margin-top:10px;font-size:14px;min-height:44px}.consent-dialog{margin:auto;padding:32px;border:1px solid var(--line);border-radius:24px;width:min(600px,calc(100% - 32px));color:var(--navy);background:var(--white)}.consent-dialog::backdrop{background:#0b0f1a66}.consent-dialog p{margin-top:16px}.consent-dialog .cta-row{margin-top:24px;flex-wrap:wrap}.consent-dialog h2{font-size:24px}
.prose-page{max-width:900px;margin:0 auto;padding:calc(var(--hdr) + 64px) 32px 96px;color:var(--text);font:18px/1.7 var(--f)}.prose-header{margin:24px 0 40px}.prose-page h1{font-size:clamp(36px,5vw,64px);line-height:1.1;letter-spacing:-.035em;color:var(--navy)}.prose-meta{font-size:14px;color:var(--muted);margin-top:16px}.prose-page h2{margin:40px 0 16px;font-size:28px;line-height:1.3;color:var(--navy)}.prose-page h3{margin:24px 0 12px;font-size:21px}.prose-page p{margin:16px 0}.prose-page ul,.prose-page ol{padding-left:24px;list-style:revert;margin:20px 0}.prose-page a{color:var(--navy);text-decoration:underline;text-underline-offset:4px}.prose-page dt{font-weight:600;margin-top:16px}.prose-page dd{margin-bottom:12px}.prose-page .green{color:var(--navy)}.prose-page table{width:100%;border-collapse:collapse}.prose-page th,.prose-page td{padding:12px;border-bottom:1px solid var(--line);text-align:left}.cookie-group{padding:24px 0;border-bottom:1px solid var(--line);display:flex;gap:24px;align-items:center;justify-content:space-between}.cookie-group input{width:28px;height:28px;accent-color:var(--navy)}.cookie-save-btn{border:0;padding:16px 24px;border-radius:99px;font:600 16px var(--f);background:var(--navy);color:white;margin-top:24px;cursor:pointer}.enquiry-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.blog-shell{max-width:1200px;margin:auto;padding:calc(var(--hdr) + 64px) 32px 80px;color:var(--text)}.blog-measure{max-width:850px}.blog-index-title,.blog-article-title{font-size:clamp(36px,5vw,64px);font-weight:600;line-height:1.12;color:var(--navy);letter-spacing:-.03em}.blog-index-sub{margin:24px 0 48px;font-size:20px}.blog-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.blog-card{display:block;background:var(--cloud);padding:28px;border-radius:28px;color:var(--navy);text-decoration:none}.blog-card-title{font-size:26px;line-height:1.3;margin:20px 0 12px}.blog-card-thumb{width:100%;border-radius:18px}.blog-meta-row{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0;color:var(--muted);font-size:14px}.blog-p{margin:20px 0;font-size:18px;line-height:1.7}.blog-h2{margin:48px 0 20px;font-size:30px}.blog-h3{margin:32px 0 16px;font-size:24px}.blog-list{list-style:revert;margin:20px 0;padding-left:24px}.blog-list li{margin:8px 0}.blog-table-wrap{overflow:auto;margin:28px 0;border:1px solid var(--line);border-radius:18px}.blog-table{min-width:640px;border-collapse:collapse;width:100%}.blog-table th,.blog-table td{padding:16px;text-align:left;border-bottom:1px solid var(--line)}.blog-table th{background:var(--cloud)}.blog-quote{margin:32px 0;border-left:3px solid var(--navy);padding-left:24px;font-size:22px}.blog-callout,.blog-checklist,.blog-tool-card{margin:28px 0;padding:28px;border-radius:24px;background:var(--cloud)}.blog-checklist ol,.blog-checklist ul,.blog-pros-cons ul{list-style:revert;padding-left:24px}.blog-pros-cons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:20px 0}.blog-image,.blog-video{margin:32px 0}.blog-image img,.blog-hero{width:100%;height:auto;border-radius:24px}.blog-image figcaption{margin-top:12px;font-size:14px}.blog-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:20px}.blog-cta-band{background:var(--navy);color:white;padding:40px;border-radius:28px;margin:40px 0}.blog-cta-band h3{color:white;font-size:28px}.blog-cta-band a{color:white}.blog-faq-item{margin:28px 0}.blog-related-heading{font-size:24px;margin:48px 0 24px}.blog-risk-high{color:var(--err)}.blog-risk-low{color:#05603a}.blog-tool-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}.blog-tool-rank{margin-right:10px}.blog-tag{font-size:14px}.blog-shell a:not(.blog-card){text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.prose-page,.blog-shell{padding-left:20px;padding-right:20px}.blog-card-grid,.blog-pros-cons{grid-template-columns:1fr}.consent-banner{padding:12px}.blog-cta-band{padding:24px}}