/* Elevation 6 - elevation6.com. Single stylesheet: brand tokens followed by
   site layout. One typeface, Poppins (as on the business card), self-hosted in /fonts. */

/* Poppins Regular and Medium, Latin subset. Medium carries every heading and label, which
   keeps the type close to the logo's light geometric wordmark. "Poppins Fallback" is Arial resized to Poppins' metrics, so the
   page does not jump when the web font arrives. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");size-adjust:112.9%;ascent-override:93%;descent-override:31%;line-gap-override:8.9%}
:root{
/* Named palette - the eight colours on the Aurora deck's palette slide */
--e6-void:#050A0F;
--e6-navy:#0D1928;
--e6-ice:#EEF2F5;
--e6-slate:#B3BFCA;
--e6-green:#33D977;
--e6-teal:#00BFC0;
--e6-blue:#2F8ADC;
--e6-graphite:#5A656E;

/* Neutral ramp - the working greys the deck uses between Ice and Void */
--e6-grey-100:#EEF2F5;
--e6-grey-200:#C8CFD4;
--e6-grey-300:#B3BFCA;
--e6-grey-400:#A4B0BA;
--e6-grey-500:#94A0AA;
--e6-grey-600:#7D8892;
--e6-grey-700:#5A656E;
--e6-grey-800:#2A3742;
--e6-grey-850:#1E2A36;
--e6-grey-900:#17222D;
--e6-grey-950:#0D1928;
--e6-grey-1000:#050A0F;

/* Aurora gradient stops, taken from the logo mark's own linearGradient */
--e6-aurora-blue:#2D91D7;
--e6-aurora-green:#2AD67E;
--e6-aurora-violet:#7351EA;
--e6-gradient-aurora:linear-gradient(75deg,var(--e6-aurora-blue) 0%,var(--e6-aurora-green) 42%,var(--e6-aurora-violet) 100%);
/* Left-to-right variant for rules, underlines and progress fills */
--e6-gradient-rule:linear-gradient(90deg,var(--e6-green) 0%,var(--e6-teal) 50%,var(--e6-blue) 100%);

/* Surfaces */
--surface-page:var(--e6-void);
--surface-panel:var(--e6-navy);
--surface-card:var(--e6-navy);
--surface-inset:#0A1420;
--surface-inverse:var(--e6-ice);

/* Text */
--text-primary:var(--e6-ice);
--text-body:var(--e6-grey-200);
--text-secondary:var(--e6-slate);
--text-label:var(--e6-grey-400);
--text-muted:var(--e6-grey-600);
--text-caption:var(--e6-graphite);
--text-on-light:var(--e6-void);
--text-link:var(--e6-teal);
--text-link-hover:var(--e6-green);

/* Borders - three weights of hairline, all near-invisible by design */
--border-subtle:var(--e6-grey-900);
--border-hairline:var(--e6-grey-850);
--border-strong:var(--e6-grey-800);
--border-accent:var(--e6-teal);

/* Accents */
--accent-primary:var(--e6-teal);
--accent-secondary:var(--e6-green);
--accent-tertiary:var(--e6-blue);

/* Status - as used on the deck's detail table */
--status-positive:var(--e6-green);
--status-active:var(--e6-teal);
--status-info:var(--e6-blue);
--status-idle:var(--e6-grey-600);
--status-critical:#FF5A5A;
--status-warning:#F5B33C;

/* Tints - flat overlays for badges and hover fills */
--tint-teal-12:rgba(0,191,192,.12);
--tint-teal-20:rgba(0,191,192,.2);
--tint-green-12:rgba(51,217,119,.12);
--tint-blue-12:rgba(47,138,220,.12);
--tint-ice-06:rgba(238,242,245,.06);
--tint-ice-10:rgba(238,242,245,.1);
--scrim-void-60:rgba(5,10,15,.6);
--scrim-void-85:rgba(5,10,15,.85);
}

