/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Foundation
Brand design tokens. Loaded first so every layer below can use the
--pdy-* custom properties (palette, type, spacing, gradients).
*/

/* Podymos brand tokens — single source of truth for colour, type, spacing.
   Palette is exact per CLAUDE.md. Extra shades exist only to build the
   approved gradients and hairlines; they are never used as flat fills. */

:root {
  /* Primary palette */
  --pdy-purple: #1C1024;
  --pdy-purple-light: #372047;
  --pdy-teal: #52ACA4;
  --pdy-white: #FFFFFF;
  --pdy-grey-light: #F6F6F6;
  --pdy-grey: #EDEDED;

  /* Secondary — use sparingly */
  --pdy-coral: #FF6359;   /* CTA buttons ONLY */
  --pdy-orange: #E58D28;  /* small accents + outlined numerals ONLY */

  /* Text */
  --pdy-text: #372047;          /* body copy on light backgrounds */
  --pdy-text-muted: #5D5863;    /* secondary / supporting text */
  --pdy-text-on-dark: #FFFFFF;

  /* Approved gradients */
  --pdy-grad-dark: linear-gradient(135deg, #1C1024 0%, #372047 100%);
  --pdy-grad-grey: linear-gradient(135deg, #F6F6F6 0%, #EDEDED 100%);
  /* Two-tone heading keyword fill (orange -> teal), per live homepage */
  --pdy-grad-key: linear-gradient(90deg, #E58D28 0%, #52ACA4 100%);
  /* Hero overlay — dark purple over a background photo. Darker on the left for
     text legibility, lighter on the right so the image shows through. No tint. */
  --pdy-hero-overlay: linear-gradient(105deg, rgba(28,16,36,0.95) 0%, rgba(28,16,36,0.88) 40%, rgba(28,16,36,0.7) 70%, rgba(28,16,36,0.55) 100%);

  /* Hairlines & dividers */
  --pdy-hairline: rgba(28, 16, 36, 0.12);       /* on light */
  --pdy-hairline-dark: rgba(255, 255, 255, 0.14); /* on dark */
  --pdy-hairline-width: 1px;

  /* Typography */
  --pdy-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --pdy-weight-light: 300;
  --pdy-weight-regular: 400;
  --pdy-weight-semibold: 600;
  --pdy-weight-bold: 700;

  /* Spacing scale (8px base) */
  --pdy-space-1: 8px;
  --pdy-space-2: 16px;
  --pdy-space-3: 24px;
  --pdy-space-4: 40px;
  --pdy-space-5: 64px;
  --pdy-space-6: 96px;
  --pdy-section-y: var(--pdy-space-6); /* default vertical section rhythm */

  /* Radii — restrained; editorial leans on hairlines, not rounded cards */
  --pdy-radius: 4px;
  --pdy-radius-lg: 8px;
}

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
}

/* Lists */

ul,
ol {
  margin: 0 0 1.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }

/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Brand type + editorial primitives — layered on top of the element base */

/* Brand typography — Open Sans, Light by default.
   Sits after elements/_typography.css so it sets the brand layer on top of
   the boilerplate base. Heading key words use the gradient+italic .tt helper
   (see _primitives.css). No Semibold on headings; emphasis is the gradient. */

body {
  font-family: var(--pdy-font);
  font-weight: var(--pdy-weight-light);
  color: var(--pdy-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pdy-font);
  font-weight: var(--pdy-weight-light);
  color: var(--pdy-purple);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p, li {
  font-weight: var(--pdy-weight-light);
}

/* Bold inside body copy stays a normal-weight emphasis tool, never the
   heading gradient — keeps the two-tone treatment to headings only. */
strong, b {
  font-weight: var(--pdy-weight-semibold);
}

a {
  color: var(--pdy-teal);
}
/* Editorial design primitives — the reusable parts every module is built from.
   Direction: outlined numerals, eyebrow labels, two-tone headings, hairline
   dividers, joined cells, stat bands, grey break shapes. See DESIGN-NOTES.md. */

/* --- Button reset ----------------------------------------------------------
   Apply to <button> elements that must NOT look like buttons (accordion/FAQ
   toggles, plain text triggers) so they don't inherit the theme's button
   chrome or hover (background, border, radius, shadow). !important is used so
   it beats the theme button styles in theme-overrides.css, which load last.
   For a *custom-styled* button (e.g. pill filters) don't use this — style it
   directly and lock its hover/active states instead. */
.pdy-no-btn,
.pdy-no-btn:hover,
.pdy-no-btn:focus,
.pdy-no-btn:active {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* --- Heading key words: two treatments, headings only ----------------------
   1) HERO / HEADER — gradient + italic, SINGLE weight (stays Light, no
      weight change). Author as: <h1>Great <span class="tt">marketing</span></h1>
   2) ALL OTHER SECTIONS — key words shift to Semibold (600), NOT italic,
      optionally a colour. Author as:
      <h2>Work with a team <strong class="pdy-hl">dedicated to MedTech</strong></h2>
   (matches the current site's <strong class="teal"> pattern). */

/* Hero/header gradient italic — weight unchanged so the hero keeps one weight */
.tt {
  font-weight: var(--pdy-weight-light);
  font-style: italic;
  background: var(--pdy-grad-key);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Other-section highlight — Semibold + colour, no italic, no gradient */
.pdy-hl {
  font-weight: var(--pdy-weight-semibold);
  font-style: normal;
  color: var(--pdy-teal);
}
/* Colour variants for the highlight (default is teal above) */
.pdy-hl--purple { color: var(--pdy-purple); }
.pdy-hl--dark { color: var(--pdy-purple); }
.pdy-hl--orange { color: var(--pdy-orange); }
.pdy-section--dark .pdy-hl { color: var(--pdy-teal); }

/* --- Eyebrow label --------------------------------------------------------
   Small-caps, letter-spaced, teal. Sits above a heading. */
.pdy-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: var(--pdy-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pdy-teal);
  margin: 0 0 var(--pdy-space-2);
}
/* Orange eyebrow variant — used on the live site alongside the teal default */
.pdy-eyebrow--orange { color: var(--pdy-orange); }

/* --- Section numeral ------------------------------------------------------
   Large LIGHT-weight solid orange section marker (01–12). Thin strokes, not
   bold, not outlined — sits above the section heading. */
.pdy-numeral {
  font-size: clamp(3.5rem, 8vw, 5rem);
  font-weight: var(--pdy-weight-light);
  line-height: 1;
  color: var(--pdy-orange);
  letter-spacing: 0;
}

/* --- Hairline divider ------------------------------------------------------ */
.pdy-hairline {
  border: 0;
  border-top: var(--pdy-hairline-width) solid var(--pdy-hairline);
  margin: var(--pdy-space-4) 0;
}
.pdy-section--dark .pdy-hairline {
  border-top-color: var(--pdy-hairline-dark);
}

/* --- Joined cells ---------------------------------------------------------
   One squared unit with internal hairlines, NOT separate floating cards. */
.pdy-joined {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border: var(--pdy-hairline-width) solid var(--pdy-hairline);
  border-radius: var(--pdy-radius);
  overflow: hidden;
}
.pdy-joined > * {
  padding: var(--pdy-space-3);
  border-right: var(--pdy-hairline-width) solid var(--pdy-hairline);
  border-bottom: var(--pdy-hairline-width) solid var(--pdy-hairline);
}

/* --- Stat band ------------------------------------------------------------
   Row of large orange numerals with small labels, often on a dark panel. */
.pdy-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--pdy-space-4);
}
.pdy-stat__num {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: var(--pdy-weight-bold);
  line-height: 1;
  color: var(--pdy-orange);
}
.pdy-stat__label {
  display: block;
  margin-top: var(--pdy-space-1);
  font-size: 0.875rem;
  color: var(--pdy-text-muted);
}
.pdy-section--dark .pdy-stat__label {
  color: rgba(255, 255, 255, 0.7);
}

/* --- Case study meta bar — Client / Industry / What we delivered, sits below
   the hero on the light content area (cleaner than crowding the hero). */
.pdy-casemeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: var(--pdy-space-4);
  margin: 0 0 var(--pdy-space-4);
  padding: var(--pdy-space-3) 0;
}
.pdy-casemeta__item { margin: 0; }
/* Vertical divider between items */
.pdy-casemeta__item + .pdy-casemeta__item {
  padding-left: var(--pdy-space-4);
  border-left: var(--pdy-hairline-width) solid var(--pdy-hairline);
}
.pdy-casemeta__label {
  display: block;
  font-size: 0.72rem;
  font-weight: var(--pdy-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pdy-teal);
  margin: 0 0 4px;
}
.pdy-casemeta__value {
  margin: 0;
  color: var(--pdy-purple);
  font-size: 0.95rem;
  max-width: 26ch;
}

