/*!*****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/scss/main.scss ***!
  \*****************************************************************************************************************************************/
@charset "UTF-8";
/*
 * Functions
 */
/*
 * Mixins
 */
/*
 * Global Styles
 */
@font-face {
  font-family: Manrope;
  src: url(../../assets/fonts/Manrope-400-cyrillic-ext.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Manrope;
  src: url(../../assets/fonts/Manrope-400-cyrillic.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  src: url(../../assets/fonts/Manrope-400-latin-ext.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: Manrope;
  src: url(../../assets/fonts/Manrope-400-latin.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: Manrope;
  src: url(../../assets/fonts/Manrope-500-cyrillic-ext.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Manrope;
  src: url(../../assets/fonts/Manrope-500-cyrillic.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  src: url(../../assets/fonts/Manrope-500-latin-ext.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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: Manrope;
  src: url(../../assets/fonts/Manrope-500-latin.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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: Manrope;
  src: url(../../assets/fonts/Manrope-700-cyrillic-ext.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Manrope;
  src: url(../../assets/fonts/Manrope-700-cyrillic.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  src: url(../../assets/fonts/Manrope-700-latin-ext.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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: Manrope;
  src: url(../../assets/fonts/Manrope-700-latin.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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;
  src: url(../../assets/fonts/Montserrat-400-cyrillic-ext.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Montserrat;
  src: url(../../assets/fonts/Montserrat-400-cyrillic.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Montserrat;
  src: url(../../assets/fonts/Montserrat-400-latin-ext.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
  src: url(../../assets/fonts/Montserrat-400-latin.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
  src: url(../../assets/fonts/Montserrat-700-cyrillic-ext.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Montserrat;
  src: url(../../assets/fonts/Montserrat-700-cyrillic.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Montserrat;
  src: url(../../assets/fonts/Montserrat-700-latin-ext.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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;
  src: url(../../assets/fonts/Montserrat-700-latin.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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: Outfit;
  src: url(../../assets/fonts/Outfit-300-latin-ext.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  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: Outfit;
  src: url(../../assets/fonts/Outfit-300-latin.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  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: Unbounded;
  src: url(../../assets/fonts/Unbounded-300-cyrillic-ext.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Unbounded;
  src: url(../../assets/fonts/Unbounded-300-cyrillic.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Unbounded;
  src: url(../../assets/fonts/Unbounded-300-latin-ext.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  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: Unbounded;
  src: url(../../assets/fonts/Unbounded-300-latin.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  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: Unbounded;
  src: url(../../assets/fonts/Unbounded-400-cyrillic-ext.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Unbounded;
  src: url(../../assets/fonts/Unbounded-400-cyrillic.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Unbounded;
  src: url(../../assets/fonts/Unbounded-400-latin-ext.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: Unbounded;
  src: url(../../assets/fonts/Unbounded-400-latin.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: Unbounded;
  src: url(../../assets/fonts/Unbounded-700-cyrillic-ext.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Unbounded;
  src: url(../../assets/fonts/Unbounded-700-cyrillic.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Unbounded;
  src: url(../../assets/fonts/Unbounded-700-latin-ext.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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: Unbounded;
  src: url(../../assets/fonts/Unbounded-700-latin.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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;
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
li {
  margin-block: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/*
 * Headings wrap where the design says they wrap.
 *
 * text-wrap: balance lets the browser even out line lengths, which overrides the
 * break points a fixed-width design was drawn around: a heading that reads
 * "The 5 rules of better / feedback" in Figma comes out as
 * "The 5 rules of / better feedback" on the page. Left as `wrap` so the markup
 * reproduces the design; switch a specific heading to `balance` deliberately if
 * a fluid layout needs it.
 */
h1,
h2,
h3,
h4 {
  text-wrap: wrap;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentcolor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/*
 * Breakpoints
 */
/*
 * The bar holds 1102 of content and 64 of padding in a 1296 pill; it stops
 * fitting a little above the theme's widest breakpoint, so the drawer takes over
 * where that condition starts rather than at a round number.
 */
:root {
  /*
   * =================================================
   *  Global Tokens
   * =================================================
   *
   * Every value below is the frame's own (Будтемп, frame 4207:35 at 1440).
   * Sizes that change below 1440 are written as clamp() whose middle term is the
   * design value expressed against 1440, so the frame's width reads it exactly.
   */
  /*
   * Colors
   */
  --color-black: #000;
  --color-white: #fff;
  --color-navy: #0e1734;
  --color-blue: #3a91cc;
  --color-green: #62ba47;
  --color-green-hover: #55a73c;
  --color-graphite: #4a4a4a;
  --color-line: #ababab;
  --color-muted: #9aa6b2;
  --color-address: #7a8896;
  --color-stroke: #8b8b8b;
  --color-plate: #d9d9d9;
  --color-divider: #eef1f5;
  --color-star: #ffc428;
  --color-quote: #3a4652;
  --color-author: #1a2430;
  --color-caption: #8a95a1;
  --color-avatar-from: #005492;
  --color-avatar-to: #0a5a97;
  --color-glass: rgb(255 255 255 / 50%);
  --color-glass-bar: rgb(255 255 255 / 70%);
  --color-error: #d92d20;
  --color-primary: var(--color-green);
  --color-secondary: var(--color-divider);
  /*
   * Font Sizes and the line each one is laid on
   */
  --size-display: clamp(3.5rem, 10.9372vw, 9.8433rem);
  --leading-display: 1.1667;
  --size-stat: clamp(2.75rem, 5vw, 4.5rem);
  --leading-stat: 1.1111;
  --size-h2: clamp(1.875rem, 3.3333vw, 3rem);
  --leading-h2: 1.1667;
  --leading-h2-tight: 1.0833;
  --size-h3: clamp(1.5rem, 2.2222vw, 2rem);
  --leading-h3: 1.25;
  --size-h4: clamp(1.25rem, 1.6667vw, 1.5rem);
  --leading-h4: 1.3333;
  --size-h5: 1.125rem;
  --leading-h5: 1.25rem;
  --size-h6: var(--size-h5);
  --size-md: 1rem;
  --leading-md: 1.125rem;
  --leading-flat: 1;
  --size-stars: 1rem;
  --leading-stars: 1.366rem;
  --size-initial: 0.875rem;
  --leading-initial: 1.1953rem;
  --size-author: 0.8438rem;
  --leading-author: 1.1526rem;
  --size-role: 0.7188rem;
  --leading-role: 0.9818rem;
  /*
   * Font Families
   */
  --font-primary: 'Unbounded', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  --font-slide: 'Outfit', 'Montserrat', sans-serif;
  --font-review: 'Manrope', sans-serif;
  /*
   * Font Weights
   */
  --font-extra-bold: 700;
  --font-bold: 700;
  --font-medium: 500;
  --font-regular: 400;
  --font-light: 300;
  --tracking-stars: 0.125rem;
  /*
   * Containers Width
   */
  --container-pad: 16px;
  --container-sm: 980px;
  --container-md: 1232px;
  --container-lg: 1296px;
  /*
   * Spacing Scale
   */
  --space-none: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-35: 35px;
  --space-sm: clamp(24px, 3.3333vw, 48px);
  --space-md: clamp(48px, 5.8333vw, 84px);
  --space-lg: clamp(64px, 8.3333vw, 120px);
  --space-xl: clamp(96px, 11.1111vw, 160px);
  /* The frame opens 84 between every band. */
  --rhythm: var(--space-md);
  /*
   * Border Radius
   */
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 48px;
  --radius-disc: 50%;
  /*
   * Transitions
   */
  --transition-base: all 0.3s ease;
  --transition-colors: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  /*
   * Strokes
   *
   * Figma strokes these inside the box, so they are painted as an inset shadow and
   * take no room: a real border would make every card two pixels larger.
   */
  --stroke-card: inset 0 0 0 1px var(--color-stroke);
  --stroke-glass: inset 0 0 0 1px var(--color-white);
  /*
   * Shadows and blurs
   *
   * A Figma background blur is a radius and CSS takes a standard deviation, so the
   * glass lengths are the frame's radius halved; the layer blurs are the radius
   * over 2.35, the ratio measured on TheSkinPlaza (R124). Neither is the design's
   * own number - they are calibrations, and they stay here in one place.
   */
  --shadow-float: 0 11px 24px rgb(14 23 52 / 10%);
  --blur-glass: blur(10px);
  --blur-haze: blur(40px);
  --blur-haze-layer: blur(21px);
  --blur-glow: blur(48px);
}

html {
  caret-color: var(--color-navy);
}

body {
  background: var(--color-white);
  color: var(--color-navy);
  font-size: var(--size-md);
  font-family: var(--font-secondary);
  font-weight: var(--font-regular);
  line-height: var(--leading-md);
  margin: 0;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

main {
  min-height: 70vh;
  min-height: 70dvh;
}

::selection {
  background-color: var(--color-blue);
  color: var(--color-white);
}

:target {
  scroll-margin-block: 128px;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

/*
 * Inner pages — canvas palette.
 *
 * :root stays the homepage Figma tokens. Everything under body:not(.front-page)
 * uses the inner mockup (Manrope, #3a8dcc / #35a94b / #f6f8fa / #e2e8ee,
 * 1228 × 54). Header and footer keep reading :root so the home chrome is
 * unchanged. Content column and in-page buttons pick up the inner values.
 */
body:not(.front-page) {
  --inner-blue: #3a8dcc;
  --inner-green: #35a94b;
  --inner-green-hover: #2e9642;
  --inner-ink: #1f2c37;
  --inner-body: #2a3742;
  --inner-lead: #6f7c88;
  --inner-muted: #7b8894;
  --inner-accent: #2e6ca8;
  --inner-link: #3a7cb8;
  --inner-line: #e2e8ee;
  --inner-band: #f6f8fa;
  --inner-chip: #eef4f8;
  --inner-page: #eef1f5;
  --inner-crumb: #e5eaef;
  --inner-max: 1228px;
  --inner-gutter: 54px;
  background: var(--inner-page);
  color: var(--inner-body);
  font-family: var(--font-review);
}
body:not(.front-page) ::selection {
  background-color: var(--inner-green);
}
body:not(.front-page) .section-title {
  font-family: var(--font-review);
  font-weight: 500;
  color: var(--inner-blue);
}
body:not(.front-page) main .container,
body:not(.front-page) .breadcrumbs__inner {
  max-width: var(--inner-max);
  padding-inline: var(--inner-gutter);
}
body:not(.front-page) main .button {
  gap: 9px;
  padding: 6px 6px 6px 19px;
  border-radius: 30px;
  background-color: var(--inner-green);
  font-family: var(--font-review);
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 700;
}
body:not(.front-page) main .button:hover, body:not(.front-page) main .button:focus-visible {
  background-color: var(--inner-green-hover);
}
body:not(.front-page) main .button__icon {
  width: 27px;
  height: 27px;
  color: var(--inner-ink);
}
body:not(.front-page) main .button__icon svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 980px) {
  body:not(.front-page) {
    --inner-gutter: 22px;
  }
}
/*
 * Typography
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-regular);
  line-height: var(--leading-h2);
}

/* The band headings: Unbounded 48/56 in the brand blue. */
.section-title {
  font-family: var(--font-primary);
  font-size: var(--size-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-regular);
  color: var(--color-blue);
}

ul, ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

mark {
  background-color: inherit;
  color: inherit;
}

/*
 * Layout
 */
.box {
  padding: 2rem;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}
@media (max-width: 390px) {
  .box {
    padding: 1.5rem;
  }
}

/*
 * Cluster Layout
 *
 * https://codepen.io/Roma13012003/pen/wBvpRzg
 */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 1rem);
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/*
 * Container
 *
 * The frame's column is 1232 with 104 either side at 1440; the gutter below that is
 * the theme's own and sits outside the column rather than eating into it.
 */
.container {
  margin-inline: auto;
  padding-inline: var(--container-pad);
  max-width: calc(var(--container-md) + var(--container-pad) * 2);
}

.container-sm {
  margin-inline: auto;
  padding-inline: var(--container-pad);
  max-width: calc(var(--container-md) + var(--container-pad) * 2);
  max-width: calc(var(--container-sm) + var(--container-pad) * 2);
}

.container-lg {
  margin-inline: auto;
  padding-inline: var(--container-pad);
  max-width: calc(var(--container-md) + var(--container-pad) * 2);
  max-width: calc(var(--container-lg) + var(--container-pad) * 2);
}

/*
 * Add spacings between elements with a single class
 *
 * https://codepen.io/Roma13012003/pen/gbOoQqO
 */
.flow > * + * {
  margin-top: var(--flow-space, 1rem);
}

.flow-recursive * + * {
  margin-top: var(--flow-space, 1rem);
}

/*
 * Responsive Grid layout
 *
 * https://codepen.io/Roma13012003/pen/GgRyagE 
 *
 */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
  gap: var(--gap, 1rem);
}

/* Two column grid layout */
.grid[data-columns="2"] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 7.8148148148rem + 33.5802469136vw, 33rem);
}

/* Three column grid layout */
.grid[data-columns="3"] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(18rem, 33%, 20rem);
}

/* Four column grid layout */
.grid[data-columns="4"] {
  grid-template-columns: 1fr;
}
@media (min-width: 500px) {
  .grid[data-columns="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*
 * Repel Layout
 *
 * https://codepen.io/Roma13012003/pen/dPyJwpx
 */
.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap, 1rem);
}

/*
 * Section
 *
 * The frame stacks its bands with 84 between them and nothing above the first, so a
 * band's own padding is zero on top and the rhythm below. A block sets the custom
 * properties, never padding itself, so one rule here changes the rhythm at every
 * width without a specificity fight.
 */
.section {
  position: relative;
  padding-top: var(--section-pt, 0);
  padding-bottom: var(--section-pb, var(--rhythm));
  background-color: var(--section-bg, transparent);
  color: var(--section-text, inherit);
}

.section-top {
  padding-top: var(--rhythm);
}

.section-bottom {
  padding-bottom: var(--rhythm);
}

/*
 * Switcher Layout
 *
 * https://codepen.io/Roma13012003/pen/WbNdBqq
 *
 */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 1rem);
  align-items: flex-start;
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so anything greater than 2 is full width */
.switcher > :nth-child(n+3) {
  flex-basis: 100%;
}

/*
 * Parts
 */
/*
 * Button
 *
 * One button across the site: a green pill, the label, and the arrow in a white
 * disc at the end. 8 around the disc and 16 before the label make it 48 tall.
 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-lg);
  background-color: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-secondary);
  font-size: var(--size-md);
  line-height: var(--leading-md);
  font-weight: var(--font-regular);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-colors);
}
.button:hover, .button:focus-visible {
  background-color: var(--color-green-hover);
}
.button:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}
.button:disabled, .button[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.6;
}

.button__label {
  display: block;
}

.button__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-disc);
  background-color: var(--color-white);
  color: var(--color-navy);
}
.button__icon svg {
  display: block;
  width: 15px;
  height: 15px;
  transition: transform 0.3s ease;
}

.button:hover .button__icon svg,
.button:focus-visible .button__icon svg {
  transform: translate(1px, -1px) rotate(-45deg);
}

/*
 * Inner-page breadcrumbs
 */
.breadcrumbs {
  background: var(--inner-crumb, #e5eaef);
  border-bottom: 1px solid #d8dfe6;
}
.breadcrumbs__inner {
  padding-block: 11px;
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-review);
  font-size: 12.5px;
  font-weight: var(--font-medium);
  color: var(--inner-muted, #7b8894);
}
.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 9px;
}
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  opacity: 0.5;
}
.breadcrumbs__link {
  color: inherit;
}
.breadcrumbs__current {
  font-weight: 700;
  color: var(--inner-link, #3a7cb8);
}

.content > *,
.entry-content > * {
  margin-bottom: 0.5rem;
}
.content > *:first-child,
.entry-content > *:first-child {
  margin-top: 0;
}
.content .wp-block-heading,
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.entry-content .wp-block-heading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 1em;
  margin-bottom: 1rem;
}
.content h1, .content .h1,
.entry-content h1,
.entry-content .h1 {
  font-size: var(--size-h2);
}
.content h2, .content .h2,
.entry-content h2,
.entry-content .h2 {
  font-size: var(--size-h3);
}
.content h3, .content .h3,
.entry-content h3,
.entry-content .h3 {
  font-size: var(--size-h4);
}
.content h4, .content .h4,
.entry-content h4,
.entry-content .h4 {
  font-size: var(--size-h5);
}
.content h5, .content .h5,
.entry-content h5,
.entry-content .h5 {
  font-size: var(--size-h6);
}
.content h6, .content .h6,
.entry-content h6,
.entry-content .h6 {
  font-size: var(--size-md);
}
.content .wp-block-image,
.content .wp-block-video,
.content .wp-block-code,
.content .wp-block-preformatted,
.content .wp-block-verse,
.content .wp-block-table,
.content .wp-block-categories,
.content .wp-block-latest-posts,
.content .wp-block-embed,
.entry-content .wp-block-image,
.entry-content .wp-block-video,
.entry-content .wp-block-code,
.entry-content .wp-block-preformatted,
.entry-content .wp-block-verse,
.entry-content .wp-block-table,
.entry-content .wp-block-categories,
.entry-content .wp-block-latest-posts,
.entry-content .wp-block-embed {
  margin-block: 2rem;
}
.content .wp-element-caption, .content caption,
.entry-content .wp-element-caption,
.entry-content caption {
  margin-top: 0.5rem;
}
.content .wp-block-columns,
.entry-content .wp-block-columns {
  column-gap: 1rem;
  row-gap: 0;
}
.content video,
.entry-content video {
  width: 100%;
}
.content audio,
.entry-content audio {
  width: 100%;
  max-width: 500px;
}
.content strong,
.entry-content strong {
  font-weight: var(--font-bold);
}
.content .wp-block-code code,
.entry-content .wp-block-code code {
  word-break: initial;
  word-wrap: initial;
  white-space: pre;
  overflow: auto;
}
@media (max-width: 991px) {
  .content .wp-block-columns,
  .entry-content .wp-block-columns {
    flex-wrap: wrap;
  }
}

/*
 * Footer
 *
 * A navy band: the mark and the address, two lists of links, and the enquiry, spread
 * across the column with the free space split between them.
 */
.footer {
  background-color: var(--color-navy);
  color: var(--color-white);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-block: 62px var(--space-16);
}
.footer__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
}
.footer__brand {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.footer {
  /*
   * The 49-tall mark stands on the bottom of a 27-tall frame, as in the bar; the
   * negative top margin is that frame.
   */
}
.footer__logo {
  display: block;
  margin-top: -22px;
}
.footer__logo svg,
.footer__logo img {
  display: block;
  width: 199px;
  height: 49px;
}
.footer__logo .visually-hidden {
  font-family: var(--font-primary);
  font-size: 26.4088px;
  line-height: var(--leading-h2);
}
.footer {
  /* Each line of the address is its own paragraph in the frame, 8 apart. */
}
.footer__address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  font-style: normal;
  color: var(--color-address);
}
.footer__address a {
  color: var(--color-muted);
  transition: var(--transition-colors);
}
.footer__address a:hover, .footer__address a:focus-visible {
  color: var(--color-white);
}
.footer__nav {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  flex: 0 1 407px;
  min-width: 0;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 302px;
}
.footer__col--pages {
  flex: none;
  padding-top: 29px;
}
.footer__title {
  font-family: var(--font-primary);
  font-size: var(--size-h5);
  line-height: var(--leading-h5);
  font-weight: var(--font-light);
  color: var(--color-white);
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.footer__links a {
  display: block;
  color: var(--color-muted);
  transition: var(--transition-colors);
}
.footer__links a:hover, .footer__links a:focus-visible {
  color: var(--color-white);
}
.footer__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  flex: 0 1 405px;
  min-width: 0;
}
.footer__cta-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.footer__cta-title {
  max-width: 340px;
  font-family: var(--font-primary);
  font-size: var(--size-h4);
  line-height: var(--leading-h4);
  font-weight: var(--font-light);
}
.footer__cta-text {
  color: var(--color-line);
}
.footer__credit {
  text-align: center;
}
.footer__credit a {
  display: inline-block;
}
@media (max-width: 991px) {
  .footer__row {
    flex-wrap: wrap;
    row-gap: 40px;
  }
  .footer__cta {
    flex: 1 1 100%;
    max-width: 405px;
  }
}
@media (max-width: 768px) {
  .footer__inner {
    padding-top: 48px;
  }
  .footer {
    /* A tap target is 44 tall below 768; the links take it as spacing, not as a larger face. */
  }
  .footer__links {
    gap: 0;
  }
  .footer__links a {
    padding-block: 13px;
  }
  .footer__address a, .footer__credit a {
    padding-block: 13px;
    margin-block: -13px;
  }
  .footer__row {
    flex-direction: column;
  }
  .footer__logo {
    margin-top: 0;
  }
  .footer__nav {
    flex: none;
    flex-wrap: wrap;
    gap: var(--space-24) 40px;
  }
  .footer__col--pages {
    padding-top: 0;
  }
  .footer__cta {
    flex: none;
    width: 100%;
  }
}

/*
 * Form fields
 *
 * A field is global, never a block's: the phone field and the submit look the same
 * wherever a form renders, and a block's own stylesheet only places the form.
 *
 * The plugin generates the input and nothing can be written on it, so the template
 * wraps it in a shell of our own and the paint goes on the shell (R85): the white
 * pill, the ring on focus, the red hairline when refused. The input inside stays
 * transparent in every state. The validation message is laid under the shell rather
 * than inside it, so the pill never grows when a message appears.
 */
.form__row {
  display: flex;
  gap: var(--space-8);
}

.form--stack .form__row {
  flex-direction: column;
  align-items: flex-start;
  max-width: 303px;
}

.form--row .form__row {
  gap: var(--space-16);
}

.form__field {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: inset 0 0 0 1px transparent;
  transition: var(--transition-colors);
}
.form__field:has(.wpcf7-not-valid), .form__field:has(:user-invalid) {
  box-shadow: inset 0 0 0 1px var(--color-error);
}

.form--stack .form__field {
  width: 100%;
}

.form--row .form__field {
  flex: 1 1 auto;
  min-width: 0;
}

.form__field .wpcf7-form-control-wrap {
  display: block;
  position: static;
}

/*
 * A transparent hairline at rest that turns red when refused, so a refusal changes the
 * control's own border without changing its 48; the padding gives the pixel back.
 */
.form__field input {
  display: block;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  font-family: var(--font-secondary);
  font-size: var(--size-md);
  line-height: var(--leading-md);
  color: var(--color-navy);
  caret-color: var(--color-navy);
  appearance: none;
}
.form__field input::placeholder {
  color: var(--color-muted);
  opacity: 1;
}
.form__field input {
  /*
   * The ring goes on the control itself, which is exactly the shell's box: a ring on
   * the shell is invisible to anything asking the focused control what changed.
   */
}
.form__field input:focus, .form__field input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-blue);
}

.form__field input.wpcf7-not-valid,
.form__field input:user-invalid {
  border-color: var(--color-error);
}

/* The message belongs under the field, outside the box it complains about. */
.form__field .wpcf7-not-valid-tip {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: var(--space-16);
  font-size: 0.75rem;
  line-height: 1rem;
  color: #ffb4ab;
  white-space: nowrap;
}

.form__submit {
  flex: none;
}

.wpcf7 .hidden-fields-container {
  display: none;
}

.wpcf7 form .wpcf7-response-output {
  margin: var(--space-12) 0 0;
  padding: 0;
  border: 0;
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: var(--color-white);
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7-response-output:empty {
  display: none;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  color: #ffb4ab;
}

.wpcf7-spinner {
  display: none;
}

/*
 * Header
 *
 * A glass pill 1296 wide, 24 below the top of the screen, laid over the hero. It is
 * fixed from the start - the frame floats it over the band - and past its own height
 * it takes an opaque ground (sticky-header.js). It stays on screen while the page
 * scrolls.
 *
 * Inner pages (breadcrumbs and everything under them) need --header-offset so the
 * bar does not sit on the first line of copy. The home hero is drawn to go under it.
 */
:root {
  --header-offset: 104px;
}
@media (max-width: 1240px) {
  :root {
    --header-offset: 88px;
  }
}
@media (max-width: 768px) {
  :root {
    --header-offset: 76px;
  }
}

body:not(.front-page) {
  padding-top: var(--header-offset);
}

.header {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  z-index: 100;
  padding-inline: var(--container-pad);
  pointer-events: none;
}
.admin-bar .header {
  top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  max-width: var(--container-lg);
  margin-inline: auto;
  padding: var(--space-16) 32px;
  border-radius: var(--radius-pill);
  background-color: var(--color-glass-bar);
  box-shadow: var(--shadow-float);
  backdrop-filter: var(--blur-glass);
  pointer-events: auto;
  transition: var(--transition-colors);
}
.header.is-stuck .header__inner {
  background-color: var(--color-white);
}
.header {
  /*
   * The frame lays the 49-tall mark in a 31-tall frame and aligns it to the frame's
   * bottom, so the mark rises 18 above the line the bar centres on. The negative top
   * margin is that frame: the row centres a 31-tall margin box.
   */
}
.header__logo {
  flex: none;
  display: block;
  margin-top: -18px;
}
.header__logo svg,
.header__logo img {
  display: block;
  width: 199px;
  height: 49px;
}
.header__logo .visually-hidden {
  font-family: var(--font-primary);
  font-size: 26.4088px;
  line-height: var(--leading-h2);
}
.header__nav {
  display: flex;
}
.header__menu {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  /* Each item keeps 2 under its label for the underline the frame draws on hover. */
}
.header__menu > li {
  padding: var(--space-10) var(--space-10) calc(var(--space-10) + var(--space-2));
}
.header__menu a {
  position: relative;
  display: block;
  font-family: var(--font-primary);
  font-size: var(--size-h5);
  line-height: var(--leading-h5);
  font-weight: var(--font-light);
  color: var(--color-navy);
  white-space: nowrap;
  transition: var(--transition-colors);
}
.header__menu a::before {
  position: absolute;
  inset: calc(var(--space-10) * -1);
  content: "";
}
.header__menu a::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-color: currentcolor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.header__menu a:hover,
.header__menu a:focus-visible {
  color: var(--color-blue);
}
.header__menu a:hover::after,
.header__menu a:focus-visible::after {
  transform: scaleX(1);
}
.header__aside {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.header__toggle {
  display: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-navy);
  cursor: pointer;
}
.header__toggle-bar, .header__toggle-bar::before, .header__toggle-bar::after {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background-color: currentcolor;
}
.header__toggle-bar {
  top: 21px;
}
.header__toggle-bar::before, .header__toggle-bar::after {
  left: 0;
  content: "";
}
.header__toggle-bar::before {
  top: -7px;
}
.header__toggle-bar::after {
  top: 7px;
}
@media (max-width: 1240px) {
  .header__nav, .header__aside {
    display: none;
  }
  .header__toggle {
    display: inline-block;
  }
  .header__inner {
    padding: var(--space-10) var(--space-16) var(--space-10) var(--space-24);
  }
}
@media (max-width: 768px) {
  .header {
    top: var(--space-12);
  }
  .admin-bar .header {
    top: calc(var(--space-12) + var(--wp-admin--admin-bar--height, 0px));
  }
  .header__logo {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0;
  }
  .header__logo svg,
  .header__logo img {
    width: 156px;
    height: 38px;
  }
}

/*
 * Language pair
 */
.lang-switch {
  display: flex;
  align-items: center;
}
.lang-switch__item {
  display: block;
  padding: var(--space-10) var(--space-4) calc(var(--space-10) + var(--space-2));
  border-radius: var(--radius-lg);
  font-family: var(--font-primary);
  font-size: var(--size-h5);
  line-height: var(--leading-h5);
  font-weight: var(--font-light);
  color: var(--color-line);
  transition: var(--transition-colors);
}
.lang-switch__item span {
  display: block;
}
.lang-switch__item.is-active, .lang-switch__item:hover, .lang-switch__item:focus-visible {
  color: var(--color-navy);
}
.lang-switch {
  /* A hairline between the two that takes no room in the row, as the frame draws it. */
}
.lang-switch__divider {
  flex: none;
  width: 1px;
  height: 20px;
  margin-inline: -0.5px;
  background-color: var(--color-line);
}

/*
 * Mobile drawer
 *
 * The panel takes the white ground of the bar it slides out of and arrives from the
 * side the toggle is on.
 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  /*
   * The class's own display outranks the user agent's [hidden], so a closed drawer
   * would lie over the whole page, invisible, and take every click meant for it.
   */
}
.drawer[hidden] {
  display: none;
}
.drawer::before {
  position: absolute;
  inset: 0;
  background-color: rgba(14, 23, 52, 0.6);
  content: "";
  opacity: 0;
  transition: opacity 0.3s ease;
}
.drawer.is-open::before {
  opacity: 1;
}
.drawer__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: min(420px, 100%);
  height: 100%;
  padding: var(--space-12) var(--space-16) var(--space-24) var(--space-24);
  background-color: var(--color-white);
  color: var(--color-navy);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer.is-open .drawer__sheet {
  transform: translateX(0);
}
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 44px;
}
.drawer__logo {
  display: flex;
}
.drawer__logo svg,
.drawer__logo img {
  width: 156px;
  height: 38px;
}
.drawer__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 32px;
  line-height: 1;
  color: currentcolor;
  cursor: pointer;
}
.drawer__menu {
  display: flex;
  flex-direction: column;
}
.drawer__menu > li {
  border-bottom: 1px solid var(--color-divider);
}
.drawer__menu a {
  display: block;
  padding-block: var(--space-16);
  font-family: var(--font-primary);
  font-size: var(--size-h4);
  line-height: var(--leading-h4);
  font-weight: var(--font-light);
}
.drawer__menu a:hover,
.drawer__menu a:focus-visible {
  color: var(--color-blue);
}
.drawer__menu .sub-menu {
  display: none;
  padding-block-end: var(--space-12);
}
.drawer__menu .menu-item.is-open > .sub-menu {
  display: block;
}
.drawer__menu .sub-menu a {
  padding-block: var(--space-8);
  font-size: var(--size-md);
  line-height: var(--leading-md);
}
.drawer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-block-start: auto;
}
.drawer .lang-switch__item {
  padding-block: var(--space-12);
}

body.has-drawer {
  overflow: hidden;
}

ul.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}
ul.page-numbers > li a,
ul.page-numbers > li span {
  width: 40px; /*add_variable*/
  height: 40px; /*add_variable*/
  font-size: 1rem; /*add_variable*/
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-md);
  color: var(--color-nav-link); /*add_variable*/
}
ul.page-numbers > li .current,
ul.page-numbers > li a:hover {
  color: var(--color-neutral-100); /*add_variable*/
}

.popup {
  border: 0;
  max-width: 40rem;
  width: 100%;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.popup::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.popup__content {
  text-align: center;
}
.popup__form {
  margin-top: 2rem;
}
.popup__close {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  text-align: inherit;
  background: transparent;
  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;
  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.popup__close svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* width */
::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--color-secondary); /* track = background color */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-primary); /* thumb = contrasting color */
  border: 2px solid var(--color-primary); /* adds separation */
  border-radius: var(--radius-md);
}

main.not-found {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.not-found .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.not-found__content h1 {
  font-size: clamp(6rem, 2.1481481481rem + 15.8024691358vw, 14rem);
  line-height: var(--leading-flat);
  font-weight: var(--font-extra-bold);
  color: var(--color-primary);
}

/*
 * Blocks
 */
/*
 * Hero
 *
 * The brand gradient edge to edge, the name set huge, and a cut-out tower standing
 * in front of the end of the name. A frosted white haze lies across the very top,
 * behind the floating bar.
 */
.hero {
  position: relative;
  overflow: clip;
  margin-bottom: var(--rhythm);
  background: linear-gradient(129.4deg, var(--color-navy) 14.43%, var(--color-blue) 79.14%);
  color: var(--color-white);
}
.hero__decor {
  position: absolute;
  top: -28px;
  left: 0;
  width: 420px;
  height: 480px;
  pointer-events: none;
}
.hero__decor svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero {
  /*
   * The frame declares a half-strength white gradient here, and renders far more
   * than half: its 80 background blur reaches past the top of the frame and pulls
   * the white surround in, which a browser's blur - clamped at the screen's edge -
   * never does, and from the frame's sides as much as from its top. So the stops are
   * not the frame's; they are fitted to its render, which reads about 0.62 white at
   * the top of the middle and 0.76 at the corners, and has gone by y 120 in the middle
   * while the corners still carry 0.24 at y 115.
   */
}
.hero__haze {
  position: absolute;
  z-index: 1;
  top: -57px;
  left: -43px;
  right: -43px;
  height: 178px;
  background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.3) 43px, transparent 173px), linear-gradient(270deg, transparent 0, rgba(255, 255, 255, 0.3) 43px, transparent 173px), linear-gradient(180deg, rgba(255, 255, 255, 0.7) 32%, rgba(255, 255, 255, 0) 99%);
  filter: var(--blur-haze-layer);
  backdrop-filter: var(--blur-haze);
  pointer-events: none;
}
.hero__inner {
  padding-block: clamp(136px, 16.9444vw, 244px) clamp(48px, 7.1528vw, 103px);
}
.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__title {
  font-family: var(--font-primary);
  font-size: var(--size-display);
  line-height: 1.1683;
  font-weight: var(--font-regular);
  color: var(--color-white);
}
.hero__text {
  max-width: 396px;
  margin-top: var(--space-24);
}
.hero__button {
  margin-top: clamp(32px, 7.8472vw, 113px);
}
.hero {
  /*
   * The tower stands on the band's floor and runs out of the screen's right edge at
   * every width: the frame puts its right edge on the screen's and lets its foot 35
   * below the band (35 of 871 wide), so it is pinned there rather than hung from the
   * top - hung from the top it floated off the floor below 1440 and stopped short of
   * the edge above it.
   */
}
.hero__media {
  position: absolute;
  right: 0;
  bottom: calc(min(60.4861vw, 871px) * -0.0402);
  width: min(60.4861vw, 871px);
}
.hero__glow {
  position: absolute;
  top: 3.9655%;
  left: 26.6376%;
  width: 21.8848%;
  aspect-ratio: 190.6/185.3;
  border-radius: var(--radius-disc);
  background-color: var(--color-blue);
  filter: var(--blur-glow);
  pointer-events: none;
}
.hero__image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .hero__inner {
    padding-bottom: 0;
  }
  .hero__media {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% + var(--container-pad) * 2);
    max-width: none;
    margin: var(--space-24) calc(var(--container-pad) * -1) -6%;
  }
}

/*
 * Stats
 *
 * Four figures across the column over a faint line grid. The frame's band is 256
 * tall with the row 66 from its top and 67 from its bottom.
 */
.stats {
  --section-pt: 66px;
  --section-pb: calc(67px + var(--rhythm));
  overflow-x: clip;
}
.stats__inner {
  position: relative;
}
.stats__decor {
  position: absolute;
  top: -104px;
  left: calc(var(--container-pad) + 20px);
  width: 1195px;
  height: 338px;
  pointer-events: none;
}
.stats__decor svg {
  display: block;
  width: 100%;
  height: 100%;
}
.stats__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}
.stats__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-11);
  text-align: center;
}
.stats__value {
  font-family: var(--font-primary);
  font-size: var(--size-stat);
  line-height: var(--leading-stat);
  font-weight: var(--font-bold);
  color: var(--color-blue);
}
.stats__label {
  font-family: var(--font-primary);
  font-size: var(--size-h4);
  line-height: var(--leading-h4);
  font-weight: var(--font-light);
  color: var(--color-navy);
}
@media (max-width: 991px) {
  .stats {
    --section-pt: 40px;
    --section-pb: calc(40px + var(--rhythm));
  }
  .stats__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
  .stats__decor {
    top: -78px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/*
 * Services wheel
 *
 * Numbers from the frame at 1440: the window under the heading is 654 tall; the
 * card column is 400 wide and its top stands 85 into the window; the wheel's centre
 * is 868.2 below the window's top, which puts the column's top 783.2 above it. Each
 * card turns about that centre by its own share of the circle, minus the wheel's
 * running turn - the same rigid rotation as turning one wheel, written per card so
 * the angle stays a number the script can keep counting past a full circle.
 *
 * Below the frame's width the wheel is drawn smaller as a whole, never re-laid:
 * a card and its neighbours are one composite, and moving them separately draws a
 * different wheel.
 */
.services {
  --s: 1;
  --wheel-turn: 0;
  /*
   * The fade reaches 102 into the band below, and the frame paints that band over
   * it; isolating this band keeps the fade's own stacking under the next one.
   */
  isolation: isolate;
  overflow-x: clip;
}
.services__title {
  margin-bottom: var(--space-24);
}
.services__carousel {
  position: relative;
}
.services {
  /*
   * The title and copy stand to the left of the top card, 420 left of it and 40
   * above it, and do not turn.
   */
}
.services__panels {
  position: absolute;
  z-index: 2;
  top: 45px;
  left: calc(50% - 618px);
  display: grid;
  width: 100%;
  max-width: 396px;
}
.services__panel {
  grid-area: 1/1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.services__panel.is-active {
  opacity: 1;
  visibility: visible;
}
.services__panel-title {
  font-family: var(--font-primary);
  font-size: var(--size-h3);
  line-height: var(--leading-h3);
  font-weight: var(--font-light);
  color: var(--color-graphite);
}
.services__panel-text {
  font-family: var(--font-slide);
  font-size: var(--size-md);
  line-height: var(--leading-md);
  font-weight: var(--font-light);
  color: var(--color-graphite);
}
.services {
  /*
   * The frame's window is 1722 wide and centred, wider than the screen, so it clips
   * top and bottom only: the column keeps its own width and the wheel runs out to
   * both edges of the screen, where the band's own clip stops it.
   */
}
.services__window {
  position: relative;
  height: calc(654px * var(--s));
  clip-path: inset(0 -100vw -60px);
}
.services__decor {
  position: absolute;
  z-index: 1;
  top: calc(45px * var(--s));
  left: calc(50% + 215px * var(--s));
  width: calc(480px * var(--s));
  height: calc(420px * var(--s));
  pointer-events: none;
}
.services__decor svg {
  display: block;
  width: 100%;
  height: 100%;
}
.services {
  /*
   * The disc the cards stand on: the component's own 2216 x 2192, its centre on the
   * column's centre line and 868.2 below the window's top. Drawn smaller below the
   * frame's width about that centre, which stays where the smaller window puts it.
   */
}
.services__wheel {
  position: absolute;
  top: calc(868.2px * var(--s) - 1096.2px);
  left: calc(50% - 1108.1px);
  width: 2216.2px;
  height: 2192.4px;
  margin: 0;
  transform: scale(var(--s));
  transform-origin: 1108.1px 1096.2px;
}
.services__slide {
  position: absolute;
  top: 313px;
  left: 910px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-35);
  width: 400px;
  transform-origin: 198.1px 783.2px;
  transform: rotate(calc((var(--i) - var(--wheel-turn)) * var(--wheel-step)));
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.services__slide:not(.is-active) {
  cursor: pointer;
}
.services__card {
  position: relative;
  width: 400px;
  height: 398px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-plate);
}
.services__card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--stroke-card);
  content: "";
  pointer-events: none;
}
.services__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  width: 100%;
  color: var(--color-navy);
  transition: var(--transition-colors);
}
.services__link:hover, .services__link:focus-visible {
  color: var(--color-blue);
}
.services__link-label {
  display: block;
}
.services__link-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-disc);
  box-shadow: inset 0 0 0 1px rgba(14, 23, 52, 0.8);
}
.services__link-icon svg {
  display: block;
  width: 15px;
  height: 15px;
}
.services {
  /* The frame shows the link under the top card only; a turned card's link is hidden. */
}
.services__slide:not(.is-active) .services__link {
  opacity: 0;
  pointer-events: none;
}
.services__link {
  transition: var(--transition-colors), opacity 0.4s ease;
}
.services {
  /*
   * The fade over the bottom edge of the window, reaching past both edges of the
   * screen. The frame declares a half-strength white with a background blur, and its
   * render is whiter than that and never grey: the cards go 0.2 white 12 above the
   * layer, 0.66 at 48 into it, 0.73 at the window's edge, and are gone by 150. A
   * browser's backdrop blur mixes the clipped cards into a grey band instead, so this
   * is a plain white wash fitted to the render. The frame's blur also smears the cards
   * 60 below the window's line, which is why the window's clip lets them run that far
   * under the wash.
   */
}
.services__fade {
  position: absolute;
  z-index: 3;
  bottom: calc(76px * var(--s) - 178px);
  left: calc(50% - 50vw - 43px);
  right: calc(50% - 50vw - 43px);
  height: 178px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.64) 27%, rgba(255, 255, 255, 0.72) 43%, rgba(255, 255, 255, 0.86) 61%, #fff 84%);
  filter: var(--blur-haze-layer);
  pointer-events: none;
}
.services {
  /*
   * Below 1200 there is no room left of the top card, so the copy moves above the
   * wheel and centres. The fade is anchored to the bottom of the window, so it
   * follows the window down without knowing how tall the copy became.
   */
}
@media (max-width: 1200px) {
  .services {
    --s: 0.85;
  }
  .services__panels {
    position: relative;
    top: auto;
    left: auto;
    margin-inline: auto;
    margin-bottom: var(--space-16);
    text-align: center;
  }
}
@media (max-width: 991px) {
  .services {
    --s: 0.75;
  }
}
@media (max-width: 768px) {
  .services {
    --s: 0.62;
  }
  .services__link {
    min-height: calc(44px / var(--s));
    font-size: calc(var(--size-md) / var(--s));
    line-height: calc(var(--leading-md) / var(--s));
  }
}

/*
 * Expertise banner
 *
 * The frame lays the photograph wider than the plate - 1269 from 27 left of it - to
 * crop a stock watermark off its bottom edge. The picture the editor holds is that
 * crop, so here it simply covers the plate; the black wash at 40% runs from the left
 * and has gone by three quarters of the photograph's own width.
 */
.expert__plate {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 530px) minmax(0, 566px);
  justify-content: space-between;
  gap: var(--space-24);
  padding: 82px 45px 75px 49px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-plate);
  color: var(--color-white);
}
.expert__photo {
  position: absolute;
  z-index: -2;
  inset: 0;
}
.expert__photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 43.64%, rgba(0, 0, 0, 0) 74.03%);
  content: "";
}
.expert__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.expert__decor {
  position: absolute;
  z-index: -1;
  top: -28px;
  left: 0;
  width: 420px;
  height: 480px;
  pointer-events: none;
}
.expert__decor svg {
  display: block;
  width: 100%;
  height: 100%;
}
.expert__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-24);
  padding-top: 29px;
}
.expert__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 530px;
}
.expert__title {
  font-family: var(--font-primary);
  font-size: var(--size-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-regular);
}
.expert__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 279px));
  gap: var(--space-20) var(--space-8);
  align-content: start;
}
.expert__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 12px 0 13px;
  border-radius: var(--radius-lg);
  background-color: var(--color-glass);
  box-shadow: var(--stroke-glass);
  backdrop-filter: var(--blur-glass);
  color: var(--color-navy);
  text-align: center;
}
.expert__icon {
  display: block;
}
.expert__icon svg,
.expert__icon img {
  display: block;
  width: 88px;
  height: 88px;
}
.expert__feature-text {
  align-self: stretch;
}
.expert__feature-title {
  align-self: stretch;
  font-family: var(--font-primary);
  font-size: var(--size-h5);
  line-height: var(--leading-h5);
  font-weight: var(--font-bold);
}
@media (max-width: 1200px) {
  .expert__plate {
    grid-template-columns: minmax(0, 1fr) minmax(0, 566px);
    padding-inline: 32px;
  }
}
@media (max-width: 991px) {
  .expert__plate {
    grid-template-columns: minmax(0, 1fr);
    padding: 48px var(--space-24) var(--space-24);
  }
  .expert__photo::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.1) 100%);
  }
  .expert__main {
    padding-top: 0;
  }
  .expert__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .expert__main {
    align-items: center;
    text-align: center;
  }
  .expert__features {
    gap: var(--space-8);
  }
  .expert__icon svg, .expert__icon img {
    width: 64px;
    height: 64px;
  }
}
@media (max-width: 425px) {
  .expert__features {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Projects
 *
 * Two columns of 509, the right one dropped 166 so the rows stagger. The drop is a
 * top margin taken back at the bottom, so every row keeps the height of one card
 * and the next row starts 119 below it - except the last card in the right column,
 * which keeps its drop and so sets where the grid ends.
 */
.projects {
  overflow-x: clip;
}
.projects__title {
  margin-bottom: var(--space-24);
}
.projects__body {
  position: relative;
}
.projects__decor {
  position: absolute;
  top: -70px;
  left: calc(50% + 57px);
  width: 480px;
  height: 420px;
  pointer-events: none;
}
.projects__decor svg {
  display: block;
  width: 100%;
  height: 100%;
}
.projects__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 509px));
  justify-content: space-between;
  column-gap: var(--space-24);
  row-gap: 119px;
}
.projects__button {
  margin-top: var(--space-24);
}
@media (max-width: 768px) {
  .projects__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .projects__button {
    margin-top: 40px;
  }
}

