/* Even Ground Labs, one page.
   Layout: a pinned stage holds the wordmark and a bento of colour tiles around one ink tile (the headline);
   green hairlines run along every tile edge to the screen edges. Phone: two columns, headline first.
   Desktop: four columns, the headline tile in the middle of three rows, the coloured tiles around it.
   Contrast (WCAG, from these token values): every tile's text is 7:1 or better on its own colour, the same
   in both themes; page text 7:1 or better on the ground in both themes. */

@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Level Field (design/company/brand-options.html). Paper, ink and grid line by theme; the tile colours are the same in both themes. */
  --ground:#F0F3EE; --ink:#172C29; --muted:#3D4F4A;
  --line:#2E8A57;                       /* the grid's hairlines, drawn at 40 percent */
  --card:#FBFCFA; --card-ink:#172C29; --card-muted:#3D4F4A; --card-edge:#C9D3CB;
  --hub:#172C29; --on-hub:#F0F3EE; --hub-muted:#C9D6D0;
  --moss:#1E5638; --on-moss:#F4F8F2;
  --wheat:#F2C14E; --on-wheat:#172C29;
  --river:#9ED3F0; --on-river:#172C29;
  --fern:#C6E86B; --on-fern:#172C29;
  --dusk:#35266B; --on-dusk:#F4F8F2;
  --blossom:#F6B3C2; --on-blossom:#172C29;
  --clay:#8A2C10; --on-clay:#FFF8F3;
  /* hover and focus shades, each keeping its text at 7:1 or better (lowest: the hub's second line, 8.2:1) */
  --moss-h:#184B30; --wheat-h:#F5CD6C; --river-h:#B4DDF4; --fern-h:#D3EE88; --dusk-h:#3E2D7A; --blossom-h:#F9C5D1; --clay-h:#7E270D; --hub-h:#20393A;
  --shadow:23 44 41;
  --face:"Figtree","Helvetica Neue",Arial,sans-serif;
  --gap:12px;
  --radius:22px;
  --ease-snap:cubic-bezier(.5,0,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#0E1714; --ink:#E9F2EC; --muted:#B5C6BD;
  --line:#4FB57D;
  --card:#16221E; --card-ink:#E9F2EC; --card-muted:#B5C6BD; --card-edge:#2C3B36;
  --hub:#E9F2EC; --on-hub:#172C29; --hub-muted:#3D4F4A; --hub-h:#FFFFFF;
  --shadow:0 0 0;
  color-scheme:dark }}
:root[data-theme="dark"]{
  --ground:#0E1714; --ink:#E9F2EC; --muted:#B5C6BD;
  --line:#4FB57D;
  --card:#16221E; --card-ink:#E9F2EC; --card-muted:#B5C6BD; --card-edge:#2C3B36;
  --hub:#E9F2EC; --on-hub:#172C29; --hub-muted:#3D4F4A; --hub-h:#FFFFFF;
  --shadow:0 0 0;
  color-scheme:dark }

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scrollbar-color:var(--muted) var(--ground);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--face);font-size:1.0625rem;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
::selection{background:var(--moss);color:var(--on-moss)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
h1,h2,p{margin:0}

/* ---- Stage ---- */
.intro{position:relative}
.stage{position:relative;overflow:clip;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:var(--gap)}
.top{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding-block:20px 16px;min-height:4.75rem}
.wm{line-height:1.1}
.logo{display:block;height:1.75rem;width:auto;color:var(--ink)}
.wm small{display:block;font-size:.8rem;font-weight:500;letter-spacing:0;margin-top:6px;color:var(--muted)}

/* The hairlines: one per tile edge, run to the stage's edges; motion.js places them. */
.lines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4}
.lines i{position:absolute;left:0;top:0;display:block}
.lines .v{width:1px;height:100%}
.lines .h{height:1px;width:100%}
.lines i b{display:block;width:100%;height:100%;background:var(--line)}

