/* site.css */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-y: scroll;              /* no sideways jump between short and tall pages */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  padding: 0;
}

img,
svg { max-width: 100%; }

img { height: auto; }

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   2. Palette and scale — the source's own custom properties.
   -------------------------------------------------------------------------- */
:root {
  --renobalt-primary:  hsl(108, 48%, 24%);
  --renobalt-accent-1: hsl(102, 28%, 36%);
  --renobalt-accent-2: hsl(96, 22%, 50%);
  --renobalt-accent-3: hsl(95, 18%, 63%);
  --renobalt-light:    hsl(95, 25%, 85%);
  --renobalt-subtle:   hsl(108, 20%, 95%);
  --renobalt-plate:    rgba(32, 63, 41, 0.5);

  --renobalt-fg:     hsl(108, 48%, 24%);   /* body text IS the green */
  --renobalt-grey:   #4b5563;              /* gray-600 */
  --renobalt-bg:     #ffffff;
  --renobalt-bg-alt: #f9fafb;              /* gray-50 */
  --renobalt-border: hsl(20, 5.9%, 90%);
  --renobalt-border-strong: hsl(20, 5.9%, 78%);

  --renobalt-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --renobalt-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --renobalt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  --renobalt-heading: "Montserrat", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --renobalt-body: "Raleway", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
body {
  background: var(--renobalt-bg);
  color: var(--renobalt-fg);
  font-family: var(--renobalt-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--renobalt-heading);
  color: var(--renobalt-primary);
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--renobalt-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover { color: var(--renobalt-accent-1); }

strong, b { font-weight: 600; }

::selection {
  background: var(--renobalt-light);
  color: var(--renobalt-primary);
}

:focus-visible {
  outline: 2px solid var(--renobalt-accent-1);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Layout helpers and the pieces nothing else styles

   `.page-icon` first, because it is the one that breaks the page outright:
   the inline SVGs declare a viewBox and no width or height, so with no rule
   they render at the replaced-element default.
   -------------------------------------------------------------------------- */
.page-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.container {
  width: 100%;
  max-width: 80rem;          /* max-w-7xl */
  margin-inline: auto;
  padding-inline: 2rem;      /* lg:px-8 */
}

/* Carries a block's anchor when an HTML id has taken the id attribute. It is a
   scroll target and nothing else, so it must occupy no space. */
.anchor-target {
  display: block;
  height: 0;
  overflow: hidden;
}

/* Sections land clear of the sticky header when scrolled to. */
[id] { scroll-margin-top: 5rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A spam trap: it must be reachable by a bot and invisible to a person, so it
   is moved off-screen rather than hidden — `display: none` is exactly what a
   bot checks for. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   5. Navbar — h-16, white, hairline border, sticky.
   -------------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #f3f4f6;
  box-shadow: var(--renobalt-shadow-sm);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

.navbar .brand {
  font-family: var(--renobalt-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--renobalt-primary);
}

.navbar .brand-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* The source sets this by hand, overriding its own `h-10` class. */
.navbar .brand-logo img {
  display: block;
  height: 1.3rem;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  transition: opacity 0.15s ease;
}

.navbar .brand-logo img:hover { opacity: 0.8; }

.navbar .menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar .menu a {
  display: inline-block;
  padding: 0.5rem 0.75rem;      /* px-3 py-2 */
  border-radius: 6px;
  color: var(--renobalt-grey);
  font-size: 0.875rem;          /* text-sm */
  font-weight: 500;             /* font-medium */
}

.navbar .menu a:hover { color: var(--renobalt-primary); }

/* Mark a menu item as a CTA in the admin and it becomes the green button the
   source uses for "Kontaktai". */
.navbar .menu li.cta a {
  background: var(--renobalt-primary);
  color: #ffffff;
  padding: 0.5rem 1rem;
}

.navbar .menu li.cta a:hover { background: var(--renobalt-accent-1); }

@media (max-width: 812px) {
  .navbar .menu { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero

   The image is an absolutely-positioned <img> rather than a background, so the
   stacking has to be built here: image at z 0, scrim above it, content above
   both. Miss the z-index on the inner block and the text sits behind the photo.

   Both the headline and the slogan sit on their own translucent green plate —
   20px padding on the title, 10px on the slogan, 20px radius on both. That is
   what makes them legible, which is why the scrim over the photo stays light.
   -------------------------------------------------------------------------- */
.hero-background {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 600px;
  overflow: hidden;
  padding: 0;
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding: 4rem 2rem;
  text-align: center;
}

.hero-title {
  display: block;
  max-width: 64rem;
  margin: 0 auto 1.5rem;
  padding: 20px;
  border-radius: 20px;
  background: var(--renobalt-plate);
  color: #ffffff;
  font-family: var(--renobalt-heading);
  font-size: 2.25rem;              /* text-4xl */
  font-weight: 700;
  line-height: 1.1;
}

.hero-slogan {
  display: block;
  max-width: 48rem;                /* max-w-3xl */
  margin: 0 auto 2rem;
  padding: 10px;
  border-radius: 20px;
  background: var(--renobalt-plate);
  color: #ffffff;
  font-family: var(--renobalt-body);
  font-size: 1.25rem;              /* text-xl */
  line-height: 1.6;
}

@media (min-width: 768px) {
  .hero-title  { font-size: 3.75rem; }   /* md:text-6xl */
  .hero-slogan { font-size: 1.5rem; }    /* md:text-2xl */
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;          /* px-8 py-3 */
  border: 0;
  border-radius: 8px;
  background: var(--renobalt-accent-2);
  color: #ffffff;
  font-family: var(--renobalt-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.hero-cta:hover {
  background: var(--renobalt-accent-1);
  color: #ffffff;
}

/* The first button is the deep green, the second the mid green. */
.hero-cta-accent { background: var(--renobalt-primary); }
.hero-cta-accent:hover { background: var(--renobalt-accent-1); }

.hero-cta .page-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* --------------------------------------------------------------------------
   7. Content areas — py-16, centred header, mb-12.
   -------------------------------------------------------------------------- */
.content-area { padding-block: 4rem; }

.content-area-white { background: var(--renobalt-bg); }
.content-area-muted { background: var(--renobalt-bg-alt); }

/* The source alternates white and gray-50 bands: benefits and measures sit on
   the tint, conditions and process on white. Every one of your areas is set to
   "white" in the admin, so the alternation is restored here by what each area
   contains.

   The tidier fix is to set those two areas' background to "muted" in the admin
   and delete this rule — then the choice lives with the content, where an
   editor can see it. Kept as CSS so the page matches today without an edit.

   Note the two `:has()` in the second selector are siblings, not nested: CSS
   does not allow `:has()` inside `:has()`, so "a grid-2 that contains a tagged
   card" has to be asked as "an area containing a grid-2 AND containing a
   tagged card". The process block is grid-1, so it does not match. */
.content-area:has(.content-cards-grid-3),
.content-area:has(.content-cards-grid-2):has(.tagged-card) {
  background: var(--renobalt-bg-alt);
}

.content-area-header {
  max-width: 48rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.content-area-number {
  display: inline-block;
  color: var(--renobalt-grey);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.content-area-label {
  margin: 0.25rem 0;
  color: var(--renobalt-accent-1);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-area-title {
  margin: 0 0 1rem;
  color: var(--renobalt-primary);
  font-size: 1.875rem;            /* text-3xl */
  font-weight: 700;
  line-height: 1.2;
}

.content-area-subtitle {
  margin: 0;
  color: var(--renobalt-grey);
  font-family: var(--renobalt-body);
  font-size: 1.125rem;            /* text-lg */
  line-height: 1.7;
}

.content-area-body {
  max-width: 45rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .content-area-title { font-size: 2.25rem; }   /* md:text-4xl */
}

/* --------------------------------------------------------------------------
   8. Content cards

   No border — lifted by shadow alone, with a stronger shadow on hover.
   -------------------------------------------------------------------------- */
.content-cards-grid {
  display: grid;
  gap: 2rem;                      /* gap-8 */
}

.content-cards-grid-1 { grid-template-columns: minmax(0, 1fr); }
/* TWO blocks are two columns wide, and the source treats them differently, so
   these rules key off what the grid CONTAINS rather than off the column count:

     conditions  plain cards  — `max-w-4xl mx-auto`, so narrower and taller,
                                with a 4px green rule down the left edge
     measures    tagged cards — full width, `gap-12`, no rule

   Keying on the column count alone is what made the measures block narrow in
   the previous version: both are `-grid-2`, and only one of them should be.

   `:has()` is doing real work here — it is the only way to ask "which kind of
   card is inside" from a stylesheet. If you ever want this to stop depending
   on card type, put an HTML class on each area in the admin and swap these
   selectors for it. */
.content-cards-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.content-cards-grid-2:has(.content-card) {
  max-width: 56rem;
  margin-inline: auto;
}

.content-cards-grid-2 > .content-card {
  border-left: 4px solid var(--renobalt-primary);
}

.content-cards-grid-2 .content-card-body { padding: 2rem; }

/* The measures block: full width, wider gutters, roomier cards. */
.content-cards-grid-2:has(.tagged-card) { gap: 3rem; }

.content-cards-grid-2 .tagged-card { padding: 2rem; }

.content-cards-grid-2 .tagged-card-header { margin-bottom: 1.5rem; }

.content-cards-grid-2 .tagged-card-title { font-size: 1.5rem; }

.content-cards-grid-2 .tagged-card-items { gap: 1rem; }

/* The item headings are near-black here, not green — the source sets
   `text-gray-800`. Green on green-tinted titles reads as a link, and there are
   a lot of them in one column. */
.content-cards-grid-2 .tagged-card-item-title {
  color: #1f2937;
  font-weight: 600;
}

.content-cards-grid-2 .tagged-card-item-desc {
  color: var(--renobalt-grey);
  font-size: 0.875rem;
}

.content-cards-grid-2 .tagged-card-marker { color: var(--renobalt-accent-2); }
.content-cards-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.content-cards-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }

.content-card {
  display: flex;
  flex-direction: column;
  /* A hairline all round, which is what makes the top edge read as an edge.
     Shadow alone leaves the top of a card invisible against a white section —
     the sides and bottom catch the shadow, the top has nothing to catch. */
  border: 1px solid var(--renobalt-border);
  border-radius: 12px;            /* rounded-xl */
  background: #ffffff;
  box-shadow: var(--renobalt-shadow-lg);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.content-card:hover { box-shadow: var(--renobalt-shadow-xl); }
.content-card--static { cursor: default; }

.content-card-body {
  display: block;
  padding: 1.5rem;                /* p-6 */
}

.content-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 8px;             /* rounded-lg */
  background: var(--renobalt-primary);
  color: #ffffff;
}

.content-card-icon .page-icon {
  width: 24px;
  height: 24px;
}

/* The six-up benefits row takes a different green per card — the source cycles
   them, and one flat green is what gives a rebuild away. Scoped to the
   THREE-column grid, because it is the only block the source varies.

   Everything else keeps the deep green, which is why the financing row is even
   rather than fading paler to the right. */
.content-cards-grid-3 > :nth-child(6n + 1) .content-card-icon { background: var(--renobalt-accent-3); }
.content-cards-grid-3 > :nth-child(6n + 2) .content-card-icon { background: var(--renobalt-accent-2); }
.content-cards-grid-3 > :nth-child(6n + 3) .content-card-icon { background: var(--renobalt-accent-1); }
.content-cards-grid-3 > :nth-child(6n + 4) .content-card-icon { background: var(--renobalt-primary); }
.content-cards-grid-3 > :nth-child(6n + 5) .content-card-icon { background: var(--renobalt-accent-2); }
.content-cards-grid-3 > :nth-child(6n + 6) .content-card-icon { background: var(--renobalt-accent-3); }

.content-card-title {
  display: block;
  color: var(--renobalt-primary);
  font-family: var(--renobalt-heading);
  font-size: 1.25rem;             /* text-xl */
  font-weight: 600;
  line-height: 1.4;
}

.content-card-slogan,
.content-card-intro {
  display: block;
  margin-top: 0.75rem;
  color: var(--renobalt-grey);
  font-family: var(--renobalt-body);
  font-size: 1rem;
  line-height: 1.7;
}

/* The intro is WYSIWYG HTML wrapped in <p> — strip the outer margins so the
   card stays tight, but keep the spacing between paragraphs. */
.content-card-intro > :first-child,
.tagged-card-item-intro > :first-child { margin-top: 0; }
.content-card-intro > :last-child,
.tagged-card-item-intro > :last-child { margin-bottom: 0; }

.content-card-pic img {
  display: block;
  width: 100%;
  height: auto;
}

/* Opt-in: put `accent-left` in a block's HTML class field. */
.accent-left .content-card,
.accent-left .tagged-card { border-left: 4px solid var(--renobalt-primary); }

/* --------------------------------------------------------------------------
   9. Tagged cards — the numbered process list

   The source renders this as a TIMELINE, not as a card full of lines: a large
   coloured circle per step, the step's text on its own pale block beside it,
   and a gradient rule running down behind the circles. The platform wraps the
   whole thing in one white card, so the first job here is to take that wrapper
   away — otherwise every step sits inside a box that the original does not
   have.
   -------------------------------------------------------------------------- */
.tagged-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--renobalt-border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--renobalt-shadow-lg);
  transition: box-shadow 0.2s ease;
}

.tagged-card:hover { box-shadow: var(--renobalt-shadow-xl); }

/* Full-width tagged blocks are the timeline. No card, no shadow, no padding —
   the steps sit directly on the section. */
.content-cards-grid-1 .tagged-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.content-cards-grid-1 .tagged-card:hover { box-shadow: none; }

.tagged-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* The block's own heading is empty here — the section title above already says
   "Renovacijos procesas" — and an empty flex row still spends its bottom
   margin. Hidden only when it holds neither an icon nor a title, so adding
   either later brings it back. */
.tagged-card-header:not(:has(.tagged-card-icon)):not(:has(.tagged-card-title)) {
  display: none;
}

.tagged-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--renobalt-primary);
  color: #ffffff;
}

.tagged-card-icon .page-icon { width: 24px; height: 24px; }

.tagged-card-title {
  margin: 0;
  color: var(--renobalt-primary);
  font-size: 1.25rem;
  font-weight: 700;
}

.tagged-card-subtitle {
  margin: 2px 0 0;
  color: var(--renobalt-grey);
  font-size: 0.875rem;
}

.tagged-card-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                   /* space-y-6 */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The rule behind the circles, fading from the deep green to the pale one over
   the length of the list. `left: 2rem` puts it through the centre of a 4rem
   circle; the circles paint over it because they are given a z-index below.
   Dropped on narrow screens, where the circles stack differently. */
.content-cards-grid-1 .tagged-card-items::before {
  content: "";
  position: absolute;
  left: 2rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--renobalt-primary), var(--renobalt-accent-3));
}

.tagged-card-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.content-cards-grid-1 .tagged-card-item {
  align-items: stretch;
  gap: 1.5rem;                   /* ml-6 */
}

.tagged-card-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 24px;
  color: var(--renobalt-accent-1);
}

.tagged-card-marker .page-icon { width: 20px; height: 20px; }

.tagged-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--renobalt-subtle);
  color: var(--renobalt-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

/* In the timeline the number is the anchor of the row: a 4rem filled circle
   with white bold type, sitting above the rule. */
.content-cards-grid-1 .tagged-card-marker {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  min-width: 4rem;
}

.content-cards-grid-1 .tagged-card-num {
  width: 4rem;                   /* w-16 */
  height: 4rem;
  background: var(--renobalt-primary);
  color: #ffffff;
  font-size: 1.125rem;           /* text-lg */
  font-weight: 700;
}

/* Four greens, cycling — the source runs primary, accent-1, accent-2,
   accent-3 down the list and starts again. */
.content-cards-grid-1 .tagged-card-item:nth-child(4n + 1) .tagged-card-num { background: var(--renobalt-primary); }
.content-cards-grid-1 .tagged-card-item:nth-child(4n + 2) .tagged-card-num { background: var(--renobalt-accent-1); }
.content-cards-grid-1 .tagged-card-item:nth-child(4n + 3) .tagged-card-num { background: var(--renobalt-accent-2); }
.content-cards-grid-1 .tagged-card-item:nth-child(4n + 4) .tagged-card-num { background: var(--renobalt-accent-3); }

.tagged-card-item-body { display: block; min-width: 0; }

/* Each step's text on its own pale block. This is the part that reads as a
   timeline rather than a bulleted list. */
.content-cards-grid-1 .tagged-card-item-body {
  flex: 1;
  padding: 1.5rem;               /* p-6 */
  border-radius: 8px;            /* rounded-lg */
  background: var(--renobalt-bg-alt);
}

.tagged-card-item-title {
  display: block;
  color: var(--renobalt-primary);
  font-family: var(--renobalt-heading);
  font-size: 1rem;
  font-weight: 600;
}

.content-cards-grid-1 .tagged-card-item-title {
  margin-bottom: 0.5rem;         /* mb-2 */
  font-size: 1.125rem;           /* text-lg */
}

.tagged-card-item-desc,
.tagged-card-item-intro {
  display: block;
  color: var(--renobalt-grey);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.content-cards-grid-1 .tagged-card-item-desc { font-size: 1rem; }

.tagged-card-item-intro ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }

/* --------------------------------------------------------------------------
   10. Contact section
   -------------------------------------------------------------------------- */
.contact { padding-block: 4rem; background: var(--renobalt-bg-alt); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: start;
}

.contact-info h2 {
  margin: 0 0 1.5rem;
  color: var(--renobalt-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

.contact-details {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.company-details {
  color: var(--renobalt-grey);
  line-height: 1.7;
}

.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-detail-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--renobalt-primary);
  color: #ffffff;
}

.contact-detail-icon .page-icon { width: 24px; height: 24px; }

/* Darkest at the top, palest at the bottom — the source walks the four greens
   down the list in order. Keyed to `.contact-detail`, which is the row, so the
   sequence follows the order the details are arranged in the admin. */
.contact-details-list > .contact-detail:nth-child(4n + 1) .contact-detail-icon { background: var(--renobalt-primary); }
.contact-details-list > .contact-detail:nth-child(4n + 2) .contact-detail-icon { background: var(--renobalt-accent-1); }
.contact-details-list > .contact-detail:nth-child(4n + 3) .contact-detail-icon { background: var(--renobalt-accent-2); }
.contact-details-list > .contact-detail:nth-child(4n + 4) .contact-detail-icon { background: var(--renobalt-accent-3); }

.contact-detail-body { flex: 1; min-width: 0; }

.contact-detail-body .child-title {
  margin: 0 0 0.15rem;
  color: var(--renobalt-primary);
  font-size: 1rem;
  font-weight: 600;
}

.contact-detail-body .child-intro,
.contact-detail-body .child-content {
  color: var(--renobalt-grey);
  font-family: var(--renobalt-body);
}

.contact-detail-body .child-intro p,
.contact-detail-body .child-content p { margin: 0; }

.contact-detail-pictures { margin-top: 1.25rem; }

.contact-detail-pictures img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ----- the form ----- */
.contact-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--renobalt-shadow-lg);
}

/* Name and phone share a row; everything else runs the full width. */
.contact-form label[data-field="email"],
.contact-form label[data-field="message"],
.contact-form label[data-field="attachment"],
.contact-form .contact-submit-row { grid-column: 1 / -1; }

.contact-form label { display: block; }

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--renobalt-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--renobalt-fg);
  font-family: var(--renobalt-body);
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #9ca3af; }

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--renobalt-accent-2);
  box-shadow: 0 0 0 3px rgba(96, 128, 74, 0.15);
}