.project {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  /* The card leads to its project page; the anchor covers it, changing no layout. */
}
.project__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-lg);
}
.project:has(.project__link):hover .project__image {
  transform: scale(1.03);
}
.project:nth-child(even) {
  margin-top: 166px;
  margin-bottom: -166px;
}
.project {
  /*
   * The frame's grid is a fixed 1322 and its last dropped card overhangs it by 3; the
   * button below is laid from the grid's edge, so the overhang takes no room.
   */
}
.project:nth-child(even):last-child {
  margin-bottom: -3px;
}
.project__media {
  position: relative;
  aspect-ratio: 509/398;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-plate);
}
.project__media::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--stroke-card);
  content: "";
  pointer-events: none;
}
.project {
  /* stylelint-disable-next-line no-descending-specificity -- the hover rule above outranks
     this one, so source order decides nothing. */
}
.project__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.project__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.project__year {
  font-weight: var(--font-bold);
}
.project__name {
  font-family: var(--font-primary);
  font-size: var(--size-h4);
  line-height: var(--leading-h4);
  font-weight: var(--font-light);
  text-align: center;
}
@media (max-width: 991px) {
  .project:nth-child(even) {
    margin-top: 96px;
    margin-bottom: -96px;
  }
}
@media (max-width: 768px) {
  .project:nth-child(even), .project:nth-child(even):last-child {
    margin-block: 0;
  }
}

