/* Plain homepage trial. The same navy, copper, ink and cream as kinetic.css,
   on a light page. --copper-ink is the copper darkened to clear 4.5:1 on the
   light ground; the Kinetic copper is for dark grounds.

   Two layouts:
   - Laptop (900px+ wide, 560px+ tall): ONE SCREEN. A top bar with the logo,
     the section tabs and the booking button; the open tab fills the rest.
     Checked at real browser heights (a 1366x768 laptop leaves ~625-657px for
     the page once the browser's own bars are drawn), not just screen sizes.
   - Phone and short windows: the same pieces stack, and the page scrolls. */
:root{
  --navy:#0A1119; --ink:#0E1A24; --muted:#4D5F6C; --line:#DCD3C6;
  --paper:#FBF8F3; --cream:#F4EFE7; --white:#fff;
  --copper:#E39767; --copper-ink:#A9531F; --hot:#FF7A3D; --green:#2F8F6B; --green-ink:#22694E; --rust:#9B3B12;
}
*{box-sizing:border-box;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Manrope','DM Sans',sans-serif;letter-spacing:-.02em;line-height:1.15;margin:0;text-wrap:balance;}
/* The second half of each heading reads as part of the same line. */
h1 em,h2 em{font:inherit;font-style:normal;color:inherit;letter-spacing:inherit;}
a{color:var(--copper-ink);}
:focus-visible{outline:3px solid var(--hot);outline-offset:2px;border-radius:4px;}
img{max-width:100%;}
p,ul,ol,figure{margin:0;}

.wrap{max-width:1480px;margin:0 auto;padding:0 28px;}
@media (max-width:480px){.wrap{padding:0 16px;}}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--navy);color:#fff;padding:10px 14px;}
.skip:focus{left:8px;}

/* The site's own line icons (featureIcon in shared/kinetic.js). */
.feature-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;
  border-radius:9px;background:var(--cream);color:var(--copper-ink);}
.feature-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* ---- top bar, after BotLogix and Fractional AI --------------------------
   The logo on the left; a few grouped links on the right with room between
   them; menus that drop down as a white card listing each section with its
   one-line description; the booking button at the far right. */
.hd{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line);}
.hd .wrap{display:flex;align-items:center;gap:20px;min-height:68px;}
.bd{display:flex;align-items:center;gap:12px;flex:none;margin-right:auto;font-family:'Manrope',sans-serif;font-weight:800;
  font-size:20px;letter-spacing:.16em;color:var(--navy);text-decoration:none;}
.bd img{width:38px;height:38px;border-radius:8px;}
.nav{display:flex;align-items:center;}
.nav-toggle{display:none;}
.nav-lang{display:none;}
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;}
.nav-list > li{position:relative;}
.nav-top{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:8px;
  background:none;color:var(--ink);font:500 15px/1 'DM Sans',sans-serif;text-decoration:none;cursor:pointer;}
.nav-top svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s;}
.nav-top:hover,.nav-top[aria-expanded="true"]{background:var(--cream);}
.nav-top[aria-expanded="true"] svg{transform:rotate(180deg);}
.nav-top[aria-current="page"],.nav-top.is-current{color:var(--navy);font-weight:700;box-shadow:inset 0 -2px 0 var(--copper-ink);border-radius:8px 8px 0 0;}
.nav-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:300px;list-style:none;margin:0;padding:8px;
  background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(10,17,25,.16);display:none;}
.nav-top[aria-expanded="true"] + .nav-menu{display:block;}
.nav-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none;}
.nav-menu a:hover,.nav-menu a:focus-visible{background:var(--cream);}
.nav-menu a[aria-current="page"]{background:var(--cream);box-shadow:inset 3px 0 0 var(--copper-ink);}
.nav-menu strong{display:block;font:700 14.5px/1.3 'Manrope',sans-serif;}
.nav-menu span{display:block;margin-top:2px;font-size:13px;color:var(--muted);}
.hd .lang,.hd .btn.sm{align-self:center;}
.lang{flex:none;font-size:14px;color:var(--muted);}
.lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--ink);}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:6px;
  background:var(--hot);color:#140A04;font-weight:700;font-size:15px;text-decoration:none;border:2px solid var(--hot);white-space:nowrap;}