.contact-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  border: 1.5px dashed var(--renobalt-border-strong);
  border-radius: 12px;
  background: #ffffff;
  text-align: center;
  cursor: pointer;
}

.contact-upload:hover { border-color: var(--renobalt-accent-2); }

.contact-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.contact-upload-icon {
  width: 2rem;
  height: 2rem;
  color: var(--renobalt-accent-2);
}

.contact-upload-prompt {
  color: var(--renobalt-grey);
  font-size: 0.9375rem;
}

.contact-upload-formats,
.contact-upload-list {
  display: block;
  color: var(--renobalt-grey);
  font-size: 0.8125rem;
}

.contact-submit-row {
  display: flex;
  justify-content: flex-start;
}

/* ----- buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--renobalt-primary);
  color: #ffffff;
  font-family: var(--renobalt-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn:hover {
  background: var(--renobalt-accent-1);
  color: #ffffff;
}

.btn.primary { background: var(--renobalt-primary); }

.btn.secondary {
  background: transparent;
  border-color: var(--renobalt-border-strong);
  color: var(--renobalt-fg);
}

.btn.secondary:hover {
  background: var(--renobalt-subtle);
  color: var(--renobalt-primary);
}

/* --------------------------------------------------------------------------
   11. Footer

   Not white-on-green. The body copy and every link are accent-3, the pale
   sage; only the headings are white, and links go white on hover.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--renobalt-primary);
  color: #ffffff;
}

.site-footer-area { padding-block: 3.5rem; }

.footer-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.footer-grid--1 { grid-template-columns: minmax(0, 1fr); }
.footer-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.footer-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.footer-cell { min-width: 0; }
.footer-cell--span-1 { grid-column: span 1; }
.footer-cell--span-2 { grid-column: span 2; }
.footer-cell--span-3 { grid-column: span 3; }
.footer-cell--span-4 { grid-column: span 4; }
.footer-cell--span-5 { grid-column: span 5; }
.footer-cell--span-6 { grid-column: span 6; }

.footer-cell__title {
  margin: 0 0 1rem;
  color: #ffffff;
  font-family: var(--renobalt-heading);
  font-size: 1.125rem;          /* text-lg */
  font-weight: 600;
}