/*
 * Testimonials
 *
 * Four frosted cards in a row over the line grid, each lifted by a soft navy shadow.
 */
.testimonials {
  overflow-x: clip;
}
.testimonials__title {
  margin-bottom: var(--space-24);
}
.testimonials__body {
  position: relative;
  padding-block: 38px 22px;
}
.testimonials__decor {
  position: absolute;
  top: -38px;
  left: 20px;
  width: 1195px;
  height: 338px;
  pointer-events: none;
}
.testimonials__decor svg {
  display: block;
  width: 100%;
  height: 100%;
}
.testimonials {
  /*
   * Swiper's stylesheet stays in the document once a narrow screen has pulled it in, and
   * its `.swiper-wrapper { display: flex }` outlives the instance. Widening the window
   * then left the cards in a flex row running off the page, so the grid carries the
   * wrapper's class too and wins on weight rather than on order.
   */
}
.testimonials__row, .testimonials__row.swiper-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}
.testimonials {
  /*
   * Swiper's own stylesheet only arrives on a narrow screen, so above 991 these classes
   * are inert and the row stays the grid the frame draws.
   */
}
.testimonials__slider {
  position: relative;
}
.testimonials__pagination {
  display: none;
}
@media (max-width: 991px) {
  .testimonials {
    /* Only the track is clipped; the bullets stand outside it and keep their gap. */
  }
  .testimonials__viewport {
    overflow: hidden;
  }
  .testimonials__row, .testimonials__row.swiper-wrapper {
    display: flex;
    grid-template-columns: none;
    gap: 0;
  }
  .testimonials .review {
    height: auto;
  }
  .testimonials {
    /*
     * Swiper's own stylesheet arrives after this one and pins the bullets with
     * `.swiper-pagination-bullets.swiper-pagination-horizontal` - two classes. Only a
     * heavier selector takes them out of that absolute box and puts them under the track.
     */
  }
  .testimonials__pagination.swiper-pagination.swiper-pagination-horizontal {
    position: static;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: var(--space-24);
  }
  .testimonials__pagination.swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0;
    opacity: 1;
    background: var(--color-plate, #d5dde5);
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .testimonials__pagination.swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet-active {
    background: var(--color-green, #35a94b);
    transform: scale(1.15);
  }
  .testimonials__decor {
    left: 50%;
    transform: translateX(-50%);
  }
}

.review {
  display: flex;
}
.review__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  width: 100%;
  margin: 0;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-lg);
  background-color: var(--color-glass);
  box-shadow: var(--shadow-float);
  backdrop-filter: var(--blur-glass);
}
.review__stars {
  margin-bottom: 1px;
  font-family: var(--font-review);
  font-size: var(--size-stars);
  line-height: var(--leading-stars);
  letter-spacing: var(--tracking-stars);
  color: var(--color-star);
}
.review__quote {
  margin: 0;
  padding-bottom: 6px;
  color: var(--color-quote);
}
.review__author {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-top: auto;
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-divider);
}
.review__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-disc);
  background: linear-gradient(135deg, var(--color-avatar-from), var(--color-avatar-to));
  font-family: var(--font-review);
  font-size: var(--size-initial);
  line-height: var(--leading-initial);
  font-weight: var(--font-bold);
  color: var(--color-white);
}
.review__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.review__name {
  font-family: var(--font-review);
  font-size: var(--size-author);
  line-height: var(--leading-author);
  font-weight: var(--font-bold);
  font-style: normal;
  color: var(--color-author);
}
.review__role {
  font-family: var(--font-review);
  font-size: var(--size-role);
  line-height: var(--leading-role);
  font-weight: var(--font-medium);
  color: var(--color-caption);
}

