form {
display:inline
}
/* People Leads 2026 - global stylesheet (static slice,stage 1).
Ports verbatim to design/default/css/css.css;
keep url(../../../design/default/css/)s relative (../Fonts,../files).
SCALE. The comps are drawn proportionally:Desktop on a 1920 canvas,Mobile on a 1024
canvas (2x a 512 phone). Every length below is "comp px x var(--u)",so the page is the
comp,scaled to the window:
phone     --u = width / 1024     (390px wide -> body 46 x .38 = 17.5px)
tablet    --u = 600px / 1024     (the phone layout in a 600px column,bgs bleed)
desktop   --u = width / 1920     (capped at 1px:the comp 1:1 from 1920 up)
--u reads 100cqw of .page,NOT 100vw:a classic scrollbar makes 100vw ~15px wider than the
layout,which would push the whole page sideways. Fixed overlays (drawer,modal) sit outside
.page and use the vw fallback;
the error there is under 1%. */
@font-face { font-family:Assistant;
font-weight:400;
font-display:swap;
src:url(../../../design/default/css/../Fonts/Assistant-Regular.woff2) format(woff2)
}
@font-face { font-family:Assistant;
font-weight:700;
font-display:swap;
src:url(../../../design/default/css/../Fonts/Assistant-Bold.woff2) format(woff2)
}
:root {
--navy:#00164d;
/* headings,dark cards (comp #00164D) */
--navy-deep:#011032;
/* hero / dark section ground,sampled from the hero */
--badge:#021436;
/* floating UI badges in the hero */
--ink:#013;
/* body copy on light grounds (comp #013) */
--orange:#f15a24;
--tag-bg:#dcdcf9;
--tag-ink:#1e229d;
--paper:#f9f9fd;
--grey-1:#f7f7f7;
--grey-2:#f2f2f2;
--white:#fff;
--f:"Assistant","Heebo",Arial,sans-serif;
--u:calc(100vw / 1024);
--canvas:1024;
--hdr-h:calc(170 * var(--u));
--gutter:calc(40 * var(--u))
}
@media (min-width:640px) { :root { --u:calc(600px / 1024)
} }
@media (min-width:1024px) { :root { --u:calc(min(100vw,1920px) / 1920);
--canvas:1920;
--hdr-h:calc(124 * var(--u));
--gutter:calc(60 * var(--u))
} }
/* the x-clip lives here,not only on body:with html visible,body's overflow moves to the viewport,where clip turns
into hidden and a bleeding child (the about hex) still leaves the page scrollable sideways. clip keeps sticky working */
.page { container-type:inline-size;
--u:calc(100cqw / 1024);
overflow-x:clip
}
@media (min-width:640px) { .page { --u:calc(min(100cqw,600px) / 1024)
} }
@media (min-width:1024px) { .page { --u:calc(min(100cqw,1920px) / 1920)
} }
*,*::before,*::after { box-sizing:border-box
}
html { -webkit-text-size-adjust:100%;
scroll-behavior:smooth
}
body { margin:0;
background:var(--white);
color:var(--ink);
font-family:var(--f);
font-size:max(16px,calc(46 * var(--u)));
line-height:1.2;
overflow-x:clip
}
img,svg { max-width:100%;
height:auto;
display:block
}
a { color:inherit;
text-decoration:none
}
h1,h2,h3,h4,p,figure,blockquote { margin:0
}
ul,ol { margin:0;
padding:0;
list-style:none
}
button,input,textarea,select { font:inherit;
color:inherit
}
button { cursor:pointer
}
/* The SDK's css-fixes sheet loads after the theme and shifts every <ol> 20px (RTL indent hack). */
html ol { position:static;
right:auto;
left:auto
}
:focus-visible { outline:3px solid var(--orange);
outline-offset:3px
}
.visually-hidden { position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap
}
.skip-link { position:absolute;
inset-inline-start:8px;
top:8px;
z-index:200;
padding:10px 16px;
background:var(--orange);
color:#fff;
font-size:16px;
font-weight:700;
transform:translateY(-200%)
}
.skip-link:focus { transform:none
}
/* The content column:the comp canvas,centred. Section backgrounds span the full width. */
.wrap { position:relative;
width:calc(var(--canvas) * var(--u));
margin-inline:auto
}
@media (prefers-reduced-motion:reduce) {
html { scroll-behavior:auto
}
*,*::before,*::after { animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important
}
}
/* ---------- type primitives (mobile comp px;
desktop overrides below) ---------- */
.eyebrow { display:block;
color:var(--orange);
font-weight:700;
font-size:max(14px,calc(39 * var(--u)));
line-height:1.2
}
.h2 { color:var(--navy);
font-weight:700;
font-size:calc(78 * var(--u));
line-height:1.0795
}
.lead { font-size:max(16px,calc(46 * var(--u)));
line-height:1.297
}
.u-orange { color:var(--orange)
}
/* a line break the desktop comp needs but the mobile reflow does not */
.br-d { display:none
}
@media (min-width:1024px) { .br-d { display:inline
} }
/* section head:eyebrow / h2 / lead. Mobile is right-aligned in a 38px-inset column. */
.sec-head { padding-inline:calc(38 * var(--u));
color:var(--navy)
}
.sec-head .h2 { margin-top:calc(27 * var(--u))
}
.sec-head__lead { margin-top:calc(37.9 * var(--u));
font-size:max(16px,calc(46 * var(--u)));
line-height:1.297
}
@media (min-width:1024px) {
body { font-size:max(16px,calc(30 * var(--u)))
}
.eyebrow { font-size:max(14px,calc(30 * var(--u)))
}
.h2 { font-size:calc(60 * var(--u));
line-height:1.08
}
.lead { font-size:max(16px,calc(30 * var(--u)));
line-height:1.4267
}
.sec-head { padding-inline:0
}
.sec-head .h2 { margin-top:calc(20.8 * var(--u))
}
.sec-head__lead { margin-top:calc(28.8 * var(--u));
font-size:max(16px,calc(30 * var(--u)));
line-height:1.4267
}
}
/* ---------- buttons ---------- */
.btn { display:inline-flex;
align-items:center;
justify-content:center;
gap:.4em;
border:0;
border-radius:999px;
background:var(--orange);
color:#fff;
font-weight:700;
line-height:1;
white-space:nowrap;
transition:background-color .25s,transform .25s,box-shadow .25s
}
.btn:hover { background:#d9481a;
transform:translateY(-2px);
box-shadow:0 10px 24px -10px rgb(241 90 36 / .7)
}
.btn--hero-cta { height:calc(137.3 * var(--u));
padding-inline:calc(50 * var(--u));
font-size:max(15px,calc(37.69 * var(--u)))
}
/* the comp's secondary pills are a fixed 272.6 (desktop) / 460.7 (mobile) wide,text centred */
.btn--sm { min-width:calc(460.7 * var(--u));
height:calc(102.7 * var(--u));
padding-inline:calc(45.6 * var(--u));
font-size:max(15px,calc(40.56 * var(--u)))
}
@media (min-width:1024px) { .btn--sm { min-width:calc(272.6 * var(--u));
height:calc(60.74 * var(--u));
padding-inline:calc(27 * var(--u));
font-size:max(14px,calc(24 * var(--u)))
} }
.btn--xs { min-width:calc(257.55 * var(--u));
height:calc(73.78 * var(--u));
padding-inline:calc(30 * var(--u));
font-size:max(14px,calc(29.15 * var(--u)))
}
@media (min-width:1024px) { .btn--xs { min-width:calc(198.1 * var(--u));
height:calc(56.75 * var(--u));
padding-inline:calc(23 * var(--u));
font-size:max(14px,calc(22.42 * var(--u)))
} }
/* ---------- play button (home hero,about video band):the icon is the img inside ---------- */
.play-btn { position:absolute;
z-index:5;
padding:0;
border:0;
background:none;
border-radius:50%;
transition:transform .3s
}
.play-btn::before,.play-btn::after { content:"";
position:absolute;
left:50%;
top:50%;
width:58%;
aspect-ratio:1;
border-radius:50%;
border:2px solid rgb(255 255 255 / .55);
transform:translate(-50%,-50%) scale(1);
opacity:0;
animation:play-pulse 2.2s ease-out infinite;
pointer-events:none
}
.play-btn::after { animation-delay:1.1s
}
.play-btn:hover { transform:scale(.94)
}
@keyframes play-pulse { 0% { opacity:.9;
transform:translate(-50%,-50%) scale(1)
} 100% { opacity:0;
transform:translate(-50%,-50%) scale(1.9)
} }
/* ---------- header ---------- */
.site-header { position:sticky;
top:0;
z-index:50;
height:var(--hdr-h);
color:#fff;
transition:background-color .3s,box-shadow .3s,transform .6s cubic-bezier(.24,.74,.58,1)
}
.site-header.is-scrolled { background:rgb(1 16 50 / .92);
box-shadow:0 8px 30px rgb(0 0 0 / .25);
-webkit-backdrop-filter:blur(15px);
backdrop-filter:blur(15px)
}
.site-header.is-hidden { transform:translateY(-100%)
}
.site-header__row { height:100%;
display:flex;
align-items:center;
flex-direction:row-reverse;
justify-content:space-between;
padding-inline:calc(32.8 * var(--u)) calc(33 * var(--u))
}
.site-header__logo img { width:calc(359.3 * var(--u))
}
.site-nav,.site-header__cta { display:none
}
.burger { display:grid;
place-items:center;
width:calc(110 * var(--u));
height:calc(110 * var(--u));
min-width:44px;
min-height:44px;
margin:calc(-20 * var(--u));
padding:0;
border:0;
background:none
}
.burger img { width:calc(77.3 * var(--u))
}
@media (min-width:1024px) {
.site-header__row { flex-direction:row;
padding-inline:calc(46.5 * var(--u)) calc(31 * var(--u))
}
.site-header__logo img { width:calc(313.45 * var(--u))
}
.site-header__cta { display:inline-flex
}
}
/* the 7-item nav needs ~1180px at its smallest readable size;
below that the burger stays */
@media (min-width:1280px) {
.burger { display:none
}
.site-nav { display:block;
margin-inline-start:calc(158 * var(--u));
margin-inline-end:auto
}
.site-nav__list { display:flex;
align-items:center;
white-space:nowrap;
font-size:max(14px,calc(21.41 * var(--u)));
line-height:1
}
.site-nav__list li + li::before { content:"|";
margin-inline:calc(21.5 * var(--u));
opacity:.9
}
.site-nav__list a { position:relative
}
.site-nav__list a::after { content:"";
position:absolute;
inset-inline:0;
bottom:-6px;
height:2px;
background:var(--orange);
transform:scaleX(0);
transform-origin:right;
transition:transform .25s
}
.site-nav__list a:hover::after,.site-nav__list a[aria-current="page"]::after { transform:scaleX(1)
}
}
/* ---------- mobile drawer (outside .page:vw units) ---------- */
.drawer { position:fixed;
inset:0;
z-index:100;
visibility:hidden
}
.drawer.is-open { visibility:visible
}
.drawer__scrim { position:absolute;
inset:0;
background:rgb(1 16 50 / .6);
opacity:0;
transition:opacity .3s
}
.drawer__panel { position:absolute;
inset-block:0;
inset-inline-start:0;
width:min(86vw,420px);
padding:24px 28px 32px;
overflow-y:auto;
background:var(--navy-deep);
color:#fff;
transform:translateX(100%);
transition:transform .35s cubic-bezier(.2,.7,.2,1);
display:flex;
flex-direction:column;
gap:28px
}
.drawer.is-open .drawer__scrim { opacity:1
}
.drawer.is-open .drawer__panel { transform:none
}
.drawer__top { display:flex;
align-items:center;
justify-content:space-between
}
.drawer__top img { width:170px
}
.drawer__close { width:44px;
height:44px;
border:0;
background:none;
color:#fff;
font-size:34px;
line-height:1
}
.drawer__list a { display:block;
padding:14px 0;
border-bottom:1px solid rgb(255 255 255 / .14);
font-size:20px
}
.drawer__list a[aria-current="page"] { color:var(--orange)
}
.drawer .btn { height:52px;
font-size:18px;
padding-inline:28px;
align-self:flex-start
}
body.has-drawer { overflow:hidden
}
/* ---------- footer (every page) ----------
Mobile order:logo / form / contact / rule / nav / services / social+copyright;
the desktop
wrappers dissolve on mobile (display:contents) so one DOM serves both comps. */
.site-footer { position:relative;
padding-block:calc(208.7 * var(--u)) calc(78.1 * var(--u));
background:#fff url(../../../design/default/css/../files/img/footer-bg-mobile.webp) 50% calc(30.9 * var(--u)) / calc(1045.8 * var(--u)) auto no-repeat;
color:var(--ink)
}
.site-footer__wrap { display:flex;
flex-direction:column
}
.site-footer__main,.site-footer__cols { display:contents
}
.site-footer__logo { order:1;
align-self:center
}
.site-footer__logo img { width:calc(478.1 * var(--u))
}
.lead-form { order:2;
display:flex;
flex-direction:column;
gap:calc(30.5 * var(--u));
margin:calc(56.9 * var(--u)) calc(39.3 * var(--u)) 0;
padding:calc(55.4 * var(--u)) calc(56 * var(--u)) calc(59.6 * var(--u));
border-radius:calc(30 * var(--u));
background:var(--navy)
}
.lead-form__title { margin-bottom:calc(16.5 * var(--u));
color:#fff;
font-size:calc(60 * var(--u));
line-height:1.2;
text-align:center
}
.lead-form__field { width:100%;
height:calc(136.4 * var(--u));
padding:0 calc(23 * var(--u));
border:0;
border-radius:calc(15 * var(--u));
background:#fff;
color:var(--ink);
font-size:max(16px,calc(46 * var(--u)));
line-height:1.2;
transition:box-shadow .2s
}
.lead-form__field::placeholder { color:var(--ink);
opacity:1
}
.lead-form__field:focus { outline:0;
box-shadow:inset 0 0 0 2px var(--orange),0 0 0 3px rgb(241 90 36 / .35)
}
.lead-form__field[aria-invalid="true"] { box-shadow:inset 0 0 0 2px #e5484d
}
.lead-form__field[aria-invalid="true"]:focus { box-shadow:inset 0 0 0 2px #e5484d,0 0 0 3px rgb(229 72 77 / .4)
}
/* empty:out of the flex flow (no gap slot) but still rendered,so the live region announces */
.lead-form__status { margin:0;
color:#ffb4a1;
font-size:max(14px,calc(40 * var(--u)));
line-height:1.3;
text-align:center
}
.lead-form__status:empty { position:absolute
}
.lead-form__field--area { height:calc(353.1 * var(--u));
margin-top:calc(3.5 * var(--u));
padding-top:calc(22.1 * var(--u));
border-radius:calc(20 * var(--u));
resize:vertical
}
.lead-form__trap { position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
inset-inline-start:-9999px
}
.lead-form__submit { align-self:center;
width:calc(355 * var(--u));
height:calc(100.5 * var(--u));
margin-top:calc(18.5 * var(--u));
font-size:max(16px,calc(50 * var(--u)))
}
.site-footer__contact { order:3;
margin-top:calc(102.7 * var(--u));
padding-inline:calc(144.4 * var(--u)) calc(38 * var(--u));
color:var(--ink);
font-size:calc(55.89 * var(--u));
line-height:1.255
}
.site-footer__contact li { display:flex;
align-items:flex-start;
gap:calc(47.3 * var(--u))
}
.site-footer__contact li + li { align-items:center;
margin-top:calc(72.4 * var(--u))
}
.site-footer__contact img { flex:none;
width:calc(176.3 * var(--u));
height:auto;
object-fit:contain
}
.site-footer__contact li:first-child img { width:calc(113.7 * var(--u));
margin:calc(5.8 * var(--u)) calc(31.3 * var(--u)) 0
}
.site-footer__contact a:hover { color:var(--orange)
}
.site-footer__rule { order:4;
height:calc(2 * var(--u));
margin:calc(65.4 * var(--u)) calc(39.3 * var(--u)) 0;
border:0;
background:#e6e6e6
}
.site-footer__nav { order:5;
margin-top:calc(66.7 * var(--u));
text-align:center
}
.site-footer__nav--services { order:6;
margin-top:calc(89.5 * var(--u))
}
.site-footer__heading { color:var(--ink);
font-size:calc(50 * var(--u));
line-height:1.2
}
.site-footer__nav ul { margin-top:calc(11.8 * var(--u))
}
.site-footer__nav a { display:inline-block;
font-size:max(16px,calc(46 * var(--u)));
line-height:1.754;
transition:color .2s
}
.site-footer__nav a:hover { color:var(--orange)
}
.site-footer__bar { order:7;
display:flex;
flex-direction:column-reverse;
align-items:center;
gap:calc(47.8 * var(--u));
margin-top:calc(82 * var(--u))
}
.site-footer__copy { font-size:max(14px,calc(50.13 * var(--u)));
line-height:1.2
}
.social { display:flex;
align-items:center
}
.social li { display:flex;
align-items:center
}
.social li + li::before { content:"|";
font-size:calc(67.57 * var(--u));
line-height:1;
transform:scaleX(1.18)
}
/* per-gap margins:the three glyphs sit differently inside their equal boxes */
.social li:nth-child(2)::before { margin-inline:calc(71 * var(--u)) calc(69 * var(--u))
}
.social li:nth-child(3)::before { margin-inline:calc(61 * var(--u)) calc(81 * var(--u))
}
/* 44px tap target without inflating the row the comp measures */
.social a { position:relative;
display:block;
transition:transform .2s
}
.social a::after { content:"";
position:absolute;
top:50%;
left:50%;
width:44px;
height:44px;
transform:translate(-50%,-50%)
}
.social a:hover { transform:translateY(-2px)
}
.social img { width:calc(68.2 * var(--u))
}
/* tablet and ultrawide:keep the comp's slight overscan so the image edges never show */
@media (min-width:640px) and (max-width:1023px) { .site-footer { background-size:102.2% auto
} }
@media (min-width:1024px) {
.site-footer { padding-block:calc(88.1 * var(--u)) calc(24 * var(--u));
background-image:url(../../../design/default/css/../files/img/footer-bg-desktop.webp);
background-position:50% 0;
background-size:calc(1933.8 * var(--u)) auto
}
.site-footer__wrap { display:grid;
grid-template-columns:calc(984.9 * var(--u)) calc(108.8 * var(--u)) calc(509.9 * var(--u));
align-items:start;
padding-inline:calc(212.1 * var(--u)) calc(104.3 * var(--u))
}
.site-footer__main { display:block;
grid-area:1 / 1
}
.site-footer__logo { display:block;
width:fit-content
}
.site-footer__logo img { width:calc(313.5 * var(--u))
}
.site-footer__rule { height:calc(1 * var(--u));
margin:calc(52.8 * var(--u)) 0 0
}
.site-footer__cols { display:grid;
grid-template-columns:calc(326 * var(--u)) calc(339.9 * var(--u)) 1fr;
align-items:start;
margin-top:calc(48.4 * var(--u))
}
.site-footer__nav,.site-footer__nav--services,.site-footer__contact { order:0
}
.site-footer__nav,.site-footer__nav--services { margin-top:0;
text-align:right
}
.site-footer__heading { font-size:calc(29.52 * var(--u))
}
.site-footer__nav ul { margin-top:calc(7.1 * var(--u))
}
.site-footer__nav a { font-size:max(14px,calc(23.2 * var(--u)));
line-height:1.944
}
.site-footer__contact { margin-top:calc(5.4 * var(--u));
padding-inline:0;
font-size:max(14px,calc(23.2 * var(--u)));
line-height:1.254
}
.site-footer__contact li { gap:calc(18.9 * var(--u))
}
.site-footer__contact li + li { margin-top:calc(75.7 * var(--u))
}
.site-footer__contact img { width:calc(73.2 * var(--u))
}
.site-footer__contact li:first-child img { width:calc(47.2 * var(--u));
margin:calc(2.4 * var(--u)) calc(13 * var(--u)) 0
}
.lead-form { grid-area:1 / 3;
gap:calc(27.9 * var(--u));
margin:calc(28.2 * var(--u)) 0 0;
padding:calc(29 * var(--u)) calc(30.2 * var(--u)) calc(32.6 * var(--u));
border-radius:calc(15.29 * var(--u))
}
.lead-form__title { margin-bottom:calc(17.6 * var(--u));
font-size:calc(29.52 * var(--u))
}
.lead-form__field { height:calc(49.5 * var(--u));
padding:0 calc(12 * var(--u));
border-radius:calc(7.29 * var(--u));
font-size:max(16px,calc(23.2 * var(--u)))
}
.lead-form__field--area { height:calc(128.1 * var(--u));
margin-top:0;
padding-top:calc(10 * var(--u));
border-radius:calc(10.14 * var(--u))
}
.lead-form__status { font-size:max(14px,calc(20 * var(--u)));
text-align:right
}
.lead-form__submit { align-self:flex-end;
width:calc(191.5 * var(--u));
height:calc(54.9 * var(--u));
margin-top:calc(-2.5 * var(--u));
font-size:max(14px,calc(21.67 * var(--u)))
}
/* the comp centres the bar on the page,not on the asymmetric wrap */
.site-footer__bar { grid-area:2 / 1 / 3 / -1;
flex-direction:row;
justify-content:center;
gap:0;
margin:calc(17.1 * var(--u)) calc(-212.1 * var(--u)) 0 calc(-104.3 * var(--u))
}
.site-footer__copy { font-size:max(13px,calc(23.2 * var(--u)))
}
.social li::before,.social li + li::before { content:"|";
margin-inline:calc(5.4 * var(--u)) calc(18 * var(--u));
font-size:calc(19.72 * var(--u))
}
.social li:nth-child(2)::before { margin-inline:calc(20 * var(--u)) calc(21 * var(--u))
}
.social li:nth-child(3)::before { margin-inline:calc(18 * var(--u)) calc(23 * var(--u))
}
.social img { width:calc(19.89 * var(--u))
}
}
@media (min-width:1921px) { .site-footer { background-size:100.8% auto
} }
/* ---------- motion and overlays (js.js adds these classes;
nothing hides without JS) ---------- */
.reveal { opacity:0;
transform:translateY(40px);
transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)
}
.reveal.is-in { opacity:1;
transform:none
}
@media print { .reveal { opacity:1;
transform:none
} }
/* video lightbox (built by js.js on first open) */
html:has(.video-modal[open]) { overflow:hidden
}
.video-modal { width:min(92vw,1100px);
max-height:none;
padding:0;
border:0;
border-radius:12px;
background:#000;
color:#fff;
overflow:visible
}
.video-modal[open] { animation:modal-in .3s cubic-bezier(.2,.7,.2,1)
}
.video-modal::backdrop { background:rgb(1 16 50 / .88)
}
.video-modal__frame { aspect-ratio:16 / 9;
overflow:hidden;
border-radius:inherit
}
.video-modal__frame iframe,.video-modal__frame video { display:block;
width:100%;
height:100%;
border:0
}
.video-modal__note { display:grid;
place-items:center;
height:100%;
margin:0;
font-size:20px
}
.video-modal__close { position:absolute;
bottom:100%;
inset-inline-end:0;
width:44px;
height:44px;
margin-bottom:6px;
padding:0;
border:0;
background:none;
color:#fff;
font-size:36px;
line-height:1;
cursor:pointer;
transition:color .2s,transform .2s
}
.video-modal__close:hover { color:var(--orange);
transform:rotate(90deg)
}
@keyframes modal-in { from { opacity:0;
transform:scale(.96)
} }
/* back to top:the ring is the scroll progress */
.to-top { position:fixed;
inset-inline-end:20px;
bottom:20px;
z-index:90;
width:48px;
height:48px;
border-radius:50%;
background:var(--navy);
box-shadow:0 6px 18px rgb(0 22 77 / .3);
opacity:0;
visibility:hidden;
transform:translateY(12px);
transition:opacity .3s,transform .3s,visibility .3s,background-color .2s
}
.to-top.is-shown { opacity:1;
visibility:visible;
transform:none
}
.to-top:hover { background:var(--orange)
}
.to-top svg { display:block;
width:100%;
height:100%;
fill:none;
stroke-width:2.5;
stroke-linecap:round;
stroke-linejoin:round
}
.to-top__track { stroke:rgb(255 255 255 / .18)
}
.to-top__ring { stroke:var(--orange);
stroke-dasharray:100;
stroke-dashoffset:100
}
.to-top:hover .to-top__ring { stroke:#fff
}
.to-top__arrow { stroke:#fff
}
/* ---------- inner-page hero (services,about):one composite photo per page,text on its navy side ---------- */
.page-hero { position:relative;
margin-top:calc(-1 * var(--hdr-h));
background:#fff;
color:#fff;
overflow:clip
}
.page-hero__wrap { height:calc(1703 * var(--u))
}
.page-hero__bg img { position:absolute;
left:calc(-16 * var(--u));
top:calc(-3.1 * var(--u));
width:calc(1053.7 * var(--u));
max-width:none;
height:auto
}
.page-hero__text { position:relative;
z-index:1;
padding-top:calc(199.1 * var(--u))
}
.page-hero__title { font-size:calc(85.41 * var(--u));
line-height:calc(87.5 * var(--u));
text-align:center
}
/* 43 not the comp's 44:the comp squeezes its third line by hand;
43 keeps its five lines */
.page-hero__lead { margin:calc(50.45 * var(--u)) calc(40 * var(--u)) 0 calc(65.1 * var(--u));
font-size:max(15px,calc(43 * var(--u)));
line-height:1.228;
text-align:justify
}
.crumbs { display:none
}
@media (min-width:1024px) {
.page-hero__wrap { height:calc(972 * var(--u))
}
.page-hero__bg img { left:calc(-4.3 * var(--u));
top:calc(-20.6 * var(--u));
width:calc(1933.7 * var(--u))
}
.page-hero__text { width:calc(556 * var(--u));
margin-inline-start:calc(179 * var(--u));
padding:calc(188.8 * var(--u)) 0 0
}
.page-hero__title { margin-right:calc(6 * var(--u));
font-size:calc(85.53 * var(--u));
text-align:right
}
.page-hero__title span { display:block
}
.page-hero__lead { margin:calc(35.1 * var(--u)) 0 0;
font-size:max(16px,calc(30 * var(--u)));
line-height:1.36
}
.crumbs { display:block;
margin-top:calc(31.5 * var(--u));
font-size:max(14px,calc(24 * var(--u)));
line-height:1.2
}
.crumbs ol { display:flex
}
.crumbs li + li::before { content:">";
margin-inline:calc(10 * var(--u)) calc(11 * var(--u));
color:var(--orange)
}
.crumbs a:hover { color:var(--orange)
}
}
/* ===== stage 2 additions (not in the comp) =====
Legal links next to the copyright:the comp has none,but the privacy policy and the accessibility
statement (pages 13 and 10) must be reachable from every page. Own line on phones,inline on desktop. */
.site-footer__copy { text-align:center
}
.site-footer__legal { display:block;
margin-top:.35em;
font-size:.8em
}
.site-footer__legal a + a::before { content:"·";
margin-inline:.5em
}
.site-footer__legal a:hover { color:var(--orange)
}
@media (min-width:1024px) {
.site-footer__legal { display:inline;
margin:0;
font-size:1em
}
.site-footer__legal::before { content:"·";
margin-inline:.5em
}
}
/* Connected owner:box 15.1 pins its admin bar (#admin_pusher,85-145px from the paneltop cookie,
z-index 202) over the page,so the sticky header would slide under it once scrolled. js.js
publishes the bar's height as --admin-top;
visitors never have the bar and keep top:0. */
.site-header { top:var(--admin-top,0px)
}
.seoform span {
float:left;
width:100px
}
.seoform div input {
width:500px
}
.seoform div {
float:left;
width:100%;
margin-bottom:15px
}
/* css fixes */
ol {
position:relative;
right:20px
}
a{
outline:0
}
input[type="image"],
input[type="submit"],
input[type="button"],
button {
cursor:pointer
}
.ie a img {
border:0
}
.hidden {
position:absolute;
left:0;
top:-100000px
}
/*
* span {
display:inline-block
}
*/
/*
#lbuttons,
#lbuttons div,
#lbuttons a,
#lbuttons img,
.fxc #subtoolbar,
.fxc #admin_panel {
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
transform:2DValue(val) 3DValueSetToNull(0);
transform:2DValue(val);
-webkit-transform :translateZ(0);
-o-transform :translateZ(0);
-webkit-transform :translateZ(0);
transform :translateZ(0);
-webkit-transition:all 0.5s linear
}
.fxc #admin_pusher,
.fxc #sys_website {
-webkit-transition:all 0.5s linear
}
*/
/* ============================================================
MagmaSDK 15.1 · admin design tokens — CANONICAL,GLOBAL HOME.
This file is concatenated into every admin CSS bundle by the
per-plugin css.css loop in css/content/parts/header.php,so the
:root tokens below are in scope for every admin document:the
admin panel (admin.panel.css) AND the on-page editor context
(ifs/oper.css,wysiwyg connected.css) AND the plugin maker.
Single source of truth — change a value here and every admin
surface that consumes var(--mg-*) moves with it.
Neutral gray ramp is faintly cool so it harmonizes with the
indigo accent without visibly bluing any gray (ad-hoc grays
across the admin were snapped to the nearest step). Accent
chosen on WCAG grounds:#4f46e5 = 6.29:1 on white (passes AA);
the legacy cyan hue would fail AA. See magmasdk-15-1-box memory.
============================================================ */
:root {
--mg-accent:#4f46e5;
/* house UI accent (Indigo) */
--mg-accent-weak:#ecebfb;
/* faint accent fill — active tabs/buttons on white */
--mg-accent-strong:#3b34c4;
/* darker accent — filled-button hover/pressed */
--mg-gray-50:#f7f8fa;
--mg-gray-100:#ececef;
--mg-gray-200:#e2e2e6;
--mg-gray-300:#d5d5da;
--mg-gray-400:#b6b6bb;
--mg-gray-500:#8b8b90;
--mg-gray-600:#6f6f75;
--mg-gray-700:#47474c;
--mg-gray-800:#303034;
--mg-gray-900:#1f1f23;
/* radius scale (consolidates the scattered 4/5/7/10px radii) */
--mg-radius-sm:4px;
--mg-radius:8px;
--mg-radius-lg:12px;
--mg-radius-pill:999px;
/* elevation — flat & modern;
replaces the stacked skeuomorphic
inset "bevel" shadows the admin chrome used to fake 3D depth */
--mg-shadow-sm:0 1px 2px rgba(17,17,26,.06);
--mg-shadow:0 2px 6px rgba(17,17,26,.10);
--mg-shadow-md:0 4px 12px rgba(17,17,26,.12);
--mg-shadow-lg:0 10px 30px rgba(17,17,26,.16);
/* spacing scale (defined for the system;
consumed incrementally) */
--mg-space-1:4px;
--mg-space-2:8px;
--mg-space-3:12px;
--mg-space-4:16px;
--mg-space-6:24px
}
/* 15.1 · visible keyboard focus (WCAG 2.4.7). Uses the house accent.
!important defeats the legacy `outline:0` scattered through the admin,
so keyboard users can always see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline:2px solid var(--mg-accent) !important;
outline-offset:2px !important
}
body {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
min-width:100%;
min-height:100%;
padding:0;
margin:0
}
p {
padding:0;
margin:0
}
div.bs {
float:right
}