/* ==========================================================================
   Elina · Project management, business support, connections · Cyprus
   One shared stylesheet for every page.

   Look and feel: white, blue and light blue, with a quiet pattern inspired by
   Lefkara lace, the traditional needlework of Cyprus. Elegant and simple.

   Contents
   1. Design tokens (colours, fonts, spacing)
   2. Base and reset
   3. Layout helpers
   4. Type helpers
   5. Buttons and links
   6. Header and navigation
   7. Lefkara lace pattern
   8. Hero and page intros
   9. Home sections
   10. Cards, lists and panels
   11. Service blocks
   12. Forms and contact details
   13. Placeholders (content still to add)
   14. Footer
   15. Scroll reveal and motion
   ========================================================================== */

/* 1. Design tokens
   ------------------------------------------------------------------------ */
:root {
  /* Palette: white, blues and light blues only */
  --white:       #ffffff;
  --porcelain:   #f6f8fb;   /* off-white section background */
  --mist:        #e9f1fa;   /* light blue section background */
  --sky:         #bcd3ee;   /* light blue lines and details */
  --cobalt:      #1f4e9c;   /* Cypriot blue: buttons, links, accents */
  --cobalt-deep: #163b7a;   /* button hover */
  --navy:        #0e2548;   /* dark sections, headings */
  --ink:         #1b2b45;   /* body text */
  --slate:       #4a5d7a;   /* secondary text */
  --line:        rgba(31, 78, 156, 0.16);
  --line-strong: rgba(31, 78, 156, 0.35);

  /* Fonts */
  --font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --font-body: "Jost", "Futura", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing and sizing */
  --gutter: 1.25rem;
  --max: 72rem;
  --max-text: 38rem;
  --section-y: clamp(4rem, 9vw, 7rem);
  --header-h: 4.75rem;
}
@media (min-width: 768px) { :root { --gutter: 2rem; } }

/* 2. Base and reset
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  /* A small optical size keeps the thin strokes sturdy, so headings read easily */
  font-variation-settings: "opsz" 14;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.55em;
}
h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 600; color: var(--cobalt); }

p { margin: 0 0 1em; max-width: var(--max-text); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; color: var(--navy); }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

::selection { background: var(--sky); color: var(--navy); }

:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--navy); color: var(--white);
  padding: 0.75rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

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

/* 3. Layout helpers
   ------------------------------------------------------------------------ */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section--mist { background: var(--mist); }