/*
 * Consultation
 *
 * A photograph plate: the scaffolding picture - the crop the frame takes of it,
 * 116 down and 1247 wide, which leaves a stock watermark outside - under a 30% black
 * and a 40% wash from the left; the enquiry on the left, the frosted panel of
 * certificates on the right.
 */
.consultation__plate {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 569px) minmax(0, 568px);
  justify-content: space-between;
  align-items: center;
  padding: 110px 44px 109px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-plate);
  color: var(--color-white);
}
.consultation__photo {
  position: absolute;
  z-index: -2;
  inset: 0;
}
.consultation__photo::before, .consultation__photo::after {
  position: absolute;
  inset: 0;
  content: "";
}
.consultation__photo::before {
  background-color: rgba(0, 0, 0, 0.3);
}
.consultation__photo::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 19.77%, rgba(0, 0, 0, 0) 74.03%);
}
.consultation__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.consultation__decor {
  position: absolute;
  z-index: -1;
  top: -28px;
  left: 0;
  width: 420px;
  height: 480px;
  pointer-events: none;
}
.consultation__decor svg {
  display: block;
  width: 100%;
  height: 100%;
}
.consultation__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 57px;
}
.consultation__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-self: stretch;
}
.consultation__title {
  max-width: 424px;
  font-family: var(--font-primary);
  font-size: var(--size-h2);
  line-height: var(--leading-h2-tight);
  font-weight: var(--font-regular);
}
.consultation__text {
  max-width: 362px;
}
.consultation__form {
  align-self: stretch;
}
.consultation__certs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-11);
  padding-block: var(--space-16);
  border-radius: var(--radius-lg);
  background-color: var(--color-glass);
  box-shadow: var(--stroke-glass);
  backdrop-filter: var(--blur-glass);
  color: var(--color-navy);
  text-align: center;
}
.consultation__certs-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.consultation__certs-title {
  font-family: var(--font-primary);
  font-size: var(--size-h3);
  line-height: var(--leading-h3);
  font-weight: var(--font-light);
}
.consultation__certs-text {
  font-family: var(--font-primary);
  font-size: var(--size-h5);
  line-height: var(--leading-h5);
  font-weight: var(--font-light);
}
.consultation__certs-row {
  display: flex;
  gap: var(--space-14);
}
.consultation__cert {
  position: relative;
  width: 154px;
  height: 221px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-glass);
  backdrop-filter: var(--blur-glass);
}
.consultation__cert::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--stroke-glass);
  content: "";
  pointer-events: none;
}
.consultation__cert-link {
  display: block;
  height: 100%;
}
.consultation__cert-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.consultation__cert-link:hover .consultation__cert-image, .consultation__cert-link:focus-visible .consultation__cert-image {
  transform: scale(1.04);
}
@media (max-width: 1200px) {
  .consultation__plate {
    grid-template-columns: minmax(0, 1fr) minmax(0, 568px);
    gap: var(--space-24);
    padding-inline: 32px;
  }
}
@media (max-width: 991px) {
  .consultation__plate {
    grid-template-columns: minmax(0, 1fr);
    padding: 48px var(--space-24) var(--space-24);
  }
  .consultation__photo::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0) 80%);
  }
  .consultation__content {
    gap: var(--space-24);
  }
  .consultation__certs {
    padding-inline: var(--space-16);
  }
}
@media (max-width: 768px) {
  .consultation__certs-row {
    gap: var(--space-8);
    width: 100%;
    max-width: 490px;
    justify-content: center;
  }
  .consultation__cert {
    flex: 1 1 0;
    width: auto;
    max-width: 154px;
    height: auto;
    aspect-ratio: 154/221;
  }
}

