/*
Theme Name: Calcula
Template: astra
Theme URI: https://www.calcula.co.uk/
Author: Bedford Web Design
Author URI: https://www.bedfordwebdesign.com/
Description: Astra child theme for Calcula, Chartered Building Consultancy. Replaces Astra's header and footer with the approved Calcula design (mega menu, dark hero variant, four-column footer), registers the Services / Sectors / Projects post types, and provides shortcodes and global styles so Elementor pages and theme-builder templates inherit the brand automatically.
Version: 1.3.9
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: calcula
*/

/* ==========================================================================
   1. Design tokens (from the approved proof)
   ========================================================================== */
:root {
  --cal-navy: #152C46;        /* primary brand */
  --cal-navy-deep: #0F2137;   /* footer */
  --cal-ink: #1B2A3F;         /* body text */
  --cal-mid: #4C6A94;         /* eyebrows, links, accents */
  --cal-pale: #A3B8D4;        /* text on navy */
  --cal-grey: #5A6577;        /* secondary text */
  --cal-grey-2: #6B7688;      /* tertiary text */
  --cal-slate: #3E4A5C;       /* long-form text */
  --cal-bg: #F4F6F9;          /* tinted section background */
  --cal-line: #E3E7EE;        /* hairlines */
  --cal-line-2: #EEF1F5;      /* lighter hairlines */
  --cal-border: #D5DCE6;      /* pills, inputs */
  --cal-white: #FFFFFF;
  --cal-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cal-ease: cubic-bezier(.2, .7, .2, 1);
  --cal-radius: 8px;
  --cal-max: 1320px;
  --cal-gutter: 64px;
  --cal-pad: max(var(--cal-gutter), calc((100% - var(--cal-max)) / 2));
}

/* ==========================================================================
   2. Global type and resets (applies to Elementor content too)
   ========================================================================== */
html { -webkit-font-smoothing: antialiased; }
body.calcula,
body.calcula #page,
body.calcula .elementor,
body.calcula .elementor * {
  font-family: var(--cal-font);
}
body.calcula { background: var(--cal-white); color: var(--cal-ink); }
/* Element defaults wrapped in :where() so any single class (theme, Elementor
   per-element style, global class) wins without a specificity fight. */
:where(body.calcula) :where(h1, h2, h3, h4) {
  font-family: var(--cal-font);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit;
  text-wrap: pretty;
}
:where(body.calcula) :where(h1) { font-size: 56px; line-height: 1.04; }
:where(body.calcula) :where(h2) { font-size: 42px; line-height: 1.08; }
:where(body.calcula) :where(h3) { font-size: 21px; line-height: 1.2; letter-spacing: 0; }
:where(body.calcula) :where(a) { color: inherit; text-decoration: none; }
:where(body.calcula) :where(a:hover) { color: var(--cal-navy); }
body.calcula ::selection { background: var(--cal-pale); color: var(--cal-navy); }

/* Astra wrappers: let Elementor content run edge to edge under our header */
body.calcula #content,
body.calcula .ast-container { max-width: none; padding-left: 0; padding-right: 0; }
body.calcula .site-content .ast-container { display: block; }
body.calcula .ast-separate-container .ast-article-single,
body.calcula .ast-separate-container .ast-article-post { padding: 0; margin: 0; border: 0; background: transparent; }
body.calcula #primary { margin: 0; padding: 0; }

/* Keyframes shared with the proof */
@keyframes cal-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes cal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cal-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes cal-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cal-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   3. Header
   ========================================================================== */
.cal-header {
  position: sticky;
  top: 0;
  z-index: 60;
  font-family: var(--cal-font);
  background: var(--cal-white);
  border-bottom: 1px solid var(--cal-line);
  transition: box-shadow .25s;
}
body.admin-bar .cal-header { top: 32px; }
/* The absolute (over-hero) header already sits below the admin bar via the html margin. */
body.admin-bar .cal-header--dark:not(.is-stuck) { top: 0; }
.cal-header.is-stuck { box-shadow: 0 10px 30px rgba(15, 33, 55, 0.08); }
.cal-header__logo img.is-dark-logo { display: none; }
.cal-header__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--cal-pad);
  gap: 24px;
}
.cal-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.cal-header__logo img { height: 38px; width: auto; display: block; }

