/* The landing page (James, 11 Nov 2026: "the site needs a landing page"; "use higgsfield ... to create assets but not just ai generated
   images"; "the flow of a ps5 menu, glassy and premium feel, white, silver, glass and lime green"). The page is white so that its
   pictures have no edge: each object is glass, silver and lime, photographed and filmed on white, and sits in the page as if it stood
   there. One object for the name, one for each kind of business. The shelf of kinds works like a console's home screen: move along it
   and the object, the words and the CRM further down all change. Loaded after site.css, on this page only. */
:root{--edge:0 0 0 1px rgba(14,18,28,.07),inset 0 1px 0 rgba(255,255,255,.95);--spring:cubic-bezier(.22,1.25,.32,1);--top:64px}
html,body{background:#fff}
::selection{background:var(--accent);color:var(--on-accent)}

/* buttons: the solid one is lime with a lit top edge; a band of light crosses it under the pointer */
.btn{background:#f1f2f5;box-shadow:var(--edge)}
.btn.solid{overflow:hidden;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(63,107,0,.34),0 16px 30px -14px color-mix(in srgb,var(--accent) 85%,transparent)}
.btn.solid::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.75) 50%,transparent 68%);translate:-120% 0;transition:translate .9s var(--ease);pointer-events:none}
@media (hover:hover){.btn.solid:hover::after{translate:120% 0}}
.arrow{color:var(--ink)}
.arrow span:first-child{padding-bottom:3px;background:linear-gradient(var(--accent),var(--accent)) 0 100% / 100% 3px no-repeat}
.arrow:hover span:first-child{text-decoration:none}

/* the bar: a pane of glass floating over the page */
@media (min-width:900px){
  .top{inset:12px 0 auto;width:min(100% - 32px,1180px);margin-inline:auto;border-radius:22px;border:1px solid rgba(255,255,255,.92);background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.6));-webkit-backdrop-filter:saturate(1.6) blur(24px);backdrop-filter:saturate(1.6) blur(24px);box-shadow:var(--edge),0 20px 44px -30px rgba(22,30,48,.45)}
  .nav{width:100%;padding:0 12px 0 22px}
}
.mark svg{color:var(--ink)}
.mark svg rect:nth-child(3){fill:var(--accent);stroke:rgba(63,107,0,.5);stroke-width:.6}
.links{display:flex;gap:28px}
.links a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);font-size:14px;text-decoration:none}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:3px;border-radius:3px;background:var(--accent);scale:0 1;transform-origin:0 50%;transition:scale .4s var(--ease)}
.links a:hover{color:var(--ink)}
.links a:hover::after{scale:1 1}

/* pictures and films made on white lose their edge on a white page */
.h-art :is(img,video),.k-art :is(img,video),.l-art img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* and their own edges fade out, so the floor's reflection never ends in a line */
.h-art,.k-art,.l-art{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 10%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 10%,#000 84%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}

/* the first screen: the words, and the name's own object standing beside them */
.h-hero{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(16px,3vw,56px);min-height:max(100svh,700px);width:min(100% - 64px,1400px);margin-inline:auto;padding:calc(var(--top) + 40px) 0 40px}
.h-copy{position:relative;z-index:1}
h1{max-width:10.5ch;font-size:clamp(3rem,6.2vw,6.4rem);font-weight:600;line-height:.96;letter-spacing:-.045em;text-wrap:balance;animation:rise-in 1s var(--ease) both}
.h-lede{max-width:34ch;margin-top:24px;color:var(--ink-2);font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.28;letter-spacing:-.018em;text-wrap:pretty;animation:rise-in 1s var(--ease) .08s both}
.h-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:32px;animation:rise-in 1s var(--ease) .16s both}
.h-fine{margin-top:18px;color:var(--soft);font-size:14px;animation:rise-in 1s var(--ease) .24s both}
.h-hz{margin-top:18px;line-height:0;animation:rise-in 1s var(--ease) .3s both}
@keyframes rise-in{from{opacity:0;translate:0 16px}}
.h-art{position:relative;aspect-ratio:4 / 3;margin-right:clamp(-120px,-6vw,0px);animation:art-in 1.4s var(--ease) .1s both;translate:var(--ax,0) var(--ay,0);transition:translate .9s var(--ease)}
@keyframes art-in{from{opacity:0;scale:.94}}

