/* ==========================================================================
   SSPL Textile – base: tokens, reset, typography, buttons, motion
   Palette: supplied colour-palette image + brand navy #13344D + the red of the logo.
   ========================================================================== */

/*  */
:root {
  /* ---- Colour palette (from the supplied palette image) ---- */
  --misty-blue:  #C6D1D9;   /* Misty Blue  */
  --light-grey:  #F1F1F1;   /* Light Grey  */
  --pale-blush:  #F4EBE9;   /* Pale Blush  */
  --oak-wood:    #E7E0D8;   /* Oak Wood    */
  --nordic-blue: #67869A;  
   --nordic-blue1: #3f6279;   /* Nordic Blue */

  /* Brand */
  --navy: #13344D;
  --navy-900: #0A1F30;
  --navy-800: #0E2A40;
  --navy-500: #2A5778;

  /* Palette image */
  --nordic: var(--nordic-blue);      /* Nordic Blue */
  --nordic-700: var(--nordic-blue);  /* Nordic Blue, darkened for AA text on light */
  --misty: var(--misty-blue);       /* Misty Blue */
  --misty-200: var(--misty-blue);
  --misty-100: var(--light-grey);
  --grey: var(--light-grey);       /* Light Grey */
  --blush: var(--pale-blush);      /* Pale Blush */
  --oak: var(--oak-wood);        /* Oak Wood */
  --oak-200: var(--oak-wood);
  --oak-700: var(--nordic-blue);    /* Oak Wood, darkened for small labels */

  /* Accents taken from the logo */
  --accent: var(--nordic-blue1);     /* logo red – calls to action */
  --accent-700: var(--nordic-blue);
  --gold: var(--nordic-blue);       /* logo tagline gold – hairlines, ornaments */
  --gold-200: var(--oak-wood);

  --heading-color: var(--navy);   /* main headings on light backgrounds */
  --ink: #16222C;
  --ink-soft: #42505C;
  --white: #fff;

  --ff-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --ff-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --gutter: clamp(20px, 4.2vw, 56px);
  --container: 1280px;
  --sec-y: clamp(56px, 4.8vw, 76px);
  --header-h: 88px;
  --radius: 8px;
  --ease: cubic-bezier(.22, .7, .18, 1);
}
@media (min-width: 1700px) { :root { --container: 1440px; } }
@media (max-width: 1060px) { :root { --header-h: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
address { font-style: normal; }
summary { cursor: pointer; }

:focus-visible { outline: 3px solid var(--nordic-blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--navy); color: #fff; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--sec-y); position: relative; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300; padding: .7rem 1.1rem; border-radius: 6px;
  background: var(--white); color: var(--navy); font-weight: 700; font-size: .95rem;
  transform: translateY(-160%); transition: transform .25s var(--ease);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.skip-link:focus { transform: none; }

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Typography ---------- */
.h-display {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(2.35rem, 1.3rem + 3.3vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--heading-color);
  text-wrap: balance;
}
.h-display--light { color: #fff; }
.h-display--md { font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.3rem); line-height: 1.08; }

.h-sub {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.2rem + .7vw, 1.8rem);
  line-height: 1.15;
  color: var(--navy-500);
}

.subhead {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.4rem, 1.15rem + .8vw, 1.8rem);
  line-height: 1.25;
  color: var(--navy-500);
  padding-left: 1.1rem;
  border-left: 3px solid var(--gold);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .22em;
  color: var(--oak-700);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 2.6rem; border-top: 2px dashed var(--gold); }
.eyebrow--light { color: var(--gold-200); }

.lead-text { font-size: 1rem; line-height: 1.75; color: var(--ink-soft); max-width: 62ch; }
.lead-text--light { color: var(--misty-200); }
.lead-text--strong { color: var(--ink); font-weight: 600; }

.h-display + .lead-text,
.h-display + .subhead { margin-top: 1.4rem; }
.subhead + .lead-text, .lead-text + .lead-text { margin-top: 1.1rem; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding: .62rem .62rem .62rem 1.6rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--ff-body); font-weight: 700; font-size: .98rem; letter-spacing: .02em; line-height: 1.2;
  text-align: left; cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateY(102%); transition: transform .45s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:active { transform: scale(.985); }
.btn__arrow {
  width: 2.35rem; height: 2.35rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  transition: transform .4s var(--ease), background-color .35s;
}
.btn__arrow .icon { width: 1.05rem; height: 1.05rem; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -12px rgba(103, 134, 154, .7); }
.btn--primary::before { background: var(--navy); }
.btn--primary .btn__arrow { background: rgba(255, 255, 255, .18); }
.btn--primary:hover { box-shadow: 0 14px 28px -12px rgba(10, 31, 48, .6); }

.btn--outline { color: var(--navy); border-color: var(--navy); }
.btn--outline::before { background: var(--navy); }
.btn--outline .btn__arrow { background: var(--navy); color: #fff; }
.btn--outline:hover { color: #fff; }
.btn--outline:hover .btn__arrow { background: rgba(255, 255, 255, .2); }

.btn--outline-light { color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--outline-light::before { background: #fff; }
.btn--outline-light .btn__arrow { background: rgba(255, 255, 255, .16); }
.btn--outline-light:hover { color: var(--navy); border-color: #fff; }
.btn--outline-light:hover .btn__arrow { background: var(--navy); color: #fff; }

.btn--ghost { color: var(--navy); border-color: rgba(19, 52, 77, .35); }
.btn--ghost::before { background: var(--navy); }
.btn--ghost .btn__arrow { background: var(--misty-200); }
.btn--ghost:hover { color: #fff; }

.btn--wa { background: #1B9A52; color: #fff; }
.btn--wa::before { background: #137a40; }
.btn--wa .btn__arrow { background: rgba(255, 255, 255, .18); }

.btn--lg { font-size: 1.05rem; padding: .7rem .7rem .7rem 1.9rem; }
.btn--lg .btn__arrow { width: 2.6rem; height: 2.6rem; }
.btn--block { width: 100%; justify-content: space-between; }

.round-btn {
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--navy); color: var(--navy);
  transition: background-color .3s, color .3s, opacity .3s, transform .3s var(--ease);
}
.round-btn:hover:not(:disabled) { background: var(--navy); color: #fff; transform: scale(1.06); }
.round-btn:disabled { opacity: .35; cursor: default; }

/* ---------- Textile weave texture (decorative) ---------- */
.weave-bg { position: relative; isolation: isolate; }
.weave-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 8px);
}

/* ---------- Scroll-reveal (only when JS is running) ---------- */
.js .reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal[data-d="1"] { transition-delay: .1s; }
.js .reveal[data-d="2"] { transition-delay: .2s; }
.js .reveal[data-d="3"] { transition-delay: .3s; }
.js .reveal[data-d="4"] { transition-delay: .4s; }
.js .reveal[data-d="5"] { transition-delay: .5s; }
.js .reveal[data-d="6"] { transition-delay: .6s; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal.done { transition-delay: 0s; }

.js .reveal-img {
  /* a 2px sliver stays 'visible' so IntersectionObserver and lazy-loading still see the element */
  opacity: 0; clip-path: inset(0 0 calc(100% - 2px) 0);
  transition: clip-path 1.3s var(--ease), opacity .6s ease;
}
.js .reveal-img.is-in { opacity: 1; clip-path: inset(-80px -80px -80px -80px); }
.zoom { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.js .reveal-img .zoom { transform: scale(1.14); }
.js .reveal-img.is-in .zoom { transform: scale(1); }
.js .reveal-img.is-in:hover .zoom { transform: scale(1.045); }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .reveal-img { opacity: 1; transform: none; clip-path: none; }
  .js .reveal-img .zoom { transform: none; }
}

/* focus ring stays visible on the dark navy surfaces */
.hero :focus-visible, .intro :focus-visible, .advanced :focus-visible, .partner :focus-visible,
.cta :focus-visible, .site-footer :focus-visible, .topbar :focus-visible { outline-color: var(--light-grey); }