.section--porcelain { background: var(--porcelain); }
.section--navy { background: var(--navy); color: #d9e5f4; }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy h2 em, .section--navy h3 em { color: var(--sky); }

.section-head { max-width: 42rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-head p { font-size: 1.125rem; color: var(--slate); }

.split { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
  .split--text-wide { grid-template-columns: 7fr 5fr; }
  .split--top { align-items: start; }
}

/* 4. Type helpers
   ------------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1.25rem;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cobalt);
}
/* A tiny lace diamond before each eyebrow */
.eyebrow::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border: 1px solid currentColor; transform: rotate(45deg);
}
.section--navy .eyebrow { color: var(--sky); }

.lead { font-size: clamp(1.15rem, 2vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.muted { color: var(--slate); }

/* 5. Buttons and links
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.1rem; padding: 0.85rem 1.6rem;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn--primary { background: var(--cobalt); color: var(--white); }
.btn--primary:hover { background: var(--cobalt-deep); }
.btn--ghost { background: transparent; color: var(--cobalt); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--cobalt); }
.btn--light { background: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--mist); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.arrow::after { content: "\2192"; display: inline-block; transition: transform 0.2s ease; }
.btn:hover .arrow::after, a:hover > .arrow::after { transform: translateX(3px); }

.text-link {
  color: var(--cobalt); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--sky);
}
.text-link:hover { text-decoration-color: var(--cobalt); }
.section--navy .text-link { color: var(--white); text-decoration-color: var(--sky); }

/* 6. Header and navigation
   ------------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(8px); }
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--header-h);
}

.wordmark { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--navy); line-height: 1; }
.wordmark__name { font-family: var(--font-display); font-style: italic; font-size: 1.85rem; font-weight: 700; font-variation-settings: "opsz" 14; }
.wordmark__line {
  margin-top: 0.35rem; white-space: nowrap;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cobalt);
}
@media (max-width: 420px) { .wordmark__line { font-size: 0.56rem; letter-spacing: 0.1em; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.75rem; padding: 0.5rem 0.9rem;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 0;
  color: var(--navy); font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars span { display: block; height: 1.5px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.site-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  display: none;
  padding: 0.5rem var(--gutter) 1.5rem;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; }
.site-nav li { border-top: 1px solid var(--line); }
.site-nav a:not(.btn) {
  display: block; padding: 1rem 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  color: var(--navy); text-decoration: none;
}
.site-nav a:not(.btn)[aria-current="page"] { color: var(--cobalt); font-style: italic; }
.site-nav .nav-cta { border-top: 0; padding-top: 1rem; }
.site-nav .nav-cta .btn { width: 100%; }

.no-js .nav-toggle { display: none; }
.no-js .site-nav { position: static; display: block; border: 0; padding: 0 0 1rem; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav, .no-js .site-nav { position: static; display: block; padding: 0; border: 0; background: transparent; }
  .site-nav ul { display: flex; align-items: center; gap: 2.25rem; }
  .site-nav li { border: 0; }
  .site-nav a:not(.btn) {
    position: relative; padding: 0.4rem 0;
    font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .site-nav a:not(.btn)[aria-current="page"] { font-style: normal; }
  .site-nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--cobalt); transform: scaleX(0); transform-origin: left;
    transition: transform 0.25s ease;
  }
  .site-nav a:not(.btn):hover::after,
  .site-nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav .nav-cta { padding: 0; }
  .site-nav .nav-cta .btn { width: auto; min-height: 2.7rem; padding: 0.6rem 1.2rem; font-size: 0.8rem; }
}

/* 7. Lefkara lace pattern
   Drawn from Lefkara lace, the traditional needlework of Cyprus: a diagonal
   grid of satin-stitch stars and cutwork diamonds, joined by hemstitch lines.
   Used on purpose in three places only, never on photos:
   - .lace-band        a single ribbon of the motif (Home, under the hero)
   - .lace-band--navy  the same ribbon in light blue, above the footer
   - .laced            the full pattern, like white lace on blue linen, on dark sections
   ------------------------------------------------------------------------ */
.lace-band {
  height: 84px;
  background-color: var(--mist);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 84px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 60'%3E%3Cpath d='M0 2.5H104M0 57.5H104' stroke='%231f4e9c' stroke-width='1.2' stroke-dasharray='1.4 2.4' fill='none'/%3E%3Cpath d='M2 30L26 6L50 30L26 54Z' fill='none' stroke='%231f4e9c' stroke-width='1' stroke-dasharray='1.4 2.4'/%3E%3Cpath fill='%231f4e9c' fill-rule='evenodd' d='M26 28.03 L29.35 20.16 L26 10.32 L22.65 20.16ZM26 18.29 L27.48 19.77 L26 21.24 L24.52 19.77ZM27.39 28.61 L33.79 26.94 L36.85 19.15 L29.06 22.21ZM32.69 23.31 L32.69 25.4 L30.6 25.4 L30.6 23.31ZM27.97 30 L35.84 33.35 L45.68 30 L35.84 26.65ZM37.71 30 L36.23 31.48 L34.76 30 L36.23 28.52ZM27.39 31.39 L29.06 37.79 L36.85 40.85 L33.79 33.06ZM32.69 36.69 L30.6 36.69 L30.6 34.6 L32.69 34.6ZM26 31.97 L22.65 39.84 L26 49.68 L29.35 39.84ZM26 41.71 L24.52 40.23 L26 38.76 L27.48 40.23ZM24.61 31.39 L18.21 33.06 L15.15 40.85 L22.94 37.79ZM19.31 36.69 L19.31 34.6 L21.4 34.6 L21.4 36.69ZM24.03 30 L16.16 26.65 L6.32 30 L16.16 33.35ZM14.29 30 L15.77 28.52 L17.24 30 L15.77 31.48ZM24.61 28.61 L22.94 22.21 L15.15 19.15 L18.21 26.94ZM19.31 23.31 L21.4 23.31 L21.4 25.4 L19.31 25.4Z'/%3E%3Ccircle cx='26' cy='30' r='1.38' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Cpath fill='none' stroke='%231f4e9c' stroke-width='1.3' d='M78 9.36L57.36 30M78 50.64L57.36 30M83.16 14.52L62.52 35.16M83.16 45.48L62.52 24.84M88.32 19.68L67.68 40.32M88.32 40.32L67.68 19.68M93.48 24.84L72.84 45.48M93.48 35.16L72.84 14.52M98.64 30L78 50.64M98.64 30L78 9.36'/%3E%3Ccircle cx='62.52' cy='30' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='62.52' cy='30' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='67.68' cy='24.84' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='67.68' cy='24.84' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='72.84' cy='19.68' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='72.84' cy='19.68' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='78' cy='14.52' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='78' cy='14.52' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='67.68' cy='35.16' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='67.68' cy='35.16' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='72.84' cy='30' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='72.84' cy='30' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='78' cy='24.84' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='78' cy='24.84' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='83.16' cy='19.68' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='83.16' cy='19.68' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='72.84' cy='40.32' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='72.84' cy='40.32' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='78' cy='35.16' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='78' cy='35.16' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='83.16' cy='30' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='83.16' cy='30' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='88.32' cy='24.84' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='88.32' cy='24.84' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='78' cy='45.48' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='78' cy='45.48' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='83.16' cy='40.32' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='83.16' cy='40.32' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='88.32' cy='35.16' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='88.32' cy='35.16' r='0.62' fill='%231f4e9c'/%3E%3Ccircle cx='93.48' cy='30' r='2.06' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='93.48' cy='30' r='0.62' fill='%231f4e9c'/%3E%3Cpath d='M54 30L78 6L102 30L78 54Z' fill='none' stroke='%231f4e9c' stroke-width='1' stroke-dasharray='1.4 2.4'/%3E%3Ccircle cx='0' cy='30' r='2.2' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='52' cy='30' r='2.2' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3Ccircle cx='104' cy='30' r='2.2' fill='none' stroke='%231f4e9c' stroke-width='1'/%3E%3C/svg%3E");
}
.lace-band--navy {
  background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 60'%3E%3Cpath d='M0 2.5H104M0 57.5H104' stroke='%23bcd3ee' stroke-width='1.2' stroke-dasharray='1.4 2.4' fill='none'/%3E%3Cpath d='M2 30L26 6L50 30L26 54Z' fill='none' stroke='%23bcd3ee' stroke-width='1' stroke-dasharray='1.4 2.4'/%3E%3Cpath fill='%23bcd3ee' fill-rule='evenodd' d='M26 28.03 L29.35 20.16 L26 10.32 L22.65 20.16ZM26 18.29 L27.48 19.77 L26 21.24 L24.52 19.77ZM27.39 28.61 L33.79 26.94 L36.85 19.15 L29.06 22.21ZM32.69 23.31 L32.69 25.4 L30.6 25.4 L30.6 23.31ZM27.97 30 L35.84 33.35 L45.68 30 L35.84 26.65ZM37.71 30 L36.23 31.48 L34.76 30 L36.23 28.52ZM27.39 31.39 L29.06 37.79 L36.85 40.85 L33.79 33.06ZM32.69 36.69 L30.6 36.69 L30.6 34.6 L32.69 34.6ZM26 31.97 L22.65 39.84 L26 49.68 L29.35 39.84ZM26 41.71 L24.52 40.23 L26 38.76 L27.48 40.23ZM24.61 31.39 L18.21 33.06 L15.15 40.85 L22.94 37.79ZM19.31 36.69 L19.31 34.6 L21.4 34.6 L21.4 36.69ZM24.03 30 L16.16 26.65 L6.32 30 L16.16 33.35ZM14.29 30 L15.77 28.52 L17.24 30 L15.77 31.48ZM24.61 28.61 L22.94 22.21 L15.15 19.15 L18.21 26.94ZM19.31 23.31 L21.4 23.31 L21.4 25.4 L19.31 25.4Z'/%3E%3Ccircle cx='26' cy='30' r='1.38' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Cpath fill='none' stroke='%23bcd3ee' stroke-width='1.3' d='M78 9.36L57.36 30M78 50.64L57.36 30M83.16 14.52L62.52 35.16M83.16 45.48L62.52 24.84M88.32 19.68L67.68 40.32M88.32 40.32L67.68 19.68M93.48 24.84L72.84 45.48M93.48 35.16L72.84 14.52M98.64 30L78 50.64M98.64 30L78 9.36'/%3E%3Ccircle cx='62.52' cy='30' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='62.52' cy='30' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='67.68' cy='24.84' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='67.68' cy='24.84' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='72.84' cy='19.68' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='72.84' cy='19.68' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='78' cy='14.52' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='78' cy='14.52' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='67.68' cy='35.16' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='67.68' cy='35.16' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='72.84' cy='30' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='72.84' cy='30' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='78' cy='24.84' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='78' cy='24.84' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='83.16' cy='19.68' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='83.16' cy='19.68' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='72.84' cy='40.32' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='72.84' cy='40.32' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='78' cy='35.16' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='78' cy='35.16' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='83.16' cy='30' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='83.16' cy='30' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='88.32' cy='24.84' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='88.32' cy='24.84' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='78' cy='45.48' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='78' cy='45.48' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='83.16' cy='40.32' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='83.16' cy='40.32' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='88.32' cy='35.16' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='88.32' cy='35.16' r='0.62' fill='%23bcd3ee'/%3E%3Ccircle cx='93.48' cy='30' r='2.06' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='93.48' cy='30' r='0.62' fill='%23bcd3ee'/%3E%3Cpath d='M54 30L78 6L102 30L78 54Z' fill='none' stroke='%23bcd3ee' stroke-width='1' stroke-dasharray='1.4 2.4'/%3E%3Ccircle cx='0' cy='30' r='2.2' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='52' cy='30' r='2.2' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3Ccircle cx='104' cy='30' r='2.2' fill='none' stroke='%23bcd3ee' stroke-width='1'/%3E%3C/svg%3E");
}

.laced { position: relative; overflow: hidden; }
.laced::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.08;
  background-size: 150px 150px;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M49.84 -1.84L97.84 46.16' stroke='%23ffffff' stroke-width='1.2' stroke-dasharray='1.4 2.4' fill='none'/%3E%3Cpath d='M46.16 1.84L94.16 49.84' stroke='%23ffffff' stroke-width='1.2' stroke-dasharray='1.4 2.4' fill='none'/%3E%3Cpath d='M97.84 49.84L49.84 97.84' stroke='%23ffffff' stroke-width='1.2' stroke-dasharray='1.4 2.4' fill='none'/%3E%3Cpath d='M94.16 46.16L46.16 94.16' stroke='%23ffffff' stroke-width='1.2' stroke-dasharray='1.4 2.4' fill='none'/%3E%3Cpath d='M46.16 97.84L-1.84 49.84' stroke='%23ffffff' stroke-width='1.2' stroke-dasharray='1.4 2.4' fill='none'/%3E%3Cpath d='M49.84 94.16L1.84 46.16' stroke='%23ffffff' stroke-width='1.2' stroke-dasharray='1.4 2.4' fill='none'/%3E%3Cpath d='M-1.84 46.16L46.16 -1.84' stroke='%23ffffff' stroke-width='1.2' stroke-dasharray='1.4 2.4' fill='none'/%3E%3Cpath d='M1.84 49.84L49.84 1.84' stroke='%23ffffff' stroke-width='1.2' stroke-dasharray='1.4 2.4' fill='none'/%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M48 45.6 L52.08 36 L48 24 L43.92 36ZM48 33.72 L49.8 35.52 L48 37.32 L46.2 35.52ZM49.7 46.3 L57.5 44.27 L61.24 34.76 L51.73 38.5ZM56.16 39.84 L56.16 42.39 L53.61 42.39 L53.61 39.84ZM50.4 48 L60 52.08 L72 48 L60 43.92ZM62.28 48 L60.48 49.8 L58.68 48 L60.48 46.2ZM49.7 49.7 L51.73 57.5 L61.24 61.24 L57.5 51.73ZM56.16 56.16 L53.61 56.16 L53.61 53.61 L56.16 53.61ZM48 50.4 L43.92 60 L48 72 L52.08 60ZM48 62.28 L46.2 60.48 L48 58.68 L49.8 60.48ZM46.3 49.7 L38.5 51.73 L34.76 61.24 L44.27 57.5ZM39.84 56.16 L39.84 53.61 L42.39 53.61 L42.39 56.16ZM45.6 48 L36 43.92 L24 48 L36 52.08ZM33.72 48 L35.52 46.2 L37.32 48 L35.52 49.8ZM46.3 46.3 L44.27 38.5 L34.76 34.76 L38.5 44.27ZM39.84 39.84 L42.39 39.84 L42.39 42.39 L39.84 42.39Z'/%3E%3Ccircle cx='48' cy='48' r='1.68' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='48' cy='13.44' r='1.8' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='48' cy='82.56' r='1.8' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='13.44' cy='48' r='1.8' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='82.56' cy='48' r='1.8' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.3' d='M0 -28.8L-28.8 0M0 28.8L-28.8 0M7.2 -21.6L-21.6 7.2M7.2 21.6L-21.6 -7.2M14.4 -14.4L-14.4 14.4M14.4 14.4L-14.4 -14.4M21.6 -7.2L-7.2 21.6M21.6 7.2L-7.2 -21.6M28.8 0L0 28.8M28.8 0L0 -28.8'/%3E%3Ccircle cx='-21.6' cy='0' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-21.6' cy='0' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-14.4' cy='-7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-14.4' cy='-7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-7.2' cy='-14.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-7.2' cy='-14.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-0' cy='-21.6' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-0' cy='-21.6' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-14.4' cy='7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-14.4' cy='7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-7.2' cy='0' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-7.2' cy='0' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='-7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='0' cy='-7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='7.2' cy='-14.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='7.2' cy='-14.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-7.2' cy='14.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-7.2' cy='14.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='0' cy='7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='7.2' cy='0' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='7.2' cy='0' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='14.4' cy='-7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='14.4' cy='-7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-0' cy='21.6' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-0' cy='21.6' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='7.2' cy='14.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='7.2' cy='14.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='14.4' cy='7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='14.4' cy='7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='21.6' cy='0' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='21.6' cy='0' r='0.86' fill='%23ffffff'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.3' d='M96 -28.8L67.2 0M96 28.8L67.2 0M103.2 -21.6L74.4 7.2M103.2 21.6L74.4 -7.2M110.4 -14.4L81.6 14.4M110.4 14.4L81.6 -14.4M117.6 -7.2L88.8 21.6M117.6 7.2L88.8 -21.6M124.8 0L96 28.8M124.8 0L96 -28.8'/%3E%3Ccircle cx='74.4' cy='0' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='74.4' cy='0' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='81.6' cy='-7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='81.6' cy='-7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='88.8' cy='-14.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='88.8' cy='-14.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='96' cy='-21.6' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='96' cy='-21.6' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='81.6' cy='7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='81.6' cy='7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='88.8' cy='0' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='88.8' cy='0' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='96' cy='-7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='96' cy='-7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='103.2' cy='-14.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='103.2' cy='-14.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='88.8' cy='14.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='88.8' cy='14.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='96' cy='7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='96' cy='7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='103.2' cy='0' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='103.2' cy='0' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='110.4' cy='-7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='110.4' cy='-7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='96' cy='21.6' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='96' cy='21.6' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='103.2' cy='14.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='103.2' cy='14.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='110.4' cy='7.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='110.4' cy='7.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='117.6' cy='0' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='117.6' cy='0' r='0.86' fill='%23ffffff'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.3' d='M0 67.2L-28.8 96M0 124.8L-28.8 96M7.2 74.4L-21.6 103.2M7.2 117.6L-21.6 88.8M14.4 81.6L-14.4 110.4M14.4 110.4L-14.4 81.6M21.6 88.8L-7.2 117.6M21.6 103.2L-7.2 74.4M28.8 96L0 124.8M28.8 96L0 67.2'/%3E%3Ccircle cx='-21.6' cy='96' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-21.6' cy='96' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-14.4' cy='88.8' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-14.4' cy='88.8' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-7.2' cy='81.6' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-7.2' cy='81.6' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-0' cy='74.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-0' cy='74.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-14.4' cy='103.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-14.4' cy='103.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-7.2' cy='96' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-7.2' cy='96' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='88.8' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='0' cy='88.8' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='7.2' cy='81.6' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='7.2' cy='81.6' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-7.2' cy='110.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-7.2' cy='110.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='103.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='0' cy='103.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='7.2' cy='96' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='7.2' cy='96' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='14.4' cy='88.8' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='14.4' cy='88.8' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='-0' cy='117.6' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='-0' cy='117.6' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='7.2' cy='110.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='7.2' cy='110.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='14.4' cy='103.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='14.4' cy='103.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='21.6' cy='96' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='21.6' cy='96' r='0.86' fill='%23ffffff'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.3' d='M96 67.2L67.2 96M96 124.8L67.2 96M103.2 74.4L74.4 103.2M103.2 117.6L74.4 88.8M110.4 81.6L81.6 110.4M110.4 110.4L81.6 81.6M117.6 88.8L88.8 117.6M117.6 103.2L88.8 74.4M124.8 96L96 124.8M124.8 96L96 67.2'/%3E%3Ccircle cx='74.4' cy='96' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='74.4' cy='96' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='81.6' cy='88.8' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='81.6' cy='88.8' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='88.8' cy='81.6' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='88.8' cy='81.6' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='96' cy='74.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='96' cy='74.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='81.6' cy='103.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='81.6' cy='103.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='88.8' cy='96' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='88.8' cy='96' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='96' cy='88.8' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='96' cy='88.8' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='103.2' cy='81.6' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='103.2' cy='81.6' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='88.8' cy='110.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='88.8' cy='110.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='96' cy='103.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='96' cy='103.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='103.2' cy='96' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='103.2' cy='96' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='110.4' cy='88.8' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='110.4' cy='88.8' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='96' cy='117.6' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='96' cy='117.6' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='103.2' cy='110.4' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='103.2' cy='110.4' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='110.4' cy='103.2' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='110.4' cy='103.2' r='0.86' fill='%23ffffff'/%3E%3Ccircle cx='117.6' cy='96' r='2.88' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='117.6' cy='96' r='0.86' fill='%23ffffff'/%3E%3C/svg%3E");
}
.laced > * { position: relative; }

/* Photo with a plain light-blue block offset behind it */
.framed { position: relative; margin: 0; padding: 0 1.25rem 1.25rem 0; }
.framed::before {
  content: ""; position: absolute; top: 1.25rem; left: 1.25rem; right: 0; bottom: 0;
  background: var(--mist);
}
.framed img { position: relative; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Round portrait with a thin blue ring */
.portrait-round { margin: 0 auto; max-width: 25rem; width: 100%; padding: 13px; }
.portrait-round img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%;
  outline: 1px solid var(--cobalt); outline-offset: 12px;
}

/* 8. Hero and page intros
   ------------------------------------------------------------------------ */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem); }