:root{
--font-sans:"Poppins","Poppins Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
--font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; /* no brand mono face was supplied; system mono only, for hex values and code */
--font-display:var(--font-sans); /* one typeface for everything: Poppins Bold carries display duty */

--weight-regular:400;
--weight-medium:500;
--weight-bold:500; /* Poppins Medium: the site's only heavier weight */

/* Tracking. The brand's only tracked type is uppercase micro-labels. */
--tracking-tight:-.02em;
--tracking-normal:0;
--tracking-label:.12em;
--tracking-wordmark:.26em;

--leading-display:.86; /* the deck sets 86% line spacing on the title */
--leading-tight:1.1;
--leading-body:1.6;
--leading-loose:1.7;

/* Web scale */
--text-xs:12px;
--text-sm:14px;
--text-base:16px;
--text-md:18px;
--text-lg:20px;
--text-xl:24px;
--text-2xl:32px;
--text-3xl:40px;
--text-4xl:56px;
--text-5xl:72px;

/* Deck scale - px at a 1920x1080 stage, straight off the Aurora master */
--slide-title:92px;      /* title slide headline, bold, 86% leading */
--slide-header:66px;     /* section header on content layout A */
--slide-header-sm:60px;  /* header on layouts C and D */
--slide-stat:84px;       /* lead figure */
--slide-closing:82px;    /* "Thank you" */
--slide-body:32px;
--slide-body-sm:30px;
--slide-list:31px;
--slide-subtitle:38px;   /* title slide supporting line */
--slide-card-title:28px;
--slide-label:26px;
--slide-eyebrow:25px;
--slide-footer:24px;
--slide-caption:24px;
--slide-icon-label:20px;
}

:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-26:104px;
--space-30:120px;

/* Deck grid - measured from the Aurora master at 1920x1080 */
--slide-w:1920px;
--slide-h:1080px;
--slide-margin-x:120px;      /* every element starts at x=120 */
--slide-margin-top:104px;    /* header baseline block starts at y=104 */
--slide-footer-y:979px;      /* footer row */
--slide-content-w:1680px;    /* 1920 - 2x120 */
--slide-col-4:528px;         /* four-up reference card */
--slide-col-gap:48px;        /* 576px pitch: 120 / 696 / 1272 */
--slide-col-3:569px;         /* three-up stat column, 581px pitch */
--slide-row-pitch:105px;     /* numbered list rows */

/* Web layout */
--container-max:1280px;
--gutter:24px;
--section-y:96px;
}

:root{
/* Radii. The Aurora deck rounds cards by exactly 4px on a 1920px stage -
   effectively square. Nothing in the brand is pill-shaped except toggles. */
--radius-none:0;
--radius-xs:2px;
--radius-sm:4px;
--radius-md:6px;
--radius-lg:8px;
--radius-pill:999px;

--border-width:1px;
--border-width-thick:3px;    /* the dashed image-placeholder frame */
--rule-height:1px;
--accent-rule-w:96px;        /* title-slide gradient rule */
--accent-rule-h:3px;

/* Elevation. Dark-on-dark: separation comes from hairlines and fills,
   not drop shadows. Shadows appear only under floating layers. */
--shadow-none:none;
--shadow-panel:0 1px 0 rgba(238,242,245,.04) inset;
--shadow-raised:0 8px 24px rgba(5,10,15,.5);
--shadow-overlay:0 24px 64px rgba(5,10,15,.7);
--glow-teal:0 0 24px rgba(0,191,192,.25);
--glow-green:0 0 24px rgba(51,217,119,.22);

--focus-ring:0 0 0 2px var(--e6-void),0 0 0 4px var(--e6-teal);

/* Blur is used for one thing: a frosted panel over aurora photography. */
--blur-panel:blur(16px); /* @kind other */
--scrim-bottom:linear-gradient(180deg,rgba(5,10,15,0) 0%,rgba(5,10,15,.9) 100%); /* @kind color */
--scrim-left:linear-gradient(90deg,rgba(5,10,15,.92) 0%,rgba(5,10,15,.4) 55%,rgba(5,10,15,0) 100%); /* @kind color */
}

:root{
--dur-fast:120ms /* @kind other */;
--dur-base:180ms /* @kind other */;
--dur-slow:320ms /* @kind other */;
--dur-aurora:24s /* @kind other */;
--ease-standard:cubic-bezier(.2,0,.2,1) /* @kind other */;
--ease-out:cubic-bezier(0,0,.2,1) /* @kind other */;
--ease-in-out:cubic-bezier(.4,0,.2,1) /* @kind other */;
--transition-base:color var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms /* @kind other */;--dur-base:0ms /* @kind other */;--dur-slow:0ms /* @kind other */}}