button.btn{font-family:inherit;cursor:pointer;}
.btn:hover{background:var(--copper);border-color:var(--copper);}
.btn.line{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn.line:hover{background:var(--ink);color:var(--paper);}
.btn.sm{flex:none;min-height:44px;padding:0 18px;font-size:14px;border-radius:999px;}

/* ---- panels: one section layout for every tab ----------------------------
   No floating boxes. Every tab is the same grid: a left column with the
   section label, heading and one line or action, and a right column with the
   content in open rows divided by hairlines. Content starts at the same top
   line on every tab, so switching tabs reads as moving between sections of
   one page, not between slides. */
main.wrap{padding-top:clamp(28px,5.5vh,56px);padding-bottom:24px;}
.panel{min-height:0;}
/* Panels, sections and headings take focus only from script (tabindex -1),
   after the welcome scroll, a menu link, the arrow or Back, so a reader's
   place moves with them. They never draw the ring (Alex, 2026-10-20: "the
   orange ring that always pops up"). Links, buttons and fields keep the
   ring for keyboard users through :focus-visible above. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none;}
/* A button given focus back after a mouse action (see basic.js). */
.quiet-focus:focus-visible{outline:none;}
.sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start;}
.sec-head h2{font-size:clamp(26px,2.4vw,34px);}
.sec-head > * + *{margin-top:14px;}
.sec-head .intro{color:var(--muted);font-size:15.5px;}
.sec-head .close{font-weight:700;font-size:15.5px;}
.sec-body{border-top:2px solid var(--ink);padding-top:18px;}
.sec-body > * + *{margin-top:16px;}
.kick{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-ink);}
.note{font-size:13px;color:var(--muted);}
.more{font-weight:700;}
.more a{display:inline-flex;align-items:center;min-height:44px;}
.ctas{display:flex;flex-wrap:wrap;gap:10px;}
/* A long label (the Spanish fit-call button) wraps inside a narrow column. */
.ctas .btn{max-width:100%;white-space:normal;text-align:center;}

/* The site's own line icons, drawn plain: no tile behind them. */
.feature-icon{width:28px;height:28px;background:none;border-radius:0;color:var(--copper-ink);}
.feature-icon svg{width:24px;height:24px;}

/* Ruled rows: Results and Security */
.rows{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;}
.rows li{padding:16px 0 18px;border-bottom:1px solid var(--line);}
.rows li:nth-last-child(-n+3){border-bottom:0;}
.rows .num{display:block;font:800 13px/1 'Manrope',sans-serif;color:var(--copper-ink);letter-spacing:.04em;}
.rows .feature-icon{display:flex;}
.rows h3{font-size:16.5px;margin-top:10px;}
.rows p{margin-top:5px;color:var(--muted);font-size:14.5px;}
.nolines{list-style:none;padding:0;}
.nolines li{position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--line);font-weight:600;font-size:15px;}
.nolines li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:2px;background:var(--copper-ink);}

