/* =====================================================================
Cormelis — "Ledger Grid" design system
Dense utilitarian, hairline table-rules, monospaced index numbers.
Class scheme: crm- prefix, hyphenated block__element / block--modifier
===================================================================== */
/* ---------- Tokens ---------- */
:root{
--crm-bg:#eef1f6;
--crm-surface:#ffffff;
--crm-text:#12233b;
--crm-muted:#5f7189;
--crm-accent:#f26522;
--crm-accent2:#1f4e79;
--crm-rule:rgba(18,35,59,.14);
--crm-rule-strong:rgba(18,35,59,.28);
--crm-ink-05:rgba(18,35,59,.05);
--crm-scrim:rgba(15,35,60,.62);
--crm-container:1100px;
--crm-pad:clamp(48px,6vw,64px);
--crm-radius:6px;
--crm-font-head:"Bricolage Grotesque",Georgia,serif;
--crm-font-body:"Inter Tight",system-ui,sans-serif;
--crm-font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
/* shared cookie-banner variables (mapped to palette) */
--site-bg:#eef1f6;
--site-surface:#ffffff;
--site-text:#12233b;
--site-muted:#5f7189;
--site-accent:#f26522;
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--crm-bg);
color:var(--crm-text);
font-family:var(--crm-font-body);
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--crm-font-head);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--crm-accent);outline-offset:2px}
/* ---------- Layout helpers ---------- */
.crm-container{max-width:var(--crm-container);margin-inline:auto;padding-inline:24px}
.crm-section{padding-block:var(--crm-pad);border-bottom:1px solid var(--crm-rule)}
.crm-section--flush{border-bottom:0}
.crm-eyebrow{
font-family:var(--crm-font-mono);
font-size:12px;text-transform:uppercase;letter-spacing:.18em;
color:var(--crm-accent);display:inline-flex;align-items:center;gap:.5em;margin:0 0 14px
}
.crm-index{
font-family:var(--crm-font-mono);font-size:12px;letter-spacing:.1em;
color:var(--crm-accent);font-weight:600
}
.crm-section__head{
display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
gap:16px;padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid var(--crm-rule-strong)
}
.crm-section__title{font-size:clamp(24px,3.4vw,34px)}
.crm-section__intro{color:var(--crm-muted);max-width:46ch;margin-top:8px}
/* ---------- Buttons ---------- */
.crm-btn{
display:inline-flex;align-items:center;gap:.5em;
padding:12px 20px;border-radius:var(--crm-radius);
font-weight:600;font-size:15px;line-height:1;border:1px solid transparent;
transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease
}
.crm-btn--primary{background:var(--crm-accent);color:#fff;border-color:var(--crm-accent)}
.crm-btn--primary:hover{background:#d9541a;border-color:#d9541a}
.crm-btn--ghost{background:transparent;color:var(--crm-text);border-color:var(--crm-rule-strong)}
.crm-btn--ghost:hover{border-color:var(--crm-text);background:var(--crm-ink-05)}
.crm-btn--light{background:#fff;color:var(--crm-accent2);border-color:#fff}
.crm-btn--light:hover{background:transparent;color:#fff;border-color:#fff}
.crm-btn:active{transform:translateY(1px)}
/* =====================================================================
HEADER — thin utility bar + big left-logo nav with boxed CTA
===================================================================== */
.crm-header{position:sticky;top:0;z-index:60;background:var(--crm-surface)}
.crm-header.is-scrolled{box-shadow:0 1px 0 var(--crm-rule),0 8px 24px -18px rgba(18,35,59,.5)}
.crm-utility{background:var(--crm-accent2);color:#dbe6f2;font-size:13px}
.crm-utility__row{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding-block:7px;flex-wrap:wrap
}
.crm-utility__group{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.crm-utility a{display:inline-flex;align-items:center;gap:6px}
.crm-utility a:hover{color:#fff}
.crm-utility i{color:var(--crm-accent)}
.crm-utility__lang{
font-family:var(--crm-font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:11px;
border:1px solid rgba(255,255,255,.28);border-radius:var(--crm-radius);padding:3px 8px
}
.crm-navbar{border-bottom:1px solid var(--crm-rule)}
.crm-navbar__row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.crm-logo{display:inline-flex;align-items:center;gap:11px}
.crm-logo__mark{width:34px;height:34px;flex:none;display:block}
.crm-logo__word{
font-family:var(--crm-font-head);font-weight:800;font-size:22px;letter-spacing:-.02em;
color:var(--crm-text);line-height:1
}
.crm-nav{display:flex;align-items:center;gap:28px}
.crm-nav-link{
font-size:15px;font-weight:500;color:var(--crm-text);position:relative;padding-block:6px
}
.crm-nav-link::after{
content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--crm-accent);
transition:width .2s ease
}
.crm-nav-link:hover::after,.crm-nav-link[aria-current="page"]::after{width:100%}
.crm-nav-link[aria-current="page"]{color:var(--crm-accent2);font-weight:600}
.crm-header__actions{display:flex;align-items:center;gap:14px}
.crm-burger{
display:none;width:44px;height:44px;border:1px solid var(--crm-rule-strong);
border-radius:var(--crm-radius);background:#fff;align-items:center;justify-content:center;
color:var(--crm-text)
}
.crm-burger i{font-size:18px}
/* ---------- Mobile drawer ---------- */
.crm-veil{
position:fixed;inset:0;background:rgba(15,25,40,.5);opacity:0;visibility:hidden;
transition:opacity .25s ease,visibility .25s ease;z-index:70
}
.crm-veil.is-open{opacity:1;visibility:visible}
.crm-drawer{
position:fixed;top:0;right:0;height:100%;width:min(88vw,340px);background:var(--crm-surface);
z-index:80;transform:translateX(100%);transition:transform .28s ease;
display:flex;flex-direction:column;border-left:1px solid var(--crm-rule)
}
.crm-drawer.is-open{transform:translateX(0)}
.crm-drawer__head{
display:flex;align-items:center;justify-content:space-between;
padding:18px 22px;border-bottom:1px solid var(--crm-rule)
}
.crm-drawer__title{font-family:var(--crm-font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--crm-muted)}
.crm-drawer__close{
width:40px;height:40px;border:1px solid var(--crm-rule-strong);border-radius:var(--crm-radius);
background:#fff;display:inline-flex;align-items:center;justify-content:center
}
.crm-drawer__nav{display:flex;flex-direction:column;padding:8px}
.crm-drawer__nav .crm-nav-link{
padding:14px 14px;border-bottom:1px solid var(--crm-rule);width:100%
}
.crm-drawer__nav .crm-nav-link::after{display:none}
.crm-drawer__cta{padding:18px 22px;margin-top:auto;border-top:1px solid var(--crm-rule)}
.crm-drawer__cta .crm-btn{width:100%;justify-content:center}
/* =====================================================================
HERO — full-bleed photo, centered text, dark scrim (index)
===================================================================== */
.crm-hero{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.crm-hero__media{position:absolute;inset:0;z-index:-2}
.crm-hero__media img{width:100%;height:100%;object-fit:cover}
.crm-hero::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(15,35,60,.55),var(--crm-scrim))}
.crm-hero__inner{
max-width:820px;margin-inline:auto;text-align:center;
padding-block:clamp(96px,20vh,180px);padding-inline:24px
}
.crm-hero__eyebrow{
font-family:var(--crm-font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
color:#fff;display:inline-block;padding:6px 12px;border:1px solid rgba(255,255,255,.4);
border-radius:var(--crm-radius);margin-bottom:22px
}
.crm-hero__lead{font-size:clamp(34px,6vw,60px);letter-spacing:-.02em;line-height:1.02}
.crm-hero__sub{margin:20px auto 0;max-width:52ch;color:#e4ecf5;font-size:clamp(16px,2vw,18px)}
.crm-hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
/* =====================================================================
PAGE HERO variants (content/contact pages)
===================================================================== */
.crm-page-hero{border-bottom:1px solid var(--crm-rule)}
/* tinted band (our-approach) */
.crm-page-hero--tinted{background:var(--crm-accent2);color:#fff}
.crm-page-hero--tinted .crm-page-hero__inner{padding-block:clamp(56px,8vw,88px);max-width:760px}
.crm-page-hero--tinted .crm-page-hero__sub{color:#cfdcea}
/* compact centered (services / contact) */
.crm-page-hero--compact{background:var(--crm-surface)}
.crm-page-hero--compact .crm-page-hero__inner{
padding-block:clamp(48px,6vw,72px);text-align:center;max-width:680px;margin-inline:auto
}
/* side image (about) */
.crm-page-hero--sided .crm-page-hero__grid{
display:grid;grid-template-columns:1fr;gap:0;align-items:stretch
}
.crm-page-hero--sided .crm-page-hero__text{padding-block:clamp(48px,7vw,80px);padding-right:24px}
.crm-page-hero--sided .crm-page-hero__media{aspect-ratio:4/3}
.crm-page-hero--sided .crm-page-hero__media img{width:100%;height:100%;object-fit:cover}
.crm-page-hero__title{font-size:clamp(30px,5vw,48px)}
.crm-page-hero__sub{margin-top:16px;max-width:56ch;color:var(--crm-muted);font-size:17px}
.crm-page-hero--tinted .crm-page-hero__eyebrow,
.crm-page-hero--sided .crm-page-hero__eyebrow{color:var(--crm-accent)}
/* =====================================================================
SPLIT FEATURE — alternating rows with numbered labels (index)
===================================================================== */
.crm-split{display:flex;flex-direction:column}
.crm-split__row{
display:grid;grid-template-columns:1fr;gap:0;
border:1px solid var(--crm-rule);border-radius:var(--crm-radius);overflow:hidden;
margin-bottom:24px
}
.crm-split__media{aspect-ratio:16/10}
.crm-split__media img{width:100%;height:100%;object-fit:cover}
.crm-split__body{padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;justify-content:center}
.crm-split__num{font-family:var(--crm-font-mono);font-size:13px;color:var(--crm-accent);letter-spacing:.14em;margin-bottom:12px}
.crm-split__title{font-size:clamp(22px,3vw,30px);margin-bottom:12px}
.crm-split__text{color:var(--crm-muted);margin-bottom:16px}
.crm-split__list{display:grid;gap:8px}
.crm-split__list li{padding-left:22px;position:relative;font-size:15px}
.crm-split__list li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--crm-accent);border-radius:2px}
/* =====================================================================
BLOG FEED — editorial notebook entries with page numbers (index)
===================================================================== */
.crm-notebook{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--crm-rule-strong)}
.crm-note{
display:grid;grid-template-columns:1fr;gap:6px;
padding-block:26px;border-bottom:1px solid var(--crm-rule)
}
.crm-note__page{font-family:var(--crm-font-mono);font-size:12px;color:var(--crm-accent);letter-spacing:.12em}
.crm-note__meta{font-size:13px;color:var(--crm-muted);text-transform:uppercase;letter-spacing:.1em;font-family:var(--crm-font-mono)}
.crm-note__title{font-size:clamp(20px,2.6vw,26px);margin:4px 0 6px;transition:color .18s}
.crm-note:hover .crm-note__title{color:var(--crm-accent)}
.crm-note__excerpt{color:var(--crm-muted);max-width:68ch}
.crm-note__more{margin-top:8px;font-family:var(--crm-font-mono);font-size:12px;letter-spacing:.1em;color:var(--crm-accent2);display:inline-flex;gap:8px;align-items:center}
/* =====================================================================
QUOTE FEATURE — quote in heading font + attribution rule
===================================================================== */
.crm-quote{background:var(--crm-accent2);color:#fff}
.crm-quote__inner{max-width:900px;margin-inline:auto;text-align:center}
.crm-quote__mark{font-family:var(--crm-font-head);font-size:64px;line-height:.5;color:var(--crm-accent);display:block;margin-bottom:8px}
.crm-quote__text{font-family:var(--crm-font-head);font-weight:600;font-size:clamp(24px,4vw,40px);line-height:1.18;letter-spacing:-.01em}
.crm-quote__rule{width:64px;height:2px;background:var(--crm-accent);margin:28px auto 16px}
.crm-quote__by{font-family:var(--crm-font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#cfdcea}
/* quote beside portrait (about) */
.crm-quote--portrait{background:var(--crm-surface);color:var(--crm-text)}
.crm-quote--portrait .crm-quote__grid{
display:grid;grid-template-columns:1fr;gap:32px;align-items:center;text-align:left;max-width:none
}
.crm-quote--portrait .crm-quote__text{font-size:clamp(22px,3.2vw,32px)}
.crm-quote--portrait .crm-quote__rule{margin:24px 0 14px}
.crm-quote--portrait .crm-quote__by{color:var(--crm-muted)}
.crm-quote--portrait .crm-quote__mark{text-align:left}
.crm-quote__portrait{aspect-ratio:3/4;border:1px solid var(--crm-rule);border-radius:var(--crm-radius);overflow:hidden}
.crm-quote__portrait img{width:100%;height:100%;object-fit:cover}
/* =====================================================================
NEWSLETTER — promise left / form right (index)
===================================================================== */
.crm-news{background:var(--crm-surface)}
.crm-news__grid{
display:grid;grid-template-columns:1fr;gap:32px;
border:1px solid var(--crm-rule);border-radius:var(--crm-radius);overflow:hidden
}
.crm-news__promise{padding:clamp(28px,4vw,44px);background:var(--crm-ink-05)}
.crm-news__title{font-size:clamp(24px,3.4vw,32px);margin-bottom:12px}
.crm-news__text{color:var(--crm-muted)}
.crm-news__form{padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.crm-news__row{display:flex;gap:12px;flex-wrap:wrap}
.crm-news__row .crm-field{flex:1 1 220px}
.crm-news__fine{font-size:13px;color:var(--crm-muted)}
/* =====================================================================
METHODOLOGY — numbered phases down the page with rule between
===================================================================== */
.crm-method{display:flex;flex-direction:column}
.crm-method__item{
display:grid;grid-template-columns:1fr;gap:10px;
padding-block:32px;border-bottom:1px solid var(--crm-rule)
}
.crm-method__item:first-child{border-top:1px solid var(--crm-rule-strong)}
.crm-method__num{font-family:var(--crm-font-mono);font-size:clamp(28px,5vw,44px);color:var(--crm-accent);font-weight:700;line-height:1}
.crm-method__title{font-size:clamp(21px,2.8vw,28px);margin-bottom:6px}
.crm-method__text{color:var(--crm-muted);max-width:64ch}
/* =====================================================================
BENEFITS — claims paired with the evidence behind them
===================================================================== */
.crm-benefits{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--crm-rule);border-radius:var(--crm-radius);overflow:hidden}
.crm-benefit{
display:grid;grid-template-columns:1fr;gap:8px;padding:26px;
border-bottom:1px solid var(--crm-rule)
}
.crm-benefit__claim{font-family:var(--crm-font-head);font-weight:600;font-size:20px}
.crm-benefit__label{font-family:var(--crm-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--crm-accent)}
.crm-benefit__evidence{color:var(--crm-muted);border-left:2px solid var(--crm-accent);padding-left:14px}
/* =====================================================================
FAQ — two-column Q&A (accordion)
===================================================================== */
.crm-faq__grid{display:grid;grid-template-columns:1fr;gap:0 32px}
.crm-acc{border-top:1px solid var(--crm-rule)}
.crm-acc__item{border-bottom:1px solid var(--crm-rule)}
.crm-acc__trigger{
width:100%;background:none;border:0;text-align:left;
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 4px;font-family:var(--crm-font-head);font-weight:600;font-size:17px;color:var(--crm-text)
}
.crm-acc__trigger i{color:var(--crm-accent);transition:transform .25s ease;flex:none}
.crm-acc__item.is-open .crm-acc__trigger i{transform:rotate(45deg)}
.crm-acc__body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.crm-acc__item.is-open .crm-acc__body{max-height:600px}
.crm-acc__body-inner{padding:0 4px 22px;color:var(--crm-muted)}
/* =====================================================================
SERVICES — numbered service list
===================================================================== */
.crm-services{border-top:1px solid var(--crm-rule-strong)}
.crm-service{
display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
padding-block:26px;border-bottom:1px solid var(--crm-rule)
}
.crm-service__num{font-family:var(--crm-font-mono);font-size:14px;color:var(--crm-accent);font-weight:700;padding-top:4px}
.crm-service__title{font-size:clamp(20px,2.6vw,26px);margin-bottom:6px}
.crm-service__text{color:var(--crm-muted);max-width:70ch}
/* =====================================================================
FORMATS — cards with a highlighted 'popular' one
===================================================================== */
.crm-formats{display:grid;grid-template-columns:1fr;gap:20px}
.crm-format{
border:1px solid var(--crm-rule);border-radius:var(--crm-radius);background:var(--crm-surface);
padding:28px;display:flex;flex-direction:column;gap:12px;position:relative
}
.crm-format--popular{border-color:var(--crm-accent);box-shadow:0 0 0 1px var(--crm-accent)}
.crm-format__flag{
position:absolute;top:-11px;left:24px;background:var(--crm-accent);color:#fff;
font-family:var(--crm-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
padding:4px 10px;border-radius:var(--crm-radius)
}
.crm-format__name{font-size:22px}
.crm-format__price{font-family:var(--crm-font-mono);color:var(--crm-accent2);font-size:15px}
.crm-format__list{display:grid;gap:8px;margin-top:4px}
.crm-format__list li{padding-left:22px;position:relative;font-size:15px;color:var(--crm-muted)}
.crm-format__list li::before{content:"\2713";position:absolute;left:0;color:var(--crm-accent);font-weight:700}
.crm-format .crm-btn{margin-top:auto}
/* =====================================================================
SECTORS — list rows: sector + what changes for it
===================================================================== */
.crm-sectors{border-top:1px solid var(--crm-rule-strong)}
.crm-sector{
display:grid;grid-template-columns:1fr;gap:6px;
padding-block:22px;border-bottom:1px solid var(--crm-rule)
}
.crm-sector__name{display:flex;align-items:baseline;gap:12px;font-family:var(--crm-font-head);font-weight:700;font-size:19px}
.crm-sector__name .crm-index{align-self:center}
.crm-sector__change{color:var(--crm-muted)}
/* =====================================================================
TIMELINE — year markers with cards (about)
===================================================================== */
.crm-timeline{display:flex;flex-direction:column;border-left:2px solid var(--crm-rule-strong);margin-left:8px}
.crm-tl{position:relative;padding:0 0 32px 28px}
.crm-tl:last-child{padding-bottom:0}
.crm-tl::before{content:"";position:absolute;left:-8px;top:4px;width:14px;height:14px;background:var(--crm-accent);border:2px solid var(--crm-surface);border-radius:50%}
.crm-tl__year{font-family:var(--crm-font-mono);color:var(--crm-accent);font-size:14px;font-weight:700;letter-spacing:.08em}
.crm-tl__card{
margin-top:10px;border:1px solid var(--crm-rule);border-radius:var(--crm-radius);background:var(--crm-surface);
padding:20px
}
.crm-tl__title{font-size:19px;margin-bottom:6px}
.crm-tl__text{color:var(--crm-muted)}
/* =====================================================================
TEAM — person cards with photos (about)
===================================================================== */
.crm-team{display:grid;grid-template-columns:1fr;gap:20px}
.crm-person{border:1px solid var(--crm-rule);border-radius:var(--crm-radius);overflow:hidden;background:var(--crm-surface)}
.crm-person__media{aspect-ratio:4/5}
.crm-person__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.crm-person__body{padding:18px}
.crm-person__name{font-size:19px}
.crm-person__role{font-family:var(--crm-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--crm-accent);margin-top:4px}
.crm-person__bio{color:var(--crm-muted);font-size:14px;margin-top:10px}
/* =====================================================================
STATS — row of big numbers (about)
===================================================================== */
.crm-stats{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--crm-rule);border-radius:var(--crm-radius);overflow:hidden}
.crm-stat{padding:28px;border-bottom:1px solid var(--crm-rule);text-align:center}
.crm-stat__num{font-family:var(--crm-font-head);font-weight:800;font-size:clamp(34px,6vw,52px);color:var(--crm-accent2);line-height:1}
.crm-stat__label{font-family:var(--crm-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--crm-muted);margin-top:10px}
/* =====================================================================
CTA STRIP variants
===================================================================== */
/* split with contact info (our-approach) */
.crm-cta--split .crm-cta__grid{
display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
border:1px solid var(--crm-rule);border-radius:var(--crm-radius);padding:clamp(28px,4vw,44px);background:var(--crm-surface)
}
.crm-cta__title{font-size:clamp(24px,3.6vw,34px);margin-bottom:10px}
.crm-cta__text{color:var(--crm-muted)}
.crm-cta__contact{display:grid;gap:10px}
.crm-cta__contact a{display:flex;align-items:center;gap:10px;font-weight:500}
.crm-cta__contact i{color:var(--crm-accent);width:18px}
/* centered card (services) */
.crm-cta--card{text-align:center}
.crm-cta--card .crm-cta__inner{
max-width:680px;margin-inline:auto;border:1px solid var(--crm-rule);border-radius:var(--crm-radius);
padding:clamp(32px,5vw,52px);background:var(--crm-surface)
}
.crm-cta--card .crm-cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}
/* full-width band (about) */
.crm-cta--band{background:var(--crm-accent2);color:#fff;border-bottom:0}
.crm-cta--band .crm-cta__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.crm-cta--band .crm-cta__text{color:#cfdcea;max-width:52ch}
/* =====================================================================
CONTACT FORM — reassurance left / form right
===================================================================== */
.crm-contact__grid{display:grid;grid-template-columns:1fr;gap:32px}
.crm-contact__aside .crm-eyebrow{margin-top:0}
.crm-contact__title{font-size:clamp(24px,3.4vw,32px);margin-bottom:14px}
.crm-contact__text{color:var(--crm-muted);margin-bottom:22px}
.crm-contact__points{display:grid;gap:14px}
.crm-contact__point{display:flex;gap:12px;align-items:flex-start}
.crm-contact__point i{color:var(--crm-accent);margin-top:3px}
.crm-contact__point strong{display:block}
.crm-contact__point span{color:var(--crm-muted);font-size:14px}
.crm-form{
border:1px solid var(--crm-rule);border-radius:var(--crm-radius);
background:var(--crm-surface);padding:clamp(24px,3.5vw,36px);display:grid;gap:16px
}
.crm-form__field{display:grid;gap:6px}
.crm-form__label{font-family:var(--crm-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--crm-muted)}
.crm-field{
width:100%;padding:12px 14px;font:inherit;font-size:15px;color:var(--crm-text);
background:var(--crm-bg);border:1px solid var(--crm-rule);border-radius:var(--crm-radius)
}
.crm-field:focus{outline:none;border-color:var(--crm-accent);background:#fff}
textarea.crm-field{min-height:140px;resize:vertical}
.crm-form__consent{display:flex;gap:10px;font-size:13px;color:var(--crm-muted);align-items:flex-start}
.crm-form__consent input{margin-top:3px}
.crm-form__submit{justify-content:center}
/* =====================================================================
LEGAL PAGES
===================================================================== */
.crm-legal{background:var(--crm-surface)}
.crm-legal__inner{max-width:760px;margin-inline:auto}
.crm-legal h1{font-size:clamp(28px,4vw,40px);margin-bottom:8px}
.crm-legal__updated{font-family:var(--crm-font-mono);font-size:12px;color:var(--crm-muted);letter-spacing:.08em;margin-bottom:28px;display:block}
.crm-legal h2{font-size:22px;margin:32px 0 10px;padding-top:20px;border-top:1px solid var(--crm-rule)}
.crm-legal p,.crm-legal li{color:var(--crm-muted);margin-bottom:12px}
.crm-legal ul{list-style:disc;padding-left:20px}
.crm-legal a{color:var(--crm-accent);text-decoration:underline}
/* =====================================================================
FOOTER — big multi-column with legal register block (hairline grid)
===================================================================== */
.crm-footer{background:var(--crm-text);color:#c6d2e0}
.crm-footer__top{
display:grid;grid-template-columns:1fr;gap:0;
border-bottom:1px solid rgba(255,255,255,.12)
}
.crm-footer__col{
padding:34px 0;border-bottom:1px solid rgba(255,255,255,.12)
}
.crm-footer__col:last-child{border-bottom:0}
.crm-footer__brand .crm-logo__word{color:#fff}
.crm-footer__blurb{margin-top:14px;color:#93a6bd;max-width:40ch;font-size:15px}
.crm-footer__heading{font-family:var(--crm-font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--crm-accent);margin-bottom:16px}
.crm-footer__nav{display:grid;gap:10px}
.crm-footer__nav a:hover{color:#fff}
.crm-footer__contact{display:grid;gap:10px;font-size:15px}
.crm-footer__contact a{display:flex;gap:10px;align-items:flex-start}
.crm-footer__contact i{color:var(--crm-accent);margin-top:4px;width:16px}
/* legal register block — hairline-bordered grid */
.crm-register{
display:grid;grid-template-columns:1fr;gap:0;
border:1px solid rgba(255,255,255,.14);border-radius:var(--crm-radius);overflow:hidden;margin-top:16px
}
.crm-register__cell{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.crm-register__k{font-family:var(--crm-font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#7f93ab;display:block;margin-bottom:4px}
.crm-register__v{font-size:14px;color:#e3ebf4}
.crm-footer__bottom{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
padding-block:20px
}
.crm-footer__copy{font-size:13px;color:#8095ad}
.crm-footer__legal{display:flex;gap:18px;flex-wrap:wrap}
.crm-footer__legal a{font-size:13px;color:#a9b9cb}
.crm-footer__legal a:hover{color:#fff}
/* =====================================================================
SWIPER
===================================================================== */
.slider-5sz{padding-bottom:44px}
.slider-5sz .swiper-slide{height:auto}
.swiper-pagination-bullet{background:var(--crm-muted);opacity:.5}
.swiper-pagination-bullet-active{background:var(--crm-accent);opacity:1}
.swiper-button-prev,.swiper-button-next{
color:var(--crm-accent2);width:40px;height:40px;background:#fff;border:1px solid var(--crm-rule);
border-radius:var(--crm-radius)
}
.swiper-button-prev:after,.swiper-button-next:after{font-size:16px;font-weight:700}
/* =====================================================================
MODAL — scroll-safe overlay
===================================================================== */
.site-modal,.overlay-box-cj9{
position:fixed;inset:0;z-index:100;display:none;
align-items:center;justify-content:center;padding:24px;
background:rgba(15,25,40,.6)
}
.site-modal.is-open,.overlay-box-cj9.is-open{display:flex}
.site-modal__dialog,.overlay-box-cj9__dialog{
background:var(--crm-surface);border-radius:var(--crm-radius);max-width:520px;width:100%;
padding:clamp(24px,4vw,36px);border:1px solid var(--crm-rule);position:relative;
max-height:88vh;overflow:auto
}
.overlay-box-cj9__close{
position:absolute;top:14px;right:14px;width:38px;height:38px;border:1px solid var(--crm-rule);
border-radius:var(--crm-radius);background:#fff;display:inline-flex;align-items:center;justify-content:center
}
/* =====================================================================
AOS fallback
===================================================================== */
[data-aos]{opacity:1}
/* =====================================================================
RESPONSIVE
===================================================================== */
@media(min-width:640px){
.crm-formats{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.crm-team{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.crm-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.crm-stat{border-bottom:0;border-right:1px solid var(--crm-rule)}
.crm-benefits{grid-template-columns:1fr 1fr}
}
@media(min-width:820px){
.crm-split__row--rev{grid-template-columns:1fr 1fr}
.crm-split__row--rev .crm-split__media{order:2}
.crm-split__row{grid-template-columns:1fr 1fr}
.crm-method__item{grid-template-columns:auto 1fr;gap:32px;align-items:baseline}
.crm-service{grid-template-columns:auto 1fr}
.crm-faq__grid{grid-template-columns:1fr 1fr}
.crm-news__grid{grid-template-columns:1.1fr 1fr}
.crm-page-hero--sided .crm-page-hero__grid{grid-template-columns:1.1fr .9fr}
.crm-quote--portrait .crm-quote__grid{grid-template-columns:1fr 1.4fr}
.crm-quote__portrait{max-width:300px}
.crm-cta--split .crm-cta__grid{grid-template-columns:1.4fr 1fr}
.crm-contact__grid{grid-template-columns:.9fr 1.1fr}
.crm-sector{grid-template-columns:280px 1fr;gap:24px;align-items:baseline}
.crm-footer__top{grid-template-columns:1.4fr 1fr 1.2fr}
.crm-footer__col{padding:44px 32px;border-bottom:0;border-right:1px solid rgba(255,255,255,.12)}
.crm-footer__col:first-child{padding-left:0}
.crm-footer__col:last-child{padding-right:0;border-right:0}
}
@media(min-width:1024px){
.crm-benefits{grid-template-columns:repeat(3,1fr)}
}
/* mobile: show burger, hide inline nav */
@media(max-width:900px){
.crm-nav--main{display:none}
.crm-header__actions .crm-btn{display:none}
.crm-burger{display:inline-flex}
}
@media(min-width:901px){
.crm-drawer,.crm-veil{display:none}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
}
/* --- cookie consent (per-site) --- */
.cbar-cb7-overlay{position:fixed;inset:0;opacity:0;visibility:hidden;transition:.25s;z-index:9998;}
.cbar-cb7-overlay.is-open{opacity:1;visibility:visible;}
.cbar-cb7-panel{position:fixed;background:var(--site-surface,#fff);color:var(--site-text,#1a1a1a);
box-shadow:0 20px 60px rgba(0,0,0,.28);padding:24px;opacity:0;visibility:hidden;transition:.25s;z-index:9999;}
.cbar-cb7-panel.is-open{opacity:1;visibility:visible;}
.cbar-cb7-panel h3{margin:0 0 8px;font-size:1.2rem;}
.cbar-cb7-panel>p{margin:0 0 16px;color:var(--site-muted,#666);font-size:.95rem;}
.cbar-cb7-cat{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(128,128,128,.2);}
.cbar-cb7-cat h4{margin:0 0 2px;font-size:.98rem;}
.cbar-cb7-cat p{margin:0;color:var(--site-muted,#777);font-size:.85rem;}
.cbar-cb7-switch{position:relative;flex:0 0 auto;width:44px;height:24px;}
.cbar-cb7-switch input{opacity:0;width:0;height:0;position:absolute;}
.cbar-cb7-switch span{position:absolute;inset:0;background:#c9c9c9;border-radius:999px;transition:.2s;cursor:pointer;}
.cbar-cb7-switch span::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.cbar-cb7-switch input:checked+span{background:var(--site-accent,#2b7);}
.cbar-cb7-switch input:checked+span::before{transform:translateX(20px);}
.cbar-cb7-switch input:disabled+span{opacity:.6;cursor:not-allowed;}
.cbar-cb7-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.cbar-cb7-actions button{flex:1;min-width:140px;padding:11px 16px;border:none;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;}
.cbar-cb7-actions #cbar-cb7-all{background:var(--site-accent,#2b7);color:#fff;}
.cbar-cb7-actions #cbar-cb7-save{background:transparent;color:var(--site-text,#222);border:1px solid rgba(128,128,128,.4);}
.cbar-cb7-links{display:flex;gap:16px;margin-top:14px;font-size:.85rem;}
.cbar-cb7-links a{color:var(--site-accent,#2b7);text-decoration:underline;}
.cbar-cb7-trigger{position:fixed;left:18px;bottom:18px;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
background:var(--site-surface,#fff);color:var(--site-accent,#2b7);box-shadow:0 6px 18px rgba(0,0,0,.2);z-index:9997;font-size:1.1rem;}
.cbar-cb7-overlay{background:transparent;pointer-events:none;}
.cbar-cb7-panel{left:24px;bottom:24px;width:min(380px,calc(100% - 32px));border-radius:16px;transform:translateY(24px);}
.cbar-cb7-panel.is-open{transform:translateY(0);}
@media(max-width:520px){.cbar-cb7-panel{left:16px;right:16px;width:auto;}}
@media(max-width:520px){.cbar-cb7-actions button{min-width:100%;}}
#fab-stack-rj6{left:auto !important;right:18px !important;}
@media(max-width:520px){#fab-stack-rj6{right:12px !important;}}
/* --- safety net (deterministic) --- */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%;}
img,svg,video,iframe,canvas{max-width:100%;}
table{max-width:100%;}
/* simpleParallax оборачивает и — margin: 1em 40px. Модель берёт
эти семантические теги для отзывов и карточек с подписью, но сбросить поля
забывает: внутри карточки в 267px текст сжимался до 131px (по 40px с каждой
стороны) и переносился по одному слову, а между карточками зияли пустоты.
Сбрасываем только горизонтальные поля — вертикальные обычно задуманы. */
blockquote, figure { margin-left: 0; margin-right: 0; }
/* Вложенные фигуры внутри сеток тоже не должны добавлять отступ сбоку. */
figure > blockquote, figure > figcaption { margin-left: 0; margin-right: 0; }
/* Если AOS не поднялся (CDN недоступен, блокировщик) — main.js вешает .no-aos.
Без этого элементы с data-aos остались бы с opacity:0 из aos.css, то есть
половина страницы была бы невидимой. */
html.no-aos [data-aos]{opacity:1 !important;transform:none !important;}
/* Пользователи с prefers-reduced-motion получают контент сразу, без анимаций. */
@media(prefers-reduced-motion:reduce){
[data-aos]{opacity:1 !important;transform:none !important;transition:none !important;}
}