/*
 * Gray About band — one mockup section (#f6f8fa, 52 / 54 / 84) split across
 * five blocks. Tokens come from _inner.scss; homepage :root is not used.
 */
.about-experience,
.stats-grid,
.about-cta,
.process,
.about-values {
  --section-bg: var(--inner-band);
}

/*
 * Page intro — inner-page eyebrow / h1 / lead
 */
.page-intro {
  --section-pt: 52px;
  --section-pb: 40px;
  --section-bg: var(--color-white);
}
.page-intro__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  font-weight: var(--font-medium);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--inner-green);
}
.page-intro__title {
  margin: 0 0 18px;
  font-family: var(--font-review);
  font-size: 52px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--inner-blue);
}
.page-intro__text {
  max-width: 640px;
  margin: 0;
  font-family: var(--font-review);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--inner-body);
}
.page-intro__text > * {
  margin: 0 0 1em;
}
.page-intro__text > :last-child {
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .page-intro {
    --section-pt: 36px;
    --section-pb: 32px;
  }
  .page-intro__title {
    font-size: 36px;
  }
}

/*
 * About experience: photo + copy + tags
 */
.about-experience {
  --section-pt: 52px;
  --section-pb: 26px;
  border-top: 1px solid var(--inner-page);
}
.about-experience__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.about-experience__media {
  min-height: 310px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, #dfe5ec, #c6d1dc);
}
.about-experience__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
}
.about-experience__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-experience__title {
  margin: 0 0 14px;
  font-family: var(--font-review);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--inner-ink);
}
.about-experience__text {
  margin: 0 0 18px;
  font-family: var(--font-review);
  font-size: 15px;
  line-height: 1.75;
  color: var(--inner-lead);
}
.about-experience__text > * {
  margin: 0 0 1em;
}
.about-experience__text > :last-child {
  margin-bottom: 0;
}
.about-experience__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.about-experience__tag {
  padding: 8px 15px;
  border-radius: 22px;
  background: var(--inner-chip);
  font-family: var(--font-review);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--inner-accent);
}
@media (max-width: 991px) {
  .about-experience__grid {
    grid-template-columns: 1fr;
  }
}

/*
 * Stats grid — 1px #e2e8ee hairline, not the homepage `.stats` row.
 */
.stats-grid {
  --section-pt: 0;
  --section-pb: 26px;
}
.stats-grid__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--inner-line);
  border-radius: 14px;
  background: var(--inner-line);
}
.stats-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 22px;
  text-align: center;
  background: var(--color-white);
}
.stats-grid__value {
  font-family: var(--font-review);
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--inner-accent);
}
.stats-grid__label {
  margin-top: 6px;
  font-family: var(--font-review);
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: var(--font-medium);
  color: var(--inner-muted);
}
@media (max-width: 991px) {
  .stats-grid__row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .stats-grid__row {
    grid-template-columns: 1fr;
  }
}

/*
 * About CTA — dark plate on the inner-page gray band
 */
.about-cta {
  --section-pt: 0;
  --section-pb: 26px;
}
.about-cta__plate {
  position: relative;
  overflow: hidden;
  padding: 42px 40px;
  border-radius: 18px;
  background: linear-gradient(115deg, #0e2c3f, #1b5c7e);
}
.about-cta__plate::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 70px 70px;
  content: "";
  pointer-events: none;
}
.about-cta__eyebrow, .about-cta__title, .about-cta__text, .about-cta__button {
  position: relative;
}
.about-cta__eyebrow {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  font-weight: var(--font-medium);
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--inner-green);
}
.about-cta__title {
  max-width: 700px;
  margin: 12px 0 14px;
  font-family: var(--font-review);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.about-cta__text {
  max-width: 700px;
  margin: 0 0 22px;
  font-family: var(--font-review);
  font-size: 14.5px;
  line-height: 1.7;
  color: #a9c1d0;
}
@media (max-width: 980px) {
  .about-cta__plate {
    padding: 40px 22px;
  }
}

/*
 * Process steps
 */
.process {
  --section-pt: 0;
  --section-pb: 30px;
}
.process__title {
  margin: 0 0 8px;
  font-family: var(--font-review);
  font-size: 36px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--inner-blue);
}
.process__lead {
  max-width: 520px;
  margin: 0 0 28px;
  font-family: var(--font-review);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--inner-muted);
}
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.process__item {
  position: relative;
  overflow: hidden;
  padding-top: 22px;
  border-top: 2px solid var(--inner-line);
}
.process__num {
  position: absolute;
  top: 14px;
  right: 0;
  font-family: var(--font-review);
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #f0f3f7;
  pointer-events: none;
}
.process__index {
  position: relative;
  font-family: var(--font-secondary);
  font-size: 11px;
  line-height: 1.2;
  font-weight: var(--font-medium);
  color: var(--inner-green);
}
.process__heading {
  position: relative;
  margin: 10px 0 8px;
  font-family: var(--font-review);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--inner-ink);
}
.process__text {
  position: relative;
  margin: 0;
  font-family: var(--font-review);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--inner-muted);
}
@media (max-width: 991px) {
  .process__title {
    font-size: 28px;
  }
  .process__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .process__grid {
    grid-template-columns: 1fr;
  }
}

/*
 * About values cards
 */
.about-values {
  --section-pt: 0;
  --section-pb: 84px;
}
.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.about-values__card {
  padding: 24px;
  border: 1px solid var(--inner-line);
  border-radius: 14px;
  background: var(--color-white);
}
.about-values__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #eaf6ec;
}
.about-values__icon svg {
  display: block;
  width: 23px;
  height: 23px;
}
.about-values__title {
  margin: 0 0 7px;
  font-family: var(--font-review);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--inner-ink);
}
.about-values__text {
  margin: 0;
  font-family: var(--font-review);
  font-size: 13px;
  line-height: 1.6;
  color: var(--inner-muted);
}
@media (max-width: 991px) {
  .about-values__grid {
    grid-template-columns: 1fr;
  }
}

/*
 * Services hub — archive of directions. Not the homepage `.services` wheel.
 */
.services-intro {
  --section-pt: 52px;
  --section-pb: 56px;
  --section-bg: var(--color-white);
  overflow: hidden;
}
.services-intro__mesh {
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  height: 260px;
  background-image: linear-gradient(#eef1f5 1px, transparent 1px), linear-gradient(90deg, #eef1f5 1px, transparent 1px);
  background-size: 68px 68px;
  pointer-events: none;
}
.services-intro__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 52px;
  align-items: end;
}
.services-intro__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: var(--font-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inner-green);
}
.services-intro__title {
  margin: 0 0 18px;
  font-family: var(--font-review);
  font-size: 52px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--inner-blue);
}
.services-intro__text {
  max-width: 480px;
  margin: 0;
  font-family: var(--font-review);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--inner-body);
}
.services-intro__jump {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e6ebf0;
  border-radius: 14px;
  background: #e6ebf0;
}
.services-intro__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  background: var(--color-white);
  transition: background 0.15s ease;
}
.services-intro__row:hover, .services-intro__row:focus-visible {
  background: #f6fbf7;
}
.services-intro__k {
  flex: none;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  font-weight: var(--font-medium);
  color: var(--inner-green);
}
.services-intro__label {
  flex: 1;
  font-family: var(--font-review);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--inner-body);
}
.services-intro__go {
  color: #a7b1bb;
  font-size: 13px;
}
@media (max-width: 980px) {
  .services-intro {
    --section-pt: 36px;
    --section-pb: 40px;
  }
  .services-intro__mesh {
    display: none;
  }
  .services-intro__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .services-intro__title {
    font-size: 36px;
  }
}

.services-featured {
  --section-pt: 56px;
  --section-pb: 56px;
  --section-bg: var(--inner-band);
  border-block: 1px solid var(--inner-page);
}
.services-featured__card {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  overflow: hidden;
  border: 1px solid #e6ebf0;
  border-radius: 20px;
  background: var(--color-white);
}
.services-featured__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
  padding: 26px;
  background: linear-gradient(160deg, #2b5f86 0%, #1c4569 55%, #16365a 100%);
}
.services-featured__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(22, 54, 90, 0.18) 0%, rgba(22, 54, 90, 0.42) 100%);
  pointer-events: none;
}
.services-featured__mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  pointer-events: none;
}
.services-featured__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services-featured__badge {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--inner-green);
  font-family: var(--font-secondary);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-white);
}
.services-featured__copy {
  padding: 34px 36px;
}
.services-featured__title {
  margin: 0 0 10px;
  font-family: var(--font-review);
  font-size: 30px;
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--inner-ink);
}
.services-featured__lead {
  max-width: 460px;
  margin: 0 0 26px;
  font-family: var(--font-review);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--inner-muted);
}
.services-featured__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e6ebf0;
  border-radius: 14px;
  background: #e6ebf0;
}
.services-featured__row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--color-white);
  transition: background 0.15s ease;
}
.services-featured__row:hover, .services-featured__row:focus-visible {
  background: #f6fbf7;
}
.services-featured__num {
  flex: none;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--inner-green);
}
.services-featured__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.services-featured__name {
  font-family: var(--font-review);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--inner-ink);
}
.services-featured__short {
  font-family: var(--font-review);
  font-size: 13px;
  line-height: 1.6;
  color: #8e9daa;
}
.services-featured__go {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--inner-green);
  color: var(--color-white);
  font-size: 13px;
}
@media (max-width: 980px) {
  .services-featured {
    --section-pt: 36px;
    --section-pb: 36px;
  }
  .services-featured__card {
    grid-template-columns: 1fr;
  }
  .services-featured__media {
    min-height: 210px;
  }
  .services-featured__copy {
    padding: 28px 22px;
  }
}

.services-cards {
  --section-pt: 56px;
  --section-pb: 56px;
  --section-bg: var(--color-white);
}
.services-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.services-cards__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e6ebf0;
  border-radius: 18px;
  background: var(--color-white);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.services-cards__card:hover, .services-cards__card:focus-visible {
  border-color: var(--inner-green);
  box-shadow: 0 16px 34px rgba(20, 50, 80, 0.12);
  transform: translateY(-3px);
}
.services-cards__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 186px;
  padding: 16px;
  background: linear-gradient(150deg, #dfe5ec, #c1ccd8);
}
.services-cards__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services-cards__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--color-white);
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--inner-ink);
}
.services-cards__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.services-cards__title {
  margin: 0 0 9px;
  font-family: var(--font-review);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--inner-ink);
}
.services-cards__text {
  margin: 0 0 20px;
  font-family: var(--font-review);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--inner-muted);
}
.services-cards__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-family: var(--font-review);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--inner-link);
}
.services-cards__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--inner-green);
  color: var(--color-white);
  font-size: 12px;
}
@media (max-width: 980px) {
  .services-cards {
    --section-pt: 32px;
    --section-pb: 32px;
  }
  .services-cards__grid {
    grid-template-columns: 1fr;
  }
}

.services-cta {
  --section-pt: 0;
  --section-pb: 84px;
  --section-bg: var(--color-white);
}
.services-cta__plate {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  padding: 44px;
  border-radius: 20px;
  background: linear-gradient(160deg, #2b5f86 0%, #1c4569 42%, #16365a 100%);
}
.services-cta__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 74px 74px;
  pointer-events: none;
}
.services-cta__copy, .services-cta__button {
  position: relative;
  z-index: 1;
}
.services-cta__copy {
  max-width: 520px;
}
.services-cta__title {
  margin: 0 0 10px;
  font-family: var(--font-review);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--color-white);
}
.services-cta__text {
  margin: 0;
  font-family: var(--font-review);
  font-size: 13.5px;
  line-height: 1.65;
  color: #c8d8e4;
}
@media (max-width: 980px) {
  .services-cta {
    --section-pb: 56px;
  }
  .services-cta__plate {
    padding: 40px 22px;
  }
}

/*
 * Service single — not the hub, not the homepage wheel.
 */
.service-chips {
  background: var(--color-white);
  border-bottom: 1px solid var(--inner-page);
}
.service-chips__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-block: 15px;
}
.service-chips__chip {
  padding: 10px 18px;
  border: 1.5px solid #e2e8ee;
  border-radius: 26px;
  background: var(--color-white);
  font-family: var(--font-review);
  font-size: 13px;
  font-weight: 600;
  color: #5c6a76;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.service-chips__chip:hover, .service-chips__chip:focus-visible, .service-chips__chip.is-active {
  border-color: var(--inner-green);
  background: var(--inner-green);
  color: var(--color-white);
}