.hero h1 { max-width: 13ch; }
.hero .lead { max-width: 34rem; margin-top: 1.25rem; }
@media (min-width: 900px) {
  .hero .split { grid-template-columns: 7fr 5fr; }
}

.who-line {
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 1rem; color: var(--slate);
  max-width: 34rem;
}
.who-line strong { color: var(--navy); font-weight: 500; }

.page-intro { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 6vw, 4.5rem); }
.page-intro h1 { max-width: 16ch; }
.page-intro .lead { max-width: 36rem; }

/* 9. Home sections
   ------------------------------------------------------------------------ */
/* "Sound familiar?" problem list */
.problems { list-style: none; display: grid; gap: 1rem; }
@media (min-width: 768px) { .problems { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.problems li {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.4rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 14; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.35;
  color: var(--navy);
}
.problems li::before {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: 0.45em;
  border: 1px solid var(--cobalt); transform: rotate(45deg);
}
.answer {
  margin-top: 2.25rem; max-width: 44rem;
  font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 14; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3;
  color: var(--navy);
}
.answer em { color: var(--cobalt); }

/* Core offer feature panel */
.core {
  display: grid; gap: 2rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--navy); color: #d9e5f4;
}
@media (min-width: 900px) { .core { grid-template-columns: 5fr 4fr; gap: 3.5rem; align-items: center; } }
.core h3 { color: var(--white); font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.core h3 em { color: var(--sky); }
.core .eyebrow { color: var(--sky); }
.core p { color: #d9e5f4; }
.core .tick-list li { color: #d9e5f4; }
.core .tick-list li::before { border-color: var(--sky); }

.also-label {
  margin: 2.5rem 0 1rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate);
}

/* 10. Cards, lists and panels
   ------------------------------------------------------------------------ */
.card-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.section--mist .card, .section--porcelain .card { background: var(--white); }
.card h3 { margin: 0; font-size: 1.35rem; }
.card p { margin: 0; color: var(--slate); }
.card__more {
  margin-top: auto; padding-top: 0.75rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cobalt);
}
a.card { transition: border-color 0.2s ease, transform 0.2s ease; }
a.card:hover { border-color: var(--cobalt); transform: translateY(-2px); }

/* Project example cards */
.project { gap: 0.9rem; }
.project dl { margin: 0; display: grid; gap: 0.75rem; }
.project dt {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cobalt);
}
.project dd { margin: 0.15rem 0 0; color: var(--slate); }
.project__tag {
  align-self: flex-start;
  padding: 0.25rem 0.6rem; background: var(--mist);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cobalt);
}