/* ---- Bento ---- */
.bento{position:relative;display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
.tile{position:relative;z-index:2;overflow:hidden;border-radius:var(--radius);padding:clamp(18px,5vw,28px);
  min-height:12.5rem;display:grid;align-content:space-between;gap:18px;min-width:0}
.tile .t{position:relative;display:grid;gap:10px;align-self:end;justify-items:start;min-width:0}
.tile h2{font-size:clamp(1.5rem,7vw,2.25rem);line-height:1.02;letter-spacing:-.03em;font-weight:800;text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
.tile p{line-height:1.38;max-width:32ch;text-wrap:pretty}
.own,.mail{align-content:end}
/* Hover and keyboard focus: the tile lifts a little and shifts to a related shade. Never while the
   opening moves it, never on touch-only screens, and colour only under Reduce Motion. */
.tile{transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1),background-color .28s ease}
.tile.moving{transition:none}
@media (hover: hover) and (pointer: fine){
  .tile:not(.moving):hover{transform:translateY(-4px);box-shadow:0 18px 32px -18px rgb(23 44 41 / .5)}
  .hub:hover{background:var(--hub-h)} .moss:hover{background:var(--moss-h)} .wheat:hover{background:var(--wheat-h)}
  .river:hover{background:var(--river-h)} .fern:hover{background:var(--fern-h)} .dusk:hover{background:var(--dusk-h)}
  .blossom:hover{background:var(--blossom-h)} .clay:hover{background:var(--clay-h)}
}
.tile:not(.moving):is(:focus-visible,:has(:focus-visible)){transform:translateY(-4px);box-shadow:0 18px 32px -18px rgb(23 44 41 / .5)}
.hub:is(:focus-visible,:has(:focus-visible)){background:var(--hub-h)} .moss:is(:focus-visible,:has(:focus-visible)){background:var(--moss-h)}
.river:is(:focus-visible,:has(:focus-visible)){background:var(--river-h)} .fern:is(:focus-visible,:has(:focus-visible)){background:var(--fern-h)}
.dusk:is(:focus-visible,:has(:focus-visible)){background:var(--dusk-h)} .blossom:is(:focus-visible,:has(:focus-visible)){background:var(--blossom-h)}
.clay:is(:focus-visible,:has(:focus-visible)){background:var(--clay-h)} .wheat:is(:focus-visible,:has(:focus-visible)){background:var(--wheat-h)}
@media (prefers-reduced-motion: reduce){
  .tile{transition:background-color .28s ease}
  .tile:hover,.tile:is(:focus-visible,:has(:focus-visible)){transform:none !important;box-shadow:none !important}
}
.hub{background:var(--hub);color:var(--on-hub);align-content:end;gap:14px;min-height:0}
.hub h1{font-size:clamp(1.75rem,8vw,2.5rem);line-height:1.02;letter-spacing:-.035em;font-weight:800;text-wrap:balance;max-width:22ch}
.hub p{color:var(--hub-muted);max-width:40ch}
.moss{background:var(--moss);color:var(--on-moss)}
.wheat{background:var(--wheat);color:var(--on-wheat)}
.river{background:var(--river);color:var(--on-river)}
.fern{background:var(--fern);color:var(--on-fern)}
.dusk{background:var(--dusk);color:var(--on-dusk)}
.blossom{background:var(--blossom);color:var(--on-blossom)}
.clay{background:var(--clay);color:var(--on-clay)}
.tile ::selection{background:var(--ink);color:var(--ground)}
.tile:focus{outline:none}
.tile:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.clay ::selection{background:var(--on-clay);color:var(--clay)}
.hub ::selection{background:var(--wheat);color:var(--on-wheat)}

.mark{justify-self:end;width:min(36%,132px);aspect-ratio:1;max-width:100%}
.bars{justify-self:end;width:min(36%,132px);display:grid;gap:12px;padding-top:6px}
.bars i{display:block;height:clamp(10px,2.6vw,16px);border-radius:999px;background:currentColor;opacity:.9}
.dots{position:absolute;inset:0;background-image:radial-gradient(currentColor 1.5px,transparent 1.6px);background-size:22px 22px;opacity:.22}
.lit{position:relative;justify-self:end;width:clamp(28px,16%,44px);aspect-ratio:1;border-radius:50%;background:currentColor}
.ic{display:block;width:clamp(64px,18vw,88px);height:clamp(64px,18vw,88px);border-radius:22.5%;
  box-shadow:0 14px 28px -14px rgb(23 44 41 / .55)}
/* The app icons keep their light versions in both themes. Crosswise's pale tile sits on the pale river
   tile at about 1.2:1, so it carries a ring of the tile's ink. */
.ic-cw{box-shadow:0 0 0 1.5px rgb(23 44 41 / .6),0 14px 28px -14px rgb(23 44 41 / .55)}

.mail .t{gap:12px}
.mail .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;min-width:0}
.mail .row .addr{flex:0 1 auto;min-width:0}
.addr{display:block;font-size:clamp(1.05rem,5vw,1.6rem);font-weight:700;letter-spacing:-.01em;line-height:1.2;
  overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.copybtn{display:inline-flex;text-decoration:none;font:inherit;font-weight:700;align-items:center;gap:10px;min-height:52px;padding:10px 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--on-clay);color:var(--clay);box-shadow:0 12px 24px -14px rgb(23 44 41 / .6);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.copybtn svg{width:22px;height:22px;flex:none}
.copybtn:hover{transform:translateY(-1px);box-shadow:0 16px 28px -14px rgb(23 44 41 / .7)}
.copybtn:active{transform:translateY(0) scale(.98)}
.copybtn:focus-visible{outline:3px solid var(--on-clay);outline-offset:3px}
.status{min-height:1.45em;font-size:.95em}

.foot{position:relative;z-index:2;color:var(--muted);font-size:.95rem;padding-block:20px 28px}

/* Two columns from 360 px at the default text size; the headline first, the two aims, then pairs. */
@media (min-width: 22.5em){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"hub hub" "aim1 aim1" "aim2 aim2" "cw da" "st own" "mail mail"}
  .hub{grid-area:hub} .aim1{grid-area:aim1} .aim2{grid-area:aim2} .cw{grid-area:cw} .da{grid-area:da}
  .st{grid-area:st} .own{grid-area:own} .mail{grid-area:mail}
  .tile.half{padding:18px;min-height:14rem}
  .tile.half h2{font-size:clamp(1.3rem,5.6vw,2rem)}
  .tile.half p{font-size:1rem}
  .half .ic{width:clamp(56px,16vw,80px);height:clamp(56px,16vw,80px)}
}

