/* --------------------------------------------------------------------------
   Page scale: the whole design grows with the window, so text and pictures
   fill the width instead of sitting small in the middle.

   The pages are designed around a 1020px content column with 16px text. From
   1100px up, the page is zoomed (CSS zoom scales text, pictures and spacing
   together, so a line keeps the same number of words) by just enough for that
   column to fill the window: about 1.03x at 1100px, rising to 1.5x just under
   1700px.

   From 1700px the left-hand section list appears (Home, Services, Case
   Studies) and the content shares the window with it, so the zoom steps back
   and then climbs again more gently; on very wide screens the column widens
   too, rather than the text growing without limit.

   Pages built on the 1020px column carry <body class="sc-wide">; the column-width
   rules below apply only to them. Pages built on a narrower column (Industries and
   the landing pages) are zoomed by the same steps and keep their own column.

   --page-zoom carries the current zoom for the few rules and scripts that
   measure the window (the full-window splash in fx.css).

   The full-page menus (.tkmenu: the site menu and the section list) are sized to
   the window already, so each step gives them the opposite zoom, which leaves
   them exactly as designed.

   Link this in the page's <head>, so the page is drawn at its final size from
   the first paint (linked lower down, the page would appear small and then jump).
   Its rules carry an extra "html" in front so that they win over the page's own
   wide-screen rules wherever those sit. To change the feel, edit the numbers in the two tables
   below (generated: window width from -> zoom). */
:root{--page-zoom:1;}
/* below 1700px the text column stays at its design width; the zoom fills the window */
@media (min-width:1100px) and (max-width:1699px){ html body.sc-wide .wrap{max-width:1020px;} }
@media (min-width:1100px){ :root{--page-zoom:1.03;} html body{zoom:1.03;} html .tkmenu{zoom:0.9709;} }
@media (min-width:1150px){ :root{--page-zoom:1.077;} html body{zoom:1.077;} html .tkmenu{zoom:0.9285;} }
@media (min-width:1200px){ :root{--page-zoom:1.124;} html body{zoom:1.124;} html .tkmenu{zoom:0.8897;} }
@media (min-width:1250px){ :root{--page-zoom:1.17;} html body{zoom:1.17;} html .tkmenu{zoom:0.8547;} }
@media (min-width:1300px){ :root{--page-zoom:1.217;} html body{zoom:1.217;} html .tkmenu{zoom:0.8217;} }
@media (min-width:1350px){ :root{--page-zoom:1.264;} html body{zoom:1.264;} html .tkmenu{zoom:0.7911;} }
@media (min-width:1400px){ :root{--page-zoom:1.311;} html body{zoom:1.311;} html .tkmenu{zoom:0.7628;} }
@media (min-width:1450px){ :root{--page-zoom:1.358;} html body{zoom:1.358;} html .tkmenu{zoom:0.7364;} }
@media (min-width:1500px){ :root{--page-zoom:1.404;} html body{zoom:1.404;} html .tkmenu{zoom:0.7123;} }
@media (min-width:1550px){ :root{--page-zoom:1.451;} html body{zoom:1.451;} html .tkmenu{zoom:0.6892;} }
@media (min-width:1600px){ :root{--page-zoom:1.498;} html body{zoom:1.498;} html .tkmenu{zoom:0.6676;} }
@media (min-width:1650px){ :root{--page-zoom:1.545;} html body{zoom:1.545;} html .tkmenu{zoom:0.6472;} }

/* 1700px and up: room for the section list beside the content */
@media (min-width:1700px){ html body.sc-wide .wrap{max-width:1180px;} }
@media (min-width:1700px){ :root{--page-zoom:1.3;} html body{zoom:1.3;} html .tkmenu{zoom:0.7692;} html .toc-secs{--toc-w:840px;} }
@media (min-width:1800px){ :root{--page-zoom:1.36;} html body{zoom:1.36;} html .tkmenu{zoom:0.7353;} html .toc-secs{--toc-w:860px;} }
@media (min-width:1920px){ :root{--page-zoom:1.45;} html body{zoom:1.45;} html .tkmenu{zoom:0.6897;} html .toc-secs{--toc-w:880px;} }
@media (min-width:2200px){ :root{--page-zoom:1.6;} html body{zoom:1.6;} html .tkmenu{zoom:0.6250;} html .toc-secs{--toc-w:1020px;} }
@media (min-width:2560px){ :root{--page-zoom:1.8;} html body{zoom:1.8;} html .tkmenu{zoom:0.5556;} html .toc-secs{--toc-w:1180px;} }

