/* UBT Technology — Webfonts (self-hosted, licensed)
   ------------------------------------------------------------------
   Brand faces, now using the licensed binaries supplied in tokens/fonts/:
   - Neuzeit Grotesk  — master (Light = primary, Bold = headings)
   - Karla            — digital / UI face
   - Lavos Handy      — Golden Advice quotes only
   - Arial            — fallback

   NOTE: only Light/Regular/Bold Neuzeit weights were supplied (no Black
   master). The --weight-black token (800) therefore resolves to Bold for
   very-large display text. Drop a NeuzeitGro-Black.ttf in tokens/fonts/ and
   add an 800 @font-face below if the Black weight becomes available. */

/* ---- Neuzeit Grotesk ---- */
@font-face {
  font-family: "Neuzeit Grotesk";
  src: url("/brand/fonts/NeuzeitGrotesk-300.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neuzeit Grotesk";
  src: url("/brand/fonts/NeuzeitGrotesk-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neuzeit Grotesk";
  src: url("/brand/fonts/NeuzeitGrotesk-700_900.ttf") format("truetype");
  font-weight: 700 900;       /* Bold covers the 800 "Black" display token */
  font-style: normal;
  font-display: swap;
}

/* ---- Karla (UI) ---- */
@font-face {
  font-family: "Karla";
  src: url("/brand/fonts/Karla-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("/brand/fonts/Karla-400.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("/brand/fonts/Karla-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("/brand/fonts/Karla-700.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---- Lavos Handy (Golden Advice quotes only) ---- */
@font-face {
  font-family: "Lavos Handy";
  src: url("/brand/fonts/LavosHandy-400_700.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* UBT Technology — Colour tokens
   Pillar teal leads. Deep teal is the dark contrast; light teal is an 80% tint.
   Navy + red are corporate: logo, headings and a sparing accent only — never
   blended into the teal palette. Neutrals are functional (layout/UI), not brand. */

:root {
  /* ---- Brand: Technology pillar ---- */
  --tech-teal:        #00A5BB;  /* pillar primary  · PMS 7711 C */
  --tech-teal-deep:   #005E82;  /* dark contrast / dark shards  */
  --tech-teal-light:  #66C9D6;  /* 80% tint / light shards      */

  /* extra teal steps (derived, for UI surfaces & states) */
  --tech-teal-900:    #06384A;
  --tech-teal-800:    #005E82;
  --tech-teal-700:    #007A95;
  --tech-teal-600:    #0093AB;
  --tech-teal-500:    #00A5BB;
  --tech-teal-400:    #33B7C9;
  --tech-teal-300:    #66C9D6;
  --tech-teal-200:    #A3DEE6;
  --tech-teal-100:    #D2EFF3;
  --tech-teal-50:     #ECF8FA;

  /* ---- Brand: Corporate ---- */
  --ubt-navy:         #1A1C63;  /* PMS 2758 C — corporate, headings */
  --ubt-navy-700:     #2A2D7A;
  --ubt-red:          #EE202E;  /* PMS 1795 C — accent only         */
  --ubt-red-700:      #C7121E;

  /* ---- Functional neutrals ---- */
  --ink:              #15303D;  /* body text                        */
  --ink-700:          #2E4956;
  --ink-500:          #5A727D;  /* muted text                       */
  --ink-400:          #8499A2;  /* placeholder / disabled text      */
  --line:            #DCE7EC;   /* hairline borders                 */
  --line-strong:     #C2D3DA;
  --surface:          #FFFFFF;  /* base surface                     */
  --surface-tint:     #F3F9FB;  /* "Teal Mist" section tint         */
  --surface-sunken:   #ECF3F6;

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--tech-teal);
  --color-primary-hover:  var(--tech-teal-600);
  --color-primary-active: var(--tech-teal-700);
  --color-primary-tint:   var(--tech-teal-50);
  --color-accent:         var(--ubt-red);

  --text-heading:     var(--ubt-navy);
  --text-body:        var(--ink);
  --text-muted:       var(--ink-500);
  --text-on-teal:     #FFFFFF;
  --text-link:        var(--tech-teal-700);

  --surface-page:     var(--surface);
  --surface-card:     var(--surface);
  --surface-section:  var(--surface-tint);
  --border-color:     var(--line);

  /* status (derived to sit alongside the brand, used in UI only) */
  --success:          #1F9D6B;
  --success-tint:     #E7F5EF;
  --warning:          #E08A1E;
  --warning-tint:     #FBF1E0;
  --danger:           var(--ubt-red);
  --danger-tint:      #FDE7E8;
  --info:             var(--tech-teal-600);
  --info-tint:        var(--tech-teal-50);

  /* ---- Gradients (both run 135°) ---- */
  --grad-dark:  linear-gradient(135deg, #00A5BB 0%, #005E82 100%); /* @kind color */
  --grad-light: linear-gradient(135deg, #66C9D6 0%, #00A5BB 100%); /* @kind color */
}

/* UBT Technology — Typography tokens
   Master: Neuzeit Grotesk (licensed, self-hosted). Light is the primary weight,
   Bold carries headings, Black/Bold is reserved for very large isolated text.
   Karla is the digital/UI face. Lavos Handy = Golden Advice quotes only. */

:root {
  /* ---- Families ---- */
  --font-display: "Neuzeit Grotesk", Arial, sans-serif;
  --font-body:    "Neuzeit Grotesk", Arial, sans-serif;
  --font-digital: "Karla", Arial, sans-serif;        /* screen / UI */
  --font-quote:   "Lavos Handy", "Caveat", cursive;  /* Golden Advice quotes */

  /* ---- Weights ---- */
  --weight-light:   300;  /* body, lead — primary weight */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;  /* headings */
  --weight-black:   800;  /* very large isolated display only */

  /* ---- Type scale (brand pt sizes -> px, plus a UI scale) ----
     Brand spec: display 44 / h1 28 / h2 18 / lead 14 / body 10.5 / label 8 (pt) */
  --text-display:   3.75rem;    /* 60px hero (the .ubt-display class adds fluid clamp) */
  --text-h1:        2.125rem;   /* 34px */
  --text-h2:        1.5rem;     /* 24px */
  --text-h3:        1.25rem;    /* 20px */
  --text-lead:      1.1875rem;  /* 19px */
  --text-base:      1rem;       /* 16px — UI body */
  --text-sm:        0.875rem;   /* 14px */
  --text-xs:        0.75rem;    /* 12px */
  --text-label:     0.6875rem;  /* 11px tracked caps */

  /* ---- Line heights ---- */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* ---- Tracking ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-label:  0.18em;   /* tracked uppercase eyebrow / caption */
}

/* UBT Technology — Spacing, radii & sizing
   Base 8px rhythm with a 4px half-step. */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.5rem;   /* 24px */
  --space-6:   2rem;     /* 32px */
  --space-7:   2.5rem;   /* 40px */
  --space-8:   3rem;     /* 48px */
  --space-9:   4rem;     /* 64px */
  --space-10:  6rem;     /* 96px */

  /* ---- Radii ----
     The brand geometry is angular (the shard). UI radii stay restrained:
     small, functional rounding; the petal/shard carry the personality. */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ---- Containers & layout ---- */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1320px;
  --gutter:        clamp(1rem, 0.4rem + 3vw, 2.5rem); /* @kind spacing */

  /* ---- Control sizing ---- */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --tap-target:   44px;  /* minimum interactive size */
}

/* UBT Technology — Effects: shadows, borders, motion & the shard
   The shard is the signature device: a diagonal teal-gradient cut, anchored to a
   page edge and bled off. One dominant diagonal per layout. */

:root {
  /* ---- Borders ---- */
  --border-hair:   1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);
  --border-teal:   1px solid var(--tech-teal);
  --focus-ring:    0 0 0 3px rgba(0, 165, 187, 0.35);

  /* ---- Shadows (cool, low, teal-tinted — never heavy/black) ---- */
  --shadow-xs: 0 1px 2px rgba(21, 48, 61, 0.06);
  --shadow-sm: 0 1px 3px rgba(21, 48, 61, 0.08), 0 1px 2px rgba(21, 48, 61, 0.06);
  --shadow-md: 0 4px 12px rgba(6, 56, 74, 0.10), 0 2px 4px rgba(6, 56, 74, 0.06);
  --shadow-lg: 0 12px 32px rgba(6, 56, 74, 0.14), 0 4px 8px rgba(6, 56, 74, 0.06);
  --shadow-teal: 0 10px 28px rgba(0, 165, 187, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ---- The shard ----
     A 24deg diagonal is the house angle. Use these clip-paths to cut shards
     and image masks. Fill the cut with --grad-dark or --grad-light. */
  --shard-angle: 24deg; /* @kind other */
  /* diagonal slab bled off the right edge (top-left clean zone for logo/headline) */
  --shard-clip-right:  polygon(28% 0, 100% 0, 100% 100%, 0% 100%); /* @kind other */
  /* diagonal slab bled off the left edge */
  --shard-clip-left:   polygon(0 0, 72% 0, 100% 100%, 0 100%); /* @kind other */
  /* corner shard, lower-right */
  --shard-clip-corner: polygon(100% 35%, 100% 100%, 38% 100%); /* @kind other */
  /* image masked by the diagonal cut */
  --shard-clip-image:  polygon(18% 0, 100% 0, 100% 100%, 0 100%); /* @kind other */
}

/* UBT Technology — Base element styles & brand utilities
   Applies the type system to raw HTML and ships a few signature helpers
   (shards, eyebrow labels, petal divider). */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

strong, b { font-weight: var(--weight-bold); }

/* ---- Display / hero ---- */
.ubt-display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
}

/* ---- Tracked uppercase eyebrow / label / caption ---- */
.ubt-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ---- Golden Advice quote ---- */
.ubt-quote {
  font-family: var(--font-quote);
  font-weight: 700;
  color: var(--color-primary);
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  line-height: 1.15;
}

/* ---- Digital / UI text ---- */
.ubt-digital { font-family: var(--font-digital); }

/* ---- The shard ----
   Diagonal teal-gradient cut. Pair a clip-path token with a gradient.
   One dominant diagonal per layout; bleed it off the page edge. */
.ubt-shard {
  background: var(--grad-dark);
  clip-path: var(--shard-clip-right);
}
.ubt-shard--light { background: var(--grad-light); }
.ubt-shard--left  { clip-path: var(--shard-clip-left); }
.ubt-shard--corner{ clip-path: var(--shard-clip-corner); }

/* image dropped into the diagonal cut (never a loose rectangle) */
.ubt-shard-image { clip-path: var(--shard-clip-image); display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Section tint ---- */
.ubt-section-tint { background: var(--surface-section); }

html,body{margin:0;background:#E7EEF1;}
  .report{max-width:820px;margin:24px auto;background:#fff;box-shadow:0 18px 60px rgba(6,56,74,.18);}
  .doc{box-sizing:border-box;padding:6px 56px 56px;}
  .doc-frame{width:100%;border-collapse:collapse;}
  .doc-frame>tbody>tr>td{padding:0;}
  .hdr-space,.ftr-space{display:none;}
  .runfoot{display:none;}
  .cover{min-height:1046px;}
  @page{size:A4;margin:0;}
  @media print{
    html{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    html,body{margin:0;padding:0;background:#fff;}
    .report{max-width:none;margin:0;box-shadow:none;}
    .doc{padding:0 0.7in;}
    .hdr-space,.ftr-space{display:table-cell;height:0.7in;}
    .cover{height:100vh;min-height:0;}
    .runfoot{display:flex;position:fixed;bottom:0;left:0;right:0;height:0.7in;padding:0 0.7in;box-sizing:border-box;align-items:center;justify-content:space-between;font-family:var(--font-digital);font-size:9px;letter-spacing:.05em;color:var(--ink-400);text-transform:uppercase;}
    thead{display:table-header-group;}
    tr,svg,.keep{break-inside:avoid;}
    h2,h3,h4{break-after:avoid;}
  }