/* --- Hero: background image behind a dark-purple gradient ------------------
   Set the photo on .pdy-hero (background-image); ::before lays the purple
   gradient over it for legibility. No teal/blue tint. Header sits as overlay. */
.pdy-hero {
  position: relative;
  background-color: var(--pdy-purple);
  background-size: cover;
  background-position: center;
  color: var(--pdy-white);
}
.pdy-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pdy-hero-overlay);
  z-index: 0;
}
.pdy-hero > * {
  position: relative;
  z-index: 1;
}

/* --- Section surfaces & break shapes -------------------------------------- */
.pdy-section--dark {
  background: var(--pdy-grad-dark);
  color: var(--pdy-text-on-dark);
}
.pdy-section--dark h1,
.pdy-section--dark h2,
.pdy-section--dark h3,
.pdy-section--dark h4 {
  color: var(--pdy-text-on-dark);
}
.pdy-section--break {
  background: var(--pdy-grad-grey);
}

/* --- Buttons --------------------------------------------------------------
   Primary CTA = coral (CTA only). Secondary solid = purple. Shared by modules. */
.pdy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pdy-font);
  font-weight: var(--pdy-weight-semibold);
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  padding: 14px 30px;
  border: 0;
  border-radius: var(--pdy-radius-lg);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pdy-btn--cta {
  background: var(--pdy-coral);
  color: var(--pdy-white);
}
.pdy-btn--cta:link,
.pdy-btn--cta:visited,
.pdy-btn--cta:focus,
.pdy-btn--cta:active { color: var(--pdy-white); text-decoration: none; }
.pdy-btn--cta:hover {
  background: #E8524A;
  color: var(--pdy-white);
  text-decoration: none;
}
.pdy-btn--primary {
  background: var(--pdy-purple);
  color: var(--pdy-white);
}
.pdy-btn--primary:hover {
  background: var(--pdy-purple-light);
  color: var(--pdy-white);
}