/* --------------------------------------------------------------------------
   Header fit: on a short window the big stacked header would take most of the
   first screen. It is scaled down (in 5% steps, never below 55%) so that it
   takes no more than about 30% of the window's height. Done here rather than
   by script so that every page gets the same header, at its final size from the
   first paint. Desktop and tablet only; the compact phone header is left alone.
   Generated from the header's height (222px; 270px where it wraps under 1100px)
   and the page zoom tables above. */
/* 761-1099px: no page zoom, so the window's height alone decides */
@media (min-width:761px) and (max-width:1099px) and (max-height:900px){ html body > header{zoom:0.95;} }
@media (min-width:761px) and (max-width:1099px) and (max-height:855px){ html body > header{zoom:0.9;} }
@media (min-width:761px) and (max-width:1099px) and (max-height:810px){ html body > header{zoom:0.85;} }
@media (min-width:761px) and (max-width:1099px) and (max-height:765px){ html body > header{zoom:0.8;} }
@media (min-width:761px) and (max-width:1099px) and (max-height:720px){ html body > header{zoom:0.75;} }
@media (min-width:761px) and (max-width:1099px) and (max-height:675px){ html body > header{zoom:0.7;} }
@media (min-width:761px) and (max-width:1099px) and (max-height:630px){ html body > header{zoom:0.65;} }
@media (min-width:761px) and (max-width:1099px) and (max-height:585px){ html body > header{zoom:0.6;} }
@media (min-width:761px) and (max-width:1099px) and (max-height:540px){ html body > header{zoom:0.55;} }
/* 1100-1699px: the page zoom follows the width, so the window's shape decides */
@media (min-width:1100px) and (max-width:1699px) and (min-aspect-ratio:1.443/1){ html body > header{zoom:0.95;} }
@media (min-width:1100px) and (max-width:1699px) and (min-aspect-ratio:1.519/1){ html body > header{zoom:0.9;} }
@media (min-width:1100px) and (max-width:1699px) and (min-aspect-ratio:1.604/1){ html body > header{zoom:0.85;} }
@media (min-width:1100px) and (max-width:1699px) and (min-aspect-ratio:1.698/1){ html body > header{zoom:0.8;} }
@media (min-width:1100px) and (max-width:1699px) and (min-aspect-ratio:1.804/1){ html body > header{zoom:0.75;} }
@media (min-width:1100px) and (max-width:1699px) and (min-aspect-ratio:1.924/1){ html body > header{zoom:0.7;} }
@media (min-width:1100px) and (max-width:1699px) and (min-aspect-ratio:2.062/1){ html body > header{zoom:0.65;} }
@media (min-width:1100px) and (max-width:1699px) and (min-aspect-ratio:2.220/1){ html body > header{zoom:0.6;} }
@media (min-width:1100px) and (max-width:1699px) and (min-aspect-ratio:2.406/1){ html body > header{zoom:0.55;} }
/* 1700px and up: by height within each zoom step */
@media (min-width:1700px) and (max-width:1799px) and (max-height:962px){ html body > header{zoom:0.95;} }
@media (min-width:1700px) and (max-width:1799px) and (max-height:913px){ html body > header{zoom:0.9;} }
@media (min-width:1700px) and (max-width:1799px) and (max-height:865px){ html body > header{zoom:0.85;} }
@media (min-width:1700px) and (max-width:1799px) and (max-height:817px){ html body > header{zoom:0.8;} }
@media (min-width:1700px) and (max-width:1799px) and (max-height:769px){ html body > header{zoom:0.75;} }
@media (min-width:1700px) and (max-width:1799px) and (max-height:721px){ html body > header{zoom:0.7;} }
@media (min-width:1700px) and (max-width:1799px) and (max-height:673px){ html body > header{zoom:0.65;} }
@media (min-width:1700px) and (max-width:1799px) and (max-height:625px){ html body > header{zoom:0.6;} }
@media (min-width:1700px) and (max-width:1799px) and (max-height:577px){ html body > header{zoom:0.55;} }
@media (min-width:1800px) and (max-width:1919px) and (max-height:1006px){ html body > header{zoom:0.95;} }
@media (min-width:1800px) and (max-width:1919px) and (max-height:956px){ html body > header{zoom:0.9;} }
@media (min-width:1800px) and (max-width:1919px) and (max-height:905px){ html body > header{zoom:0.85;} }
@media (min-width:1800px) and (max-width:1919px) and (max-height:855px){ html body > header{zoom:0.8;} }
@media (min-width:1800px) and (max-width:1919px) and (max-height:805px){ html body > header{zoom:0.75;} }
@media (min-width:1800px) and (max-width:1919px) and (max-height:754px){ html body > header{zoom:0.7;} }
@media (min-width:1800px) and (max-width:1919px) and (max-height:704px){ html body > header{zoom:0.65;} }
@media (min-width:1800px) and (max-width:1919px) and (max-height:654px){ html body > header{zoom:0.6;} }
@media (min-width:1800px) and (max-width:1919px) and (max-height:603px){ html body > header{zoom:0.55;} }
@media (min-width:1920px) and (max-width:2199px) and (max-height:1073px){ html body > header{zoom:0.95;} }
@media (min-width:1920px) and (max-width:2199px) and (max-height:1019px){ html body > header{zoom:0.9;} }
@media (min-width:1920px) and (max-width:2199px) and (max-height:965px){ html body > header{zoom:0.85;} }
@media (min-width:1920px) and (max-width:2199px) and (max-height:912px){ html body > header{zoom:0.8;} }
@media (min-width:1920px) and (max-width:2199px) and (max-height:858px){ html body > header{zoom:0.75;} }
@media (min-width:1920px) and (max-width:2199px) and (max-height:804px){ html body > header{zoom:0.7;} }
@media (min-width:1920px) and (max-width:2199px) and (max-height:751px){ html body > header{zoom:0.65;} }
@media (min-width:1920px) and (max-width:2199px) and (max-height:697px){ html body > header{zoom:0.6;} }
@media (min-width:1920px) and (max-width:2199px) and (max-height:643px){ html body > header{zoom:0.55;} }
@media (min-width:2200px) and (max-width:2559px) and (max-height:1184px){ html body > header{zoom:0.95;} }
@media (min-width:2200px) and (max-width:2559px) and (max-height:1124px){ html body > header{zoom:0.9;} }
@media (min-width:2200px) and (max-width:2559px) and (max-height:1065px){ html body > header{zoom:0.85;} }
@media (min-width:2200px) and (max-width:2559px) and (max-height:1006px){ html body > header{zoom:0.8;} }
@media (min-width:2200px) and (max-width:2559px) and (max-height:947px){ html body > header{zoom:0.75;} }
@media (min-width:2200px) and (max-width:2559px) and (max-height:888px){ html body > header{zoom:0.7;} }
@media (min-width:2200px) and (max-width:2559px) and (max-height:828px){ html body > header{zoom:0.65;} }
@media (min-width:2200px) and (max-width:2559px) and (max-height:769px){ html body > header{zoom:0.6;} }
@media (min-width:2200px) and (max-width:2559px) and (max-height:710px){ html body > header{zoom:0.55;} }
@media (min-width:2560px) and (max-height:1332px){ html body > header{zoom:0.95;} }
@media (min-width:2560px) and (max-height:1265px){ html body > header{zoom:0.9;} }
@media (min-width:2560px) and (max-height:1198px){ html body > header{zoom:0.85;} }
@media (min-width:2560px) and (max-height:1132px){ html body > header{zoom:0.8;} }
@media (min-width:2560px) and (max-height:1065px){ html body > header{zoom:0.75;} }
@media (min-width:2560px) and (max-height:999px){ html body > header{zoom:0.7;} }
@media (min-width:2560px) and (max-height:932px){ html body > header{zoom:0.65;} }
@media (min-width:2560px) and (max-height:865px){ html body > header{zoom:0.6;} }
@media (min-width:2560px) and (max-height:799px){ html body > header{zoom:0.55;} }