/* Tick list */
.tick-list { list-style: none; display: grid; gap: 0.6rem; }
.tick-list li { position: relative; padding-left: 1.5rem; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border: 1px solid var(--cobalt); transform: rotate(45deg);
}

/* Facts row */
.facts { list-style: none; display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts li { padding-top: 0.9rem; border-top: 1px solid var(--line-strong); }
.facts strong {
  display: block; margin-bottom: 0.2rem;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; font-variation-settings: "opsz" 14; line-height: 1.2;
}
.facts span { color: var(--slate); font-size: 0.95rem; }

/* Two side-by-side panels (CSR, Collabs) */
.panels { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .panels { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.panel { padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--white); border: 1px solid var(--line); }
.panel--mist { background: var(--mist); border-color: transparent; }
.panel h3 { margin-bottom: 0.6rem; }
.panel .tick-list { margin-top: 1.25rem; }
.panel .btn-row { margin-top: 1.75rem; }

/* Numbered steps */
.steps { list-style: none; display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.steps li { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.steps li::before {
  counter-increment: step; content: "0" counter(step);
  display: block; margin-bottom: 0.6rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; color: var(--cobalt);
}
.steps h3 { margin-bottom: 0.4rem; font-size: 1.45rem; }
.steps p { color: var(--slate); margin: 0; }
.section--navy .steps li { border-color: rgba(188, 211, 238, 0.35); }
.section--navy .steps li::before { color: var(--sky); }
.section--navy .steps p { color: #c9d8ea; }

/* Quote */
.quote {
  margin: 2rem 0 0; padding-left: 1.25rem;
  border-left: 2px solid var(--cobalt);
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-variation-settings: "opsz" 14; font-size: 1.2rem; color: var(--navy);
}

/* 11. Service blocks
   ------------------------------------------------------------------------ */
.service {
  display: grid; gap: 1.25rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.service:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .service { grid-template-columns: 4fr 5fr 3fr; gap: 3rem; } }
.service__num {
  display: block; margin-bottom: 0.8rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; color: var(--cobalt);
}
.service__badge {
  display: inline-block; margin-left: 0.6rem; padding: 0.15rem 0.55rem;
  background: var(--cobalt); color: var(--white);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; vertical-align: middle;
}
.service h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0; }
.service__good h3 {
  margin-bottom: 0.9rem;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
}
.service__good .tick-list { font-size: 0.98rem; }

.group-title { margin-bottom: 2rem; }

/* 12. Forms and contact details
   ------------------------------------------------------------------------ */
.form { display: grid; gap: 1.35rem; }
@media (min-width: 640px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; } }
.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy);
}
.field .optional { color: var(--slate); text-transform: none; letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.75rem 0.9rem;
  font: inherit; font-size: 1rem; color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line-strong); border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f4e9c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 12px 8px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--cobalt); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(31, 78, 156, 0.2);
}
.form__note { font-size: 0.95rem; color: var(--slate); margin: 0; }
.form .btn { justify-self: start; }
.form-wrap { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--mist); }