/* --- Secondary CTA: text + arrow line --------------------------------------
   Not a filled button. Plain Semibold text with a horizontal arrow-line beside
   it; hover turns coral and slides the arrow. (Primary CTA stays the coral
   filled button.) Matches the proposal's .btn-secondary.
   Author as: <a class="pdy-link">Visit Podymos<span class="pdy-link__arrow"></span></a> */
.pdy-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pdy-font);
  font-weight: var(--pdy-weight-semibold);
  font-size: 0.95rem;
  color: var(--pdy-purple);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.pdy-link__arrow {
  flex: none;
  width: 26px;
  height: 14px;
  background: currentColor;
  transition: transform 0.2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17 8l4 4m0 0l-4 4m4-4H3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17 8l4 4m0 0l-4 4m4-4H3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pdy-link:hover { color: var(--pdy-coral); }
.pdy-link:hover .pdy-link__arrow { transform: translateX(4px); }
.pdy-section--dark .pdy-link { color: var(--pdy-white); }
.pdy-section--dark .pdy-link:hover { color: var(--pdy-coral); }

/* --- Asymmetric editorial two-column ---------------------------------------
   Intro prose left, structured/stepped list right. */
.pdy-editorial {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--pdy-space-5);
  align-items: start;
}
@media (max-width: 767px) {
  .pdy-editorial { grid-template-columns: 1fr; gap: var(--pdy-space-3); }
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Header DND sections */

.header .dnd-section {
  padding: 0;
}

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
}