.cal-nav {
  display: flex;
  gap: clamp(14px, 1.8vw, 28px);
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  flex-shrink: 1;
  min-width: 0;
}
.cal-nav__link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  color: var(--cal-ink);
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.cal-nav__link svg { margin-top: 1px; transition: transform .2s; }
.cal-nav__link:hover, .cal-nav__link.is-open { color: var(--cal-mid); }
.cal-nav__link.is-open svg { transform: rotate(180deg); }
.cal-nav__link.is-active { color: var(--cal-navy); border-bottom-color: var(--cal-navy); }
.cal-nav__phone {
  margin-left: 8px;
  border: 1px solid var(--cal-navy);
  border-radius: 4px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--cal-navy);
  transition: background .2s, color .2s;
}
.cal-nav__phone:hover { background: var(--cal-bg); color: var(--cal-navy); }
.cal-nav__cta {
  background: var(--cal-navy);
  color: var(--cal-white);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s;
}
.cal-nav__cta:hover { background: var(--cal-mid); color: var(--cal-white); }

.cal-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--cal-navy);
  color: var(--cal-navy);
  border-radius: 4px;
  padding: 9px 14px;
  font-family: var(--cal-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

/* Dark variant: transparent, overlays the first (navy) section */
.cal-header--dark {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 0;
  color: var(--cal-white);
  animation: cal-fade .8s ease-out both;
}
.cal-header--dark .cal-header__bar { padding-top: 22px; padding-bottom: 22px; }
.cal-header--dark .cal-nav__link { color: var(--cal-white); }
.cal-header--dark .cal-nav__link:hover, .cal-header--dark .cal-nav__link.is-open { color: var(--cal-pale); }
.cal-header--dark .cal-nav__link.is-active { border-bottom-color: transparent; }
.cal-header--dark .cal-nav__phone { color: var(--cal-white); border-color: rgba(255, 255, 255, 0.7); }
.cal-header--dark .cal-nav__phone:hover { background: rgba(255, 255, 255, 0.12); color: var(--cal-white); }
.cal-header--dark .cal-nav__cta { background: var(--cal-white); color: var(--cal-navy); }
.cal-header--dark .cal-nav__cta:hover { background: var(--cal-pale); color: var(--cal-navy); }
.cal-header--dark .cal-menu-toggle { border-color: var(--cal-white); color: var(--cal-white); }
.cal-header--dark .cal-header__logo img.is-light-logo { display: none; }
.cal-header--dark .cal-header__logo img.is-dark-logo { display: block; }

/* Dark header once scrolled past the hero: becomes a fixed white bar */
.cal-header--dark.is-stuck {
  position: fixed;
  background: var(--cal-white);
  border-bottom: 1px solid var(--cal-line);
  color: var(--cal-ink);
  animation: cal-menu-in .25s ease-out;
}
body.admin-bar .cal-header--dark.is-stuck { top: 32px; }
.cal-header--dark.is-stuck .cal-header__bar { padding-top: 16px; padding-bottom: 16px; }
.cal-header--dark.is-stuck .cal-header__logo img.is-light-logo { display: block; }
.cal-header--dark.is-stuck .cal-header__logo img.is-dark-logo { display: none; }
.cal-header--dark.is-stuck .cal-nav__link { color: var(--cal-ink); }
.cal-header--dark.is-stuck .cal-nav__link:hover, .cal-header--dark.is-stuck .cal-nav__link.is-open { color: var(--cal-mid); }
.cal-header--dark.is-stuck .cal-nav__phone { color: var(--cal-navy); border-color: var(--cal-navy); }
.cal-header--dark.is-stuck .cal-nav__phone:hover { background: var(--cal-bg); }
.cal-header--dark.is-stuck .cal-nav__cta { background: var(--cal-navy); color: var(--cal-white); }
.cal-header--dark.is-stuck .cal-nav__cta:hover { background: var(--cal-mid); }
.cal-header--dark.is-stuck .cal-menu-toggle { border-color: var(--cal-navy); color: var(--cal-navy); }

/* Mega menu: aligned to the site's content edges, not the viewport */
.cal-mega {
  position: absolute;
  top: 100%;
  left: max(var(--cal-gutter), calc((100% - var(--cal-max)) / 2));
  right: max(var(--cal-gutter), calc((100% - var(--cal-max)) / 2));
  background: var(--cal-white);
  color: var(--cal-ink);
  border-top: 1px solid var(--cal-line);
  box-shadow: 0 30px 60px rgba(15, 33, 55, 0.25);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  animation: cal-menu-in .25s ease-out;
  z-index: 70;
}
.cal-mega[hidden] { display: none; }
.cal-mega__intro {
  background: var(--cal-bg);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--cal-line);
}
.cal-mega__eyebrow { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--cal-mid); }
.cal-mega__title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--cal-navy); }
.cal-mega__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--cal-grey); }
.cal-mega__more { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--cal-navy); }
.cal-mega__more:hover { color: var(--cal-mid); }
.cal-mega__items {
  padding: 28px 40px 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 28px;
  align-content: start;
}
.cal-mega__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cal-line-2);
  color: var(--cal-ink);
  transition: color .2s;
}
.cal-mega__item:hover { color: var(--cal-mid); }
.cal-mega__name { font-weight: 600; font-size: 15px; }
.cal-mega__short { font-size: 12.5px; color: var(--cal-grey-2); line-height: 1.4; }