/* The wide first column carries the larger heading. */
.footer-cell--span-2 .footer-cell__title {
  font-size: 1.5rem;            /* text-2xl */
  font-weight: 700;
}

/* White, not the pale sage the source uses for footer body copy. Your call —
   it reads as more contrast against the green. Links dim slightly on hover
   instead of brightening, since there is nowhere brighter to go. */
.footer-prose,
.footer-prose p,
.footer-contact-body,
.footer-copyright {
  color: #ffffff;
  font-family: var(--renobalt-body);
  line-height: 1.7;
}

.site-footer a { color: #ffffff; }
.site-footer a:hover { color: rgba(255, 255, 255, 0.75); }

.footer-links,
.footer-contact {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.footer-contact-icon svg { width: 1rem; height: 1rem; }

.footer-contact-body .child-title {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}

.footer-contact-body p { margin: 0; }

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--renobalt-accent-1);
  color: #ffffff;
  transition: background-color 0.15s ease;
}

.footer-social a:hover { background: var(--renobalt-accent-2); color: #ffffff; }
.footer-social svg { width: 1rem; height: 1rem; }

.footer-logo img { max-width: 12rem; height: auto; }

.footer-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
  color: #ffffff;
}

.footer-hours dt { font-weight: 600; }
.footer-hours dd { margin: 0; }

