/* Teravon Green Energies Limited, interim website. Teravon DS 2.1 tokens. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-800-latin.woff2') format('woff2')}

/* tokens/colors.css */
/* ============================================================================
   Teravon DS 2.1 — colour tokens. LOCKED to the 2026 Company Profile.
   White canvas, navy structure, orange numerals, green as the Africa / CO2
   section theme. Every value below is taken directly from the profile.
   ============================================================================ */
:root {
  /* --- Navy family (structure, titles, deep backgrounds) --- */
  --navy-950: #0B1836;  /* deepest: back cover / statement backgrounds */
  --navy-deep: #142A63; /* cover + section-divider backgrounds, photo scrims, band deep end */
  --navy-900: #1E3D8B;  /* PRIMARY: titles, structure, stat units, band start */
  --navy-800: #24499B;  /* navy panel gradient mid */
  --navy-700: #3A5DAE;  /* eyebrows + sub-headings on India/general pages, chart strokes */
  --navy-500: #4A6CBB;  /* capacity-bar gradient light end */

  /* --- Orange family (hero numerals, accents, rules — India/general) --- */
  --accent-orange: #D87935;      /* PRIMARY orange: numerals, capacity figures, 3px rules, tick accents */
  --accent-orange-mid: #E29B63;  /* orange bar gradient light end */
  --accent-orange-light: #F0A868;/* orange on navy backgrounds (promise panel, kickers) */

  /* --- Green family (Africa + CO2 savings section theme) — now an ACTIVE colour --- */
  --green-950: #0B3A2B;   /* deepest: Africa cover / statement backgrounds */
  --green-800: #0E7A4E;   /* CO2 panel gradient deep end */
  --accent-green: #16875A;/* PRIMARY green: eyebrows, stat numerals, rules, borders on Africa/CO2 pages */
  --green-600: #1E8F74;   /* CO2 panel gradient mid */
  --green-bright: #34C98B;/* bright green: map pins, stats + bars on dark green pages, bar light end */
  --accent-blue: #2A6FDB; /* blue accent paired inside CO2 data (e.g. cars) and the Africa/CO2 blue hue */

  /* --- India tricolour (ONLY the India-market page 17) --- */
  --india-saffron: #FF9933;
  --india-green: #138808;

  /* --- Neutrals --- */
  --white: #FFFFFF;      /* the canvas */
  --text-body: #333333;  /* body copy on white */
  --text-body-soft: #444444; /* lighter body / footnote lead-ins */
  --grey-700: #555555;   /* secondary text, panel descriptions, captions */
  --grey-muted: #5C6880; /* muted intro line under a title, sub-captions */
  --grey-caption: #8A97B2;/* small captions, italic source lines */
  --grey-pagenum: #B7C1D6;/* page number, faint contents figures */
  --grey-imgbg: #E6EBF5; /* placeholder background behind a photo while it loads */
  --navy-100: #E8EDF8;   /* pale wash the bands resolve through to white */
  --panel-grey: #F4F7FD; /* soft panel gradient top only, never a flat box */

  /* --- Semantic aliases --- */
  --text-heading: var(--navy-900);
  --text-subheading: var(--navy-700);
  --text-eyebrow: var(--navy-700);          /* India/general eyebrow (green override on Africa/CO2, see below) */
  --text-eyebrow-africa: var(--accent-green);/* eyebrow + accents on Africa/CO2 pages */
  --text-secondary: var(--grey-700);
  --text-intro: var(--grey-muted);
  --text-source: var(--grey-caption);
  --text-stat: var(--accent-orange);         /* India/general numerals */
  --text-stat-africa: var(--accent-green);   /* Africa/CO2 numerals */
  --text-on-navy: var(--white);
  --surface-page: var(--white);

  /* --- Structure devices --- */
  --hairline: rgba(30, 61, 139, 0.14);        /* the standard divider rule on white */
  --hairline-soft: rgba(30, 61, 139, 0.08);   /* faintest rule */
  --hairline-strong: rgba(30, 61, 139, 0.2);  /* table header / total rule */
  --hairline-africa: rgba(22, 135, 90, 0.4);  /* green accent rule on Africa/CO2 pages */
  --shadow-soft: 0 26px 56px -26px rgba(30, 61, 139, 0.4); /* soft container lift */
  /* Photo shadow: LOCKED. The deep soft navy lift under every placed photograph. */
  --shadow-photo: 0 40px 80px -28px rgba(20, 42, 99, 0.5);       /* large hero photo */
  --shadow-photo-sm: 0 30px 60px -26px rgba(20, 42, 99, 0.5);    /* grid / secondary photo */
  --shadow-photo-green: 0 46px 92px -30px rgba(11, 58, 43, 0.55);/* photo on an Africa page */

  /* --- Gradients --- */
  --grad-band-deep: linear-gradient(122deg, #24499B 0%, #1E3D8B 48%, #142A63 100%); /* @kind color */ /* deep navy band / panel */
  --grad-wash: radial-gradient(120% 130% at 85% -15%, rgba(232, 237, 248, 0.9) 0%, rgba(232, 237, 248, 0) 62%); /* @kind color */
  --grad-panel: linear-gradient(180deg, #F4F7FD 0%, rgba(255, 255, 255, 0) 100%); /* @kind color */ /* container fill fading to white */
  --grad-bar-navy: linear-gradient(90deg, #4A6CBB 0%, #1E3D8B 100%); /* @kind color */   /* India capacity bars */
  --grad-bar-orange: linear-gradient(90deg, #E29B63 0%, #D87935 100%); /* @kind color */
  --grad-bar-green: linear-gradient(90deg, #34C98B 0%, #16875A 100%); /* @kind color */   /* Africa capacity bars */
  --grad-co2-panel: linear-gradient(118deg, #0E7A4E 0%, #16875A 46%, #1E8F74 100%); /* @kind color */ /* the CO2 hero panel */

  /* ==========================================================================
     Corner hue — LOCKED. Two soft radial glows on diagonally opposite corners
     of every page. The ACCENT sits TOP LEFT, BLUE sits BOTTOM RIGHT.
     India + general  -> orange top left, blue bottom right  (--hue-india)
     Africa + CO2     -> green  top left, blue bottom right  (--hue-africa)
     Strength matches the profile (accent ~0.30-0.32, blue ~0.24-0.28).
     Apply over the whole page via .pg::after / PageFrame (never on cover bleeds).
     ========================================================================== */
  --hue-india: radial-gradient(78% 82% at -8% -10%, rgba(216, 121, 53, 0.60) 0%, rgba(216, 121, 53, 0.20) 46%, rgba(216, 121, 53, 0) 76%), radial-gradient(80% 84% at 108% 110%, rgba(30, 61, 139, 0.55) 0%, rgba(30, 61, 139, 0.17) 46%, rgba(30, 61, 139, 0) 76%); /* @kind color */
  --hue-africa: radial-gradient(78% 82% at -8% -10%, rgba(22, 135, 90, 0.62) 0%, rgba(22, 135, 90, 0.20) 46%, rgba(22, 135, 90, 0) 76%), radial-gradient(80% 84% at 108% 110%, rgba(30, 61, 139, 0.52) 0%, rgba(30, 61, 139, 0.15) 46%, rgba(30, 61, 139, 0) 76%); /* @kind color */
  --watermark-opacity: 0.05; /* @kind other */ /* the single bolt watermark, bottom-left, on every page except full cover/statement bleeds */

  /* --- Directional photo scrims: ~90% at the text side fading to transparent. Never a uniform wash. --- */
  --scrim-left: linear-gradient(90deg, rgba(20, 42, 99, 0.94) 0%, rgba(20, 42, 99, 0.72) 34%, rgba(20, 42, 99, 0.12) 66%); /* @kind color */
  --scrim-right: linear-gradient(270deg, rgba(20, 42, 99, 0.92) 0%, rgba(20, 42, 99, 0.6) 42%, rgba(20, 42, 99, 0.12) 74%); /* @kind color */
  --scrim-bottom: linear-gradient(0deg, rgba(20, 42, 99, 0.95) 0%, rgba(20, 42, 99, 0.55) 34%, rgba(20, 42, 99, 0.08) 64%); /* @kind color */
  --scrim-cover: linear-gradient(180deg, rgba(20, 42, 99, 0.42) 0%, rgba(20, 42, 99, 0) 38%, rgba(20, 42, 99, 0.55) 68%, rgba(20, 42, 99, 0.93) 100%); /* @kind color */ /* the cover top-shade + bottom-anchor scrim */
  --scrim-bottom-green: linear-gradient(0deg, rgba(11, 58, 43, 0.95) 0%, rgba(11, 58, 43, 0.55) 36%, rgba(11, 58, 43, 0.08) 66%); /* @kind color */ /* Africa statement scrim */

  /* --- Legacy DS 1.0 / 2.0 aliases. Referenced only by archived deliverables. Do not use in new work. --- */
  --accent-green-deep: var(--green-800);
  --surface-panel: var(--panel-grey);
  --surface-stat-group: var(--navy-100);
  --surface-footer: var(--navy-900);
  --border-card: var(--navy-900);
  --scrim-navy: rgba(30, 61, 139, 0.5);
  --grad-dawn: radial-gradient(95% 95% at 0% 105%, rgba(216, 121, 53, 0.12) 0%, rgba(216, 121, 53, 0) 58%); /* @kind color */
}

/* tokens/typography.css */
/* ============================================================================
   Teravon DS 2.1 — typography. LOCKED to the 2026 Company Profile.
   Inter, self hosted. Values are the profile's 1920x1080 canvas scale.
   For an A4 print page divide by ~2.4; for a web page use responsive clamps
   anchored on these ratios. Headings are bold navy; eyebrows are the only
   letterspaced capitals; hero numerals are extra-bold orange (green on Africa/CO2).
   ============================================================================ */
:root {
  --font-sans: 'Inter', Helvetica, Calibri, Arial, sans-serif;

  /* Display + headings (1920 canvas) */
  --type-cover: 800 112px/1.0 var(--font-sans);        /* cover title, letter-spacing -0.022em */
  --type-statement: 800 96px/1.0 var(--font-sans);     /* full-bleed statement title, -0.022em */
  --type-h1: 800 58px/1.1 var(--font-sans);            /* page title, bold navy, letter-spacing -0.02em */
  --type-h1-lg: 800 66px/1.04 var(--font-sans);        /* larger page title where the page is title-led */
  --type-h2: 700 31px/1.15 var(--font-sans);           /* card / column sub-heading, navy */
  --type-h3: 700 26px/1.25 var(--font-sans);           /* list-item heading, navy */
  --type-eyebrow: 700 24px/1 var(--font-sans);         /* letterspaced uppercase kicker (blue/green) */

  /* Body + support */
  --type-intro: 400 25px/1.5 var(--font-sans);         /* muted intro line under a title (grey-muted) */
  --type-body: 400 25px/1.58 var(--font-sans);         /* body copy, dark grey, usually justified */
  --type-body-sm: 400 20px/1.45 var(--font-sans);      /* secondary / caption body */
  --type-caption: 700 20px/1.2 var(--font-sans);       /* photo caption label, navy */
  --type-source: italic 400 18px/1.45 var(--font-sans);/* source line, small italic grey */

  /* Numerals */
  --type-hero-num: 800 116px/0.9 var(--font-sans);     /* hero figure, up to ~140px, orange/green, -0.03em */
  --type-hero-unit: 700 40px/1 var(--font-sans);       /* unit beside the hero numeral, navy */
  --type-stat: 800 60px/1 var(--font-sans);            /* secondary numeral, orange/green, -0.02em */
  --type-stat-unit: 700 24px/1 var(--font-sans);       /* unit beside a secondary numeral, navy */
  --type-index-num: 800 46px/1 var(--font-sans);       /* contents / step index numeral, orange */

  /* LOCKED tracking for kickers */
  --eyebrow-tracking: 0.22em;
  --eyebrow-transform: uppercase; /* @kind other */
  --heading-tracking: -0.02em;
}

body {
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  margin: 0;
}

/* tokens/spacing.css */
/* Teravon DS 2.0 spacing and shape tokens. Whitespace, hairlines and typography create structure, not boxes. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* Primary canvas: LOCKED to the profile — 1920 x 1080 landscape page. Device positions below.
     For an A4 portrait page divide margins/positions by ~2.4 and keep the same proportions. */
  --page-canvas-w: 1920px;
  --page-canvas-h: 1080px;
  --page-margin: 130px;        /* left + right content margin on the 1920 canvas */
  --page-margin-top: 82px;     /* eyebrow row top */
  --page-title-top: 150px;     /* page title top when title-led */
  --page-logo-top: 74px;       /* content-page logo top (right) */
  --page-pagenum-bottom: 54px; /* page number baseline from the bottom (right) */
  --grid-gutter: 30px;

  /* Bolt watermark placement — LOCKED. One per page, bottom-left, cropped by the edge. */
  --watermark-height: 600px;
  --watermark-left: -70px;
  --watermark-bottom: -110px;

  /* Shape: LOCKED. Placed photographs and containers carry soft corners; only full bleed cover and statement images stay edge to edge (inset: -2px). */
  --radius-soft: 24px;         /* soft container / panel */
  --radius-softer: 26px;       /* larger navy promise panel, CO2 hero */
  --radius-photo: 22px;        /* LOCKED: hero placed photograph on the 1920 canvas, lifted by --shadow-photo. */
  --radius-photo-sm: 18px;     /* grid / secondary photograph, --shadow-photo-sm */
  --radius-photo-xs: 16px;     /* small inset / lifecycle thumbnail */
  --border-hairline: 1px solid var(--hairline); /* the standard structural rule */

  /* Legacy DS 1.0 tokens, referenced only by archived deliverables. Do not use in new work. */
  --grid-margin-desktop: 80px;
  --grid-columns: 12; /* @kind other */
  --grid-margin-mobile: 64px;
  --radius-none: 0;
  --radius-chip: 4px;
  --footer-height: 44px;
  --border-card-thin: 1px solid var(--navy-900);
}

:root{--font-sans:'Inter',Helvetica,Calibri,sans-serif}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;font-family:var(--font-sans);color:#333;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:#1E3D8B;text-decoration:none}
a:hover{color:#D87935}
h1,h2,h3,h4,p{margin:0}
img{border:0}
input,select,textarea,button{font-family:var(--font-sans)}
input:focus,select:focus,textarea:focus{outline:none;border-color:#3A5DAE;box-shadow:0 0 0 3px rgba(58,93,174,0.14)}
::placeholder{color:#B7C1D6}
optgroup{font-weight:700;color:#1E3D8B}
section[id]{scroll-margin-top:92px}
[hidden]{display:none !important}
[data-act]:focus-visible,a:focus-visible{outline:3px solid #D87935;outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

/* hover states, generated from the design source */
[data-hv="0"]:hover{background:#C96A28 !important}
[data-hv="1"]:hover{background:rgba(255,255,255,0.14) !important;border-color:rgba(255,255,255,0.6) !important}
[data-hv="2"]:hover{transform:translateY(-5px) !important}
[data-hv="3"]:hover{background:#142A63 !important}
[data-hv="4"]:hover{transform:translateY(-6px) !important;box-shadow:0 44px 84px -30px rgba(20,42,99,0.72) !important}
[data-hv="5"]:hover{transform:translateY(-5px) !important;box-shadow:0 38px 74px -30px rgba(20,42,99,0.66) !important}
[data-hv="6"]:hover{transform:translateY(-4px) !important;box-shadow:0 32px 62px -30px rgba(30,61,139,0.6) !important}
[data-hv="7"]:hover{color:#F0A868 !important}
[data-hv="8"]:hover{color:#F0A868 !important;border-bottom-color:#F0A868 !important}
[data-hv="9"]:hover{background:#F4F7FD !important}


/* ============================================================
   Interim landing page, v4 build. Generated from the design
   source. Element styling is inline in index.html; this block
   carries only what inline styles cannot express.
   ============================================================ */
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; font-family: var(--font-sans, Inter, Helvetica, Calibri, sans-serif); color: #333; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: #1E3D8B; text-decoration: none; }
a:hover { color: #D87935; }
h1, h2, h3, h4, p { margin: 0; }
input, select, textarea, button { font-family: var(--font-sans, Inter, Helvetica, Calibri, sans-serif); }
input:focus, select:focus, textarea:focus { outline: none; border-color: #3A5DAE; box-shadow: 0 0 0 3px rgba(58,93,174,0.14); }
::placeholder { color: #B7C1D6; }
optgroup { font-weight: 700; color: #1E3D8B; }
section[id] { scroll-margin-top: 96px; }
[hidden] { display: none !important; }
@keyframes heroDrift { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.13) translate3d(-1.2%,-1%,0); } }
@keyframes boltPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }

/* hover states lifted from the design source */
.hv1:hover{background:#C96A28 !important}
.hv2:hover{background:#E8873D !important;box-shadow:0 30px 60px -20px rgba(216,121,53,0.78) !important}
.hv3:hover{background:rgba(255,255,255,0.2) !important;border-color:#FFFFFF !important}
.hv4:hover{transform:translateY(-5px) !important}
.hv5:hover{background:#142A63 !important}
.hv6:hover{transform:translateY(-6px) !important;box-shadow:0 38px 70px -32px rgba(20,42,99,0.44) !important}
.hv7:hover{transform:translateY(-4px) !important}
.hv8:hover{background:#F4F7FD !important}