/* Mobile drawer */
.cal-drawer { position: fixed; inset: 0; z-index: 200; font-family: var(--cal-font); }
.cal-drawer[hidden] { display: none; }
.cal-drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 33, 55, 0.55); opacity: 0; transition: opacity .25s; }
.cal-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--cal-white);
  color: var(--cal-ink);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s var(--cal-ease);
  box-shadow: -20px 0 60px rgba(15, 33, 55, 0.25);
}
.cal-drawer.is-open .cal-drawer__backdrop { opacity: 1; }
.cal-drawer.is-open .cal-drawer__panel { transform: none; }
.cal-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--cal-line); }
.cal-drawer__logo img { height: 28px; width: auto; display: block; }
.cal-drawer__close { background: transparent; border: 1px solid var(--cal-border); border-radius: 4px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--cal-navy); cursor: pointer; }
.cal-drawer__nav { display: flex; flex-direction: column; padding: 6px 22px 10px; }
.cal-drawer__row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cal-line-2); }
.cal-drawer__link { flex: 1; padding: 14px 0; font-size: 17px; font-weight: 500; color: var(--cal-ink); }
.cal-drawer__link.is-solo { border-bottom: 1px solid var(--cal-line-2); }
.cal-drawer__toggle { background: transparent; border: 0; width: 44px; height: 44px; margin-right: -12px; display: flex; align-items: center; justify-content: center; color: var(--cal-mid); cursor: pointer; }
.cal-drawer__toggle svg { transition: transform .2s; }
.cal-drawer__group.is-open .cal-drawer__toggle svg { transform: rotate(180deg); }
.cal-drawer__group.is-open .cal-drawer__row { border-bottom-color: transparent; }
.cal-drawer__sub { display: flex; flex-direction: column; padding: 2px 0 12px 14px; border-bottom: 1px solid var(--cal-line-2); border-left: 2px solid var(--cal-line); margin-bottom: 2px; }
.cal-drawer__sub[hidden] { display: none; }
.cal-drawer__sublink { padding: 9px 0 9px 12px; font-size: 15px; color: var(--cal-slate); }
.cal-drawer__sublink.is-all { color: var(--cal-mid); font-weight: 600; margin-top: 4px; }
.cal-drawer__actions { margin-top: auto; padding: 18px 22px 26px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--cal-line); }
.cal-drawer__actions .cal-btn { display: block; }
body.cal-menu-open { overflow: hidden; }