/* The copyright sits in its own footer area, which carries 3rem of padding of
   its own. Left alone that stacks with the divider's 2rem and the strip floats
   away from the columns — so the two areas share the padding between them. */
.site-footer .site-footer-area:has(.footer-copyright) { padding-top: 0; }
.site-footer .site-footer-area:has(.footer-grid:not(:has(.footer-copyright))) { padding-bottom: 0; }

.footer-copyright {
  margin: 0;
  padding-top: 2rem;
  border-top: 1px solid var(--renobalt-accent-1);
  text-align: center;
}

/* --------------------------------------------------------------------------
   11b. Loose ends

   Wrappers and modifiers that carry no visual weight of their own but still
   need saying. `min-width: 0` on a grid or flex child is the one that bites:
   without it the default `min-width: auto` lets a long unbroken string — an
   email address, a URL in a paragraph — push the whole column wider than its
   track, and the layout spills sideways with nothing obviously at fault.
   -------------------------------------------------------------------------- */
.contact-detail,
.contact-form-wrapper,
.tagged-card-heading { min-width: 0; }

.contact-detail + .contact-detail { margin-top: 0; }

/* A hero with no background image: the image-specific rules above never apply,
   so it needs its own breathing room or the title sits against the navbar. */
.hero:not(.hero-background) { padding-block: 4rem; }