/* Overview: the offer, and the three steps drawn as a timeline */
.sec-start{grid-template-columns:minmax(0,6fr) minmax(0,5fr);}
.sec-start .hl{font-size:clamp(32px,3.4vw,50px);}
.lede{font-size:17px;color:var(--muted);max-width:56ch;}
.sec-start .ctas{margin-top:22px;}
.trust{list-style:none;padding:16px 0 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;}
.sec-start .trust{margin-top:26px;}
.trust strong{display:block;font-family:'Manrope',sans-serif;font-size:15px;}
.trust span{font-size:14px;color:var(--muted);}
.flow h2{font-size:clamp(20px,1.7vw,24px);}
.timeline{list-style:none;padding:0;margin-top:18px;}
.timeline li{position:relative;display:flex;gap:16px;padding-bottom:18px;}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:17px;top:38px;bottom:0;width:2px;background:var(--line);}
.node{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:var(--paper);border:2px solid var(--copper-ink);}
.node b{font:800 12px/1 'Manrope',sans-serif;color:var(--copper-ink);}
.node .feature-icon{width:20px;height:20px;color:#140A04;}
.node .feature-icon svg{width:18px;height:18px;}
.timeline .end .node{background:var(--hot);border-color:var(--hot);}
.timeline h3{font-size:16px;margin-top:7px;}
.timeline p{font-size:14.5px;color:var(--muted);margin-top:2px;}
.flow .note{padding-left:52px;}

/* AI: the work before and after, as two ruled columns with an arrow between */
.ba{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:20px;}
.ba h3{font-size:15.5px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.ba ul{list-style:none;padding:0;}
.ba li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;}
.ba li:last-child{border-bottom:0;}
.ba li .feature-icon{width:24px;height:24px;margin-top:-1px;}
.ba li .feature-icon svg{width:21px;height:21px;}
.before .feature-icon{color:var(--rust);}
.after .feature-icon{color:var(--green);}
.after li{color:var(--muted);font-size:14.5px;}
.after li strong{color:var(--ink);}
.ba-arrow{align-self:center;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:var(--cream);}
.ba-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* Portfolio: an open table, hairlines only */
.pf{width:100%;border-collapse:collapse;text-align:left;font-size:14.5px;}
.pf th,.pf td{padding:11px 18px 11px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.pf thead th{padding-top:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.pf tbody th{font-family:'Manrope',sans-serif;width:24%;}
.pf td{color:var(--muted);}
.pf td:last-child{color:var(--ink);width:30%;padding-right:0;}

/* Fit: two ruled lists, marked rather than boxed */
.fit{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;}
.fit h3{font-size:16px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.fit ul{list-style:none;padding:0;}
.fit li{position:relative;padding:10px 0 10px 28px;border-bottom:1px solid var(--line);font-size:15px;}
.fit li:last-child{border-bottom:0;}
.fit li::before{position:absolute;left:2px;top:9px;font-weight:800;}
.fit .yes li::before{content:"\2713";color:var(--green);}
.fit .no li::before{content:"\2715";color:var(--rust);}

/* Questions */
.faq details{border-bottom:1px solid var(--line);}
.faq details:first-child summary{padding-top:0;}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;cursor:pointer;
  font-family:'Manrope',sans-serif;font-weight:700;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";flex:none;font:400 22px/1 'DM Sans',sans-serif;color:var(--copper-ink);}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin:0 0 14px;color:var(--muted);max-width:68ch;}

/* About */
/* The founder's words: the body font, set as a quote by a copper rule. */
blockquote{margin:0;}
.quote{margin-top:16px;padding-left:16px;border-left:3px solid var(--copper-ink);}
.quote p{font-size:18px;line-height:1.5;color:var(--ink);}
.quote footer{margin-top:8px;font-size:14px;font-weight:700;color:var(--muted);}
.team{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.member{display:flex;gap:16px;align-items:flex-start;}
.member img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;}
.principles{list-style:none;margin:28px 0 0;padding:20px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;border-top:1px solid var(--line);}
.principles strong{display:block;font:700 15px/1.3 'Manrope',sans-serif;color:var(--ink);}
.principles span{display:block;margin-top:4px;font-size:14px;color:var(--muted);}
/* Narrower or shorter laptops: the principles row and big photos no longer
   fit on one screen, so the section keeps its earlier, smaller form. */
@media (min-width:900px) and (max-width:1199px), (min-width:900px) and (min-height:560px) and (max-height:700px){
  .principles{display:none;}
  .member img{width:72px;height:72px;}
}
.member h3{font-size:17px;}
.member p{margin-top:2px;color:var(--muted);font-size:15px;}
.member .role{color:var(--copper-ink);font-weight:700;font-size:13px;}

.band{background:var(--navy);color:var(--cream);}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;min-height:76px;padding-top:12px;padding-bottom:12px;}
.band p{font-family:'Manrope',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em;}
.band p.band-fine{margin-top:2px;font:400 12.5px/1.3 'DM Sans',sans-serif;color:#AEBCC6;letter-spacing:0;}
.band-fine a{display:inline-flex;align-items:center;min-height:24px;color:#D7DEE3;}
.band .btn{flex:none;}
.ft{font-size:13px;color:var(--muted);}
.ft .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;}
.ft a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);}
.ft .logos{flex-wrap:nowrap;}
.ft .logo-row{flex-wrap:nowrap;}

/* Portfolio: project cards after GeoSolv's project summaries. Solid navy
   tiles, the screen on top, the title, two lines, and Learn more. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:2px solid var(--ink);}
.work-head h2{font-size:clamp(26px,2.4vw,34px);}
.work-head .kick{margin-bottom:8px;}
.work-side{flex:1 1 100%;margin:0;font-size:13.5px;color:var(--muted);}
.work-next{color:inherit;}
.work-next a{color:var(--copper-ink);white-space:nowrap;}
.pcards{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.pc{display:flex;flex-direction:column;background:var(--navy);color:var(--cream);border-radius:4px;overflow:hidden;}
.pc-img{aspect-ratio:16/10;background:#162433;overflow:hidden;}
.pc-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
/* The miniature's Home screen, live: laptop size, scaled to the card (basic.js). */
.pc-img iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none;background:#fff;}
/* Card pictures: each product's whole sign-in screen (the billing agent's
   first screen), all captured at 1280x800, so the box takes the same 16:10
   shape at every grid width and the picture fills it with nothing cut off.
   A soft shadow joins it to the dark title area below. */
.pc-img[data-k]{position:relative;}
.pc-img[data-k]::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -12px 12px -10px rgba(10,17,25,.35);}
.pc-ph{display:flex;align-items:center;justify-content:center;height:100%;
  background:repeating-linear-gradient(135deg,#132131 0 12px,#17283a 12px 24px);}
.pc-ph .feature-icon{color:var(--copper);width:34px;height:34px;}
.pc-ph .feature-icon svg{width:30px;height:30px;}
.pc-body{display:flex;flex-direction:column;flex:1;padding:12px 14px 12px;}
.pc h3{font-size:15.5px;color:var(--cream);}
.pc-body p{margin-top:4px;font-size:13.5px;line-height:1.4;color:#B9C6CF;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pc-more{align-self:flex-start;margin-top:auto;padding:10px 0 0;min-height:44px;border:0;background:none;cursor:pointer;
  font:800 12px/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--copper);}
.pc-more:hover{color:var(--hot);}

/* Learn more: a working miniature of the app in a browser-style frame, with
   the project summary beside it. The app page is drawn at 1280x800 and scaled
   to the stage by basic.js; on phones the stage scrolls instead. */
.pd{width:min(1440px,96vw);max-width:96vw;height:auto;max-height:96vh;padding:0;border:0;border-radius:8px;color:var(--ink);background:var(--paper);overflow:hidden;}
.pd::backdrop{background:rgba(10,17,25,.6);}
.pd-in{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;}
.pd-media{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;padding:14px;background:#E9E3D9;}
.pd-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 8px 6px 12px;border-radius:8px 8px 0 0;background:var(--navy);color:#fff;}
.pd-dots{display:flex;gap:5px;}
.pd-dots i{width:9px;height:9px;border-radius:50%;background:#4D5F6C;}
.pd-addr{flex:1;min-width:120px;padding:4px 10px;border-radius:999px;background:#1C2B38;color:#C4D0D8;font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pd-tag{padding:3px 9px;border-radius:999px;background:var(--copper);color:var(--navy);font-size:12px;font-weight:700;white-space:nowrap;}
.pd-stage{flex:none;min-height:0;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;margin-top:-8px;
  background:#fff;border-radius:0 0 8px 8px;}
.pd-stage[hidden],.pd-shots[hidden]{display:none;}
.pd-scale{position:relative;flex:none;overflow:hidden;}
.pd-scale iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff;}
.pd-shots{flex:none;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-top:-8px;padding:10px;background:#fff;border-radius:0 0 8px 8px;}
.pd-shots img{display:block;width:100%;border:1px solid var(--line);border-radius:4px;background:#fff;}
.pd-under{font-size:12.5px;color:var(--muted);}
.pd-under a{font-weight:700;white-space:nowrap;color:var(--rust);}
.pd-switch{display:flex;gap:4px;}
.pd-switch[hidden],.pd-switch [hidden]{display:none;}
.pd-switch button{min-height:32px;padding:0 12px;border:1px solid #4D5F6C;border-radius:999px;background:transparent;
  color:#fff;font:700 12.5px/1 'Manrope',sans-serif;cursor:pointer;}
.pd-switch button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--navy);}
.pd-switch button:focus-visible{outline-color:#fff;}
.pd-text{padding:24px 22px 20px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;}
.pd-text h2{font-size:22px;}
.pd-text dl{margin:0;}
.pd-text dt{margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-ink);}
.pd-text dd{margin:2px 0 0;font-size:14.5px;}
.pd-text .btn{align-self:flex-start;margin-top:auto;}
/* Client work opens as its description alone (no demo or screenshots). */
/* Client work opens as a tidy summary card: the project's icon and name on
   the dark band like its card, then what it does, why, and who approves. */
.pd.pd-textonly{width:min(640px,94vw);height:fit-content;}
.pd.pd-textonly .pd-in{grid-template-columns:minmax(0,1fr);}
.pd.pd-textonly .pd-media{display:none;}
.pd.pd-textonly .pd-text{padding:0;gap:0;max-height:none;overflow:visible;}
.pd-head{display:contents;}
.pd.pd-textonly .pd-head{display:flex;align-items:center;gap:14px;padding:20px 24px;background:var(--navy);color:var(--cream);}
.pd.pd-textonly .pd-head h2{color:var(--cream);font-size:22px;}
.pd-ico:empty{display:none;}
.pd.pd-textonly .pd-ico{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:8px;
  background:repeating-linear-gradient(135deg,#132131 0 8px,#17283a 8px 16px);}
.pd.pd-textonly .pd-ico .feature-icon{color:var(--copper);width:26px;height:26px;}
.pd.pd-textonly .pd-ico .feature-icon svg{width:24px;height:24px;}
.pd.pd-textonly dl{margin:0;padding:6px 24px 4px;display:grid;grid-template-columns:150px minmax(0,1fr);}
.pd.pd-textonly dt,.pd.pd-textonly dd{margin:0;padding:14px 0;border-top:1px solid var(--line);}
.pd.pd-textonly dl > :nth-child(-n+2){border-top:0;}
.pd.pd-textonly dt{padding-right:16px;}
.pd.pd-textonly dd{font-size:15px;line-height:1.55;}
.pd-foot{display:contents;}
.pd.pd-textonly .pd-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px 20px;border-top:1px solid var(--line);}
.pd.pd-textonly .pd-foot .note{margin:0;font-size:13px;color:var(--muted);}
.pd.pd-textonly .pd-foot .btn{margin:0;flex:none;}
@media (max-width:600px){
  .pd.pd-textonly dl{grid-template-columns:minmax(0,1fr);}
  .pd.pd-textonly dd{padding-top:2px;border-top:0;}
  .pd.pd-textonly .pd-foot{flex-direction:column;align-items:stretch;}
}
/* No closing band on the Portfolio screen (Alex, 2026-10-26). */
html.at-work .band{display:none;}

/* Tool logos, after GeoSolv's logo row: a quiet row near the bottom. */
.logos{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;position:relative;}
.tools-more summary{display:flex;align-items:center;min-height:44px;cursor:pointer;list-style:none;
  font:800 11px/1 'Manrope',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.tools-more summary::-webkit-details-marker{display:none;}
.tools-more summary::after{content:"+";margin-left:6px;color:var(--copper-ink);font-size:14px;}
.tools-more[open] summary::after{content:"\2212";}
.tools-pop{position:absolute;left:0;bottom:calc(100% + 6px);z-index:60;width:min(560px,92vw);padding:14px 16px;border-radius:6px;
  background:var(--white);border:1px solid var(--line);box-shadow:0 12px 30px rgba(10,17,25,.18);color:var(--ink);font-size:13.5px;}
.tools-pop ul{list-style:none;padding:0;margin:0 0 8px;}
.tools-pop li{padding:4px 0;border-bottom:1px solid var(--line);}
.tools-pop p{color:var(--muted);font-size:12.5px;}
.logo-row{list-style:none;padding:0;margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px;}
.logo-row li{display:flex;align-items:center;gap:6px;min-height:28px;}
.logo-row img{height:18px;width:auto;filter:grayscale(1);opacity:.72;}
.logo-row li:hover img{filter:none;opacity:1;}
.logo-row img.lg-anthropic{height:12px;}
.logo-row img.lg-monday{height:20px;}
.logo-row img.lg-zendesk{height:16px;}
.logo-row img.lg-meta{height:26px;margin:-4px 0;}
.lg-name{font:700 12.5px/1 'Manrope',sans-serif;color:#5A6873;letter-spacing:-.01em;}

/* ---- laptop: one screen ---- */
/* The homepage only (the trial's other pages have html.doc and scroll). */
@media (min-width:900px) and (min-height:560px){
  html:not(.doc):not(.paged),html:not(.doc):not(.paged) body{height:100%;}
  html:not(.doc):not(.paged) body{display:flex;flex-direction:column;height:100vh;height:100dvh;}
  .hd,.band,.ft{flex:none;}
  /* Top-aligned, not centred: every tab starts on the same line. */
  html:not(.doc):not(.paged) main.wrap{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;justify-content:flex-start;}
  /* Positioned, so absolutely placed pieces inside scroll with it. */
  html:not(.paged) .panel{max-height:100%;overflow:auto;position:relative;}
}
/* Narrower laptops: a little less room between the links. */
@media (min-width:900px) and (max-width:1199px){
  .hd .wrap{gap:12px;}
  .nav-top{padding:0 10px;}
  /* The heading and its note no longer fit side by side: run the note
     full width under the heading so it takes two lines, not four. */
  .work-side{flex-basis:100%;max-width:none;text-align:left;}
}
/* Shorter windows: same layout, tighter type. */
@media (min-width:900px) and (min-height:560px) and (max-height:880px){
  .pc h3{font-size:14.5px;}
  .pc-body{padding:10px 12px 8px;}
  .pc-more{padding-top:6px;}
  .work-head h2{font-size:26px;}
  main.wrap{padding-top:20px;padding-bottom:12px;}
  .band .wrap{min-height:60px;padding-top:8px;padding-bottom:8px;}
  .band p{font-size:16px;}
  .hd .wrap{min-height:56px;}
  .sec{gap:48px;}
  .sec-head h2{font-size:clamp(24px,2.1vw,28px);}
  .sec-head > * + *{margin-top:10px;}
  .sec-head .intro,.sec-head .close{font-size:14.5px;}
  .sec-body{padding-top:14px;}
  .sec-body > * + *{margin-top:12px;}
  .sec-start .hl{font-size:clamp(28px,2.8vw,40px);}
  .lede{font-size:15.5px;}
  .sec-start .ctas{margin-top:16px;}
  .sec-start .trust{margin-top:18px;padding-top:12px;gap:6px 18px;}
  .trust strong{font-size:14px;}
  .trust span{font-size:13px;}
  .timeline{margin-top:12px;}
  .timeline li{padding-bottom:12px;}
  .timeline p{font-size:13.5px;}
  .rows li{padding:12px 0 13px;}
  .rows h3{margin-top:7px;font-size:15.5px;}
  .rows p{font-size:13.5px;}
  .ba li{padding:7px 0;font-size:14px;}
  .after li{font-size:13.5px;}
  .pf{font-size:13.5px;}
  .pf th,.pf td{padding-top:8px;padding-bottom:8px;}
  .fit li{padding:8px 0 8px 28px;font-size:14.5px;}
  .faq summary{min-height:44px;}
  .quote p{font-size:17px;}
}

/* Very short laptop windows (a 1366x768 screen leaves ~625-657px). */
@media (min-width:900px) and (min-height:560px) and (max-height:700px){
  .hd .wrap{min-height:58px;}
  .bd img{width:32px;height:32px;}
  .work-head .kick{display:none;}
  .faq summary{min-height:42px;}
  .pc h3{font-size:14px;}
  .pcards{margin-top:10px;gap:10px;}
  .work-head{padding-bottom:10px;}
  .work-head h2{font-size:24px;}
  .pc-body{padding:7px 12px 4px;}
  .pc-body p{font-size:12.5px;}
  .pc-more{padding-top:6px;}
  main.wrap{padding-top:16px;padding-bottom:8px;}
  .sec-start .hl{font-size:clamp(26px,2.5vw,34px);}
  .lede{font-size:15px;line-height:1.45;}
  .sec-start .ctas{margin-top:12px;}
  .sec-start .trust{margin-top:14px;padding-top:10px;gap:4px 18px;}
  .trust span{font-size:12.5px;}
  .timeline{margin-top:8px;}
  .timeline li{padding-bottom:8px;}
  .timeline p{font-size:13px;line-height:1.4;}
  .band .wrap{min-height:52px;padding-top:6px;padding-bottom:6px;}
  .band p{font-size:15px;}
}

/* ---- phone and short windows: stacked, the page scrolls ---- */
@media (max-width:899px), (max-height:559px){
  .hd .wrap{flex-wrap:wrap;row-gap:0;gap:10px;}
  .bd{margin-right:auto;}
  /* Phone: the links fold into a Menu button; the booking button stays. */
  .hd .wrap{position:relative;}
  .nav{order:2;}
  .nav-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;
    background:none;font:700 14px/1 'Manrope',sans-serif;color:var(--ink);cursor:pointer;}
  .nav-toggle[aria-expanded="true"]{background:var(--cream);}
  .nav-list{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 16px 16px;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(10,17,25,.12);}
  .nav-toggle[aria-expanded="true"] + .nav-list{display:flex;}
  .nav-top{width:100%;justify-content:space-between;border-radius:8px;}
  .nav-menu{position:static;min-width:0;box-shadow:none;border:0;padding:0 0 6px 8px;}
  .hd > .wrap > .lang{display:none;}
  .nav-lang{display:block;padding:10px 14px 0;font-size:14px;color:var(--muted);border-top:1px solid var(--line);margin-top:6px;}
  .nav-lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--ink);}
  .hd .wrap{flex-wrap:nowrap;gap:10px;}
  .hd .btn.sm{order:4;}
  main.wrap{padding-top:28px;}
  .sec,.sec-start{grid-template-columns:minmax(0,1fr);gap:28px;}
  .rows{grid-template-columns:minmax(0,1fr);}
  .rows li:nth-last-child(-n+3){border-bottom:1px solid var(--line);}
  .rows li:last-child{border-bottom:0;}
  .ba,.fit,.team{grid-template-columns:minmax(0,1fr);}
  .principles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pcards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .work-side{text-align:left;}
  .pd{width:94vw;max-height:94vh;overflow-y:auto;}
  .pd-in{grid-template-columns:minmax(0,1fr);}
  .pd-media{padding:10px;}
  .pd-stage{flex:none;height:62vh;overflow:auto;justify-content:flex-start;}
  .pd-shots{flex:none;max-height:62vh;}
  .ft .logos,.ft .logo-row{flex-wrap:wrap;}
  .ft .wrap{padding-top:8px;padding-bottom:8px;}
  .band .wrap{flex-wrap:wrap;}
  .ba-arrow{justify-self:center;transform:rotate(90deg);}
  .pf thead{display:none;}
  .pf,.pf tbody,.pf tr,.pf th,.pf td,.pf tbody th,.pf td:last-child{display:block;width:auto;}
  .pf tr{padding:14px 0;border-bottom:1px solid var(--line);}
  .pf tr:first-child{padding-top:0;}
  .pf th,.pf td{padding:0;border:0;}
  .pf td{margin-top:8px;}
  .pf td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);}
}
@media (max-width:480px){
  .bd{font-size:16px;letter-spacing:.1em;gap:8px;}
  .bd img{width:30px;height:30px;}
  .nav-toggle{padding:0 10px;}
  .pcards{grid-template-columns:minmax(0,1fr);}
  .bd{font-size:17px;}
  .bd img{width:32px;height:32px;}
  .band .wrap{flex-direction:column;align-items:stretch;padding-top:20px;padding-bottom:20px;}
  .band .btn{white-space:normal;text-align:center;}
  .ctas .btn{width:100%;white-space:normal;text-align:center;padding:8px 16px;}
  .trust{grid-template-columns:1fr;}
  .btn.sm{padding:0 12px;}
}

/* Smallest phones: the logo mark alone; the KHIPUAI text stays in the link's
   accessible name (font-size 0 hides it visually, not from screen readers). */
@media (max-width:380px){
  .bd{font-size:0;gap:0;letter-spacing:0;}
}

/* Welcome screen: the first screen of the homepage. The band and footer step
   aside while it shows, so it has the whole window under the header.
   A (device in light mode): light and centred, a soft copper glow.
   B (device in dark mode): navy full-bleed, the khipu cords large and faint. */
.at-home .band,.at-home .ft{display:none;}
.at-home main.wrap{padding-top:0;padding-bottom:0;}
/* visible, so the dark look's navy can reach the window edges */
#panel-home{height:var(--pageh,100%);overflow:visible;}
.wl{position:relative;isolation:isolate;height:100%;min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 0 72px;text-align:center;}
.wl::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 46% 52% at 50% 44%,rgba(227,151,103,.22),rgba(227,151,103,0) 70%);}
.wl-in{display:flex;flex-direction:column;align-items:center;}
.wl-name{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:20px;
  font:800 clamp(44px,6.4vw,92px)/1 'Manrope',sans-serif;letter-spacing:.16em;color:var(--ink);}
.wl-name span{margin-right:-.16em;}
.wl-name img{width:clamp(76px,8.4vw,120px);height:auto;border-radius:22%;box-shadow:0 18px 40px rgba(10,17,25,.18);}
.wl-line{margin-top:26px;max-width:36ch;font:600 clamp(18px,1.7vw,24px)/1.35 'Manrope',sans-serif;color:var(--ink);}
.wl-sub{margin-top:10px;max-width:56ch;font-size:15.5px;color:var(--muted);}
.wl-ctas{margin-top:30px;justify-content:center;}
.wl-cue{position:absolute;left:50%;bottom:14px;display:grid;place-items:center;width:44px;height:44px;margin-left:-22px;border-radius:50%;
  color:var(--copper-ink);}
/* The icon bobs, not the link, so the link's box stays still under the pointer. */
.wl-cue svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:wl-cue 2.6s ease-in-out infinite;}
@keyframes wl-cue{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
@media (prefers-reduced-motion:reduce){.wl-cue svg{animation:none;}}
.wl .kick{color:var(--rust);}

.wl-b .wl{color:var(--cream);background:var(--navy);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax);}
.wl-b .wl::before{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23E39767' stroke-width='1.6' opacity='.12'%3E%3Cpath d='M18 12v40M32 12v40M46 12v40M18 20h28'/%3E%3Cpath d='m14 32 4-4 4 4-4 4-4-4Zm14 10 4-4 4 4-4 4-4-4Zm14-11 4-4 4 4-4 4-4-4Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -6% center/min(64vh,640px),
  radial-gradient(ellipse 60% 70% at 30% 40%,rgba(227,151,103,.16),rgba(227,151,103,0) 70%);}
.wl-b .wl-name{color:var(--cream);}
.wl-b .wl-name img{box-shadow:0 18px 50px rgba(0,0,0,.45);}
.wl-b .wl .kick{color:var(--copper);}
.wl-b .wl-line{color:#fff;}
.wl-b .wl-sub{color:#C4D0D8;}
.wl-b .wl .btn.line{color:var(--cream);border-color:var(--cream);}
.wl-b .wl .btn.line:hover{background:var(--cream);color:var(--navy);}
.wl-b .wl-cue{color:var(--copper);}
.wl-b .wl :focus-visible{outline-color:var(--copper);}
/* The device's dark mode shows look B, light mode shows look A. The
   ?welcome=a and ?welcome=b addresses force one look, for checking. */
@media (prefers-color-scheme:dark){
  html:not(.wl-a) .wl{color:var(--cream);background:var(--navy);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax);}
  html:not(.wl-a) .wl::before{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23E39767' stroke-width='1.6' opacity='.12'%3E%3Cpath d='M18 12v40M32 12v40M46 12v40M18 20h28'/%3E%3Cpath d='m14 32 4-4 4 4-4 4-4-4Zm14 10 4-4 4 4-4 4-4-4Zm14-11 4-4 4 4-4 4-4-4Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -6% center/min(64vh,640px),
    radial-gradient(ellipse 60% 70% at 30% 40%,rgba(227,151,103,.16),rgba(227,151,103,0) 70%);}
  html:not(.wl-a) .wl-name{color:var(--cream);}
  html:not(.wl-a) .wl-name img{box-shadow:0 18px 50px rgba(0,0,0,.45);}
  html:not(.wl-a) .wl .kick{color:var(--copper);}
  html:not(.wl-a) .wl-line{color:#fff;}
  html:not(.wl-a) .wl-sub{color:#C4D0D8;}
  html:not(.wl-a) .wl .btn.line{color:var(--cream);border-color:var(--cream);}
  html:not(.wl-a) .wl .btn.line:hover{background:var(--cream);color:var(--navy);}
  html:not(.wl-a) .wl-cue{color:var(--copper);}
  html:not(.wl-a) .wl :focus-visible{outline-color:var(--copper);}
}

/* Phones and short windows: the welcome screen fills the window under the
   header, and the page scrolls on to the band and footer as usual. */
@media (max-width:899px), (max-height:559px){
  html:not(.paged) #panel-home{height:auto;}
  .wl{height:auto;min-height:calc(100svh - 69px);padding:24px 0 72px;}
  html.paged .wl{min-height:var(--pageh);}
  html.at-home:not(.paged) .band,html.at-home:not(.paged) .ft{display:revert;}
}

/* Moving between the welcome screen and the Overview: the next screen slides
   in from the direction of travel. A jump with reduced motion. */
@keyframes panel-up{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
@keyframes panel-down{from{opacity:0;transform:translateY(-28px);}to{opacity:1;transform:none;}}
.panel.enter-up{animation:panel-up .36s cubic-bezier(.2,.7,.2,1);}
.panel.enter-down{animation:panel-down .36s cubic-bezier(.2,.7,.2,1);}
@media (prefers-reduced-motion:reduce){.panel.enter-up,.panel.enter-down{animation:none;}}

/* Pages instead of scrolling (pager.js, Alex and Wil 2026-10-21): the
   header on top, the page in a window under it, the page bar at the bottom.
   Nothing scrolls; the bar, the wheel, a swipe or the keys turn the page. */
html.paged,html.paged body{height:100%;overflow:hidden;overscroll-behavior:none;}
html.paged body{display:flex;flex-direction:column;height:100vh;height:100dvh;}
html.paged .hd{flex:none;position:relative;z-index:20;}
#pages{flex:1 1 auto;min-height:0;overflow:hidden;position:relative;}
#pages-in{min-height:100%;display:flex;flex-direction:column;}
#pages-in > main{flex:1 0 auto;width:100%;}
#pages-in > .band,#pages-in > .ft{flex:none;}
.pager{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;
  padding:5px 16px calc(5px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper);}
.pager[hidden]{display:none;}
.pg-btn{display:inline-flex;align-items:center;gap:4px;min-height:44px;min-width:44px;padding:0 16px;border:1px solid var(--ink);
  border-radius:999px;background:transparent;font:700 14px/1 'Manrope',sans-serif;color:var(--ink);cursor:pointer;}
.pg-btn:hover:not([disabled]){background:var(--ink);color:var(--paper);}
.pg-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pg-btn[disabled]{opacity:.35;cursor:default;}
.pg-dots{display:flex;list-style:none;margin:0;padding:0;}
.pg-dots[hidden]{display:none;}
.pg-dots button{display:grid;place-items:center;width:26px;height:44px;padding:0;border:0;background:none;cursor:pointer;}
.pg-dots button::before{content:"";width:9px;height:9px;border-radius:5px;background:var(--line);transition:width .2s;}
.pg-dots button:hover::before{background:var(--muted);}
.pg-dots button[aria-current]::before{width:22px;background:var(--copper-ink);}
.pg-count{font:700 13px/1 'Manrope',sans-serif;color:var(--muted);min-width:44px;text-align:center;}
@media (max-width:420px){.pg-btn{padding:0 12px;font-size:13px;}.pg-dots button{width:20px;}}