.header__row-1 {
  padding-top: 1rem;
}

.header__row-1,
.header__row-2 {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
  }

  .header__column {
    position: relative;
  }

  .header__row-1 {
    padding-top: 0;
  }

  .header__row-2 {
    justify-content: center;
    padding: 1.05rem;
  }
}

/* Navigation skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Logo */

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: auto;
  max-width: 200px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .header__logo {
    margin: 0 auto;
    width: 100%;
  }
}

.header__logo img {
  max-width: 100%;
}

.header__logo .logo-company-name {
  font-size: 1.167rem;
  margin-top: 0.7rem;
}

.header__logo--main {
  padding-top: 1rem;
}

/* Search bar */

.header__search {
  padding: 0 1rem;
  width: auto;
}



  .hs-search-field__form {
    position: relative;
  }

  .header__search .hs-search-field__label {
    flex-basis: auto;
  }



.header__search .hs-search-field__input {
  
  height: 45px;
  padding: 0 0.7rem;
}



  .header__search .hs-search-field__button {
    padding: 0;
    fill: #000;
    background-color: transparent;
    border: none;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .header__search .hs-search-field__button svg {
    height: 25px;
  }


.header__search .hs-search-field--open .hs-search-field__input {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  max-width: 100%;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: #FFF;
  border: 2px solid #D1D6DC;
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid #D1D6DC;
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: #494A52;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

@media (min-width: 767px) {
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search label {
    margin: 0 1rem 0 0;
  }

  .header__search .hs-search-field__input {
    width: auto;
  }
}

@media (max-width: 767px) {
  .header__search {
    border-top: 2px solid #CED4DB;
    order: 1;
    padding: 1.05rem;
  }
}

/* Language switcher */

.header__language-switcher {
  cursor: pointer;
  padding-right: 1.4rem;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

.header__language-switcher .lang_list_class {
  border: 2px solid;
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  display: block;
  left: calc(100% - 24px);
  opacity: 0;
  min-width: 100px;
  padding-top: 0;
  text-align: left;
  top: 100%;
  transition: opacity 0.3s;
  visibility: hidden;
}

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  transition: opacity 0.3s;
  visibility: visible;
}

.header__language-switcher .lang_list_class:before {
  left: 70%;
  top: -25px;
}

.header__language-switcher .lang_list_class:after {
  left: 70%;
  top: -22px;
}

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  transition: 0.3s;
}

.header__language-switcher .lang_list_class li {
  border: none;
  font-size: 18px;
  padding: 0.35rem 0.7rem;
}

.header__language-switcher .lang_list_class li:first-child {
  border-radius: 6px 6px 0 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.header__language-switcher .lang_list_class li:hover {
  transition: background-color 0.3s;
}

.header__language-switcher--label {
  display: flex;
  position: relative;
}

.header__language-switcher--label-current {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  margin-bottom: 0.175rem;
  margin-left: 0.7rem;
}

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #494A52;
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

@media (max-width: 767px) {
  .header__language-switcher {
    border-top: 2px solid #CED4DB;
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    left: 30px;
    opacity: 1;
    padding: 0 1.05rem;
    top: 0;
    visibility: visible;
  }

  .header__language-switcher .lang_list_class li {
    background-color: inherit;
    font-size: 0.917rem;
  }

  .header__language-switcher--label-current {
    display: none;
  }

  .header__language-switcher .globe_class {
    background-image: none;
  }

  .header__language-switcher .lang_list_class li:hover{
    background-color: inherit;
  }

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }
    /* V1 lang switcher updates to keep "in line" w/ v0 mobile styles */
    .header__language-switcher .hs-language-switcher__menu {
        display: block;
        box-shadow:none!important;
        background: transparent;
    }
    .header__language-switcher .hs-language-switcher__menu a {
        font-size: 20px!important;
    }
    .header__language-switcher .hs-language-switcher__button {
        display: none;
    }
  }

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 767px) {
  .header__navigation,
  .header__search,
  .header__language-switcher {
    display: none;
    width: 100%;
  }

  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    background-color: #F8FAFC;
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }

  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    cursor: pointer;
    margin: 0 5vw;
    position: relative;
  }

  .header__navigation--toggle.hide,
  .header__search--toggle.hide,
  .header__language-switcher--toggle.hide {
    display: none;
  }

  .header__navigation--toggle.open,
  .header__search--toggle.open,
  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__navigation--toggle:after,
  .header__search--toggle:after,
  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__navigation--toggle.open:after,
  .header__search--toggle.open:after,
  .header__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__navigation--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__navigation--toggle:after {
    content: "Menu";
  }

  .header__language-switcher--toggle {
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__language-switcher--toggle:after {
    content: "Language";
  }

  .header__search--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__search--toggle:after {
    content: "Search";
  }

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

  .header__close--toggle.show {
    display: block;
  }
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}