/* ==========================================================================
   4. Footer
   ========================================================================== */
.cal-footer {
  background: var(--cal-navy-deep);
  color: var(--cal-pale);
  padding: 56px var(--cal-pad) 28px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  font-family: var(--cal-font);
  font-size: 14px;
  line-height: 1.7;
}
.cal-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.cal-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.cal-footer__brand > img { width: 150px; height: auto; margin-left: -10px; }
.cal-footer__brand p { margin: 0; max-width: 300px; }
.cal-footer__badges { display: flex; gap: 18px; align-items: center; margin-top: 6px; }
.cal-footer__badges img { height: 34px; width: auto; background: var(--cal-white); padding: 4px 6px; border-radius: 3px; }
.cal-footer__col { display: flex; flex-direction: column; gap: 5px; }
.cal-footer__heading { color: var(--cal-white); font-weight: 600; margin-bottom: 6px; }
.cal-footer a { color: var(--cal-pale); transition: color .2s; }
.cal-footer a:hover { color: var(--cal-white); }
.cal-footer a.is-white { color: var(--cal-white); }
.cal-footer__address { margin-top: 10px; }
.cal-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  border-top: 1px solid rgba(163, 184, 212, 0.2);
  padding-top: 18px;
}

/* ==========================================================================
   5. Reusable components (used by shortcodes and available to Elementor
      via the CSS classes below)
   ========================================================================== */

/* Buttons */
.cal-btn {
  display: inline-block;
  background: var(--cal-navy);
  color: var(--cal-white);
  padding: 16px 28px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  transition: background .2s, transform .2s, color .2s;
}
.cal-btn:hover { background: var(--cal-mid); color: var(--cal-white); transform: translateY(-2px); }
.cal-btn--outline { background: transparent; color: var(--cal-navy); border: 1.5px solid var(--cal-navy); padding: 14.5px 26.5px; }
.cal-btn--outline:hover { background: var(--cal-bg); color: var(--cal-navy); }
.cal-btn--light { background: var(--cal-white); color: var(--cal-navy); }
.cal-btn--light:hover { background: var(--cal-pale); color: var(--cal-navy); }
.cal-btn--ghost { background: transparent; color: var(--cal-white); border: 1.5px solid rgba(255, 255, 255, 0.6); padding: 14.5px 26.5px; }
.cal-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--cal-white); }
.cal-btn--block { display: block; padding: 13px 20px; font-size: 14.5px; margin-top: 4px; }
.cal-btn--block:hover { transform: none; }

/* Text helpers */
.cal-eyebrow { display: block; margin: 0; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--cal-mid); }
.cal-eyebrow--light { color: var(--cal-pale); }
.cal-link { font-size: 15px; font-weight: 600; color: var(--cal-mid); white-space: nowrap; }
.cal-link:hover { color: var(--cal-navy); }
.cal-h2 { margin: 0; font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.cal-row { display: flex; justify-content: space-between; align-items: end; gap: 48px; }
.cal-badge {
  position: absolute;
  left: 12px; bottom: 12px;
  background: rgba(21, 44, 70, 0.85);
  color: var(--cal-white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 3px;
  pointer-events: none;
}
.cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cal-mid); margin-top: 8px; flex-shrink: 0; }

/* Images inside cards */
body.calcula img.cal-img, .cal-img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.cal-img--placeholder { background: linear-gradient(135deg, #E3E7EE, #F4F6F9); }

/* Grids */
.cal-grid { display: grid; gap: 24px; }
.cal-grid--1 { grid-template-columns: minmax(0, 1fr); }
.cal-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cal-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cal-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* Service / news card */
.cal-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--cal-line);
  border-radius: var(--cal-radius);
  overflow: hidden;
  background: var(--cal-white);
  color: var(--cal-ink);
  transition: transform .3s var(--cal-ease), box-shadow .3s, border-color .3s;
}
.cal-card:hover { border-color: var(--cal-navy); box-shadow: 0 18px 40px rgba(21, 44, 70, 0.12); transform: translateY(-4px); color: var(--cal-ink); }
.cal-card__media { position: relative; height: 200px; min-width: 0; overflow: hidden; }
.cal-card__body { display: flex; flex-direction: column; gap: 8px; padding: 6px 24px 26px; }
.cal-card__title { font-size: 21px; font-weight: 600; }
.cal-card__title--news { font-size: 20px; line-height: 1.25; }
.cal-card__text { font-size: 14.5px; line-height: 1.55; color: var(--cal-grey); }
.cal-card__meta { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--cal-mid); }
.cal-card__more { font-size: 14px; font-weight: 600; color: var(--cal-mid); margin-top: 6px; }
.cal-card--news .cal-card__body { gap: 10px; }