/* Four columns: the headline tile in the middle, the tiles around it. */
@media (min-width: 56em){
  :root{--gap:12px;--radius:24px}
  body{font-size:1.125rem}
  .stage{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));padding-bottom:20px}
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(max(12rem,calc((100svh - 4.25rem - 24px - 2.7rem) / 3)),auto));
    grid-template-areas:"aim1 aim1 aim2 aim2" "cw hub hub da" "st own mail mail"}
  .tile,.tile.half{padding:clamp(20px,2vw,26px);min-height:0}
  .tile h2{font-size:clamp(1.5rem,2.5vw,2.75rem)}
  .tile.half h2{font-size:clamp(1.3rem,1.9vw,2rem)}
  .tile p,.tile.half p{font-size:1.0625rem}
  .tile.aim2 p{max-width:44ch}
  .hub h1{font-size:clamp(1.6rem,2.35vw,2.75rem);max-width:none}
  .half .ic{width:clamp(44px,3.4vw,64px);height:clamp(44px,3.4vw,64px)}
  .tile.half p{font-size:1rem;line-height:1.32}
  .tile.half,.tile.half .t{gap:8px}
  .mark,.bars{width:min(24%,92px)}
  .addr{font-size:clamp(1.15rem,1.7vw,1.6rem)}
  /* The whole page fits one 1280 by 800 screen: header, three rows, footer. */
  .stage{padding-bottom:0}
  .stage .top{padding-block:14px 10px;min-height:4.25rem}
  .logo{height:1.5rem}
  .wm small{margin-top:4px}
  .foot{font-size:.875rem;padding-block:10px 12px}
  .tile{gap:12px}
  .bars{gap:8px;padding-top:0}
  .bars i{height:12px}
}