.hero-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--renobalt-accent-1);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Required fields. The form already marks them with `required` and an
   aria-label, so this is a visual cue only — hence the marker sits on the
   placeholder rather than on a label that is screen-reader-only text. */
.contact-form label.is-required input::placeholder,
.contact-form label.is-required textarea::placeholder { color: #8b95a5; }

.contact-form label.is-required input:invalid:not(:placeholder-shown),
.contact-form label.is-required textarea:invalid:not(:placeholder-shown) {
  border-color: #b91c1c;
}

/* --------------------------------------------------------------------------
   12. Cookie consent bar
   -------------------------------------------------------------------------- */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: clamp(12px, 2vw, 20px);
  background: #ffffff;
  border-top: 1px solid var(--renobalt-border);
  box-shadow: 0 -4px 16px -8px rgba(0, 0, 0, 0.25);
}

.cookie-consent[hidden] { display: none !important; }

.cookie-consent-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 80rem;
  margin-inline: auto;
  flex-wrap: wrap;
}

.cookie-consent-text {
  margin: 0;
  color: var(--renobalt-grey);
  font-size: 0.9375rem;
}

.cookie-consent-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cookie-consent-actions .btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   13. Static pages and WYSIWYG content

   Anything authored in the editor lands here, so it needs readable defaults —
   otherwise a page of prose renders at browser-default line height and full
   viewport width.
   -------------------------------------------------------------------------- */