/* Project card */
.cal-project { display: flex; flex-direction: column; gap: 14px; color: var(--cal-ink); transition: transform .3s var(--cal-ease), color .2s; }
.cal-project:hover { color: var(--cal-mid); transform: translateY(-4px); }
.cal-project__media { position: relative; height: 280px; border-radius: var(--cal-radius); overflow: hidden; min-width: 0; }
.cal-grid--4 .cal-project__media { height: 300px; }
.cal-related .cal-project__media { height: 240px; }
.cal-project__body { display: flex; flex-direction: column; gap: 4px; }
.cal-project__title { font-size: 18px; font-weight: 600; }
.cal-project__detail { font-size: 14px; color: var(--cal-grey); }
.cal-project__value { font-size: 13.5px; color: var(--cal-mid); font-weight: 600; }
.cal-project.is-hidden { display: none; }

/* Sector card (image left) */
.cal-sector {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  border: 1px solid var(--cal-line);
  border-radius: var(--cal-radius);
  overflow: hidden;
  background: var(--cal-white);
  color: var(--cal-ink);
  transition: transform .3s var(--cal-ease), box-shadow .3s, border-color .3s;
}
.cal-sector:hover { border-color: var(--cal-navy); box-shadow: 0 18px 40px rgba(21, 44, 70, 0.12); transform: translateY(-4px); color: var(--cal-ink); }
.cal-sector__media { position: relative; min-height: 200px; min-width: 0; overflow: hidden; }
.cal-sector__body { display: flex; flex-direction: column; gap: 8px; padding: 26px 28px; justify-content: center; }
.cal-sector__title { font-size: 22px; font-weight: 600; line-height: 1.2; }
.cal-sector__text { font-size: 14.5px; line-height: 1.55; color: var(--cal-grey); }

/* Pills and filters */
.cal-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.cal-pills--center { justify-content: center; margin-top: 48px; }
.cal-pill {
  border: 1px solid var(--cal-border);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cal-ink);
  transition: background .2s, color .2s, border-color .2s;
}
.cal-pill:hover { background: var(--cal-navy); color: var(--cal-white); border-color: var(--cal-navy); }
.cal-pill--small { padding: 6px 12px; font-size: 13px; }
.cal-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; }
.cal-filter {
  border: 1px solid var(--cal-border);
  background: var(--cal-white);
  color: var(--cal-ink);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--cal-font);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.cal-filter:hover { border-color: var(--cal-navy); }
.cal-filter.is-active { background: var(--cal-navy); color: var(--cal-white); border-color: var(--cal-navy); }

/* Aside boxes (service / sector / project sidebars) */
.cal-aside-box {
  border: 1px solid var(--cal-line);
  border-radius: var(--cal-radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-aside-box .cal-eyebrow { margin-bottom: 8px; }
.cal-aside-link {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid var(--cal-line-2);
  font-size: 15px;
  font-weight: 500;
  color: var(--cal-ink);
  transition: color .2s;
}
.cal-aside-link:hover { color: var(--cal-mid); }
.cal-aside-link--stacked { flex-direction: column; gap: 2px; padding: 12px 0; }
.cal-aside-link__name { font-size: 15.5px; font-weight: 600; }
.cal-aside-link__short { font-size: 13px; color: var(--cal-grey-2); }
.cal-aside-box .cal-btn--block { margin-top: 16px; }

/* What's included */
.cal-includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.cal-includes__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--cal-slate);
  padding: 10px 0;
  border-bottom: 1px solid var(--cal-line-2);
}