/* ---- The opening card (motion only; motion.js builds it, aria-hidden, from the headline tile's words) ---- */
.cardwrap{position:absolute;left:0;right:0;z-index:4;display:grid;place-items:center;pointer-events:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:16px}
.cardmove{width:min(860px,100%);transform-origin:50% 50%}
.cardscale{position:relative}
.boxes{position:relative;transform-origin:0 0;overflow:hidden;border-radius:28px;
  box-shadow:0 0 0 1px var(--card-edge),0 24px 60px -30px rgb(var(--shadow) / .4)}
.box{position:absolute;inset:0}
.box.paper{background:var(--card)}
.box.ink{background:var(--hub);opacity:0}
.texts{position:relative;transform-origin:0 0}
.txt{padding:clamp(26px,6.5vw,64px);display:grid;gap:18px;color:var(--card-ink)}
.txt.ink{position:absolute;inset:0;color:var(--on-hub);opacity:0}
.cardscale .ch{font-size:clamp(2.1rem,9.6vw,4.6rem);line-height:1;letter-spacing:-.035em;font-weight:800;text-wrap:balance;max-width:16ch}
.cardscale .cp{font-size:clamp(1.0625rem,3.4vw,1.25rem);max-width:34ch;color:var(--card-muted)}
.txt.ink .cp{color:var(--hub-muted)}
.chev{position:absolute;right:clamp(10px,2.6vw,26px);bottom:clamp(10px,2.6vw,22px);width:48px;height:48px;display:grid;place-content:center;gap:2px;
  border:0;border-radius:14px;padding:0;background:transparent;color:var(--card-muted);cursor:pointer;pointer-events:auto;
  opacity:0;transition:opacity .6s var(--ease-snap),background-color .2s ease}
.chev:hover{background:rgb(var(--shadow) / .06)}
.chev:focus-visible{opacity:1;outline:3px solid var(--card-ink);outline-offset:2px}
.chev svg{display:block;width:22px;height:12px}
.cardscale.hint .chev{opacity:1}
.cardscale.condensed .chev{opacity:0;transition-duration:.12s}

/* ---- Motion on ---- */
.motion .hub{z-index:5}   /* over the card, so the hand-over is one solid box */
.motion .tile:not(.hub).moving{will-change:transform}
.motion .boxes,.motion .texts,.motion .lines i{will-change:transform}
.motion .box.ink,.motion .txt.ink,.motion .hub{will-change:opacity}
@media (prefers-reduced-motion: no-preference){
  .motion.loading .lines i b{animation:draw 3s cubic-bezier(.5,0,0,1) both}
  .motion.loading .lines .v:nth-child(odd) b{transform-origin:50% 0}
  .motion.loading .lines .v:nth-child(even) b{transform-origin:50% 100%}
  .motion.loading .lines .h:nth-child(odd) b{transform-origin:100% 50%}
  .motion.loading .lines .h:nth-child(even) b{transform-origin:0 50%}
  .motion.loading .lines .h b{animation-name:draw-x}
  .motion .lines{transition:opacity 1.5s ease-in-out .75s}
  .motion.loading .lines{opacity:1}
  .motion .txt.paper{animation:rise .8s cubic-bezier(.16,1,.3,1) .15s backwards}
  .motion .chev.pulse svg{animation:nudge .7s var(--ease-snap) both}
  .motion .chev.pulse svg:nth-child(2){animation-delay:75ms}
}
@keyframes draw{from{transform:scaleY(0)}to{transform:none}}
@keyframes draw-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nudge{0%{transform:none}40%{transform:translateY(5px)}100%{transform:none}}

@media (prefers-reduced-motion: reduce){
  .chev,.copybtn{transition:none}
}
@media (forced-colors: active){
  .tile{border:2px solid CanvasText}
  .lines{display:none}
}