.page-article { padding-block: 4rem; }

.page-content {
  max-width: 45rem;
  margin-inline: auto;
  color: var(--renobalt-fg);
  line-height: 1.75;
}

.page-content h2 { margin-top: 2.5rem; font-size: 1.5rem; }
.page-content h3 { margin-top: 2rem; font-size: 1.25rem; }
.page-content ul,
.page-content ol { padding-left: 1.25rem; }
.page-content li { margin-bottom: 0.4rem; }
.page-content img { border-radius: 12px; }

.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.page-content th,
.page-content td {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--renobalt-border);
  text-align: left;
}

.page-content th {
  background: var(--renobalt-subtle);
  color: var(--renobalt-primary);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   14. Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .content-cards-grid-3,
  .content-cards-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  /* The timeline's rule and its 4rem circles need width that is not there on a
     phone, so the steps become a plain stack with smaller numbers. */
  .content-cards-grid-1 .tagged-card-items::before { display: none; }
  .content-cards-grid-1 .tagged-card-item { gap: 0.75rem; }
  .content-cards-grid-1 .tagged-card-marker { min-width: 2.5rem; }
  .content-cards-grid-1 .tagged-card-num {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.9375rem;
  }
  .content-cards-grid-1 .tagged-card-item-body { padding: 1rem; }
}