/* Project facts */
.cal-facts { border: 1px solid var(--cal-line); border-radius: var(--cal-radius); padding: 28px; display: flex; flex-direction: column; margin-bottom: 22px; }
.cal-facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cal-line-2); font-size: 15px; }
.cal-facts__row > span:first-child { color: var(--cal-grey-2); }
.cal-facts__row strong { font-weight: 600; text-align: right; }
.cal-facts__row a { font-weight: 600; color: var(--cal-mid); text-align: right; }
.cal-facts__services { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; font-size: 15px; }
.cal-facts__services > span { color: var(--cal-grey-2); }

/* Related projects section (rendered inside a shortcode) */
.cal-related { display: flex; flex-direction: column; gap: 40px; }

/* Clients marquee */
.cal-clients { display: flex; flex-direction: column; gap: 24px; overflow: hidden; }
.cal-clients__label { margin: 0; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--cal-grey-2); text-align: center; }
.cal-marquee { position: relative; overflow: hidden; }
.cal-marquee::before, .cal-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.cal-marquee::before { left: 0; background: linear-gradient(90deg, var(--cal-white), rgba(255, 255, 255, 0)); }
.cal-marquee::after { right: 0; background: linear-gradient(270deg, var(--cal-white), rgba(255, 255, 255, 0)); }
.cal-marquee__track { display: flex; width: max-content; animation: cal-marquee 45s linear infinite; }
.cal-marquee:hover .cal-marquee__track { animation-play-state: paused; }
.cal-marquee__item { display: flex; align-items: center; justify-content: center; height: 96px; width: 224px; padding: 0 16px; box-sizing: border-box; }
.cal-marquee__item img.cal-logo { height: 40px; width: auto; max-width: 176px; max-height: none; object-fit: contain; opacity: .8; }
.cal-marquee__item img.cal-logo--square { height: 56px; }
.cal-marquee__item img.cal-logo--wide { height: 32px; }
.cal-marquee__name { font-size: 15px; font-weight: 600; color: var(--cal-grey-2); text-align: center; letter-spacing: 0.02em; }

/* Team */
.cal-team { gap: 28px; }
.cal-member { display: flex; flex-direction: column; gap: 18px; }
.cal-member__media { position: relative; height: 380px; border-radius: var(--cal-radius); overflow: hidden; min-width: 0; background: var(--cal-bg); }
.cal-member__body { display: flex; flex-direction: column; gap: 6px; }
.cal-member__name { font-size: 22px; font-weight: 600; line-height: 1.2; }
.cal-member__role { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cal-mid); font-weight: 600; }
.cal-member__bio { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--cal-grey); }

/* Scroll reveal */
.cal-reveal { opacity: 1; transform: none; }
.js-reveal .cal-reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }
.js-reveal .cal-reveal.is-visible { opacity: 1; transform: none; transition: opacity .7s var(--cal-ease), transform .7s var(--cal-ease); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .cal-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cal-marquee__track { animation: none; }
  .cal-header--dark { animation: none; }
}