/* Header + footer brand layer — must load after the component base so it
   refreshes the boilerplate chrome to the Podymos brand. */

/* Header & footer brand layer.
   Loaded AFTER components/_header.css so it refreshes the boilerplate header
   and footer to the Podymos brand. Structure is unchanged — this is colour,
   type, and spacing consistency only. */

/* ============================ HEADER ============================ */

.header {
  background: var(--pdy-white);
  border-bottom: var(--pdy-hairline-width) solid var(--pdy-hairline);
  font-family: var(--pdy-font);
}

.header__container {
  align-items: center;
  gap: var(--pdy-space-4);
  padding-top: var(--pdy-space-3);
  padding-bottom: var(--pdy-space-3);
}
/* Keep the header a stable, vertically-centred single row */
.header__column { display: flex; align-items: center; }
.header__row-2 { align-items: center; }
/* The nav <ul> inherits the global list bottom-margin — reset it so the nav
   doesn't sit low or shift as the row reflows. */
.header .menu,
.header .menu--desktop,
.header .header__navigation ul {
  margin: 0 !important;
}
@media (min-width: 768px) {
  .header__container { flex-wrap: nowrap; }
  .header__column { width: auto; }
  .header__row-2 { gap: var(--pdy-space-2); }
}

.header__logo,
.header__logo--main {
  padding-top: 0;
  max-width: 300px;
}
/* Logo height (2x previous) */
.header__logo img {
  max-height: 80px;
  width: auto;
}

/* Primary nav links — sentence case, regular weight (matches live header) */
/* .header prefix + !important so these win over the menu module's own CSS,
   whichever loads last. */
.header .menu__item--depth-1 {
  text-transform: none !important;
}
.header .menu__link {
  font-family: var(--pdy-font);
  font-weight: var(--pdy-weight-light);
  color: var(--pdy-purple);
  letter-spacing: 0;
  transition: color 0.2s ease;
}
/* Bulletproof nav sizing — high specificity + child span, beats the menu
   module and any inherited base. */
.body-wrapper .header .menu__link,
.body-wrapper .header .menu__item--depth-1 > .menu__link,
.body-wrapper .header .menu__link span {
  font-size: 16px !important;
  line-height: 1.4 !important;
}
.menu__link:hover,
.menu__link:focus {
  color: var(--pdy-teal);
}
.menu__link--active-link,
.menu__link--active-branch {
  color: var(--pdy-teal);
  font-weight: var(--pdy-weight-semibold);
}
.menu__item--depth-1 > .menu__link--active-link::after {
  background: var(--pdy-teal);
}

/* Dropdowns */
.menu__submenu {
  background: var(--pdy-white);
  border: var(--pdy-hairline-width) solid var(--pdy-hairline);
  box-shadow: 0 10px 26px rgba(28, 16, 36, 0.08);
}
.menu__submenu .menu__item {
  border-bottom-color: var(--pdy-hairline);
}
.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus {
  background: var(--pdy-grey-light) !important;
  color: var(--pdy-teal) !important;
}