/* Site layout */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{min-height:100svh;display:flex;flex-direction:column;margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:16px;line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-base)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
img,svg{max-width:100%}
strong,b{font-weight:var(--weight-bold)}
h1,h2,h3{margin:0;color:var(--text-primary);font-weight:var(--weight-bold);letter-spacing:-.01em;line-height:var(--leading-tight)}
p{margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:60;padding:10px 14px;background:var(--surface-panel);color:var(--text-primary)}

/* Site-wide starfield: the same three star layers as the hero, fixed behind
   every page so the sky continues past the home page. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;background-repeat:repeat;background-image:radial-gradient(1px 1px at 24px 30px,rgba(238,242,245,.9) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 190px 150px,rgba(238,242,245,.75) 50%,transparent 51%),radial-gradient(1px 1px at 300px 60px,rgba(179,191,202,.6) 50%,transparent 51%);background-size:340px 300px}

.hero body::before{display:none}
main,.site-head,.site-foot{position:relative;z-index:1}
main{flex:1 0 auto}
/* Pages whose single block should sit in the optical centre of the viewport. */
body.centred main{display:flex;flex-direction:column}
body.centred .site-foot{margin-top:0}

/* Shell */
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.wrap{padding:0 40px}}

/* Header */
:root{--head-h:73px}
@media(max-width:719px){:root{--head-h:115px}}
.site-head{position:sticky;top:0;z-index:30;background:rgba(5,10,15,.86);-webkit-backdrop-filter:var(--blur-panel);backdrop-filter:var(--blur-panel);border-bottom:1px solid var(--border-hairline)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.site-head .brand{display:flex;align-items:center;padding:4px 0}
.site-head .brand img{width:240px;height:auto;display:block}
.site-nav{display:flex;align-items:center;gap:20px}
.site-nav a{display:flex;align-items:center;min-height:44px;font-size:14px;color:var(--text-secondary);border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--text-primary)}
.site-nav a[aria-current="page"]{color:var(--text-primary);font-weight:var(--weight-bold);border-bottom-color:var(--accent-primary)}
@media(max-width:719px){.site-head .wrap{min-height:0;flex-direction:column;align-items:flex-start;gap:2px;padding-top:14px;padding-bottom:2px}.site-head .brand img{width:min(240px,72vw)}.site-nav{gap:16px;flex-wrap:wrap}}
@media(max-width:419px){.site-nav{gap:12px}.site-nav a{font-size:13px}}
@media(max-width:359px){.site-nav{gap:8px}.site-nav a{font-size:12.5px}}
@media(min-width:768px){.site-nav{gap:36px}.site-head .brand img{width:260px}}

/* Footer */
.site-foot{margin-top:96px;border-top:1px solid var(--border-hairline);padding:40px 0 48px}
.site-foot .wrap{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--text-muted)}
.site-foot img.name{width:min(240px,72vw);height:auto;display:block}
@media(min-width:768px){.site-foot{margin-top:128px}.site-foot .wrap{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:8px 32px}}