/* Elementor Pro form styled to the design */
body.calcula .elementor-form .elementor-form-fields-wrapper { row-gap: 18px; }
body.calcula .elementor-form .elementor-field-group { margin-bottom: 0; padding-bottom: 0; }
body.calcula .elementor-form .elementor-field-group > label { font-size: 13.5px; font-weight: 600; color: var(--cal-slate); margin-bottom: 8px; display: block; line-height: 1.4; }
body.calcula .elementor-form .elementor-field-textual,
body.calcula .elementor-form .elementor-field-group select.elementor-field-textual {
  border: 1px solid var(--cal-border);
  border-radius: 4px;
  padding: 13px 14px;
  font-size: 15px;
  line-height: 1.4;
  min-height: 0;
  height: auto;
  color: var(--cal-ink);
  background: var(--cal-white);
  font-family: var(--cal-font);
}
body.calcula .elementor-form .elementor-field-group select.elementor-field-textual {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><polyline points='2,4 6,8 10,4' fill='none' stroke='%231B2A3F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
body.calcula .elementor-form .elementor-select-wrapper::before,
body.calcula .elementor-form .elementor-select-wrapper .select-caret-down-wrapper { display: none; }
body.calcula .elementor-form .elementor-field-textual::placeholder { color: var(--cal-grey-2); opacity: 1; }
body.calcula .elementor-form .elementor-field-textual:focus { border-color: var(--cal-navy); box-shadow: none; outline: none; }
body.calcula .elementor-form textarea.elementor-field-textual { resize: vertical; min-height: 150px; }
body.calcula .elementor-form .elementor-field-type-submit { flex-basis: auto; width: auto; margin-top: 6px; }
body.calcula .elementor-form .elementor-button {
  background: var(--cal-navy);
  color: var(--cal-white);
  border-radius: 4px;
  padding: 15px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--cal-font);
  width: auto;
  transition: background .2s;
}
body.calcula .elementor-form .elementor-button:hover { background: var(--cal-mid); }
body.calcula .elementor-form .elementor-field-type-upload .elementor-field {
  border: 1.5px dashed var(--cal-border); border-radius: 6px; padding: 22px; background: var(--cal-bg); width: 100%; font-family: var(--cal-font); font-size: 14px; color: var(--cal-grey);
}
body.calcula .elementor-form .elementor-field-type-upload .elementor-field::file-selector-button {
  border: 1px solid var(--cal-navy); background: var(--cal-white); color: var(--cal-navy); border-radius: 4px; padding: 8px 16px; font: 600 13.5px var(--cal-font); margin-right: 12px; cursor: pointer;
}
body.calcula .elementor-form .elementor-field-type-acceptance label { font-weight: 400; color: var(--cal-grey); font-size: 13.5px; line-height: 1.5; margin: 0; display: inline; }
body.calcula .elementor-form .elementor-field-type-acceptance .elementor-field-subgroup { display: flex; gap: 10px; align-items: flex-start; }
body.calcula .elementor-form .elementor-field-type-acceptance input { margin-top: 3px; }
body.calcula .elementor-form .elementor-field-type-acceptance a { color: var(--cal-navy); font-weight: 600; }
body.calcula .elementor-form .elementor-message { font-family: var(--cal-font); font-size: 15px; color: var(--cal-slate); }

/* Theme buttons: neutralise Astra's global <button> styling (padding, shadow, fill) */
body.calcula .cal-menu-toggle,
body.calcula .cal-drawer__close,
body.calcula .cal-drawer__toggle,
body.calcula .cal-filter {
  box-shadow: none;
  line-height: 1;
  min-height: 0;
  font-family: var(--cal-font);
  text-transform: none;
  letter-spacing: 0;
  outline-offset: 2px;
}
body.calcula .cal-menu-toggle { padding: 9px 14px; background: transparent; border: 1px solid var(--cal-navy); color: var(--cal-navy); font-size: 14px; font-weight: 600; border-radius: 4px; }
body.calcula .cal-header--dark:not(.is-stuck) .cal-menu-toggle { border-color: var(--cal-white); color: var(--cal-white); }
body.calcula .cal-menu-toggle:hover, body.calcula .cal-menu-toggle:focus { background: rgba(21, 44, 70, 0.06); color: var(--cal-navy); }
body.calcula .cal-header--dark:not(.is-stuck) .cal-menu-toggle:hover, body.calcula .cal-header--dark:not(.is-stuck) .cal-menu-toggle:focus { background: rgba(255, 255, 255, 0.12); color: var(--cal-white); }
body.calcula .cal-drawer__close { padding: 0; width: 40px; height: 40px; background: transparent; border: 1px solid var(--cal-border); border-radius: 4px; color: var(--cal-navy); }
body.calcula .cal-drawer__close:hover, body.calcula .cal-drawer__close:focus { background: var(--cal-bg); color: var(--cal-navy); border-color: var(--cal-navy); }
body.calcula .cal-drawer__toggle { padding: 0; width: 44px; height: 44px; background: transparent; border: 0; border-radius: 4px; color: var(--cal-mid); }
body.calcula .cal-drawer__toggle:hover, body.calcula .cal-drawer__toggle:focus { background: var(--cal-bg); color: var(--cal-navy); }
body.calcula .cal-filter { padding: 9px 18px; background: var(--cal-white); border: 1px solid var(--cal-border); border-radius: 999px; color: var(--cal-ink); font-size: 14px; font-weight: 500; line-height: 1.3; }
body.calcula .cal-filter:hover, body.calcula .cal-filter:focus { background: var(--cal-white); color: var(--cal-ink); border-color: var(--cal-navy); }
body.calcula .cal-filter.is-active, body.calcula .cal-filter.is-active:hover { background: var(--cal-navy); color: var(--cal-white); border-color: var(--cal-navy); }

