/* ============================================================
   THE CEYENAR GRID. Loads after styles.css and type.css.
   One square grid runs under every page, and everything square
   sits on it: the map, the page fields, the stacks. The lines
   stay hidden until the mouse reveals them (gridhover.js), except
   at the top of the sky, where they show and fade out by the
   middle of the hero (--sky-line, --sky-line-end).
   ============================================================ */
:root{
  --cell:10px; --gx:0px;
  --grid-line:transparent; --sky-line:rgba(255,255,255,.24); --sky-line-end:50%;
  --gutter:clamp(16px, 4vw, 60px);
  --head-h:70px;

  /* square language: no rounding, no soft shadows */
  --r-8:0px; --r-12:0px; --r-16:0px; --r-20:0px; --pill:0px;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none; --shadow-cta:none;

  /* rhythm in whole cells */
  --flow-2xs:20px; --flow-xs:20px; --flow-sm:30px; --flow-md:30px;
  --flow-lg:40px; --flow-xl:50px; --flow-2xl:70px;
  --space-section:90px; --space-band:50px;
}
@media(max-width:899px){
  :root{ --cell:8px; --flow-2xs:16px; --flow-xs:16px; --flow-sm:24px; --flow-md:24px; --flow-lg:32px; --flow-xl:40px; --flow-2xl:56px; --space-section:64px; --space-band:40px; }
}

/* the grid itself */
body{
  background-color:#fff;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);
  background-position:var(--gx) 0;
}

/* every ground opens up so the grid shows; sections part on a hairline */
.trust,.industries,.story,.cta,.life,.page-hero,.hero{ background:transparent; }
main > section + section{ border-top:1px solid var(--hair); }
.site-head{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 1px 0 var(--hair); }

/* the lattice, removed at the source */
.texgrid::before,.hero::before,.page-hero::before,.site-foot::after{ display:none; }

