/* ============================================================================
   www.ganok.ai — one stylesheet, four pages.

   This file exists because the Content-Security-Policy forbids inline styles.
   There is not one style="" attribute in any of the four HTML files, and there
   must never be one: style-src 'self' blocks them silently, so the page would
   simply render wrong rather than error.
   ============================================================================ */

/* ---- Fonts. Self-hosted, so the site makes no third-party request at all. ----
   Montserrat SemiBold and Lato (Regular + Bold), both SIL OFL, subsetted to the
   Latin range. Montserrat is for section headings ONLY — the logo needs no font,
   its type is outlined inside the SVG. */
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-SemiBold.woff2') format('woff2');
           font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-Regular.woff2') format('woff2');
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-Bold.woff2') format('woff2');
           font-weight:700;font-style:normal;font-display:swap}

*{box-sizing:border-box}

body{margin:0;background:#FFFFFF;color:#111111;
     font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}

.col{max-width:900px;margin:0 auto;padding:0 40px}
.measure{max-width:34em}

h1,h2{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      font-weight:600;margin:0;color:#111111}
h2{font-size:19px;line-height:1.35;margin:0 0 16px}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}

a{color:#2E7D32;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid #2E7D32;outline-offset:3px;border-radius:2px}

/* ============================== THE HERO ====================================
   THE LOCKUP IS THE LOGO FILE, not type set to look like it:
   assets/ganok-horizontal-forlight-transparent.svg, byte for byte from the brand
   package. Green ring #2E7D32, wordmark #000000, tagline #555555 Lato, all text
   outlined. The package's DO NOT list forbids recolouring the ring and forbids
   setting the wordmark or tagline in another typeface — so neither is done here.

   The band has NO padding. The asset carries its own clear space (63 of its 420
   units top and bottom, 51px at this width) and that IS the padding.
   Band height = image height = 339px.
   ========================================================================== */
.hero{background:#F5F0E6;padding:0}
.hero-inner{max-width:1120px;margin:0 auto;padding:0 40px}

/* 960px wide puts the ring at 236px. The asset's own 1190x420 ratio does the rest. */
.lockup{position:relative;width:960px;max-width:100%;margin:0 auto}
.lk-title{margin:0}
.lk-img{display:block;width:100%;height:auto}

/* The stealth line is a NOTE, not display type: body Lato, body size, regular
   weight, no letter-spacing, no green. #5A5852 on #F5F0E6 measures 6.26:1.
   Both numbers below are measured off the asset, in its own 1190x420 grid, where
   the wordmark spans x 433..963 (centre 698), the tagline ends at y 275, and the
   ring ends at x 359:

     top 82.14%          = y 345, which is 70 units under the tagline. 70 is the
                           height of the G in GANOK, which is the package's
                           clear-space rule — so the note sits OUTSIDE the logo's
                           clear space rather than inside it.
     padding-left 17.31% = twice the 8.655% by which the wordmark's centre sits
                           right of the image's centre, so a centred line lands on
                           the WORDMARK (x 698) instead of on the image (x 595).
                           It clears the ring by 109 units horizontally.

   Change the lockup's width and neither number moves; change the ASSET and both
   have to be re-measured. */
.lk-stealth{position:absolute;top:82.14%;left:0;right:0;margin:0;padding-left:17.31%;
            text-align:center;font-weight:400;font-size:17px;letter-spacing:normal;
            line-height:1.5;color:#5A5852}

/* THE WORDMARK IS WHAT SITS ON THE PAGE AXIS, not the whole lockup — the thing the
   eye lands on is the thing on the axis, and the ring hangs off to its left. The
   shift is that same 8.655% of 960px = 83px. It is not a taste value: change the
   lockup's width and this number changes with it.
   Gated at 1280px because below that the ring's left edge runs off the viewport.
   Between 700 and 1280 the lockup centres as a whole instead. */
@media (min-width:1280px){ .hero-inner{transform:translateX(-83px)} }

/* ============================== SECTIONS ====================================
   White is the default for every section. No alternating bands, no hairline
   rules. Section to section is 25 + 25 = 50px; the beige band to the first
   section is 57px. */
.sec{padding:25px 0;background:#FFFFFF}
.sec-first{padding-top:57px}

.contact-line{margin:0 0 10px}
/* RETAINED, CURRENTLY UNUSED — "Names and backgrounds are available on request."
   was taken off the page on 2026-09-11. The rule collapses against the 10px above
   it, so if the sentence goes back it sits 22px under the last address. */
.contact-note{margin:22px 0 0}

/* ======================== THE LEGAL PAGE BAND ===============================
   The landing page's hero at reduced height: same asset, same beige. Height comes
   from the padding and the lockup, never a fixed value — a fixed height crops the
   moment the page title wraps. 260px wide puts the ring at 64px and clears the
   package's 200px floor for the horizontal lockup. */
.lband{background:#F5F0E6;padding:30px 0}
.lband-col{width:100%}
.lb-logo{display:block;width:260px;max-width:100%;margin:0 0 18px}
.lb-logo img{display:block;width:100%;height:auto}
.lb-logo:focus-visible{outline:2px solid #111111;outline-offset:6px}

.doc{padding-top:56px;padding-bottom:64px}
.doc h1{font-size:26px;line-height:1.3}
.doc h2{font-size:18px;line-height:1.4;margin:36px 0 12px}
.lband h1{font-size:26px;line-height:1.3}
.quiet{color:#5F5F5F}
.effective{margin-top:0}
.first-h2{margin-top:0}
.last-p{margin-bottom:0}

/* ================================ FOOTER ==================================== */
.site-footer{background:#FFFFFF;border-top:1px solid #EAEAEA}
.footer-inner{padding-top:36px;padding-bottom:56px}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 30px;margin-bottom:20px}
.footer-nav a{font-size:15px;color:#111111}
.copyright{color:#5F5F5F;font-size:15px;margin:0}

/* ================================ MOBILE ==================================== */
@media (max-width:700px){
  .col{padding:0 24px}

  /* At 390 the lockup runs the full 342px column: ring 84px, whole mark 342px
     wide, above the package's 200px floor. The band takes its own padding back,
     because the asset's built-in clear space is only ~18px at that scale. */
  .hero{padding:30px 0}
  .hero-inner{padding:0 24px}
  .lockup{width:100%}
  /* Stacked, the note returns to normal flow. 24px clears the 20px the
     clear-space rule asks for at this size. */
  .lk-stealth{position:static;padding-left:0;text-align:left;margin-top:24px}

  .sec{padding:19px 0}
  .sec-first{padding-top:39px}

  .lband{padding:24px 0}
  .lb-logo{width:220px;margin-bottom:14px}
  .doc{padding-top:40px;padding-bottom:48px}

  .footer-nav{flex-direction:column;gap:12px}
  .footer-nav a{font-size:16px}
  .footer-inner{padding-top:28px;padding-bottom:44px}
}