@media (max-width: 768px) {
  .footer-grid[class] { grid-template-columns: minmax(0, 1fr); }
  .footer-cell[class] { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .container,
  .hero-bg-inner { padding-inline: 1rem; }
  .content-area,
  .contact,
  .page-article { padding-block: 3rem; }
  .content-area-header { margin-bottom: 2rem; }
  .content-cards-grid,
  .content-cards-grid-2,
  .content-cards-grid-3,
  .content-cards-grid-4 { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hero-background { min-height: 460px; }
  .hero-title { padding: 14px; border-radius: 14px; }
  .hero-ctas { flex-direction: column; }
  .hero-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}



.contact-submit-row {
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
flash-ok {
  color: var(--renobalt-primary, hsl(108, 48%, 24%));
  font-weight: 600;
  font-size: 0.9375rem;
  transition: opacity 0.6s ease;
}

/* The script adds this, waits 800ms, then removes the node. Without a
   transition the message would vanish rather than fade. */
.flash-ok.is-leaving {
  opacity: 0;
}

/* fonts.css */
/* ---------- Montserrat — headings ---------- */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/montserrat/montserrat-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/montserrat/montserrat-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/montserrat/montserrat-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/montserrat/montserrat-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/montserrat/montserrat-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/montserrat/montserrat-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/montserrat/montserrat-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/montserrat/montserrat-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------- Raleway — body ---------- */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/raleway/raleway-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/raleway/raleway-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/raleway/raleway-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/raleway/raleway-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/raleway/raleway-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/raleway/raleway-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/raleway/raleway-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/raleway/raleway-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* mobile-nav.css */
/* mobile-nav.css */
@media (max-width: 812px) {
  .navbar:not([data-nav-enhanced]) .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--renobalt-border, hsl(20, 5.9%, 90%));
  border-radius: 8px;
  background: #ffffff;
  color: var(--renobalt-primary, hsl(108, 48%, 24%));
  cursor: pointer;
}

.nav-toggle:hover { background: var(--renobalt-subtle, hsl(108, 20%, 95%)); }

.nav-toggle svg {
  display: block;
  width: 22px;
  height: 22px;
}

.nav-toggle .nav-toggle-close,
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

@media (max-width: 812px) {
  .navbar[data-nav-enhanced] .nav-toggle { display: inline-flex; }

  /* The bar is what the panel hangs from. */
  .navbar[data-nav-enhanced] .container { position: relative; }

  .navbar[data-nav-enhanced] .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1rem;
    background: #ffffff;
    border-bottom: 1px solid var(--renobalt-border, hsl(20, 5.9%, 90%));
    box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.25);
  }

  .navbar[data-nav-enhanced]:has(.nav-toggle[aria-expanded="true"]) .menu {
    display: flex;
  }

  .navbar[data-nav-enhanced] .menu a {
    display: block;
    padding: 0.75rem 2rem;
    border-radius: 0;
    font-size: 1rem;
  }

  /* In the bar a CTA item is a green button; stacked, it reads better as a row
     like the others, inset to line up with them. */
  .navbar[data-nav-enhanced] .menu li.cta a {
    display: inline-block;
    margin: 0.5rem 2rem 0;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
  }
}