.details { list-style: none; display: grid; border-top: 1px solid var(--line); }
.details li { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.details .label {
  display: block; margin-bottom: 0.2rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate);
}
.details .value { font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 14; font-size: 1.25rem; color: var(--navy); }

.personal {
  display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem;
}
.personal img {
  width: 76px; height: 76px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: 55% 25%;
  border: 3px solid var(--mist);
}
.personal p { margin: 0; color: var(--slate); }

/* 13. Placeholders
   Dashed light-blue boxes that mark where a photo or text still needs adding.
   Delete the placeholder and put the real content in its place.
   ------------------------------------------------------------------------ */
.placeholder {
  display: grid; place-items: center; gap: 0.4rem;
  min-height: 10rem; padding: 1.5rem; text-align: center;
  border: 1px dashed var(--line-strong);
  background: var(--porcelain);
  color: var(--slate); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em;
}
.placeholder--photo { aspect-ratio: 4 / 3; min-height: 0; }
.fill { color: var(--slate); font-style: italic; }

.gallery { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

.partner-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } }
.partner-grid .placeholder { min-height: 7rem; }

/* 14. Footer
   ------------------------------------------------------------------------ */
.site-footer { background: var(--navy); color: #c9d8ea; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-footer .wordmark { color: var(--white); }
.site-footer .wordmark__line { color: var(--sky); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1.4fr; gap: 3rem; } }
.footer-tagline { margin-top: 1.25rem; max-width: 26rem; }
.footer-title {
  margin: 0 0 1rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sky);
}
.footer-links { list-style: none; display: grid; gap: 0.55rem; }
.footer-links a { color: var(--white); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(188, 211, 238, 0.25);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.footer-base p { margin: 0; max-width: none; }

/* 15. Scroll reveal and motion
   main.js adds .reveal-ready to <html>, so nothing is hidden without JavaScript.
   ------------------------------------------------------------------------ */
.reveal-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-ready .reveal { opacity: 1; transform: none; }
}

/* Role line under each project title */
.project__role { margin: -0.2rem 0 0.2rem; font-size: 0.95rem; font-weight: 500; color: var(--cobalt); }

/* Testimonial: quote text and who said it */
blockquote.quote { margin: 2rem 0 0; }
blockquote.quote p { margin: 0 0 0.75rem; max-width: 34rem; }
.quote__by { font-family: var(--font-body); font-style: normal; font-size: 0.95rem; font-weight: 450; color: var(--slate); }
.quote__by strong { color: var(--navy); font-weight: 600; }

/* Narrow phones: let the small line under the name wrap so the header always fits */
@media (max-width: 420px) {
  .wordmark { min-width: 0; }
  .wordmark__line { white-space: normal; max-width: 11.5rem; line-height: 1.4; }
  .wordmark__name { font-size: 1.65rem; }
}