/* ---------- 1. Brand tokens (from logo: navy #000080 + mint #88D898) ---------- */
:root{
  --md-ink:#060B3A;          /* deep navy — hero, header, footer */
  --md-ink-2:#0B1452;        /* raised dark surface */
  --md-brand:#000080;        /* logo navy — headings, links on light */
  --md-paper:#F5F7FB;        /* page background (cool, navy-biased) */
  --md-surface:#FFFFFF;
  --md-text:#0D1538;
  --md-muted:#5B6385;
  --md-line:rgba(6,11,58,.10);
  --md-accent:#88D898;       /* logo mint — buttons, highlights on dark */
  --md-accent-2:#A8E6B4;     /* mint hover */
  --md-accent-ink:#2E8C4A;   /* mint deepened for text on white (AA contrast) */
  --md-radius:14px;
  --md-shadow:0 1px 2px rgba(6,11,58,.05),0 14px 34px -14px rgba(6,11,58,.25);
  --md-ease:cubic-bezier(.2,.7,.2,1);
  --md-display:"Schibsted Grotesk",system-ui,sans-serif;
  --md-body:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --md-mono:"JetBrains Mono",ui-monospace,monospace;
}

/* ---------- 2. Base typography (fluid) ---------- */
body{background:var(--md-paper);color:var(--md-text);font-family:var(--md-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.elementor-heading-title{font-family:var(--md-display)!important;
  letter-spacing:-.022em;text-wrap:balance}
h1,.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(2.6rem,5.6vw,5rem)!important;line-height:1.02!important;font-weight:800!important}
h2,.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(2rem,3.6vw,3rem)!important;line-height:1.08!important;font-weight:700!important}
h3{font-size:clamp(1.25rem,1.6vw,1.5rem)}
p,.elementor-text-editor,.elementor-widget-text-editor{font-size:1.0625rem;line-height:1.7;color:var(--md-muted)}
/* paragraph width cap only on blog posts; Elementor layouts manage their own widths */
.single-post .entry-content p{max-width:68ch}
h6,.elementor-widget-heading h6.elementor-heading-title{  /* eyebrows / kickers */
  font-family:var(--md-mono)!important;font-size:.75rem!important;letter-spacing:.16em!important;
  text-transform:uppercase;color:var(--md-accent-ink)!important;font-weight:500!important}
::selection{background:var(--md-accent-2);color:var(--md-ink)}

/* ---------- 3. Header: glass, sticky, slim ---------- */
.main-header .is-stuck,
.main-header .lqd-head-sec-wrap.is-stuck,
.main-header [data-sticky-header].is-stuck{
  background:rgba(6,11,58,.72)!important;
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);box-shadow:none!important}
.main-nav>li>a,.main-header .main-nav > li > a{font-family:var(--md-display);font-weight:500;letter-spacing:.005em;
  transition:color .25s var(--md-ease),opacity .25s var(--md-ease)}
.main-nav>li>a:hover{opacity:1;color:var(--md-accent-2)!important}
.main-nav .nav-item-children,.main-nav .sub-menu{border-radius:12px!important;padding:8px!important;
  border:1px solid var(--md-line);box-shadow:var(--md-shadow)!important}

/* ---------- 4. Buttons ---------- */
.btn,.elementor-button,input[type="submit"],.wpcf7-submit{
  font-family:var(--md-display)!important;font-weight:700!important;letter-spacing:.005em;
  border-radius:999px!important;padding:14px 26px!important;
  background:var(--md-accent)!important;color:var(--md-ink)!important;border:1px solid var(--md-accent)!important;
  box-shadow:0 8px 24px -10px rgba(136,216,152,.55);
  transition:transform .25s var(--md-ease),box-shadow .25s var(--md-ease),background .25s}
.btn:hover,.elementor-button:hover,input[type="submit"]:hover,.wpcf7-submit:hover{
  transform:translateY(-2px);background:var(--md-accent-2)!important;
  box-shadow:0 14px 30px -12px rgba(136,216,152,.75)}
.btn-naked,.elementor-button.md-ghost{background:transparent!important;color:inherit!important;
  border:1px solid currentColor!important;box-shadow:none}