/* Header CTA button — add a button/CTA module into the header DnD area and it
   inherits this. Coral, primary-CTA only. */
.header__cta,
.header__cta a,
.header .header-cta .hs-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pdy-coral);
  color: var(--pdy-white);
  font-family: var(--pdy-font);
  font-weight: var(--pdy-weight-semibold);
  font-size: 13px;
  text-decoration: none;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--pdy-radius-lg);
  transition: background 0.2s ease;
}
.header__cta:hover,
.header__cta a:hover,
.header .header-cta .hs-button:hover {
  background: #E8524A;
  color: var(--pdy-white);
}

/* Overlay variant — transparent header over a dark hero, white nav.
   Add class "header--overlay" to <header> on hero pages. */
/* Transparent overlay over a dark hero. !important + .body-wrapper prefix so it
   beats the HubSpot "header background colour" theme setting (which otherwise
   renders the header solid and covers the hero). */
/* Overlay applies from first paint via the server-rendered body class
   `pdy-overlay-header` (no JS, so the header doesn't jump in/out of flow on load).
   The `.header--overlay` class is kept as an equivalent JS-applied fallback. */
.body-wrapper .header--overlay,
.header--overlay,
.pdy-overlay-header .header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  z-index: 1000;
}
/* Logo turns white on a dark/overlay hero (default header keeps the colour logo) */
.header--overlay .header__logo img,
.pdy-overlay-header .header__logo img {
  filter: brightness(0) invert(1);
}
.header--overlay .menu__item--depth-1 > .menu__link,
.header--overlay .menu__link,
.header--overlay .menu__link span,
.pdy-overlay-header .menu__item--depth-1 > .menu__link,
.pdy-overlay-header .menu__link,
.pdy-overlay-header .menu__link span {
  color: var(--pdy-white) !important;
}
.header--overlay .menu__link:hover,
.header--overlay .menu__link:focus,
.header--overlay .menu__link:hover span,
.pdy-overlay-header .menu__link:hover,
.pdy-overlay-header .menu__link:focus,
.pdy-overlay-header .menu__link:hover span {
  color: var(--pdy-teal) !important;
}
/* Dropdown panels stay dark-on-white even in overlay mode */
.header--overlay .menu__submenu .menu__link,
.header--overlay .menu__submenu .menu__link span,
.pdy-overlay-header .menu__submenu .menu__link,
.pdy-overlay-header .menu__submenu .menu__link span {
  color: var(--pdy-purple) !important;
}
.header--overlay .menu__submenu .menu__link:hover,
.header--overlay .menu__submenu .menu__link:hover span,
.pdy-overlay-header .menu__submenu .menu__link:hover,
.pdy-overlay-header .menu__submenu .menu__link:hover span {
  background: var(--pdy-grey-light) !important;
  color: var(--pdy-teal) !important;
}

/* ---------------------------- MOBILE HEADER ----------------------------
   Keep a single row (logo left · hamburger + CTA right) instead of the
   boilerplate column stack, and brand the open dropdown. */
@media (max-width: 767px) {
  .header .header__container {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 !important;
    gap: 12px;
  }
  .header .header__logo,
  .header .header__logo--main {
    margin: 0 !important;
    width: auto !important;
    max-width: 160px;
  }
  .header .header__logo img { max-height: 56px; }
  .header .header__column { width: auto; position: static; }
  .header .header__row-2 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 !important;
    justify-content: flex-end;
  }
  /* hamburger toggle first, CTA after */
  .header .header__navigation--toggle { order: 1; margin: 0 !important; }
  /* Remove the boilerplate "Menu" / "Search" / "Close" text labels on toggles */
  .header .header--toggle::after,
  .header .header__navigation--toggle::after,
  .header .header__close--toggle::after { content: none !important; display: none !important; }
  .header .header-cta { order: 2; }
  .header .header__cta { padding: 9px 18px; font-size: 13px; }

  /* Open dropdown — clean branded panel below the header */
  .header .header__navigation.open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-height: 0;
    background: var(--pdy-white);
    box-shadow: 0 14px 30px rgba(28, 16, 36, 0.12);
    border-top: var(--pdy-hairline-width) solid var(--pdy-hairline);
    padding: 8px 0;
    z-index: 1000;
  }
  .header .header__navigation.open .menu__item--depth-1 {
    display: block;
    width: 100%;
    border-top: var(--pdy-hairline-width) solid var(--pdy-grey);
    padding: 0;
  }
  .header .header__navigation.open .menu__item--depth-1:first-child { border-top: 0; }
  .header .header__navigation.open .menu__link {
    display: block;
    padding: 14px 24px;
    color: var(--pdy-purple) !important;
    font-size: 15px !important;
  }
  .header .header__navigation.open .menu__link:hover { color: var(--pdy-teal) !important; }
}