/* Page blocks */
.page-head{padding-top:72px;padding-bottom:0}
.page-head h1{font-size:clamp(34px,7vw,56px)}
.page-head .lede{margin-top:20px;max-width:60ch;font-size:clamp(17px,2.2vw,20px);color:var(--text-secondary)}
@media(min-width:768px){.page-head{padding-top:104px}}
.prose{margin-top:40px;max-width:66ch;display:flex;flex-direction:column;gap:24px;font-size:17px;color:var(--text-body)}
.section{margin-top:72px}
@media(min-width:768px){.section{margin-top:104px}}
.page-head .eyebrow{margin-bottom:16px}
.eyebrow{font-size:12px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;background:var(--accent-primary);color:var(--text-on-light);font-size:15px;font-weight:var(--weight-bold);border-radius:var(--radius-sm);border:1px solid var(--accent-primary)}
.btn:hover{background:#1ACDCE;border-color:#1ACDCE;color:var(--text-on-light)}
.btn:active{background:#00A8A9;border-color:#00A8A9;transform:translateY(1px)}
/* Second action beside a .btn: same teal, outlined */
.btn-ghost{background:transparent;color:var(--text-primary);border-color:color-mix(in oklab,var(--accent-primary) 70%,transparent)}
.btn-ghost:hover{background:color-mix(in oklab,var(--accent-primary) 14%,transparent);border-color:var(--accent-primary);color:var(--text-primary)}
.btn-ghost:active{background:color-mix(in oklab,var(--accent-primary) 22%,transparent);border-color:var(--accent-primary)}


/* Cards */
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px}
@media(min-width:768px){.cards{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr);gap:24px}}
.card{--c:#00BFC0;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;background:linear-gradient(160deg,color-mix(in oklab,var(--c) 10%,var(--surface-card)) 0%,var(--surface-card) 58%);border:1px solid color-mix(in oklab,var(--c) 22%,var(--border-hairline));border-radius:var(--radius-md,10px);padding:28px;transition:var(--transition-base)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--c),transparent 78%)}
.card:hover{border-color:color-mix(in oklab,var(--c) 46%,var(--border-hairline));background:linear-gradient(160deg,color-mix(in oklab,var(--c) 16%,var(--surface-card)) 0%,var(--surface-card) 58%)}
.card h3{font-size:19px;letter-spacing:0}
.card p{margin-top:12px;font-size:16px;color:var(--text-secondary)}
/* Service tones, sampled along the aurora ramp: green, teal, blue, violet */
.tone-1{--c:#61CB7C;--c:oklch(.76 .15 150)}
.tone-2{--c:#00C9D3;--c:oklch(.76 .13 201)}
.tone-3{--c:#5EA8F9;--c:oklch(.72 .14 252)}
.tone-4{--c:#B989F6;--c:oklch(.72 .16 303)}
.tone-c{--c:#2F8ADC}
.tone-g{--c:#3EB268} /* contractors: a green with the same weight as the team blue */
/* Expandable service card */
.card.is-expandable{cursor:pointer}
.card.open{grid-column:1/-1}
.card-toggle{-webkit-appearance:none;appearance:none;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:40px;margin-top:auto;padding:0 16px;background:color-mix(in oklab,var(--c) 14%,transparent);border:1px solid color-mix(in oklab,var(--c) 34%,transparent);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:15px;font-weight:var(--weight-bold);letter-spacing:0;text-transform:none;color:var(--c);cursor:pointer;transition:var(--transition-base)}
.card-toggle{color:color-mix(in oklab,var(--c) 66%,var(--e6-ice))}
.card-toggle:hover{background:color-mix(in oklab,var(--c) 22%,transparent);border-color:color-mix(in oklab,var(--c) 66%,transparent)}
.card-toggle svg{width:12px;height:12px;flex:none;transition:transform .25s ease}
.card.open .card-toggle svg{transform:rotate(180deg)}
.card.is-expandable>p:last-of-type{padding-bottom:22px}
.card-more{align-self:stretch}
.card-more[hidden]{display:none}
.card-more{margin-top:32px;padding-top:32px;border-top:1px solid color-mix(in oklab,var(--c) 26%,var(--border-hairline));display:flex;flex-direction:column;gap:20px;max-width:74ch;cursor:auto}
.card-more p{margin-top:0;font-size:16px;color:var(--text-secondary)}
.card-more h4{margin:12px 0 0;font-size:12px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--c)}
.card-more ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.card-more li{font-size:16px;color:var(--text-secondary)}
.card-more .btn{align-self:flex-start;margin-top:12px}
.card-more .btn:hover{color:var(--text-on-light)}

/* Return on Security Investment */

.prose-head{font-size:clamp(20px,3vw,26px);margin-top:8px}

/* Hero */
.hero{isolation:isolate;position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--e6-void)}
.hero-copy{position:relative;z-index:2;text-align:center;padding:96px 24px}
.hero-copy .hero-mark{display:flex;flex-direction:column;align-items:center}
.hero-copy .hero-mark img{width:min(76vw,620px);height:auto;display:block}
.hero-copy p{margin-top:20px;font-size:clamp(16px,3.4vw,24px);color:var(--text-secondary);letter-spacing:.01em}

/* Sky: WebGL aurora curtains (aurora.js) with static CSS starfields over them. */
#aurora-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;will-change:transform;transform:translateZ(0)}
#aurora-canvas.is-still{background:#050A0F url(/aurora-still.webp) center/cover no-repeat}
.stars{position:absolute;inset:0;z-index:1;background-repeat:repeat;pointer-events:none;mix-blend-mode:screen;background-image:radial-gradient(1px 1px at 20px 30px,rgba(238,242,245,.9) 50%,transparent 51%),radial-gradient(1.4px 1.4px at 150px 118px,rgba(238,242,245,1) 50%,transparent 51%),radial-gradient(1px 1px at 262px 56px,rgba(179,191,202,.7) 50%,transparent 51%),radial-gradient(1px 1px at 84px 214px,rgba(238,242,245,.6) 50%,transparent 51%),radial-gradient(1.6px 1.6px at 322px 176px,rgba(238,242,245,.55) 50%,transparent 51%);background-size:360px 300px}

.hero-veil{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(5,8,15,.55) 0%,rgba(5,8,15,.28) 34%,rgba(5,8,15,.75) 80%,#050A0F 100%)}

/* 404 */
.err{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:64px 24px;text-align:center}
.err .code{font-size:12px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-primary)}
.err h1{font-size:clamp(30px,6vw,52px);letter-spacing:-.015em}
.err p{font-size:17px;color:var(--text-secondary);max-width:46ch}
.err .btn{margin-top:12px}

/* Contact form */
.contact-page{padding:72px 0 0;max-width:640px}
.contact-page .lede{max-width:560px}
.contact-page h1{font-size:clamp(34px,7vw,56px)}
.contact-page .lede{margin-top:20px;font-size:clamp(17px,2.2vw,20px);color:var(--text-secondary)}
@media(min-width:768px){.contact-page{padding-top:104px}}
.contact-form{display:flex;flex-direction:column;gap:24px;margin-top:40px;max-width:560px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:var(--weight-bold);color:var(--text-primary)}
.field input,.field textarea{width:100%;min-height:48px;padding:12px 14px;background:var(--surface-inset);color:var(--text-primary);font-family:inherit;font-size:16px;line-height:var(--leading-body);border:1px solid var(--border-strong);border-radius:var(--radius-sm);transition:var(--transition-base)}
.field textarea{min-height:132px;resize:vertical}
/* About: team bio cards (expand via cards.js). Portraits carry their own star background. */
.team{margin-top:var(--space-16);padding-bottom:var(--space-16)}
.team .cards{margin-top:0;grid-template-columns:1fr}
@media(min-width:900px){.team .cards{grid-template-columns:repeat(2,1fr)}}
.bio-head{display:flex;align-items:flex-start;gap:28px;align-self:stretch;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--border-hairline)}
@media(max-width:479px){.bio-head{flex-direction:column;gap:20px}}
.bio-portrait{position:relative;flex:none;width:104px;height:148px;margin:0;overflow:hidden;border:1px solid var(--border-hairline);border-radius:var(--radius-sm);background:#0A1524}
.bio-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.bio-name{min-width:0;padding-top:4px}
.bio-name h3{margin-bottom:16px;font-size:clamp(24px,3vw,30px);line-height:1.15;letter-spacing:-.01em;color:var(--c)}
.card .bio-role{margin-top:0;font-size:16px;line-height:1.5}
.card .bio-role+.bio-role{margin-top:8px}
.team .card-toggle{height:44px;padding:0 20px;color:color-mix(in oklab,var(--accent-primary) 80%,var(--e6-ice));background:color-mix(in oklab,var(--accent-primary) 12%,transparent);border-color:color-mix(in oklab,var(--accent-primary) 45%,transparent)}
.team .card-toggle:hover{background:color-mix(in oklab,var(--accent-primary) 20%,transparent);border-color:var(--accent-primary)}
.team .card-more{margin-top:28px;padding-top:0;border-top:0}
.bio-name .li-link{margin-top:14px}
.field input:hover,.field textarea:hover{border-color:var(--e6-grey-700)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring)}
.contact-form .btn{align-self:flex-start;font-family:inherit;cursor:pointer}
.site-foot a{display:inline-block;padding:6px 0;margin:-6px 0}
.site-foot .li-link{display:inline-flex;align-items:center;vertical-align:top;gap:8px;min-height:0;font-size:14px;font-weight:400;color:var(--text-link)}
.site-foot .li-link svg{width:18px;height:18px}
.site-foot .li-link:hover{color:var(--text-link-hover)}
.site-foot .foot-legal{flex-basis:100%;display:flex;flex-wrap:wrap;column-gap:24px;row-gap:4px;margin-top:16px;font-size:13px;color:var(--text-muted)}
.hidden{display:none}

/* Legal pages */
.legal{padding:72px 0 0;max-width:70ch}
@media(min-width:768px){.legal{padding-top:104px}}
.legal h1{font-size:clamp(30px,6vw,48px)}
.legal .updated{margin-top:20px;font-size:14px;color:var(--text-muted)}
.legal .legal-lede{margin-top:32px;padding-bottom:8px;font-size:clamp(17px,2.2vw,19px);line-height:var(--leading-loose);color:var(--text-primary)}
.legal h2{margin-top:64px;margin-bottom:4px;font-size:13px;font-weight:var(--weight-bold);line-height:var(--leading-body);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-primary)}
@media(min-width:768px){.legal h2{margin-top:72px}}
.legal p{margin-top:20px;font-size:16px;line-height:var(--leading-loose);color:var(--text-secondary)}
.legal ul{margin:20px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.legal li{font-size:16px;line-height:var(--leading-loose);color:var(--text-secondary)}
.legal h2+p,.legal h2+ul{margin-top:16px}
.legal>*:last-child{padding-bottom:8px}

/* The four service streams, set as on the back of the business card: words spread edge to edge,
   a thin teal bar centred in each gap. Used on the home and About pages. */
.service-line{box-sizing:border-box;display:flex;align-items:center;margin:0;padding:0;list-style:none;line-height:1.2;font-weight:500;letter-spacing:.12em}
.service-line li{flex:none;margin:0}
.service-line li+li{flex:1 1 auto;display:flex;align-items:center;text-transform:uppercase}
.service-line li+li::before{content:"";flex:none;width:2px;height:1.15em;margin:0 auto;background:var(--accent-primary)}
.service-line a{display:inline-block;padding:12px 0;margin:-12px -.12em -12px 0;color:var(--text-primary);text-decoration:none;transition:var(--transition-base)}
.service-line a:hover,.service-line a:focus-visible{color:var(--accent-primary)}
.prose .service-line{margin-top:24px;font-size:clamp(12px,2.6vw,17px)}
/* About: the four services as buttons */
.service-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 0;padding:0;list-style:none}
@media(min-width:600px){.service-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}}
.service-buttons li{margin:0}
.service-buttons a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 12px;border:1px solid color-mix(in oklab,var(--accent-primary) 55%,transparent);border-radius:var(--radius-sm);background:color-mix(in oklab,var(--accent-primary) 10%,transparent);font-size:15px;font-weight:var(--weight-bold);letter-spacing:.1em;color:var(--text-primary);transition:var(--transition-base)}
.service-buttons li+li a{text-transform:uppercase}
.service-buttons a:hover{background:color-mix(in oklab,var(--accent-primary) 22%,transparent);border-color:var(--accent-primary);color:var(--text-primary)}
.service-buttons{margin-bottom:24px}
.prose .more-link+.service-buttons{margin-top:0}
.more-link a{font-weight:var(--weight-bold)}
.page-head h1{text-wrap:balance}
.page-head h1 .phrase{display:block}
.team-head{margin:0 0 32px;font-size:clamp(28px,4vw,40px);letter-spacing:-.015em}
.team-lede{margin:-16px 0 32px;max-width:60ch;font-size:clamp(17px,1.8vw,19px);color:var(--text-secondary)}
.more-link a:hover{color:var(--text-primary)}
@media(max-width:359px){.service-line{letter-spacing:.06em}.service-line a{margin-right:-.06em}}

/* ---------------------------------------------------------------- Landing sections
   Shared by the home page and About: section headers, service cards, the three reasons,
   the experience panel, the team strip and the contact block. */
.sec{padding-top:clamp(88px,10vw,136px);scroll-margin-top:calc(var(--head-h) + 8px)}
.sec-title{font-size:clamp(30px,4vw,44px);line-height:1.1;letter-spacing:-.015em}
.sec-lede{margin-top:16px;max-width:58ch;font-size:clamp(17px,1.8vw,19px);color:var(--text-secondary)}

/* Our services: four cards, each a link to its full description */
.offers{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px}
@media(min-width:768px){.offers{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.offer{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--radius-md);color:var(--text-body);background:linear-gradient(160deg,color-mix(in oklab,var(--c) 10%,var(--surface-card)) 0%,var(--surface-card) 58%);border:1px solid color-mix(in oklab,var(--c) 22%,var(--border-hairline));transition:var(--transition-base)}
@media(min-width:768px){.offer{padding:32px}}
.offer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--c),transparent 78%)}
.offer:hover{color:var(--text-body);border-color:color-mix(in oklab,var(--c) 46%,var(--border-hairline));background:linear-gradient(160deg,color-mix(in oklab,var(--c) 16%,var(--surface-card)) 0%,var(--surface-card) 58%)}
.offer h3{font-size:clamp(20px,2.2vw,24px);line-height:1.2;letter-spacing:-.01em}
.offer p{font-size:16px;color:var(--text-secondary)}
.offer-go{margin-top:auto;padding-top:8px;font-size:15px;font-weight:var(--weight-bold);color:var(--accent-primary)}
.offer:hover .offer-go{color:var(--e6-ice)}