/* kontaktai-cta.css */
/* kontaktai-cta.css */
#nav-contact-1 a {
  background: var(--renobalt-primary, hsl(108, 48%, 24%));
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
}

#nav-contact-1 a:hover {
  background: var(--renobalt-accent-1, hsl(102, 28%, 36%));
  color: #ffffff;
}

/* In the mobile panel the items are full-width rows; a button that ran edge to
   edge would read as a band rather than a button, so it stays inset. */
@media (max-width: 812px) {
  .navbar[data-nav-enhanced] #nav-contact-1 a {
    display: inline-block;
    margin: 0.5rem 2rem 0;
    padding: 0.5rem 1.25rem;
  }
}

/* cookie.css */
/* Cookie consent bar — accept on the left, decline on the right,
   with an outlined decline button. */

/* The order swap is done with flex `order`, not markup: the page renders
   decline first and a stylesheet cannot move it, but the row is a flex
   container so the visual order is ours to set. */
.cookie-consent-actions .btn[data-cookie-accept]  { order: 1; }
.cookie-consent-actions .btn[data-cookie-decline] { order: 2; }

/* Decline: white ground, accent border. Same padding, font-size and weight as
   the accept button beside it — equal reach and equal legibility is what keeps
   the bar compliant, not the two looking identical. */
.cookie-consent-actions .btn[data-cookie-decline] {
  background: #fff;
  border-color: var(--color-accent, #0ea5e9);
  color: var(--color-fg, #0f172a);
}

.cookie-consent-actions .btn[data-cookie-decline]:hover {
  background: var(--color-primary-soft, #eef2ff);
  border-color: var(--color-accent, #0ea5e9);
}