/* Footer: cookie settings link */
.cal-footer__bottom-end { display: inline-flex; gap: 18px; flex-wrap: wrap; }

/* Cookie consent banner */
.cal-consent {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 10000;
  width: min(420px, calc(100% - 32px));
  background: var(--cal-white);
  color: var(--cal-ink);
  border: 1px solid var(--cal-line);
  border-radius: var(--cal-radius);
  box-shadow: 0 18px 48px rgba(15, 33, 55, 0.18);
  padding: 22px 22px 20px;
  font-family: var(--cal-font);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s var(--cal-ease), transform .3s var(--cal-ease);
}
.cal-consent[hidden] { display: none; }
.cal-consent.is-visible { opacity: 1; transform: none; }
body.calcula .cal-consent__title { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--cal-navy); }
body.calcula .cal-consent__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--cal-slate); }
body.calcula .cal-consent__text a { color: var(--cal-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cal-consent__actions { display: flex; gap: 10px; margin-top: 16px; }
body.calcula .cal-consent__btn {
  flex: 1 1 0;
  padding: 12px 18px;
  min-height: 0;
  border-radius: 4px;
  border: 1.5px solid var(--cal-navy);
  box-shadow: none;
  font-family: var(--cal-font);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
body.calcula .cal-consent__btn--accept { background: var(--cal-navy); color: var(--cal-white); }
body.calcula .cal-consent__btn--accept:hover, body.calcula .cal-consent__btn--accept:focus { background: var(--cal-mid); border-color: var(--cal-mid); color: var(--cal-white); }
body.calcula .cal-consent__btn--reject { background: var(--cal-white); color: var(--cal-navy); }
body.calcula .cal-consent__btn--reject:hover, body.calcula .cal-consent__btn--reject:focus { background: var(--cal-bg); color: var(--cal-navy); }
@media (max-width: 600px) {
  .cal-consent { left: 16px; bottom: 16px; padding: 18px 18px 16px; }
}

/* ==========================================================================
   6. Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .cal-grid--3, .cal-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-mega { grid-template-columns: minmax(0, 1fr); }
  .cal-mega__intro { padding: 28px 24px; border-right: 0; border-bottom: 1px solid var(--cal-line); }
  .cal-mega__items { padding: 20px 24px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --cal-pad: 22px; --cal-gutter: 22px; }
  body.calcula h1 { font-size: clamp(32px, 9vw, 46px); }
  body.calcula h2 { font-size: clamp(26px, 7vw, 34px); }
  .cal-nav { display: none; }
  .cal-menu-toggle { display: flex; }
  .cal-mega { display: none !important; }
  .cal-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cal-grid--2, .cal-grid--3, .cal-grid--4, .cal-includes { grid-template-columns: minmax(0, 1fr); }
  .cal-sector { grid-template-columns: minmax(0, 1fr); }
  .cal-sector__media { height: 220px; }
  .cal-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cal-project__media, .cal-grid--4 .cal-project__media, .cal-related .cal-project__media { height: 260px; }
  .cal-member__media { height: 320px; }
  .cal-filters { margin-bottom: 32px; }
}

@media (max-width: 420px) {
  :root { --cal-pad: 18px; --cal-gutter: 18px; }
}