/* cards are solid cells with hairlines */
.feature-tile,.stat-cell,.icard{ background:#fff; border:1px solid var(--hair); }

/* controls */
.btn{ transform:none; }
.btn:hover{ transform:none; }
.btn-secondary{ background:#EEF3F8; border-color:transparent; }
.btn-secondary:hover{ background:#DFE8F1; border-color:transparent; color:var(--ink); }
.on-ink .btn-secondary{ background:rgba(255,255,255,.14); border-color:transparent; }
.on-ink .btn-secondary:hover{ background:rgba(255,255,255,.24); }

/* the logo's three squares mark every section */
.eyebrow{ display:flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; flex:none; width:6px; height:6px; margin-right:16px; background:var(--logo-y); box-shadow:8px 0 var(--logo-t),16px 0 var(--logo-g); }

/* sub-page heroes: copy left, the page's own pixel field right */
.page-hero{ position:relative; overflow:hidden; padding-top:calc(var(--head-h) + var(--cell)*5); padding-bottom:var(--space-band); }
.page-hero h1{ font-size:clamp(46px, 5.3vw, 76px); line-height:calc(var(--cell)*6); letter-spacing:-.035em; font-weight:400; }
@media(min-width:900px){ .page-hero h1{ line-height:calc(var(--cell)*8); } }
.page-hero h1 .move{ font-weight:400; }
.pxf{ position:absolute; inset:0; }
.pxf canvas{ position:absolute; inset:0; width:100%; height:100%; }
@media(min-width:900px){
  .page-hero{ padding-top:calc(var(--head-h) + var(--cell)*6); padding-bottom:var(--space-band); display:block; }
}

/* 13 even stacks, one per branch, standing on every footer */
.px-sky{ display:block; width:100%; height:calc(var(--cell)*13); }

/* footer: deep brand blue, its grid revealed by the mouse like the rest */
.site-foot{ background:#063A60; }
.foot-seam{ display:none; }
.foot-cta{ background:var(--logo-y); color:var(--ink); box-shadow:none; }
.foot-cta:hover{ background:#FFD65C; }

/* the footer's contact card joins the blue */
.foot-deck{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); box-shadow:none; }

/* ---- on the grid ---- */
/* the content column is a whole number of cells, placed on a grid line */
.on-grid .wrap,.on-grid .foot-inner{ width:var(--cw); max-width:none; margin-left:var(--cl); margin-right:0; padding-inline:0; }

/* one shape only: the square */
*,*::before,*::after{ border-radius:0 !important; }

/* a 1px outline sitting exactly on the grid lines */
.on-line{ border-color:transparent !important; box-shadow:inset 1px 1px 0 var(--ln),1px 1px 0 var(--ln),1px 0 0 var(--ln),0 1px 0 var(--ln) !important; }

/* controls are whole cells tall */
.btn{ min-height:calc(var(--cell)*5); padding:0 calc(var(--cell)*2); line-height:1; }
@media(max-width:899px){ .btn{ min-height:calc(var(--cell)*6); } }
.ctas,.mh-btns{ gap:var(--cell); }
/* side-by-side columns start together; snap.js extends the shorter one in whole cells */
.split,.story-grid,.trust-grid{ align-items:start; }

/* stat cards: everything inside steps in whole cells */
.stat-cell{ justify-content:flex-start; min-height:0; padding:calc(var(--cell)*3); }
.stat-cell .n{ line-height:calc(var(--cell)*6); }
.stat-cell .n::after{ width:calc(var(--cell)*4); height:var(--cell); margin-top:var(--cell); }
.stat-cell .l{ margin-top:var(--cell); line-height:calc(var(--cell)*2); }

/* leaders: three equal square portraits instead of pills */
.leaders{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(var(--cell)*2); margin-top:calc(var(--cell)*3); }
.leader{ display:block; padding:0; border:0; background:none; }
.leader img{ width:100%; height:auto; aspect-ratio:1/1; object-position:top; }
.leader > span{ display:block; margin-top:var(--cell); }
.leader b{ line-height:calc(var(--cell)*2); text-transform:none; letter-spacing:-.01em; }
.leader span span{ margin-top:0; line-height:calc(var(--cell)*2); text-transform:none; letter-spacing:0; font-family:var(--font-display); font-size:14px; }

/* on a strict grid things appear in place, they don't slide into it */
.reveal,.reveal.in,.rise{ transform:none !important; }
.job{ align-content:start; }
/* the photo tile: an outline that takes no space, so the photo starts on the line */
.feature-tile{ border:0; box-shadow:inset 1px 0 0 var(--hair),1px 1px 0 var(--hair),1px 0 0 var(--hair),0 1px 0 var(--hair); }

/* the sky: one pixel per grid cell, behind everything, fading out by the end of the hero */
.sky-px{ position:absolute; left:0; right:0; top:0; z-index:0; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .9s; }
.sky-px.ready{ opacity:1; }
.sky-px canvas{ position:absolute; top:0; image-rendering:pixelated; }
.sky-px::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(var(--sky-line) 1px,transparent 1px),linear-gradient(90deg,var(--sky-line) 1px,transparent 1px); background-size:var(--cell) var(--cell); background-position:var(--gx) 0; -webkit-mask-image:linear-gradient(#000,transparent var(--sky-line-end)); mask-image:linear-gradient(#000,transparent var(--sky-line-end)); }
main,.site-foot,.px-sky{ position:relative; z-index:1; }
main{ background:transparent; }

/* the header is clear over the sky and turns solid once the page moves */
.on-grid .site-head{ background:transparent; box-shadow:none; border-bottom-color:transparent; transition:background-color .25s,border-color .25s; }
.on-grid.scrolled .site-head{ background:#fff; border-bottom-color:var(--hair); }
.mh .btn-secondary,.page-hero .btn-secondary{ background:rgba(255,255,255,.7); }
.mh .btn-secondary:hover,.page-hero .btn-secondary:hover{ background:#fff; }
.burger{ background:rgba(255,255,255,.7); }

/* text over the sky keeps its contrast at the bluest point */
.page-hero h1 .move{ color:var(--deep); }
.page-hero .eyebrow,.head-links a,.mh-lead,.mh-mini span,.page-hero .lede{ color:var(--ink); }
.mh-hold{ color:var(--ink); }

/* text-heavy sections read on plain white: add .plain to a section to hide the grid */
main > section.plain{ background:#fff; }

/* the grid revealed by the mouse (gridhover.js), under all content */
.grid-react{ position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.grid-react-foot{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.site-foot > *:not(.grid-react-foot){ position:relative; z-index:1; }

/* the call-out area, three placements */
[data-callout=a] .cta{ padding-bottom:calc(var(--cell)*3); }
[data-callout=c] .cta{ padding-top:calc(var(--cell)*3); }
[data-callout=c] .callout-px{ height:calc(var(--cell)*13); }
.callout-pic{ position:relative; inset:auto; min-height:calc(var(--cell)*40); }
@media(min-width:900px){
  [data-callout=b] .cta .wrap{ display:grid; grid-template-columns:minmax(0,1fr) calc(var(--cell)*42); gap:calc(var(--cell)*4); align-items:stretch; }
}