/* ---------- 5. Cards / service boxes / portfolio ---------- */
.lqd-fancy-box,.fancy-box,.lqd-pf-item,.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper{
  background:var(--md-surface);border:1px solid var(--md-line);border-radius:var(--md-radius);
  overflow:hidden;transition:transform .4s var(--md-ease),box-shadow .4s var(--md-ease),border-color .4s}
.lqd-fancy-box:hover,.fancy-box:hover,.lqd-pf-item:hover,
.elementor-widget-image-box .elementor-image-box-wrapper:hover,
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover{
  transform:translateY(-4px);box-shadow:var(--md-shadow);border-color:rgba(46,140,74,.35)}
.lqd-fancy-box img,.lqd-pf-item img,.elementor-widget-image-box img{
  transition:transform .8s var(--md-ease),filter .6s;filter:saturate(.85) contrast(1.02)}
.lqd-fancy-box:hover img,.lqd-pf-item:hover img,.elementor-widget-image-box .elementor-image-box-wrapper:hover img{
  transform:scale(1.04);filter:saturate(1)}

/* Stock photos: unify them with a subtle navy duotone overlay */
.md-duotone{position:relative;isolation:isolate}
.md-duotone img{filter:grayscale(1) contrast(1.05)}
.md-duotone::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(6,11,58,.15),rgba(6,11,58,.55));
  mix-blend-mode:multiply;pointer-events:none;border-radius:inherit}

/* ---------- 6. Dark sections (add class md-dark to an Elementor section) ---------- */
.md-dark{background:radial-gradient(1200px 600px at 85% -10%,rgba(136,216,152,.14),transparent 60%),var(--md-ink)!important;color:#E7ECF3}
.md-dark h1,.md-dark h2,.md-dark h3,.md-dark .elementor-heading-title{color:#F2F5F9!important}
.md-dark p,.md-dark .elementor-text-editor{color:#9FB0C7}
/* faint engineering grid behind hero */
.md-grid-bg{background-image:
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px}

/* ---------- 7. Stats / counters ---------- */
.lqd-counter,.elementor-counter{font-variant-numeric:tabular-nums}
.lqd-counter .lqd-counter-element,.elementor-counter-number-wrapper{font-family:var(--md-display)!important;font-weight:800!important;letter-spacing:-.03em}

/* ---------- 8. Logo strip (when you have real client logos) ---------- */
.md-logos img{filter:grayscale(1);opacity:.55;transition:opacity .3s,filter .3s;max-height:40px;width:auto}
.md-logos img:hover{filter:none;opacity:1}

/* ---------- 9. Forms (Contact Form 7 / Elementor Forms) ---------- */
.wpcf7 input:not([type=submit]),.wpcf7 textarea,.wpcf7 select,
.elementor-field-group .elementor-field{
  border:1px solid var(--md-line)!important;border-radius:10px!important;background:var(--md-surface)!important;
  padding:14px 16px!important;font-family:var(--md-body);transition:border-color .2s,box-shadow .2s}
.wpcf7 input:focus,.wpcf7 textarea:focus,.elementor-field-group .elementor-field:focus{
  border-color:var(--md-accent)!important;box-shadow:0 0 0 4px rgba(136,216,152,.25)!important;outline:none}

/* ---------- 10. Footer ---------- */
.main-footer,footer.main-footer{background:var(--md-ink)!important;color:#8F9FB6}
.main-footer a{color:#B8C5D6;transition:color .2s}
.main-footer a:hover{color:var(--md-accent-2)}

/* ---------- 11. Remove theme leftovers ---------- */
.lqd-preloader-wrap{display:none!important}   /* the "Loading…" screen delays first paint */

/* ---------- 12. Motion & accessibility ---------- */
a:focus-visible,button:focus-visible,.elementor-button:focus-visible{outline:2px solid var(--md-accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* eyebrows on dark sections use bright mint */
.md-dark h6,.md-dark .elementor-widget-heading h6.elementor-heading-title{color:var(--md-accent)!important}
/* headings on light pages carry the brand navy */
body:not(.md-dark) h2.elementor-heading-title{color:var(--md-text)}
a{color:var(--md-brand)}