/* ============================================================================
InterAcct website - "Steel & hi-vis" design system (shared with the staff
console). InterAcct keyed orange, Odoo keyed its own purple.
========================================================================== */
:root{
--ground:#eef1f5; --surface:#fff; --surface-2:#eef2f7; --panel:#16202e;
--text:#16202e; --muted:#5a6675; --border:#d7dee7; --border-strong:#c3ccd8;
--accent:#ff6600; --accent-ink:#e05600; --accent-soft:#fff0e6;
--odoo:#714b67; --odoo-ink:#5c3c54; --odoo-soft:#f1e9ef;
--good:#12855a; --warn:#b06f08; --crit:#c53a3a;
--shadow:0 1px 2px rgba(22,32,46,.05),0 5px 16px -8px rgba(22,32,46,.14);
--shadow-lg:0 1px 2px rgba(22,32,46,.06),0 24px 60px -24px rgba(22,32,46,.28);
--display:"Archivo",system-ui,sans-serif;
--body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
/* Light is the default theme; dark applies only when the viewer toggles it. */
:root[data-theme="dark"]{
--ground:#0c1118; --surface:#151d27; --surface-2:#1c2531; --panel:#0a0f15;
--text:#e8edf4; --muted:#94a1b2; --border:#29323f; --border-strong:#38434f;
--accent:#ff7d2e; --accent-ink:#ff8f49; --accent-soft:#2a1c10;
--odoo:#c79cb9; --odoo-ink:#d9b4cd; --odoo-soft:#241a22;
--good:#43c489; --warn:#e0a53a; --crit:#ec6a66;
--shadow:0 1px 2px rgba(0,0,0,.4),0 7px 20px -9px rgba(0,0,0,.55);
--shadow-lg:0 1px 2px rgba(0,0,0,.45),0 30px 70px -28px rgba(0,0,0,.75);
color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);
line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:1.08;
letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
/* On the Odoo site the accent colour is Odoo purple everywhere: remap the accent
tokens so eyebrows, buttons, links, card accents and hovers all key to purple. */
body.odoo-site{
--accent:var(--odoo);
--accent-ink:var(--odoo-ink);
--accent-soft:var(--odoo-soft);
}
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;
letter-spacing:.16em;color:var(--accent-ink)}
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px}
.sec{padding-block:64px}
.muted{color:var(--muted)}
/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
font-family:var(--body);font-weight:600;
font-size:.92rem;padding:12px 20px;border-radius:7px;border:1px solid transparent;cursor:pointer;
transition:transform .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-ink)}
.btn--odoo{background:var(--odoo);color:#fff}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--text)}
.btn--lg{padding:14px 24px;font-size:1rem}
/* ---- Contact form page ---- */
.contactpage{padding:40px 0 72px}
.contactpage__in{max-width:1080px;margin:0 auto;padding:0 20px;
display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:start}
.contactpage__form{background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:28px 28px 32px;box-shadow:var(--shadow)}
.contactpage__info{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
padding:24px 26px}
.contactpage__info h2,.contactpage__info h3,.contactpage__info h4{margin-top:0}
.cf-field{margin-bottom:16px}
.cf-field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--text)}
.cf-req{color:var(--accent)}
.contactpage__form input[type=text],
.contactpage__form input[type=email],
.contactpage__form input[type=url],
.contactpage__form input[type=number],
.contactpage__form input[type=tel],
.contactpage__form select,
.contactpage__form textarea{
width:100%;box-sizing:border-box;font-family:var(--body);font-size:.95rem;color:var(--text);
background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;padding:10px 12px;
transition:border-color .15s,box-shadow .15s}
.contactpage__form textarea{min-height:140px;resize:vertical}
.contactpage__form input:focus,
.contactpage__form select:focus,
.contactpage__form textarea:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* checkbox / radio groups (e.g. Areas of interest) */
.cf-field ul{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 18px}
.cf-field ul li{margin:0}
.cf-field ul label{display:flex;align-items:center;gap:8px;font-weight:400;font-size:.9rem;margin:0;cursor:pointer}
.cf-field ul input{width:auto;margin:0}
.cf-field--checkbox>label,.cf-field--checkbox{display:flex;align-items:center;gap:8px}
.cf-help{font-size:.82rem;color:var(--muted);margin:6px 0 0}
.cf-error{font-size:.84rem;color:var(--crit);margin:6px 0 0}
.cf-field--error input,.cf-field--error textarea,.cf-field--error select{border-color:var(--crit)}
.cf-note{font-size:.84rem;color:var(--muted);margin:14px 0 0}
/* honeypot - visually hidden, kept in the DOM/accessibility tree off-screen */
.cf-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.cf-ratelimit{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-ink);
border-radius:8px;padding:12px 14px;font-size:.9rem;margin:0 0 18px}
.contactpage__form .btn{margin-top:6px}
@media (max-width:820px){
.contactpage__in{grid-template-columns:1fr;gap:24px}
.contactpage__info{order:-1}
}
/* ---- top bar ---- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(12px);
border-bottom:1px solid var(--border)}
.nav__in{display:flex;align-items:center;gap:22px;height:64px;max-width:1140px;margin:0 auto;padding-inline:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;
font-size:1.2rem;letter-spacing:-.03em}
.brand .mk{width:30px;height:30px;border-radius:7px;background:var(--panel);color:#fff;display:grid;
place-items:center;font-size:.78rem;font-weight:800;flex:none}
.brand .i{color:var(--accent)}
.brand img{height:34px;width:auto;display:block}
.nav__links{display:flex;gap:4px;margin-left:8px}
.nav__links a{font-size:.9rem;font-weight:500;color:var(--muted);padding:8px 11px;border-radius:6px}
.nav__links a:hover{color:var(--text);background:var(--surface-2)}
.nav__cross{color:var(--accent-ink)!important;font-weight:600!important}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav__tel{font-family:var(--body);font-weight:600;font-size:.92rem;letter-spacing:.01em;color:var(--text);white-space:nowrap}
.tmode{font:inherit;font-size:.8rem;font-weight:600;color:var(--text);background:var(--surface-2);
border:1px solid var(--border);border-radius:999px;padding:6px 12px;cursor:pointer}
/* ---- hero ---- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);
background:
radial-gradient(60% 120% at 88% -10%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 60%),
radial-gradient(50% 120% at 6% 110%, color-mix(in srgb,var(--odoo) 13%,transparent), transparent 55%);}
.hero__in{max-width:1140px;margin:0 auto;padding:68px 20px 60px;display:grid;
grid-template-columns:1.25fr .9fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:900}
.hero h1 .hl{color:var(--accent-ink)}
.hero .lede{font-size:1.14rem;color:var(--muted);margin-top:20px;max-width:46ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;font-size:.84rem;color:var(--muted)}
.hero .trust b{color:var(--text);font-weight:700}
.paths{background:var(--surface);border:1px solid var(--border);border-radius:14px;
box-shadow:var(--shadow-lg);padding:8px}
.paths__row{display:flex;align-items:center;gap:13px;padding:16px;border-radius:10px}
.paths__row+.paths__row{border-top:1px solid var(--border)}
.paths__ic{width:48px;height:48px;display:grid;place-items:center;flex:none}
.paths__ic img{width:100%;height:100%;object-fit:contain}
.paths__t{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.paths__d{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.paths__go{margin-left:auto;color:var(--muted);font-size:1.2rem}
/* ---- section heading ---- */
.shead{max-width:640px;margin-bottom:34px}
.shead h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-top:10px}
.shead p{color:var(--muted);margin-top:12px;font-size:1.04rem}
.center{margin-inline:auto;text-align:center}
/* ---- compare cards ---- */
.paths2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:30px;
box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;overflow:hidden}
.pcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px}
.pcard.ia::before{background:var(--accent)}
.pcard.od::before{background:var(--odoo)}
.pcard__tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;
font-weight:600;text-transform:uppercase;letter-spacing:.12em;padding:5px 10px;border-radius:999px;width:max-content}
.pcard.ia .pcard__tag{color:var(--accent-ink);background:var(--accent-soft)}
.pcard.od .pcard__tag{color:var(--odoo-ink);background:var(--odoo-soft)}
.pcard h3{font-size:1.5rem;margin:16px 0 6px}
.pcard__sub{color:var(--muted);font-size:.98rem}
.pcard__list{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:11px}
.pcard__list li{display:flex;gap:11px;font-size:.92rem;align-items:flex-start}
.pcard__list .tick{flex:none;width:19px;height:19px;border-radius:5px;display:grid;place-items:center;
font-size:.7rem;font-weight:800;margin-top:2px;color:#fff}
.pcard.ia .tick{background:var(--accent)}
.pcard.od .tick{background:var(--odoo)}
.pcard__foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);display:flex;
align-items:center;justify-content:space-between;gap:12px}
.pcard__who{font-size:.82rem;color:var(--muted);max-width:60%}
.pcard__who b{color:var(--text)}
/* ---- comparison table ---- */
.cmp{margin-top:30px;background:var(--surface);border:1px solid var(--border);border-radius:14px;
box-shadow:var(--shadow);overflow:hidden}
.cmp .scrollx{overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:620px}
.cmp th,.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.cmp thead th{font-family:var(--display);font-size:1rem;font-weight:700}
.cmp thead th.ia{color:var(--accent-ink)}
.cmp thead th.od{color:var(--odoo-ink)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp td:first-child,.cmp th:first-child{font-weight:600;color:var(--muted);width:24%;font-size:.84rem}
/* ---- why strip ---- */
.why{background:var(--panel);color:#eef1f5}
.why .wrap{padding-block:56px}
.why h2{color:#fff}
.why .shead p{color:#aeb9c6}
.why .eyebrow{color:var(--accent)}
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;margin-top:26px}
.why .cell{background:var(--panel);padding:24px}
.why .cell .n{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.1em}
.why .cell h4{font-family:var(--display);font-size:1.1rem;color:#fff;margin:10px 0 6px}
.why .cell p{font-size:.88rem;color:#aeb9c6}
/* ---- feature / cover grid ---- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fcard{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:18px;
box-shadow:var(--shadow);transition:transform .15s}
.fcard:hover{transform:translateY(-3px)}
.fcard .fi{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);
display:grid;place-items:center;font-size:1rem;margin-bottom:12px}
.fcard h4{font-family:var(--display);font-size:1rem;font-weight:700}
.fcard p{font-size:.82rem;color:var(--muted);margin-top:4px}
/* card grid used inside page content (prose): richer link cards */
.cards--prose{margin:24px 0;gap:16px}
.prose .cards--prose .fcard,.prose .cards--prose .fcard:hover{text-decoration:none;color:var(--text)}
.cards--prose .fcard{
display:flex;align-items:center;gap:14px;
min-height:84px;padding:16px 18px;border-radius:12px;
border:1px solid var(--border);background:var(--surface);
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.cards--prose .fcard:hover{transform:translateY(-3px);border-color:var(--accent);
box-shadow:0 10px 26px rgba(0,0,0,.10)}
.cards--prose .fcard__ic{flex:none;width:42px;height:42px;border-radius:11px;
background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;
font-size:1.2rem;line-height:1;transition:transform .15s ease}
.cards--prose .fcard:hover .fcard__ic{transform:scale(1.07)}
.cards--prose .fcard__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.cards--prose .fcard__t{font-family:var(--display);font-weight:700;font-size:1.02rem;
line-height:1.25;color:var(--text);transition:color .15s ease}
.cards--prose .fcard:hover .fcard__t{color:var(--accent-ink)}
.cards--prose .fcard__d{font-size:.84rem;color:var(--muted)}
/* buttons sitting inside page content keep their own styling, not .prose a's */
.prose a.btn{text-decoration:none;margin:4px 10px 4px 0}
.prose a.btn:last-child{margin-right:0}
.prose a.btn--accent,.prose a.btn--odoo{color:#fff}
.prose a.btn--ghost{color:var(--text)}
/* ---- news ---- */
.newslist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ncard{display:block;background:var(--surface);border:1px solid var(--border);border-radius:11px;
padding:20px 22px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.ncard:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.ncard__date{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--accent-ink);
text-transform:uppercase;letter-spacing:.04em}
.ncard h3{font-family:var(--display);font-size:1.12rem;font-weight:700;line-height:1.25;margin-top:6px}
.ncard p{font-size:.9rem;color:var(--muted);margin-top:7px}
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px;font-size:.9rem}
.pager a{font-weight:600;color:var(--accent-ink)}
.pager__n{color:var(--muted);font-family:var(--mono);font-size:.8rem}
.prose--foot{margin-top:38px}
.backlink{font-weight:600;color:var(--accent-ink)}
@media (max-width:640px){.newslist{grid-template-columns:1fr}}
/* ---- industries ---- */
.inds{display:flex;flex-wrap:wrap;gap:10px}
.ind{font-size:.88rem;font-weight:500;color:var(--text);background:var(--surface);border:1px solid var(--border);
border-radius:999px;padding:9px 16px}
/* ---- contact band ---- */
.contact{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);
padding:40px;display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.contact h2{font-size:1.9rem}
.contact .lede{color:var(--muted);margin-top:12px;max-width:40ch}
.cbox{display:flex;flex-direction:column;gap:12px}
.crow{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);
border-radius:9px;padding:14px 16px}
.crow .ci{width:36px;height:36px;border-radius:9px;background:var(--surface);border:1px solid var(--border);
display:grid;place-items:center;flex:none}
.crow .ck{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.crow .cv{font-family:var(--body);font-weight:700;font-size:1.04rem;letter-spacing:.01em;overflow-wrap:anywhere}
/* ---- content (StandardPage / StreamField) ---- */
.pagehead{border-bottom:1px solid var(--border);background:
radial-gradient(60% 140% at 90% -20%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 60%);}
.pagehead__in{max-width:880px;margin:0 auto;padding:54px 20px 40px}
.pagehead h1{font-size:clamp(2rem,4vw,2.9rem)}
.pagehead .lede{color:var(--muted);font-size:1.12rem;margin-top:14px;max-width:60ch}
.prose{max-width:880px;margin:0 auto;padding:44px 20px 64px;min-width:0}
.prose>*+*{margin-top:18px}
.prose .prose-h2{font-size:1.6rem;margin-top:40px}
.prose .prose-h3{font-size:1.25rem;margin-top:30px}
.prose h3,.prose h4{font-family:var(--display)}
.prose p,.prose li{font-size:1.05rem;color:var(--text)}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{padding-left:1.3em;display:flex;flex-direction:column;gap:8px}
.prose img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--border);box-shadow:var(--shadow)}
.prose blockquote{margin:0;padding:14px 20px;border-left:3px solid var(--accent);
background:var(--surface-2);border-radius:0 8px 8px 0;color:var(--muted);font-size:1.05rem}
/* responsive embeds: video iframes fill the column at 16:9, overriding the
hard width/height attributes WordPress baked in. Scoped to video hosts so
maps / forms keep their own size; everything else just can't overflow. */
.prose iframe{max-width:100%}
.prose iframe[src*="youtube"],.prose iframe[src*="youtu.be"],
.prose iframe[src*="vimeo"],.prose iframe[src*="wistia"]{
width:100%;height:auto;aspect-ratio:16/9;display:block;margin:20px 0;
border:0;border-radius:10px;box-shadow:var(--shadow)}
/* ---- imported WordPress image sliders -> tidy galleries ----
The pages migrated from WP carry dead sliders (Elementor's .swiper image
carousel and Shortcodes-Ultimate's .su-slider). Their slider JS is gone, so
every slide would otherwise stack full-width down the page. We can't bring the
carousels back, but we can lay the slides out as a clean multi-column gallery:
screenshots keep their full aspect ratio (nothing cropped) and each still links
through to the full-size image. Pure CSS, no JS. */
/* hide the leftover carousel chrome (arrows, dots, scrollbar) */
.prose .swiper-button-next,.prose .swiper-button-prev,
.prose .swiper-pagination,.prose .swiper-scrollbar,
.prose .su-slider-pagination,.prose .su-slider-controls{display:none!important}
/* justified gallery: fill each row edge-to-edge at a uniform height so the images
stack compactly instead of a tall column. Thumbnails crop to fit; the lightbox
shows the full, uncropped screenshot. */
.prose .swiper-wrapper,
.prose .su-slider-slides{
display:flex!important;flex-wrap:wrap;gap:8px;
transform:none!important;width:100%!important;height:auto!important;
margin:24px 0;padding:0}
.prose .swiper-wrapper::after,
.prose .su-slider-slides::after{content:"";flex-grow:999999} /* don't stretch the last row */
.prose .swiper{overflow:visible!important}
.prose .su-slider{width:100%!important;max-width:100%!important;height:auto!important}
/* each slide is a flex tile that grows to fill its row */
.prose .swiper-slide,
.prose .su-slider-slide{
width:auto!important;margin:0!important;flex:1 1 300px!important;
height:220px;min-width:200px;max-width:520px;break-inside:avoid}
.prose .swiper-slide>a,.prose .su-slider-slide>a{
display:block;height:100%;margin:0;text-decoration:none;position:relative;overflow:hidden;
border:1px solid var(--border);border-radius:10px;background:var(--surface-2);
box-shadow:var(--shadow);transition:box-shadow .15s ease,border-color .15s ease}
.prose .swiper-slide figure{display:block;margin:0;height:100%}
/* screenshot fills the tile, cropped from the top so the app title bar stays visible */
.prose .swiper-slide img,
.prose .su-slider-slide img{
width:100%;height:100%;display:block;border:0;border-radius:0;
object-fit:cover;object-position:top;transition:opacity .15s ease}
.prose .swiper-slide>a:hover,.prose .su-slider-slide>a:hover{
border-color:var(--accent);box-shadow:0 12px 28px rgba(0,0,0,.18);z-index:1}
.prose .swiper-slide>a:hover img,.prose .su-slider-slide>a:hover img{opacity:.9}
/* captions show in the lightbox; keep the thumbnails clean */
.prose .su-slider-slide-title{display:none}
@media (max-width:560px){
.prose .swiper-slide,.prose .su-slider-slide{height:200px;flex-basis:100%;max-width:none}
}
/* ================================================================
WP COMPATIBILITY LAYER
The 200+ migrated pages still carry layout markup from three dead
WordPress plugins -- Elementor, Shortcodes Ultimate (su-*) and the
SUI icon font -- whose own CSS/JS is gone. Rather than resurrect the
plugins, these rules make that leftover markup render cleanly inside
our design. Everything is scoped under .prose so only imported page
bodies are affected, and nothing here touches stored content, so it
is fully reversible. Flatten flagship pages into real blocks over
time and this layer shrinks.
================================================================ */
/* ---- Elementor columns: rebuild the flex grid the plugin used to add ---- */
.prose .elementor-container{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.prose .elementor-column{flex:1 1 100%;min-width:0}
.prose .elementor-col-50{flex-basis:calc(50% - 12px)}
.prose .elementor-col-33{flex-basis:calc(33.333% - 16px)}
/* widgets stacked in a column need their own vertical rhythm back */
.prose .elementor-widget{margin-bottom:16px}
.prose .elementor-widget:last-child{margin-bottom:0}
.prose .elementor-widget-container>*+*{margin-top:12px}
/* ---- Shortcodes-Ultimate columns: same idea via the su-row/su-column grid ---- */
.prose .su-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.prose .su-column{flex:1 1 100%;min-width:0}
.prose .su-column-size-1-4{flex-basis:calc(25% - 18px)}
.prose .su-column-size-2-5{flex-basis:calc(40% - 15px)}
.prose .su-column-size-1-2{flex-basis:calc(50% - 12px)}
.prose .su-column-size-3-5{flex-basis:calc(60% - 10px)}
.prose .su-column-size-3-4{flex-basis:calc(75% - 6px)}
/* WP's autop wraps these divs in stray ; don't let that add gaps */
.prose p>.su-row,.prose p>.su-column,.prose p>.su-slider,.prose p>.su-vimeo{margin:0}
@media (max-width:640px){
.prose .elementor-col-50,.prose .elementor-col-33,
.prose [class*="su-column-size"]{flex-basis:100%}
}
/* ---- SUI icon font is gone: draw the two icons that were used with glyphs ---- */
.prose .su-list{margin-left:0;padding-left:0;list-style:none}
.prose i.sui{font-style:normal;display:inline-block;width:1.2em;margin-right:.25em;
color:var(--accent-ink);font-weight:700}
.prose i.sui-check-square-o::before{content:"\2713"} /* check mark */
.prose i.sui-arrow-circle-right::before{content:"\2192"} /* right arrow */
/* ---- Shortcodes-Ultimate tabs: progressive enhancement ----
Default (no JS): hide the dead label row, let every pane show stacked
so the content is always readable. With JS (base.html adds .tabs-ready)
it becomes a real tab strip. */
.prose .su-tabs-nav{display:none}
.prose .su-tabs-panes{margin:14px 0}
.prose .su-tabs.tabs-ready .su-tabs-nav{
display:flex;flex-wrap:wrap;gap:4px;margin:24px 0 0;padding:0;
border-bottom:1px solid var(--border)}
.prose .su-tabs.tabs-ready .su-tabs-nav span{
cursor:pointer;padding:9px 14px;font-size:.92rem;font-weight:600;
color:var(--muted);border:1px solid transparent;border-bottom:none;
border-radius:8px 8px 0 0;user-select:none;line-height:1.2}
.prose .su-tabs.tabs-ready .su-tabs-nav span:hover{color:var(--text)}
.prose .su-tabs.tabs-ready .su-tabs-nav span.is-active{
color:var(--accent-ink);background:var(--surface);
border-color:var(--border);margin-bottom:-1px}
.prose .su-tabs.tabs-ready .su-tabs-panes{
margin:0;border:1px solid var(--border);border-top:none;
border-radius:0 0 10px 10px;padding:22px 20px;background:var(--surface)}
.prose .su-tabs.tabs-ready .su-tabs-pane{display:none}
.prose .su-tabs.tabs-ready .su-tabs-pane.is-active{display:block}
/* ---- content tables (bare imported
+ Shortcodes-Ultimate su-table) ----
WordPress tables arrived with no styling, so e.g. the pricing matrix rendered as a
naked grid. Give them a clean striped look and let wide ones scroll on small screens. */
.prose table{
width:100%;border-collapse:collapse;margin:22px 0;font-size:.95rem;
border:1px solid var(--border);border-radius:10px;overflow:hidden;display:table}
.prose th,.prose td{
padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.prose thead th,.prose tr:first-child td{
background:var(--surface-2);font-weight:600;color:var(--text)}
.prose tbody tr:nth-child(even) td{background:var(--surface)}
.prose .su-table{margin:22px 0;overflow-x:auto} /* wide tables scroll, not overflow */
.prose .su-table table{margin:0}
.prose .su-table h4{margin:0 0 10px}
/* WordPress was used as plain body text here, not contact details -- don't italicise */
.prose address{font-style:normal;line-height:1.55}
/* ---- footer ---- */
.foot{border-top:1px solid var(--border);margin-top:4px}
.foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-block:48px 30px}
.foot h5{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;
color:var(--muted);margin:0 0 14px;font-weight:600}
.foot a{display:block;font-size:.9rem;color:var(--muted);padding:5px 0}
.foot a:hover{color:var(--accent-ink)}
.foot__legal{border-top:1px solid var(--border);padding-block:20px;display:flex;justify-content:space-between;
gap:12px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
@media (max-width:900px){
.hero__in{grid-template-columns:1fr;gap:34px}
.paths2{grid-template-columns:1fr}
.whygrid{grid-template-columns:1fr}
.cards{grid-template-columns:repeat(2,1fr)}
.contact{grid-template-columns:1fr;gap:24px}
.foot__in{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
.nav__links,.nav__tel{display:none}
.cards{grid-template-columns:1fr 1fr}
.foot__in{grid-template-columns:1fr}
.pcard__foot{flex-direction:column;align-items:flex-start}
.pcard__who{max-width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ================================================================
PAGE-BUILDER SECTIONS
Styles for the editable flagship "section" blocks (core/sections.py).
These reuse the home-page components (.hero/.pcard/.fcard/.why/.contact)
and add the section-specific layouts below.
================================================================ */
/* hero themes */
.hero--odoo{background:
radial-gradient(900px 440px at 84% -12%, var(--odoo-soft), transparent 60%),
var(--ground)}
.hero--odoo h1 .hl{color:var(--odoo-ink)}
.hero--odoo .pcard__tag{color:var(--odoo-ink);background:var(--odoo-soft)}
/* centred section heading */
.shead--center{margin-inline:auto;text-align:center}
.sec-note{margin-top:18px;font-size:.9rem;color:var(--muted)}
/* compare: two cards side by side */
.choose{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.choose{grid-template-columns:1fr}}
/* icon cards keyed to Odoo */
.icon-cards.sec--odoo .fcard .fi{background:var(--odoo-soft);color:var(--odoo-ink)}
/* video cards */
.demos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.demos{grid-template-columns:1fr}}
.demo{background:var(--surface);border:1px solid var(--border);border-radius:14px;
overflow:hidden;display:flex;flex-direction:column}
.demo .vid{position:relative;aspect-ratio:16/9;background:#000}
.demo .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.demo__body{padding:18px 20px 22px}
.demo__body h3{font-size:1.08rem;margin:0 0 8px}
.demo__body p{font-size:.9rem;color:var(--muted);margin:0}
/* hero-side video card */
.vidcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;
overflow:hidden;box-shadow:var(--shadow-lg)}
.vidcard .vid{position:relative;aspect-ratio:16/9;background:#000}
.vidcard .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vidcard .cap{padding:12px 16px;font-size:.84rem;color:var(--muted)}
/* option cards (hosting, 3-step flow) */
.hosts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.hosts{grid-template-columns:1fr}}
.host{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:22px}
.host .k{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-ink)}
.option-cards--odoo .host .k{color:var(--odoo-ink)}
.host h3{font-size:1.15rem;margin:8px 0 6px}
.host p{font-size:.9rem;color:var(--muted);margin:0}
/* feature rows (image + text, alternating) */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:48px}
.feat:first-of-type{margin-top:0}
.feat.flip .feat__media{order:2}
.feat__media img{width:100%;height:auto;border-radius:13px;border:1px solid var(--border);box-shadow:var(--shadow)}
.feat__text h3{font-size:1.5rem;margin:10px 0 0}
.feat__copy{color:var(--muted);margin-top:12px;font-size:1.02rem}
.feat__copy p+p{margin-top:10px}
@media (max-width:820px){
.feat{grid-template-columns:1fr;gap:20px}
.feat.flip .feat__media{order:0}
}
/* numbered steps: Odoo accent on the dark band */
.steps--odoo .cell .n{color:var(--odoo)}
.steps--odoo .eyebrow{color:var(--odoo)}
/* rich text section */
.richsec{max-width:760px}
.richsec p{color:var(--muted);font-size:1.04rem;margin-top:14px}
.richsec h3{margin-top:24px}
/* link / post image cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
border-radius:13px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .15s ease}
.post:hover{transform:translateY(-3px)}
.post img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-bottom:1px solid var(--border)}
.post__body{padding:16px 18px 20px}
.post__cat{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--odoo-ink)}
.post h4{font-size:1.02rem;margin:8px 0 10px;line-height:1.3}
.post .more{font-size:.82rem;font-weight:700;color:var(--odoo-ink)}
/* button row (restored buttons inside page content) */
.prose .btnrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0}
.prose .btnrow a.btn{margin:0}
/* ---- Lightbox for imported galleries (base.html wires the behaviour) ---- */
.prose .su-slider-slide a,.prose .swiper-slide a,.prose a.lb-link{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
background:rgba(7,10,15,.96);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:40px}
.lightbox.open{display:flex}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:94vw;max-height:90vh}
.lb-img{max-width:94vw;max-height:80vh;object-fit:contain;background:#fff;border-radius:8px;
box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lb-cap{color:#e8edf3;font-size:.9rem;line-height:1.4;text-align:center;max-width:70ch}
.lb-btn{position:fixed;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
cursor:pointer;border-radius:10px;line-height:1;display:grid;place-items:center;transition:background .15s ease}
.lb-btn:hover{background:rgba(255,255,255,.24)}
.lb-close{top:18px;right:18px;width:44px;height:44px;font-size:1.7rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:50px;height:64px;font-size:2rem}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-count{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:#aeb9c6;
font-family:var(--mono);font-size:.8rem;letter-spacing:.05em}
@media (max-width:640px){
.lightbox{padding:16px}
.lb-prev,.lb-next{width:40px;height:50px;font-size:1.6rem}
.lb-close{top:10px;right:10px}
}
/* ---- Image gallery block (justified rows + lightbox, for new pages) ---- */
.prose .gallery{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.prose .gallery::after{content:"";flex-grow:999999} /* don't stretch the last row */
.prose a.gallery__item{
flex:1 1 300px;height:220px;min-width:200px;max-width:520px;
display:block;position:relative;overflow:hidden;text-decoration:none;cursor:zoom-in;
border:1px solid var(--border);border-radius:10px;background:var(--surface-2);box-shadow:var(--shadow);
transition:box-shadow .15s ease,border-color .15s ease}
.prose .gallery__item img{width:100%;height:100%;display:block;object-fit:cover;object-position:top;
transition:opacity .15s ease}
.prose a.gallery__item:hover{border-color:var(--accent);box-shadow:0 12px 28px rgba(0,0,0,.18);z-index:1}
.prose a.gallery__item:hover img{opacity:.9}
@media (max-width:560px){.prose a.gallery__item{height:200px;flex-basis:100%;max-width:none}}
/* ---- Video block (responsive YouTube/Vimeo player) ---- */
.prose .embed-video{margin:24px 0}
.prose .embed-video .vid{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;
overflow:hidden;box-shadow:var(--shadow)}
.prose .embed-video .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .embed-video figcaption{margin-top:8px;font-size:.84rem;color:var(--muted)}