.service-hero {
  --section-pt: 48px;
  --section-pb: 62px;
  --section-bg: var(--color-white);
}
.service-hero__inner {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 46px;
  align-items: center;
}
.service-hero__eyebrow {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  font-weight: var(--font-medium);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--inner-green);
}
.service-hero__title {
  margin: 14px 0 18px;
  font-family: var(--font-review);
  font-size: 46px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--inner-blue);
}
.service-hero__lead {
  max-width: 470px;
  margin: 0 0 32px;
  font-family: var(--font-review);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--inner-body);
}
.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.service-hero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.16;
  border-radius: 18px;
  background: linear-gradient(150deg, #dfe5ec, #bcc8d5);
}
.service-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 980px) {
  .service-hero {
    --section-pt: 32px;
    --section-pb: 40px;
  }
  .service-hero__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .service-hero__title {
    font-size: 32px;
  }
}

.service-scope {
  --section-pt: 58px;
  --section-pb: 58px;
  --section-bg: var(--inner-band);
  border-block: 1px solid var(--inner-page);
}
.service-scope__title {
  margin: 0 0 30px;
  font-family: var(--font-review);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--inner-blue);
}
.service-scope__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-scope__tile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 132px;
  padding: 24px;
  border: 1px solid #e6ebf0;
  border-radius: 16px;
  background: var(--color-white);
}
.service-scope__num {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--inner-green);
}
.service-scope__label {
  margin: 0;
  font-family: var(--font-review);
  font-size: 17px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--inner-ink);
}
@media (max-width: 980px) {
  .service-scope {
    --section-pt: 40px;
    --section-pb: 40px;
  }
  .service-scope__title {
    font-size: 28px;
  }
  .service-scope__grid {
    grid-template-columns: 1fr;
  }
}

.service-acc {
  --section-pt: 58px;
  --section-pb: 58px;
  --section-bg: var(--color-white);
}
.service-acc__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
}
.service-acc__item {
  padding: 24px 26px;
  border: 1px solid #e6ebf0;
  border-radius: 16px;
  background: var(--color-white);
}
.service-acc__item[open] {
  border-color: #d8e9dd;
  background: #f6fbf7;
}
.service-acc__summary {
  display: flex;
  gap: 18px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.service-acc__summary::-webkit-details-marker {
  display: none;
}
.service-acc__num {
  flex: none;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: #a7b1bb;
}
.service-acc__item[open] .service-acc__num {
  color: var(--inner-green);
}
.service-acc__heading {
  flex: 1;
  font-family: var(--font-review);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #4c5865;
}
.service-acc__item[open] .service-acc__heading {
  color: var(--inner-ink);
}
.service-acc__sign {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef1f5;
  font-family: var(--font-review);
  font-size: 18px;
  line-height: 1;
  color: #7b8894;
}
.service-acc__sign::before {
  content: "+";
}
.service-acc__item[open] .service-acc__sign {
  background: var(--inner-green);
  color: var(--color-white);
}
.service-acc__item[open] .service-acc__sign::before {
  content: "−";
}
.service-acc__text {
  margin: 16px 0 0;
  padding-left: 29px;
  font-family: var(--font-review);
  font-size: 14.5px;
  line-height: 1.7;
  color: #5c6a76;
}
@media (max-width: 980px) {
  .service-acc {
    --section-pt: 36px;
    --section-pb: 36px;
  }
  .service-acc__heading {
    font-size: 16px;
  }
  .service-acc__text {
    padding-left: 0;
  }
}

.service-gallery {
  --section-pt: 58px;
  --section-pb: 58px;
  --section-bg: var(--inner-band);
  border-block: 1px solid var(--inner-page);
}
.service-gallery__title {
  margin: 0 0 30px;
  font-family: var(--font-review);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--inner-blue);
}
.service-gallery__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}
.service-gallery__grid.is-solo {
  grid-template-columns: 1fr;
}
.service-gallery__main, .service-gallery__cell {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 18px;
  background: linear-gradient(150deg, #dfe5ec, #bcc8d5);
}
.service-gallery__main {
  height: 360px;
}
.service-gallery__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.service-gallery__cell {
  height: 172px;
}
.service-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-gallery__cap {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
  padding: 7px 12px;
  border-radius: 16px;
  background: var(--color-white);
  font-family: var(--font-secondary);
  font-size: 9.5px;
  font-weight: var(--font-medium);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6f7d8a;
}
.service-gallery__cell .service-gallery__cap {
  left: 16px;
  bottom: 16px;
  padding: 6px 11px;
  border-radius: 14px;
  font-size: 9px;
}
@media (max-width: 980px) {
  .service-gallery {
    --section-pt: 40px;
    --section-pb: 40px;
  }
  .service-gallery__title {
    font-size: 28px;
  }
  .service-gallery__grid {
    grid-template-columns: 1fr;
  }
  .service-gallery__main, .service-gallery__cell {
    height: 220px;
  }
}

.service-adv {
  --section-pt: 58px;
  --section-pb: 58px;
  --section-bg: var(--color-white);
}
.service-adv__title {
  margin: 0 0 30px;
  font-family: var(--font-review);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--inner-blue);
}
.service-adv__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-adv__card {
  padding: 24px;
  border: 1px solid #e6ebf0;
  border-radius: 16px;
  background: var(--color-white);
}
.service-adv__icon {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}
.service-adv__icon span {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--inner-green);
}
.service-adv__icon span:nth-child(2) {
  opacity: 0.6;
}
.service-adv__icon span:nth-child(3) {
  opacity: 0.3;
}
.service-adv__name {
  margin: 0 0 8px;
  font-family: var(--font-review);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--inner-ink);
}
.service-adv__text {
  margin: 0;
  font-family: var(--font-review);
  font-size: 13px;
  line-height: 1.65;
  color: var(--inner-muted);
}
@media (max-width: 980px) {
  .service-adv {
    --section-pt: 40px;
    --section-pb: 40px;
  }
  .service-adv__title {
    font-size: 28px;
  }
  .service-adv__grid {
    grid-template-columns: 1fr;
  }
}

.service-enquire {
  --section-pt: 58px;
  --section-pb: 58px;
  --section-bg: var(--inner-band);
  border-top: 1px solid var(--inner-page);
}
.service-enquire__plate {
  position: relative;
  overflow: hidden;
  padding: 46px 44px;
  border-radius: 20px;
  background: linear-gradient(160deg, #2b5f86 0%, #1c4569 42%, #16365a 100%);
}
.service-enquire__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 74px 74px;
  pointer-events: none;
}
.service-enquire__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.service-enquire__title {
  margin: 0 0 12px;
  font-family: var(--font-review);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-white);
}
.service-enquire__text {
  max-width: 380px;
  margin: 0;
  font-family: var(--font-review);
  font-size: 13.5px;
  line-height: 1.65;
  color: #c8d8e4;
}
.service-enquire__form .form__row {
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  max-width: none;
}
@media (max-width: 980px) {
  .service-enquire {
    --section-pt: 36px;
    --section-pb: 36px;
  }
  .service-enquire__plate {
    padding: 32px 22px;
  }
  .service-enquire__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .service-enquire__title {
    font-size: 26px;
  }
}

.service-reasons {
  --section-pt: 58px;
  --section-pb: 84px;
  --section-bg: var(--color-white);
}
.service-reasons__inner {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 44px;
  align-items: start;
}
.service-reasons__title {
  margin: 0 0 14px;
  font-family: var(--font-review);
  font-size: 36px;
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--inner-blue);
}
.service-reasons__text {
  max-width: 300px;
  margin: 0 0 26px;
  font-family: var(--font-review);
  font-size: 14px;
  line-height: 1.7;
  color: var(--inner-muted);
}
.service-reasons__go {
  font-size: 13px;
}
.service-reasons__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid #e6ebf0;
  border-radius: 16px;
  background: #e6ebf0;
}
.service-reasons__row {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: var(--color-white);
}
.service-reasons__k {
  flex: none;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--inner-green);
}
.service-reasons__body {
  font-family: var(--font-review);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--inner-body);
}
@media (max-width: 980px) {
  .service-reasons {
    --section-pt: 40px;
    --section-pb: 56px;
  }
  .service-reasons__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .service-reasons__title {
    font-size: 28px;
  }
}

body:not(.front-page) main .button.button--ghost {
  gap: 9px;
  padding: 12px 22px;
  border: 1.5px solid #d5dde5;
  background: var(--color-white);
  color: var(--inner-body);
  font-family: var(--font-review);
  font-size: 14px;
  font-weight: 600;
}
body:not(.front-page) main .button.button--ghost:hover, body:not(.front-page) main .button.button--ghost:focus-visible {
  border-color: #2b7cc4;
  background: var(--color-white);
  color: #2b7cc4;
}
body:not(.front-page) main .button.button--ghost .button__icon {
  display: none;
}

.service-reasons .button--ghost {
  padding: 11px 20px;
  font-size: 13.5px;
}

/*
 * Portfolio hub — not the homepage `.projects` band.
 */
.projects-intro {
  --section-pt: 52px;
  --section-pb: 44px;
  --section-bg: var(--color-white);
}
.projects-intro__eyebrow {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  font-weight: var(--font-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inner-green);
}
.projects-intro__title {
  margin: 14px 0 18px;
  font-family: var(--font-review);
  font-size: 52px;
  line-height: normal;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--inner-blue);
}
.projects-intro__text {
  max-width: 620px;
  margin: 0 0 30px;
  font-family: var(--font-review);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--inner-body);
}
@media (max-width: 980px) {
  .projects-intro {
    --section-pt: 36px;
    --section-pb: 28px;
  }
  .projects-intro__title {
    font-size: 36px;
  }
}

.projects-list {
  --section-pt: 52px;
  --section-pb: 84px;
  --section-bg: var(--inner-band);
  border-top: 1px solid var(--inner-page);
}
.projects-list__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 30px;
}
.projects-list__chip {
  padding: 9px 18px;
  border: 1.5px solid #d5dde5;
  border-radius: 24px;
  background: var(--color-white);
  font-family: var(--font-review);
  font-size: 13px;
  font-weight: 700;
  color: #6f7c88;
  cursor: pointer;
}
.projects-list__chip.is-active, .projects-list__chip:hover, .projects-list__chip:focus-visible {
  border-color: var(--inner-green);
  background: var(--inner-green);
  color: #0e2c3f;
}
.projects-list__block {
  margin-bottom: 44px;
}
.projects-list__block.is-hidden {
  display: none;
}
.projects-list__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.projects-list__heading {
  margin: 0 0 18px;
  font-family: var(--font-review);
  font-size: 22px;
  line-height: normal;
  font-weight: 700;
  color: var(--inner-ink);
}
.projects-list__head .projects-list__heading {
  margin: 0;
}
.projects-list__count {
  padding: 5px 11px;
  border-radius: 20px;
  background: #e2e8ee;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--inner-muted);
}
.projects-list__grid--gen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}
.projects-list__grid--sub {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 18px;
}
@media (max-width: 980px) {
  .projects-list {
    --section-pt: 36px;
    --section-pb: 56px;
  }
  .projects-list__grid--gen, .projects-list__grid--sub {
    grid-template-columns: 1fr;
  }
}

.projects-card {
  overflow: hidden;
  border: 1px solid #e2e8ee;
  border-radius: 18px;
  background: var(--color-white);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.projects-card:hover, .projects-card:focus-visible {
  border-color: var(--inner-green);
  box-shadow: 0 14px 32px rgba(20, 50, 80, 0.11);
  transform: translateY(-3px);
}
.projects-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.29;
  background: linear-gradient(150deg, #dfe5ec, #c1ccd8);
}
.projects-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.projects-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--color-white);
  font-family: var(--font-secondary);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--inner-ink);
}
.projects-card__copy {
  padding: 22px 24px 24px;
}
.projects-card__title {
  margin: 0 0 12px;
  font-family: var(--font-review);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--inner-ink);
}
.projects-card__addr {
  margin: 0;
  font-family: var(--font-review);
  font-size: 13px;
  color: #8e9daa;
}
.projects-card__meta {
  margin: 6px 0 0;
  font-family: var(--font-review);
  font-size: 13px;
  font-weight: 700;
  color: var(--inner-ink);
}

.projects-sub {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #e2e8ee;
  border-radius: 14px;
  background: var(--color-white);
  transition: border-color 0.18s ease;
}
.projects-sub:hover, .projects-sub:focus-visible {
  border-color: var(--inner-green);
}
.projects-sub__tag {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 20px;
  background: #eef4f8;
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 600;
  color: var(--inner-accent);
}
.projects-sub__title {
  margin: 14px 0 12px;
  font-family: var(--font-review);
  font-size: 18px;
  font-weight: 700;
  color: var(--inner-ink);
}
.projects-sub__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0 0 16px;
}
.projects-sub__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.projects-sub__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--inner-green);
}
.projects-sub__link {
  font-family: var(--font-review);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 500;
  color: #3d4b58;
  transition: color 0.15s ease;
}
.projects-sub__link:hover, .projects-sub__link:focus-visible {
  color: var(--inner-green);
}
.projects-sub__works {
  padding-top: 14px;
  border-top: 1px solid var(--inner-page);
}
.projects-sub__k {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: var(--font-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8e9daa;
}
.projects-sub__works p {
  margin: 7px 0 0;
  font-family: var(--font-review);
  font-size: 13px;
  line-height: 1.6;
  color: var(--inner-lead);
}

.projects-blag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center;
  padding: 28px;
  border: 1px solid #e2e8ee;
  border-radius: 16px;
  background: var(--color-white);
}
.projects-blag__text {
  margin: 0 0 16px;
  font-family: var(--font-review);
  font-size: 15px;
  line-height: 1.7;
  color: #3d4b58;
}
.projects-blag__note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #d8e9bd;
  border-radius: 10px;
  background: #f4f9ec;
  font-family: var(--font-review);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
  color: #4f6b2e;
}
.projects-blag__bang {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--inner-green);
  font-size: 12px;
  font-weight: 800;
  color: #0e2c3f;
}
.projects-blag__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.projects-blag__card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  height: 120px;
  border-radius: 11px;
  background: linear-gradient(135deg, #dfe5ec, #c6d1dc);
}
.projects-blag__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.projects-blag__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@media (max-width: 980px) {
  .projects-blag {
    grid-template-columns: 1fr;
  }
}

