/* ============================================================
   DigiWise — Colours & Type foundations
   Single source of truth for brand tokens.
   Import this file wherever DigiWise styling is needed.
   ============================================================ */

/* ----------  FONT FACES (Krub)  ---------- */


@font-face{font-family:"Krub";font-weight:300;font-style:normal;font-display:swap;src:url("/fonts/Krub-Light.ttf") format("truetype");}

@font-face{font-family:"Krub";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/Krub-Regular.ttf") format("truetype");}
@font-face{font-family:"Krub";font-weight:400;font-style:italic;font-display:swap;src:url("/fonts/Krub-Italic.ttf") format("truetype");}
@font-face{font-family:"Krub";font-weight:500;font-style:normal;font-display:swap;src:url("/fonts/Krub-Medium.ttf") format("truetype");}

@font-face{font-family:"Krub";font-weight:600;font-style:normal;font-display:swap;src:url("/fonts/Krub-SemiBold.ttf") format("truetype");}

@font-face{font-family:"Krub";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/Krub-Bold.ttf") format("truetype");}

/* Libre Franklin — display / headings (variable weight 100–900) */
@font-face{font-family:"Libre Franklin";font-weight:100 900;font-style:normal;font-display:swap;src:url("/fonts/LibreFranklin-VariableFont_wght.ttf") format("truetype");}

:root{
  /* ----------  CORE BRAND PALETTE  ----------
     The five hero colours from DigiWise_Colour_Pallette.pdf      */
  --dw-ink:        #264653;  /* dark charcoal-teal — primary text & dark fields  */
  --dw-teal:       #2A9D8F;  /* signature teal — primary brand colour            */
  --dw-yellow:     #E9C46A;  /* warm yellow — highlight / optimism               */
  --dw-sand:       #F4A261;  /* sandy orange — energy / warmth                   */
  --dw-coral:      #E76F51;  /* coral / burnt orange — calls to action, alerts   */

  /* ----------  TEAL RAMP (primary)  ---------- */
  --dw-teal-900:#123c36;
  --dw-teal-700:#1d7064;
  --dw-teal-600:#258376;
  --dw-teal-500:#2A9D8F;
  --dw-teal-400:#54b3a6;
  --dw-teal-300:#86cabf;
  --dw-teal-200:#bce0da;
  --dw-teal-100:#e3f2ef;
  --dw-teal-50: #f1f9f7;

  /* ----------  CORAL RAMP (primary action)  ---------- */
  --dw-coral-100:#fbe3db; --dw-coral-200:#f6c2b3; --dw-coral-300:#f09e88;
  --dw-coral-400:#ec8268; --dw-coral-500:#E76F51; --dw-coral-600:#d65a3c; --dw-coral-700:#b8472c;

  /* ----------  SAND RAMP  ---------- */
  --dw-sand-100:#fdeada; --dw-sand-200:#fad0ad; --dw-sand-300:#f7bb86;
  --dw-sand-400:#f5ad6f; --dw-sand-500:#F4A261; --dw-sand-600:#e08544; --dw-sand-700:#c06b2f;

  /* ----------  YELLOW RAMP  ---------- */
  --dw-yellow-100:#faf1d9; --dw-yellow-200:#f3e0ad; --dw-yellow-300:#eed492;
  --dw-yellow-400:#ebcb7d; --dw-yellow-500:#E9C46A; --dw-yellow-600:#d4a945; --dw-yellow-700:#b08a2f;

  /* ----------  INK RAMP (dark neutral, warm)  ---------- */
  --dw-ink-900:#1a323c;
  --dw-ink-800:#264653;
  --dw-ink-700:#3a5b67;
  --dw-ink-600:#52717c;
  --dw-ink-500:#6d8893;

  /* ----------  WARM NEUTRALS  ----------
     Slightly warm greys keep the friendly, paper-like feel       */
  --dw-white:   #ffffff;
  --dw-paper:   #fbf8f3;  /* warm off-white — default page background */
  --dw-cloud:   #f4efe7;  /* warm card / panel tint                  */
  --dw-mist:    #e9e2d6;  /* hairline borders on paper               */
  --dw-stone:   #cbc3b6;  /* disabled / muted lines                  */
  --dw-slate:   #8c857a;  /* secondary text on paper                 */

  /* ----------  SEMANTIC SURFACES  ---------- */
  --dw-bg:          var(--dw-paper);
  --dw-surface:     var(--dw-white);
  --dw-surface-alt: var(--dw-cloud);
  --dw-surface-dark:var(--dw-ink);
  --dw-border:      var(--dw-mist);
  --dw-border-strong:var(--dw-stone);

  /* ----------  SEMANTIC TEXT  ---------- */
  --dw-fg:        var(--dw-ink);        /* default body text          */
  --dw-fg-muted:  var(--dw-slate);      /* secondary / captions       */
  --dw-fg-ondark: #f3efe8;              /* text on ink/teal fields     */
  --dw-fg-onteal: #ffffff;

  /* ----------  SEMANTIC ACCENTS / STATES  ---------- */
  --dw-primary:        var(--dw-teal);
  --dw-primary-hover:  var(--dw-teal-600);
  --dw-primary-press:  var(--dw-teal-700);
  --dw-cta:            var(--dw-coral);
  --dw-cta-hover:      #d65e41;
  --dw-cta-press:      #c45337;
  --dw-success:        var(--dw-teal);
  --dw-warning:        var(--dw-sand);
  --dw-danger:         var(--dw-coral);
  --dw-info:           var(--dw-teal-600);
  --dw-focus-ring:     #2A9D8F;

  /* ----------  TYPE FAMILY  ----------
     Two-part system:
       Libre Franklin  = display & headings (punchy grotesque)
       Krub            = body copy (friendly, rounded humanist)
     The body-copy font file was supplied as "Krub - Body copy".     */
  --dw-font:        "Krub", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dw-font-display:"Libre Franklin", "Krub", system-ui, sans-serif;

  /* ----------  TYPE WEIGHTS  ---------- */
  --dw-w-xlight:200; /* @kind font */
  --dw-w-light: 300; /* @kind font */
  --dw-w-reg:   400; /* @kind font */
  --dw-w-med:   500; /* @kind font */
  --dw-w-semi:  600; /* @kind font */
  --dw-w-bold:  700; /* @kind font */

  /* ----------  FLUID TYPE SCALE  ----------
     1.250 (major third) ramp. clamp() = responsive on web/print.  */
  --dw-fs-display:clamp(2.75rem, 6vw, 4.75rem); /* @kind font */
  --dw-fs-h1:     clamp(2.25rem, 5vw, 3.25rem); /* @kind font */
  --dw-fs-h2:     clamp(1.75rem, 4vw, 2.5rem); /* @kind font */
  --dw-fs-h3:     clamp(1.4rem, 2.5vw, 1.85rem); /* @kind font */
  --dw-fs-h4:     1.35rem; /* @kind font */
  --dw-fs-lead:   1.3rem; /* @kind font */
  --dw-fs-body:   1.0625rem; /* @kind font */
  --dw-fs-small:  0.9375rem; /* @kind font */
  --dw-fs-caption:0.8125rem; /* @kind font */
  --dw-fs-eyebrow:0.78rem; /* @kind font */

  /* ----------  LINE HEIGHTS  ---------- */
  --dw-lh-tight: 1.08; /* @kind font */
  --dw-lh-snug:  1.25; /* @kind font */
  --dw-lh-body:  1.62; /* @kind font */

  /* ----------  TRACKING  ---------- */
  --dw-ls-tight:  -0.02em; /* @kind font */
  --dw-ls-normal: 0; /* @kind font */
  --dw-ls-eyebrow: 0.16em; /* @kind font */

  /* ----------  RADII  ----------
     Rounded & friendly. Pills for buttons, soft cards.            */
  --dw-r-sm:  8px;
  --dw-r-md:  14px;
  --dw-r-lg:  22px;
  --dw-r-xl:  32px;
  --dw-r-pill:999px;

  /* ----------  SPACING (8pt base, with a 4 step)  ---------- */
  --dw-sp-1:4px; --dw-sp-2:8px; --dw-sp-3:12px; --dw-sp-4:16px;
  --dw-sp-5:24px; --dw-sp-6:32px; --dw-sp-7:48px; --dw-sp-8:64px;
  --dw-sp-9:96px; --dw-sp-10:128px;

  /* ----------  SHADOWS  ----------
     Soft, warm-tinted, low-contrast. Never harsh black.           */
  --dw-shadow-sm: 0 1px 2px rgba(38,70,83,.07), 0 1px 1px rgba(38,70,83,.04);
  --dw-shadow-md: 0 6px 18px rgba(38,70,83,.10), 0 2px 6px rgba(38,70,83,.06);
  --dw-shadow-lg: 0 18px 44px rgba(38,70,83,.14), 0 6px 14px rgba(38,70,83,.08);
  --dw-shadow-teal:0 12px 30px rgba(42,157,143,.28);
  --dw-shadow-coral:0 12px 30px rgba(231,111,81,.30);

  /* ----------  MOTION  ---------- */
  --dw-ease: cubic-bezier(.22,.61,.36,1); /* @kind other */
  --dw-ease-bounce: cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --dw-dur-fast:120ms; /* @kind other */
  --dw-dur:200ms; /* @kind other */
  --dw-dur-slow:380ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply by adding class="dw" to a root element, or copy rules.
   ============================================================ */
.dw{
  font-family:var(--dw-font);
  font-weight:var(--dw-w-reg);
  font-size:var(--dw-fs-body);
  line-height:var(--dw-lh-body);
  color:var(--dw-fg);
  background:var(--dw-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.dw h1,.dw h2,.dw h3,.dw h4{
  font-family:var(--dw-font-display);
  color:var(--dw-ink);
  line-height:var(--dw-lh-tight);
  letter-spacing:var(--dw-ls-tight);
  text-wrap:balance;
  margin:0 0 .5em;
}
.dw .dw-display{font-size:var(--dw-fs-display);font-weight:var(--dw-w-bold);line-height:var(--dw-lh-tight);letter-spacing:var(--dw-ls-tight);}
.dw h1{font-size:var(--dw-fs-h1);font-weight:var(--dw-w-bold);}
.dw h2{font-size:var(--dw-fs-h2);font-weight:var(--dw-w-bold);}
.dw h3{font-size:var(--dw-fs-h3);font-weight:var(--dw-w-semi);letter-spacing:var(--dw-ls-normal);}
.dw h4{font-size:var(--dw-fs-h4);font-weight:var(--dw-w-semi);letter-spacing:var(--dw-ls-normal);}
.dw .dw-lead{font-size:var(--dw-fs-lead);font-weight:var(--dw-w-light);line-height:var(--dw-lh-snug);color:var(--dw-ink-700);}
.dw p{margin:0 0 1em;text-wrap:pretty;}
.dw .dw-eyebrow{
  font-size:var(--dw-fs-eyebrow);font-weight:var(--dw-w-bold);
  letter-spacing:var(--dw-ls-eyebrow);text-transform:uppercase;
  color:var(--dw-teal-600);
}
.dw small,.dw .dw-small{font-size:var(--dw-fs-small);}
.dw .dw-caption{font-size:var(--dw-fs-caption);color:var(--dw-fg-muted);}
.dw a{color:var(--dw-teal-600);text-decoration-color:color-mix(in srgb,var(--dw-teal) 40%,transparent);text-underline-offset:.15em;}
.dw a:hover{color:var(--dw-teal-700);}
.dw strong{font-weight:var(--dw-w-semi);}
.dw em{font-style:italic;}

/* DigiWise marketing-site UI kit — shared component styles.
   Relies on tokens from ../../colors_and_type.css */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--dw-font);color:var(--dw-ink);background:var(--dw-paper);
  font-size:var(--dw-fs-body);line-height:var(--dw-lh-body);-webkit-font-smoothing:antialiased}

.dw-container{max-width:1180px;margin:0 auto;padding:0 28px}
.dw-section{padding:88px 0}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dw-teal-600);margin:0 0 14px}
h1,h2,h3,h4{font-family:var(--dw-font-display);color:var(--dw-ink);letter-spacing:-.02em;line-height:1.06;text-wrap:balance;margin:0}
.h-sec{font-size:clamp(1.9rem,1.2rem+2.4vw,2.9rem);font-weight:700}
.lead{font-size:1.25rem;font-weight:300;line-height:1.4;color:var(--dw-ink-700)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:600;font-size:1rem;
  border:0;border-radius:var(--dw-r-pill);padding:14px 28px;cursor:pointer;text-decoration:none;
  transition:transform var(--dw-dur) var(--dw-ease),box-shadow var(--dw-dur) var(--dw-ease),background var(--dw-dur),color var(--dw-dur)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--dw-teal);color:#fff;box-shadow:var(--dw-shadow-teal)}
.btn-primary:hover{background:var(--dw-teal-600);transform:translateY(-2px)}
.btn-primary:active{background:var(--dw-teal-700);transform:scale(.97)}
.btn-cta{background:var(--dw-coral);color:#fff;box-shadow:var(--dw-shadow-coral)}
.btn-cta:hover{background:var(--dw-cta-hover);transform:translateY(-2px)}
.btn-cta:active{background:var(--dw-cta-press);transform:scale(.97)}
.btn-ghost{background:transparent;color:var(--dw-teal-700);box-shadow:inset 0 0 0 2px var(--dw-teal)}
.btn-ghost:hover{background:var(--dw-teal-50)}
.btn-light{background:#fff;color:var(--dw-ink);box-shadow:var(--dw-shadow-sm)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--dw-shadow-md)}
.btn-sm{padding:10px 18px;font-size:.9rem}

.card{background:#fff;border-radius:var(--dw-r-lg);box-shadow:var(--dw-shadow-md)}

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

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

[hidden]{display:none!important}

/* The old Consentik banner from the previous site is replaced by the DigiWise banner */
#consentik-cookie,#cst-cookie-banner,#cst-cookie-banner-overlay{display:none!important}