/* Why Elevation 6: three reasons */
.reasons{display:grid;grid-template-columns:1fr;gap:32px;margin-top:40px;padding:0;list-style:none}
@media(min-width:900px){.reasons{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}}
.reason{padding-top:20px;border-top:1px solid var(--border-hairline);position:relative}
.reason::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:2px;background:var(--e6-gradient-rule)}
.reason h3{font-size:clamp(21px,2.2vw,24px);letter-spacing:-.01em}
.reason p{margin-top:12px;font-size:17px;color:var(--text-secondary)}

/* The team, in brief, on the home page */
.team-strip{display:grid;grid-template-columns:1fr;gap:16px;margin:32px 0 0;padding:0;list-style:none}
@media(min-width:900px){.team-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.member{--c:#2F8ADC;display:flex;align-items:center;gap:16px;padding:16px;border:1px solid color-mix(in oklab,var(--c) 22%,var(--border-hairline));border-radius:var(--radius-md);background:linear-gradient(160deg,color-mix(in oklab,var(--c) 9%,var(--surface-card)) 0%,var(--surface-card) 70%)}
.member.tone-g{--c:#3EB268}
.member img{flex:none;width:64px;height:91px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border-hairline)}
.member-name{font-size:17px;font-weight:var(--weight-bold);color:var(--c)}
.member-role{margin-top:2px;font-size:14px;line-height:1.4;color:var(--text-secondary)}
.member-certs{margin-top:4px;font-size:13px;line-height:1.4;letter-spacing:.02em;color:var(--text-muted)}
.member .li-link{margin-top:8px}

/* LinkedIn profile link: LinkedIn's own mark, then the word */
.li-link{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:14px;font-weight:var(--weight-bold);color:var(--text-primary)}
.li-link svg{flex:none;width:20px;height:20px;border-radius:3px}
.li-link:hover{color:var(--accent-primary)}

/* Contact: the heading and promise beside the form */
.contact-block{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:900px){.contact-block{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start}}
.contact-block .contact-form{margin-top:32px}
@media(min-width:900px){.contact-block .contact-form{margin-top:0;max-width:none}}

/* A closing call to action on inner pages */
.cta-band{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:clamp(64px,8vw,104px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--border-hairline)}
.cta-band h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.015em}
.cta-band p{max-width:52ch;font-size:17px;color:var(--text-secondary)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}