.projects-blag__card {
  position: relative;
}

/*
 * Phone tap targets. The mockup is drawn at 1440 where these read as text; on a phone a
 * filter chip and a bullet link are things a thumb has to hit (pp lint L7, 44px).
 */
@media (max-width: 768px) {
  .projects-list__chip {
    min-height: 44px;
  }
  .projects-sub__link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}
/*
 * Project single — not the homepage `.projects` band.
 */
.project-single {
  --section-pt: 36px;
  --section-pb: 84px;
  --section-bg: var(--color-white);
}
.project-single__top {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  align-items: center;
  margin-bottom: 14px;
}
.project-single__tag {
  padding: 6px 13px;
  border-radius: 20px;
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px #e2e8ee;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--inner-ink);
}
.project-single__role {
  font-family: var(--font-review);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--inner-muted);
}
.project-single__title {
  margin: 0 0 26px;
  font-family: var(--font-review);
  font-size: 37px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--inner-ink);
}
.project-single {
  /* The mockup's mosaic is a 370 band: the left tile and the two stacked cells are all
     crops of that height. Without the row height the tallest photograph sets the band. */
}
.project-single__gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 370px;
  gap: 14px;
  margin-bottom: 26px;
}
.project-single__gallery.is-solo {
  grid-template-columns: 1fr;
}
.project-single__main, .project-single__cell {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #dfe5ec, #c6d1dc);
}
.project-single__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}
.project-single__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-single__body {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 26px;
  /* The mockup lets each card end with its own content; stretching the short one
     leaves a tall empty panel beside the specs. */
  align-items: start;
}
.project-single__about, .project-single__specs {
  border: 1px solid #e2e8ee;
  border-radius: 16px;
  background: var(--color-white);
}
.project-single__about {
  padding: 26px;
}
.project-single__specs {
  position: sticky;
  top: calc(var(--header-offset) + 16px);
  padding: 24px;
}
.project-single__about h2, .project-single__specs h2, .project-single__others h2 {
  margin: 0 0 16px;
  font-family: var(--font-review);
  font-size: 20px;
  line-height: normal;
  font-weight: 700;
  color: var(--inner-ink);
}
.project-single__specs h2 {
  font-size: 17px;
}
.project-single__others h2 {
  font-size: 22px;
}
.project-single__about p {
  margin: 0;
  font-family: var(--font-review);
  font-size: 15px;
  line-height: 1.75;
  color: #3d4b58;
}
.project-single {
  /* About is a rich text field, so it can bring several paragraphs, lists and links. */
}
.project-single__text p {
  margin: 0 0 12px;
}
.project-single__text ul,
.project-single__text ol {
  padding-left: 20px;
  margin: 0 0 12px;
  font-family: var(--font-review);
  font-size: 15px;
  line-height: 1.75;
  color: #3d4b58;
}
.project-single__text ul {
  list-style: disc;
}
.project-single__text ol {
  list-style: decimal;
}
.project-single__text a {
  color: var(--inner-link);
  text-decoration: underline;
}
.project-single__text strong {
  font-weight: 700;
  color: var(--inner-ink);
}
.project-single__text {
  /* `h1..h6` in global/_typography sets font-family on the element itself, so an
     inherited family from the wrapper never reaches these. */
}
.project-single__text h2,
.project-single__text h3,
.project-single__text h4 {
  font-family: var(--font-review);
  line-height: normal;
  font-weight: 700;
  color: var(--inner-ink);
}
.project-single__text h2 {
  margin: 22px 0 10px;
  font-size: 20px;
}
.project-single__text h3 {
  margin: 20px 0 8px;
  font-size: 17px;
}
.project-single__text h4 {
  margin: 18px 0 8px;
  font-size: 15px;
}
.project-single__text > :first-child {
  margin-top: 0;
}
.project-single__text blockquote {
  padding: 16px 18px;
  margin: 18px 0 12px;
  border-left: 3px solid var(--inner-green);
  border-radius: 0 10px 10px 0;
  background: #f8fafc;
}
.project-single__text blockquote p {
  margin: 0;
  font-weight: 500;
}
.project-single__text > :last-child {
  margin-bottom: 0;
}
.project-single__spec {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 0;
  border-bottom: 1px solid var(--inner-page);
}
.project-single__k {
  font-family: var(--font-secondary);
  font-size: 10px;
  line-height: normal;
  font-weight: var(--font-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8e9daa;
}
.project-single__v {
  font-family: var(--font-review);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--inner-ink);
}
.project-single__cta {
  width: 100%;
  margin-top: 20px;
}
.project-single__others {
  margin-top: 34px;
}
.project-single__others-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.project-single__others-head a {
  font-family: var(--font-review);
  font-size: 13px;
  font-weight: 700;
  color: var(--inner-link);
}
.project-single__others-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px) {
  .project-single {
    --section-pt: 28px;
    --section-pb: 56px;
  }
  .project-single__title {
    font-size: 28px;
  }
  .project-single__gallery, .project-single__body, .project-single__others-grid {
    grid-template-columns: 1fr;
  }
  .project-single__gallery {
    grid-auto-rows: auto;
  }
  .project-single__main {
    height: 220px;
  }
  .project-single__specs {
    position: static;
  }
}

.project-mini {
  overflow: hidden;
  border: 1px solid #e2e8ee;
  border-radius: 12px;
  background: var(--color-white);
  transition: border-color 0.18s ease;
}
.project-mini:hover, .project-mini:focus-visible {
  border-color: var(--inner-green);
}
.project-mini__media {
  height: 100px;
  background: linear-gradient(135deg, #dfe5ec, #c6d1dc);
}
.project-mini__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-mini__copy {
  padding: 14px;
}
.project-mini__copy h3 {
  margin: 0 0 4px;
  font-family: var(--font-review);
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--inner-ink);
}
.project-mini {
  /* stylelint-disable-next-line no-descending-specificity -- the blockquote's paragraph
     above is more specific than this card rule, so source order decides nothing. */
}
.project-mini__copy p {
  margin: 0;
  font-family: var(--font-review);
  font-size: 11.5px;
  font-weight: 500;
  color: #8e9daa;
}

/* The gallery photo opens full size; the anchor must not change the picture's box. */
.project-single .zoom {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

/*
 * The specs CTA is the mockup's own full-width pill, not the inner page's small button:
 * 12/18 padding around a 24px icon. `main .button` sits inside body:not(.front-page) in
 * global/_inner, so the override has to carry that weight to land.
 */
body:not(.front-page) main .project-single__cta {
  justify-content: center;
  padding: 12px 18px;
  gap: 9px;
  font-size: 13px;
}

body:not(.front-page) main .project-single__cta .button__icon {
  width: 24px;
  height: 24px;
}

/*
 * Generic inner-page wysiwyg.
 */
.content {
  --section-pt: 24px;
  --section-pb: 72px;
  --section-bg: var(--color-white);
}
.content__title {
  margin: 0 0 22px;
  font-family: var(--font-review);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--inner-blue);
}
.content__body {
  max-width: 760px;
  font-family: var(--font-review);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--inner-body);
}
.content__body h2,
.content__body h3 {
  margin: 28px 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--inner-ink);
}
.content__body p {
  margin: 0 0 14px;
}

/*
 * Legal document — the privacy / cookie template: intro over a bordered card of sections.
 */
.legal-doc {
  --section-pt: 52px;
  --section-pb: 84px;
  --section-bg: var(--color-white);
}
.legal-doc__copy {
  max-width: 750px;
}
.legal-doc__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: var(--font-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inner-green);
}
.legal-doc__title {
  margin: 0 0 16px;
  font-family: var(--font-review);
  font-size: 44px;
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--inner-blue);
}
.legal-doc__lead {
  margin: 0 0 30px;
  font-family: var(--font-review);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--inner-lead);
}
.legal-doc__card {
  padding: 30px;
  border: 1px solid var(--inner-line);
  border-radius: 16px;
  background: var(--color-white);
}
.legal-doc__row {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--inner-page);
}
.legal-doc__heading {
  margin: 0 0 10px;
  font-family: var(--font-review);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--inner-ink);
}
.legal-doc__text {
  margin: 0;
  font-family: var(--font-review);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--inner-lead);
}
.legal-doc__note {
  margin: 0;
  font-family: var(--font-review);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
  color: #9aa7b3;
}
@media (max-width: 991px) {
  .legal-doc {
    --section-pt: 36px;
    --section-pb: 56px;
  }
  .legal-doc__title {
    font-size: 34px;
  }
  .legal-doc__card {
    padding: 22px;
  }
}
@media (max-width: 768px) {
  .legal-doc__title {
    font-size: 28px;
  }
}

/*
 * Contacts page — details + form.
 */
.contacts-details {
  --section-pt: 52px;
  --section-pb: 76px;
  --section-bg: var(--inner-band);
  border-top: 1px solid var(--inner-page);
}
.contacts-details__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 22px;
  align-items: start;
}
.contacts-details__card, .contacts-details__form-card {
  border: 1px solid var(--inner-line);
  border-radius: 16px;
  background: var(--color-white);
}
.contacts-details__card {
  padding: 26px;
}
.contacts-details__form-card {
  padding: 30px;
}
.contacts-details__title {
  margin: 0 0 20px;
  font-family: var(--font-review);
  font-size: 18px;
  font-weight: 700;
  color: var(--inner-ink);
}
.contacts-details__form-title {
  margin: 0 0 4px;
  font-family: var(--font-review);
  font-size: 20px;
  font-weight: 700;
  color: var(--inner-ink);
}
.contacts-details__list {
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contacts-details__row {
  display: flex;
  gap: 13px;
  align-items: center;
}
.contacts-details__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eaf6ec;
}
.contacts-details__icon svg {
  display: block;
  width: 21px;
  height: 21px;
}
.contacts-details__value {
  margin: 0;
  font-family: var(--font-review);
  font-size: 15px;
  font-weight: 700;
  color: var(--inner-ink);
}
.contacts-details__value a {
  color: inherit;
}
.contacts-details__hint {
  margin: 2px 0 0;
  font-family: var(--font-review);
  font-size: 12px;
  font-weight: 500;
  color: #8e9daa;
}
.contacts-details__address {
  margin: 0;
  font-family: var(--font-review);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--inner-ink);
}
.contacts-details__lead {
  margin: 0 0 22px;
  font-family: var(--font-review);
  font-size: 13px;
  color: #8e9daa;
}
.contacts-details__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 22px;
}
.contacts-details__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  border-radius: 30px;
  font-family: var(--font-review);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.contacts-details__action--call {
  border: 0;
  background: var(--inner-green);
  color: var(--color-white);
}
.contacts-details__action--call:hover, .contacts-details__action--call:focus-visible {
  background: var(--inner-green-hover);
}
.contacts-details__action--write {
  border: 1.5px solid #d5dde5;
  background: var(--color-white);
  color: var(--inner-ink);
}
.contacts-details__action--write:hover, .contacts-details__action--write:focus-visible {
  background: #f2f5f8;
}
.contacts-details .wpcf7,
.contacts-details .wpcf7 form {
  margin: 0;
}
.contacts-details .contacts-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.contacts-details .form__row {
  display: flex;
  gap: 13px;
  width: 100%;
  max-width: none;
  flex-direction: row;
  align-items: stretch;
}
.contacts-details .form__field {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 9px;
}
.contacts-details .form__field .wpcf7-form-control-wrap {
  display: block;
}
.contacts-details .form__field input,
.contacts-details .form__field select,
.contacts-details .form__field textarea {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #d5dde5;
  border-radius: 9px;
  background: var(--color-white);
  font-family: var(--font-review);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--inner-ink);
  appearance: none;
  box-shadow: none;
}
.contacts-details .form__field input::placeholder,
.contacts-details .form__field select::placeholder,
.contacts-details .form__field textarea::placeholder {
  color: #9aa7b3;
  opacity: 1;
}
.contacts-details .form__field input:focus, .contacts-details .form__field input:focus-visible,
.contacts-details .form__field select:focus,
.contacts-details .form__field select:focus-visible,
.contacts-details .form__field textarea:focus,
.contacts-details .form__field textarea:focus-visible {
  outline: none;
  border-color: var(--inner-blue);
  box-shadow: none;
}
.contacts-details .form__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%239aa7b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  color: var(--inner-ink);
}
.contacts-details .form__field select:has(option[value=""]:checked) {
  color: #9aa7b3;
}
.contacts-details .form__field select option {
  color: var(--inner-ink);
}
.contacts-details .form__field textarea {
  min-height: 100px;
  height: 100px;
  resize: vertical;
}
.contacts-details .form__field input.wpcf7-not-valid,
.contacts-details .form__field select.wpcf7-not-valid,
.contacts-details .form__field textarea.wpcf7-not-valid {
  border-color: #c0392b;
}
.contacts-details .form__field .wpcf7-not-valid-tip {
  color: #c0392b;
}
.contacts-details .form__check {
  font-family: var(--font-review);
  font-size: 12px;
  line-height: 1.45;
  color: #8e9daa;
}
.contacts-details .form__check .wpcf7-list-item {
  margin: 0;
}
.contacts-details .form__check label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.contacts-details .form__check input[type=checkbox] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid #cbd4dd;
  border-radius: 4px;
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
}
.contacts-details .form__check input[type=checkbox]:checked {
  border-color: var(--inner-green);
  background: var(--inner-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none'%3E%3Cpath d='M1.5 5.2 4.4 8.1 10.5 1.5' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 10px no-repeat;
}
.contacts-details .form__check a {
  color: var(--inner-link);
  font-weight: 700;
}
@media (max-width: 980px) {
  .contacts-details {
    --section-pt: 36px;
    --section-pb: 56px;
  }
  .contacts-details__grid {
    grid-template-columns: 1fr;
  }
  .contacts-details .form__row {
    flex-direction: column;
  }
}

body:not(.front-page) main .contacts-details .form__submit.button {
  width: 100%;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
  padding: 8px 8px 8px 14px;
  font-size: 14.5px;
  font-weight: 700;
}

/*
 * Contacts map
 */
.contacts-map {
  --section-pt: 56px;
  --section-pb: 84px;
  --section-bg: var(--color-white);
  border-top: 1px solid var(--inner-page);
}
.contacts-map__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  font-weight: var(--font-medium);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--inner-green);
}
.contacts-map__title {
  margin: 0 0 10px;
  font-family: var(--font-review);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--inner-blue);
}
.contacts-map__text {
  max-width: 520px;
  margin: 0 0 28px;
  font-family: var(--font-review);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--inner-muted);
}
.contacts-map__frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 400px;
  padding: 22px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(150deg, #dfe5ec, #c1ccd8);
}
.contacts-map__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.contacts-map__chip {
  position: relative;
  z-index: 1;
  padding: 8px 14px;
  border-radius: 16px;
  background: var(--color-white);
  font-family: var(--font-secondary);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6f7d8a;
}
@media (max-width: 991px) {
  .contacts-map {
    --section-pt: 40px;
    --section-pb: 56px;
  }
  .contacts-map__title {
    font-size: 28px;
  }
  .contacts-map__frame {
    height: 280px;
  }
}