/* three true counts under the first screen's button */
.b-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;animation:rise-in 1s var(--ease) .2s both}
.b-facts span{display:inline-flex;align-items:baseline;gap:7px;height:44px;padding:0 16px;border-radius:99px;background:#fff;box-shadow:var(--edge),0 12px 20px -16px rgba(22,30,48,.5);color:var(--ink-2);font-size:15px;line-height:44px}
.b-facts span[hidden]{display:none}
.b-facts b{color:var(--ink);font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* the shelf of kinds: the chosen kind's object large, its words beside it, and every kind as a tile along the foot */
.h-kinds{position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1vh,16px);min-height:max(100svh,700px);padding:calc(var(--top) + 28px) 0 clamp(14px,2vh,28px);scroll-margin-top:0;background:linear-gradient(180deg,#fff 0,#fff 62%,#f1f2f5 100%)}
.k-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(16px,3vw,56px);width:min(100% - 64px,1400px);margin-inline:auto}
.k-art{position:relative;height:min(52svh,520px);margin-left:clamp(-90px,-5vw,0px)}
.k-art :is(img,video){position:absolute;inset:0;opacity:0;scale:.96;transition:opacity .7s var(--ease),scale 1.1s var(--ease)}
.k-art .on{opacity:1;scale:1}
.k-over{color:var(--soft);font:600 13px/1 var(--text);letter-spacing:.1em;text-transform:uppercase}
.k-info h2{margin-top:12px;font-size:clamp(2.4rem,4.6vw,4.6rem);font-weight:600;line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.k-info h2.roll{animation:name-in .7s var(--ease)}
@keyframes name-in{from{opacity:0;translate:0 18px}}
.k-say{margin-top:14px;color:var(--soft);font-size:19px}
.k-trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;max-width:560px}
.k-trades button{all:unset;box-sizing:border-box;height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--line-2);background:#fff;font-size:15px;letter-spacing:-.014em;line-height:38px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:translate .3s var(--ease),border-color .3s,box-shadow .3s,background-color .3s}
@media (hover:hover){.k-trades button:hover{translate:0 -2px;border-color:rgba(14,18,28,.3)}}
.k-trades button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.k-trades button[aria-pressed="true"]{border-color:transparent;background:var(--accent);box-shadow:0 0 0 1px rgba(63,107,0,.4),0 10px 20px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
.k-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
.k-rail{flex:none;display:flex;gap:12px;width:min(100% - 64px,1400px);margin-inline:auto;padding:18px 4px 14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.k-rail::-webkit-scrollbar{display:none}
.k-tile{all:unset;box-sizing:border-box;position:relative;flex:1 0 132px;display:flex;flex-direction:column;justify-content:flex-end;height:124px;padding:12px 14px;border-radius:20px;border:1px solid rgba(14,18,28,.08);background:#fff;overflow:hidden;cursor:pointer;scroll-snap-align:center;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 2px rgba(22,30,48,.05),0 18px 30px -24px rgba(22,30,48,.4);
  animation:rise-in .8s var(--ease) both;animation-delay:calc(var(--i) * 60ms);transition:flex-grow .6s var(--spring),translate .35s var(--ease),box-shadow .35s,border-color .35s}
.k-tile img{position:absolute;right:-8%;top:-18%;width:70%;height:92%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;transition:scale .7s var(--ease),translate .7s var(--ease)}
.k-tile b{position:relative;max-width:11ch;font-size:15px;font-weight:600;line-height:1.14;letter-spacing:-.016em;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 16px #fff}
.k-tile small{position:relative;margin-top:3px;color:var(--soft);font-size:12px}
@media (hover:hover) and (pointer:fine){.k-tile:hover{translate:0 -5px;border-color:rgba(14,18,28,.16)}.k-tile:hover img{scale:1.06}}
.k-tile:active{scale:.98}
.k-tile:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.k-tile[aria-pressed="true"]{flex-grow:2.2;border-color:transparent;box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.32),0 0 44px -6px color-mix(in srgb,var(--accent) 80%,transparent),0 26px 40px -28px rgba(22,30,48,.5)}
.k-tile[aria-pressed="true"] img{scale:1.12;translate:-4% 2%}
.k-tile[aria-pressed="true"] b{font-size:19px}

/* the bots: the part that does the work, and what is paid for. The team of robots, the seven teams, and the way in to the showroom. */
.h-bots{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(16px,3vw,56px);width:min(100% - 64px,1400px);margin-inline:auto;padding:clamp(56px,7vw,104px) 0;scroll-margin-top:40px}
.hb-art{aspect-ratio:4 / 3;margin-left:clamp(-90px,-5vw,0px)}
.hb-copy h2{margin-top:12px;font-size:clamp(2.4rem,4.6vw,4.6rem);font-weight:600;line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.hb-copy > p:not(.k-over,.h-acts){max-width:46ch;margin-top:16px;color:var(--soft);font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.36;text-wrap:pretty}
.hb-teams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:22px;max-width:600px}
.hb-team{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:96px;padding:9px 10px;border-radius:16px;border:1px solid rgba(14,18,28,.08);background:#fff;overflow:hidden;color:var(--ink);text-decoration:none;box-shadow:0 1px 2px rgba(22,30,48,.05),0 16px 26px -22px rgba(22,30,48,.4);transition:translate .35s var(--ease),border-color .35s,box-shadow .35s}
.hb-team img{position:absolute;right:-12%;top:-16%;width:78%;height:84%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;transition:scale .6s var(--ease)}
.hb-team b{position:relative;max-width:9ch;font-size:13px;font-weight:600;line-height:1.12;letter-spacing:-.014em}
@media (hover:hover) and (pointer:fine){.hb-team:hover{translate:0 -4px;border-color:transparent;box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.32),0 0 30px -6px color-mix(in srgb,var(--accent) 80%,transparent)}.hb-team:hover img{scale:1.1}}
.hb-n{color:var(--soft);font-size:16px}
.hb-n b{color:var(--ink);font-size:22px;font-weight:600;letter-spacing:-.02em}

/* the CRM itself as a glass object (glass.css), with the studio that changes every part of it beside it */
.h-real{padding:clamp(72px,8vw,112px) 0 clamp(40px,5vw,72px);background:linear-gradient(180deg,#f1f2f5 0,#fff 40%,#fff 72%,#eef0f4 100%);overflow:hidden;overflow:clip}
.r-deck{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:clamp(20px,3.4vw,60px);width:min(100% - 64px,1400px);margin-inline:auto}
.r-side{display:grid;gap:14px;min-width:0}
.r-head h2{font-size:clamp(2rem,3vw,2.8rem);font-weight:600;line-height:1.02;letter-spacing:-.038em;text-wrap:balance}
.r-head p{margin-top:8px;color:var(--soft);font-size:16px;line-height:1.36;text-wrap:pretty}
.l-copy h2{max-width:16ch;font-size:clamp(2.3rem,4.4vw,4rem);font-weight:600;line-height:1.02;letter-spacing:-.038em;text-wrap:balance}
.l-copy p{max-width:46ch;margin-top:14px;color:var(--soft);font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.36;text-wrap:pretty}
.r-world{margin-right:clamp(-90px,-4vw,0px)}
.r-acts{display:flex}
.r-acts .btn{flex:1}

/* the last ask: the name's object again, and the one button */
.h-last{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,56px);width:min(100% - 64px,1240px);margin-inline:auto;padding:clamp(72px,9vw,128px) 0}
.l-art{aspect-ratio:4 / 3}
.foot{background:#fff;border-top:1px solid rgba(14,18,28,.07)}

@media (max-width:899px){
  body{padding-bottom:0}
  .links{display:none}
  .h-hero{grid-template-columns:minmax(0,1fr);width:calc(100% - 32px);min-height:0;padding:calc(var(--top) + 28px) 0 20px;gap:8px}
  h1{font-size:clamp(2.7rem,12.5vw,3.8rem)}
  .h-art{margin:0 -16px;order:2}
  .h-kinds{min-height:0;padding-top:40px}
  .k-stage{grid-template-columns:minmax(0,1fr);width:calc(100% - 32px);gap:4px}
  .k-art{margin:0 -16px}
  .k-rail{width:100%;padding-inline:16px}
  .k-tile{flex:0 0 132px;height:118px}
  .k-tile[aria-pressed="true"]{flex:0 0 200px}
  .r-head,.h-last{width:calc(100% - 32px)}
  .h-bots{grid-template-columns:minmax(0,1fr);width:calc(100% - 32px);padding:40px 0;gap:4px}
  .hb-art{margin:0 -16px}
  .hb-teams{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-deck{grid-template-columns:minmax(0,1fr);width:calc(100% - 20px);gap:14px}
  .r-world{order:-1;margin:0 -10px;position:sticky;top:calc(var(--top) - 8px);z-index:3;background:linear-gradient(#fff 88%,rgba(255,255,255,0))}   /* the picture stays in view while the parts scroll under it */
  .h-last{grid-template-columns:minmax(0,1fr);padding:56px 0}
}