/* ============================ FOOTER ============================
   Dark gradient panel. Column structure: Services / Resources / Case studies /
   Company / Connect / Offices, then a badges row, hairline, and a legal row
   with policy links on the right. Weights and colours match the live footer. */

/* Flat dark footer. !important + .body-wrapper prefix so it beats the HubSpot
   "footer background colour" theme setting (which otherwise renders it light). */
.body-wrapper .footer,
.footer {
  background: var(--pdy-purple) !important;
  background-color: var(--pdy-purple) !important;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--pdy-font);
  font-weight: var(--pdy-weight-light);
}
.footer__container {
  padding-top: var(--pdy-space-5);
  padding-bottom: var(--pdy-space-3);
}

/* Column grid */
.pdy-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: var(--pdy-space-4);
}
@media (max-width: 980px) {
  .pdy-footer__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .pdy-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--pdy-space-3); }
}

/* Column headers — teal, uppercase, letter-spaced. !important + .footer prefix
   so they win over the HubSpot "footer text colour" theme setting. */
.footer .pdy-footer__head {
  color: var(--pdy-teal) !important;
  font-size: 0.78rem;
  font-weight: var(--pdy-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--pdy-space-2);
}

/* Footer links — light weight, muted white, teal on hover */
.footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer a:hover,
.footer a:focus {
  color: var(--pdy-teal);
}
.pdy-footer__col a {
  display: block;
  padding: 5px 0;
  font-size: 0.92rem;
  font-weight: var(--pdy-weight-light);
}

/* Offices block — region eyebrow, office name, address */
.footer .pdy-footer__region {
  display: block;
  color: var(--pdy-teal) !important;
  font-size: 0.68rem;
  font-weight: var(--pdy-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: var(--pdy-space-2) 0 6px;
}
.footer .pdy-footer__office {
  color: var(--pdy-white) !important;
  font-weight: var(--pdy-weight-semibold);
  font-size: 0.95rem;
}
.footer .pdy-footer__address {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: var(--pdy-weight-light);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 2px 0 0;
}

/* Certification / partner badges */
.pdy-footer__badges {
  display: flex;
  align-items: center;
  gap: var(--pdy-space-3);
  margin-top: var(--pdy-space-4);
}
.pdy-footer__badges img {
  height: 64px;
  width: auto;
}

/* Divider + legal row */
.footer hr,
.pdy-footer__rule {
  border: 0;
  border-top: var(--pdy-hairline-width) solid var(--pdy-hairline-dark);
  margin: var(--pdy-space-4) 0 var(--pdy-space-3);
}
.pdy-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pdy-space-3);
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}
.pdy-footer__legal-links {
  display: flex;
  gap: var(--pdy-space-3);
  flex-wrap: wrap;
}
.pdy-footer__legal-links a {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Headings + social fallbacks */
.footer h1,
.footer h2,
.footer h3,
.footer h4 {
  color: var(--pdy-white);
}
.footer .social-links__icon,
.footer .hs-social-follow__icon svg,
.footer .social-follow__link svg {
  transition: opacity 0.2s ease, fill 0.2s ease;
}
.footer .social-links__link:hover .social-links__icon,
.footer .hs-social-follow__link:hover svg {
  fill: var(--pdy-teal);
  opacity: 1;
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}