/*
 * Blog archive — intro over a grey band holding the lead card, the grid and the pager.
 */
.blog-intro {
  --section-pt: 52px;
  --section-pb: 40px;
  --section-bg: var(--color-white);
}
.blog-intro__eyebrow {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: var(--font-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inner-green);
}
.blog-intro__title {
  margin: 14px 0 18px;
  font-family: var(--font-review);
  font-size: 52px;
  line-height: normal;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--inner-blue);
}
.blog-intro__text {
  max-width: 620px;
  margin: 0 0 34px;
  font-family: var(--font-review);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--inner-body);
}
@media (max-width: 991px) {
  .blog-intro {
    --section-pt: 36px;
    --section-pb: 28px;
  }
  .blog-intro__title {
    font-size: 36px;
  }
}

.blog-list {
  --section-pt: 52px;
  --section-pb: 84px;
  --section-bg: var(--inner-band);
  border-top: 1px solid var(--inner-page);
}
.blog-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 991px) {
  .blog-list {
    --section-pt: 36px;
    --section-pb: 56px;
  }
  .blog-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .blog-list__grid {
    grid-template-columns: 1fr;
  }
}

.blog-lead {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  overflow: hidden;
  margin-bottom: 30px;
  border: 1px solid var(--inner-line);
  border-radius: 18px;
  background: var(--color-white);
  transition: border-color 0.18s ease;
}
.blog-lead:hover, .blog-lead:focus-visible {
  border-color: var(--inner-green);
}
.blog-lead__media {
  position: relative;
  min-height: 290px;
  background: linear-gradient(135deg, #dfe5ec, #c6d1dc);
}
.blog-lead__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-lead__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
}
.blog-lead__meta {
  margin-bottom: 12px;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  line-height: normal;
  font-weight: var(--font-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inner-green);
}
.blog-lead__title {
  margin: 0 0 12px;
  font-family: var(--font-review);
  font-size: 26px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--inner-ink);
}
.blog-lead__text {
  margin: 0 0 20px;
  font-family: var(--font-review);
  font-size: 14px;
  line-height: 1.65;
  color: var(--inner-muted);
}
.blog-lead__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-review);
  font-size: 13.5px;
  line-height: normal;
  font-weight: 700;
  color: var(--inner-link);
}
.blog-lead__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--inner-green);
  font-size: 12px;
  color: var(--color-white);
}
@media (max-width: 991px) {
  .blog-lead {
    grid-template-columns: 1fr;
  }
  .blog-lead__copy {
    padding: 24px;
  }
  .blog-lead__title {
    font-size: 22px;
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--inner-line);
  border-radius: 14px;
  background: var(--color-white);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.blog-card:hover, .blog-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(20, 50, 80, 0.11);
}
.blog-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 158px;
  background: linear-gradient(135deg, #dfe5ec, #c6d1dc);
}
.blog-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card__badge {
  position: relative;
  padding: 6px 11px;
  border-radius: 16px;
  background: var(--color-white);
  font-family: var(--font-secondary);
  font-size: 9.5px;
  line-height: normal;
  font-weight: var(--font-medium);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8e9daa;
}
.blog-card__copy {
  padding: 18px;
}
.blog-card__cat {
  font-family: var(--font-secondary);
  font-size: 10px;
  line-height: normal;
  font-weight: var(--font-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inner-green);
}
.blog-card__title {
  margin: 8px 0 10px;
  font-family: var(--font-review);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--inner-ink);
}
.blog-card__date {
  font-family: var(--font-review);
  font-size: 11.5px;
  line-height: normal;
  font-weight: 500;
  color: #9aa7b3;
}

.blog-pager {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 32px;
}
.blog-pager .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #d5dde5;
  border-radius: 50%;
  font-family: var(--font-review);
  font-size: 14px;
  font-weight: 700;
  color: var(--inner-lead);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.blog-pager .page-numbers:hover, .blog-pager .page-numbers:focus-visible {
  border-color: var(--inner-accent);
  color: var(--inner-accent);
}
.blog-pager .page-numbers.current {
  border-color: var(--inner-accent);
  background: var(--inner-accent);
  color: var(--color-white);
}

/*
 * Article — a 750 column centred in the page.
 */
.article {
  --section-pt: 36px;
  --section-pb: 84px;
  --section-bg: var(--color-white);
}
.article__column {
  max-width: 750px;
  margin: 0 auto;
}
.article__meta {
  font-family: var(--font-secondary);
  font-size: 10.5px;
  line-height: normal;
  font-weight: var(--font-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inner-green);
}
.article__title {
  margin: 14px 0 16px;
  font-family: var(--font-review);
  font-size: 39px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--inner-ink);
}
.article__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid #dde4ea;
}
.article__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--inner-accent);
  font-family: var(--font-review);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
}
.article__who {
  display: flex;
  flex-direction: column;
}
.article__author {
  font-family: var(--font-review);
  font-size: 13.5px;
  line-height: normal;
  font-weight: 700;
  color: var(--inner-ink);
}
.article__date {
  font-family: var(--font-review);
  font-size: 12px;
  line-height: normal;
  font-weight: 500;
  color: #8e9daa;
}
.article__media {
  height: 330px;
  overflow: hidden;
  margin: 0 0 30px;
  border-radius: 16px;
  background: linear-gradient(135deg, #dfe5ec, #c6d1dc);
}
.article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article__body {
  font-family: var(--font-review);
  color: #3d4b58;
}
.article__body p {
  margin: 0 0 22px;
  font-size: 16.5px;
  line-height: 1.8;
}
.article__body {
  /* The lead paragraph is a step larger; it outranks the rule above on specificity,
     so the order here is only what stylelint wants to read. */
}
.article__body > p:first-child {
  font-size: 17px;
  line-height: 1.8;
}
.article__body h2 {
  margin: 34px 0 14px;
  /* `h1..h6` in global/_typography sets font-family on the element itself, so an
     inherited family from the wrapper never reaches these. */
  font-family: var(--font-review);
  font-size: 25px;
  line-height: normal;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--inner-ink);
}
.article__body h3 {
  margin: 26px 0 12px;
  /* `h1..h6` in global/_typography sets font-family on the element itself, so an
     inherited family from the wrapper never reaches these. */
  font-family: var(--font-review);
  font-size: 19px;
  line-height: normal;
  font-weight: 700;
  color: var(--inner-ink);
}
.article__body ul,
.article__body ol {
  margin: 0 0 22px;
  padding-left: 20px;
  font-size: 16.5px;
  line-height: 1.8;
}
.article__body blockquote {
  padding: 20px 24px;
  margin: 0 0 26px;
  border-left: 3px solid var(--inner-green);
  border-radius: 0 12px 12px 0;
  background: var(--color-white);
  /* stylelint-disable-next-line no-descending-specificity -- the quote's own
     paragraph is more specific than the lead rule above it, so source order
     changes nothing here. */
}
.article__body blockquote p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--inner-ink);
}
.article__body img {
  height: auto;
  max-width: 100%;
  border-radius: 12px;
}
.article__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px;
  border-radius: 16px;
  background: linear-gradient(115deg, #0e2c3f, #1b5c7e);
}
.article__cta-title {
  margin: 0 0 6px;
  font-family: var(--font-review);
  font-size: 21px;
  line-height: normal;
  font-weight: 700;
  color: var(--color-white);
}
.article__cta-text {
  margin: 0;
  font-family: var(--font-review);
  font-size: 13px;
  line-height: normal;
  color: #a9c1d0;
}
.article__others {
  margin-top: 44px;
}
.article__others-title {
  margin: 0 0 18px;
  font-family: var(--font-review);
  font-size: 22px;
  line-height: normal;
  font-weight: 700;
  color: var(--inner-ink);
}
.article__others-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.article__other {
  padding: 20px 22px;
  border: 1px solid var(--inner-line);
  border-radius: 14px;
  background: var(--color-white);
  transition: border-color 0.18s ease;
}
.article__other:hover, .article__other:focus-visible {
  border-color: var(--inner-green);
}
.article__other-cat {
  font-family: var(--font-secondary);
  font-size: 10px;
  line-height: normal;
  font-weight: var(--font-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inner-green);
}
.article__other-title {
  margin: 8px 0 10px;
  font-family: var(--font-review);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--inner-ink);
}
.article__other-date {
  font-family: var(--font-review);
  font-size: 11.5px;
  line-height: normal;
  font-weight: 500;
  color: #9aa7b3;
}
@media (max-width: 991px) {
  .article {
    --section-pb: 56px;
  }
  .article__title {
    font-size: 30px;
  }
  .article__media {
    height: 240px;
  }
  .article__cta {
    padding: 24px;
  }
}
@media (max-width: 768px) {
  .article__others-grid {
    grid-template-columns: 1fr;
  }
}

/* Phone tap target: the inner-page button is 39 tall, under the 44 a thumb needs. */
@media (max-width: 768px) {
  body:not(.front-page) main .article__cta-button {
    min-height: 44px;
  }
}
/*
 * Utilities
 */
.display-block {
  display: block !important;
}

.display-flex {
  display: flex !important;
}

.display-none {
  display: none !important;
}

@media (max-width: 390px) {
  .display-sm-block {
    display: block !important;
  }
  .display-sm-flex {
    display: flex !important;
  }
  .display-sm-none {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .display-md-block {
    display: block !important;
  }
  .display-md-flex {
    display: flex !important;
  }
  .display-md-none {
    display: none !important;
  }
}
@media (max-width: 991px) {
  .display-lg-block {
    display: block !important;
  }
  .display-lg-flex {
    display: flex !important;
  }
  .display-lg-none {
    display: none !important;
  }
}
@media (max-width: 1200px) {
  .display-xl-block {
    display: block !important;
  }
  .display-xl-flex {
    display: flex !important;
  }
  .display-xl-none {
    display: none !important;
  }
}
/*
 * Block visibility toggles (codelibry_block_attrs visibility setting)
 */
@media (min-width: 992px) {
  .is-hidden-desktop {
    display: none !important;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .is-hidden-tablet {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .is-hidden-mobile {
    display: none !important;
  }
}
/*
 * Soft break
 *
 * The break the frame drew, at the width the frame drew it. Below the container's
 * width the line it made is the wrong length, so the break goes and the browser
 * is asked to even out the rag instead. `get_broken_lines()` leaves a space in
 * front of each one, which is what rejoins the words here.
 */
@media (max-width: 1200px) {
  .soft-break {
    display: none;
  }
  h1:has(.soft-break),
  h2:has(.soft-break),
  h3:has(.soft-break) {
    text-wrap: balance;
  }
  p:has(.soft-break) {
    text-wrap: pretty;
  }
}
/* 
 * Text for Screen Readers
 */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}