:root{
  --paper:#FAFBF9; --panel:#EEF4F2; --ink:#12272C; --muted:#4A5F63;
  --teal:#1E6A70; --deep:#0E3A40; --bonnet:#3B4AA3; --sky:#4F7FAE; --line:#D3E0DD;
  --bonnet-soft:#ECEEFA; --bonnet-line:#C5CBEE;
  --halo-in:52%; --halo-out:26%; --halo-size:-16%; --wm:0.32; --shine:rgba(255,255,255,.27); --w-blue:#3B4AA3; --w-teal:#1E6A70; --li:#0A66C2;
  --band-base:#DDEBE8; --band-glow:#C9CFF2; --band-ink:var(--ink); --band-muted:var(--muted); --band-card:rgba(255,255,255,0.6); --band-card-hover:rgba(255,255,255,0.9); --band-card-line:#C3D6D2; --band-dot:var(--bonnet); --band-btn:var(--teal); --band-btn-ink:#FFFFFF;
  --on-deep:#EAF3F1; --on-deep-muted:#B7CFCB;
  --serif:"Marcellus","Optima","Candara",Georgia,serif;
  --sans:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C1B1F; --panel:#13282D; --ink:#E4EEEC; --muted:#A3B8B5;
    --teal:#74BDB5; --deep:#0A2F35; --bonnet:#A3ADF0; --sky:#8DB4DC; --line:#23393E;
    --bonnet-soft:#18203B; --bonnet-line:#2F3A6B; --halo-in:18%; --halo-out:10%; --halo-size:-6%; --wm:0.26; --shine:rgba(255,255,255,.135); --w-blue:#A3ADF0; --w-teal:#74BDB5; --li:#FFFFFF; --band-base:#0A2F35; --band-glow:#2A3A86; --band-ink:#EAF3F1; --band-muted:#B7CFCB; --band-card:rgba(255,255,255,0.06); --band-card-hover:rgba(255,255,255,0.1); --band-card-line:rgba(255,255,255,0.12); --band-dot:#8E9BF0; --band-btn:#EAF3F1; --band-btn-ink:#0E3A40;
  }
}
:root[data-theme="dark"]{
  --paper:#0C1B1F; --panel:#13282D; --ink:#E4EEEC; --muted:#A3B8B5;
  --teal:#74BDB5; --deep:#0A2F35; --bonnet:#A3ADF0; --sky:#8DB4DC; --line:#23393E;
    --bonnet-soft:#18203B; --bonnet-line:#2F3A6B; --halo-in:18%; --halo-out:10%; --halo-size:-6%; --wm:0.26; --shine:rgba(255,255,255,.135); --w-blue:#A3ADF0; --w-teal:#74BDB5; --li:#FFFFFF; --band-base:#0A2F35; --band-glow:#2A3A86; --band-ink:#EAF3F1; --band-muted:#B7CFCB; --band-card:rgba(255,255,255,0.06); --band-card-hover:rgba(255,255,255,0.1); --band-card-line:rgba(255,255,255,0.12); --band-dot:#8E9BF0; --band-btn:#EAF3F1; --band-btn-ink:#0E3A40;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
a:focus-visible,button:focus-visible{outline:3px solid var(--bonnet);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem);letter-spacing:-0.01em}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:1.45rem}
p{margin:0}
.lede{font-size:1.2rem;color:var(--muted);max-width:34em}

/* header */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{flex:none;display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-size:1.5rem;color:var(--ink);white-space:nowrap}
.brand img{width:44px;height:44px}
.brand .b{color:var(--sky)}
nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:0.98rem;padding:10px 0}
nav a:hover{color:var(--teal)}
.lang-toggle{display:inline-flex;align-items:center;border:1px solid var(--bonnet-line);border-radius:999px;padding:2px}
.lang-toggle a{display:grid;place-items:center;min-width:34px;min-height:30px;padding:0 8px;border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--ink)}
.lang-toggle a[aria-current]{background:var(--bonnet-soft);color:var(--bonnet);font-weight:600}
.lang-toggle a:not([aria-current]):hover{background:var(--panel);color:var(--ink)}
@media (max-width:720px){nav ul{gap:16px}}
@media (max-width:440px){.brand>span{display:none} .top .wrap{gap:12px} nav ul{gap:14px} nav li.hide-sm{display:none}}
@media (max-width:360px){nav ul{gap:10px} nav a{font-size:.92rem} .lang-toggle a{min-width:30px;padding:0 6px}}

/* hero */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,88px);overflow-x:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{margin-bottom:22px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;font-weight:600;text-decoration:none;font-size:1rem}
.btn.solid{background:var(--teal);color:var(--paper)}
.btn.solid:hover{filter:brightness(1.08)}
.btn.ghost{border:1.5px solid var(--bonnet-line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--bonnet);color:var(--bonnet)}
.emblem{position:relative;justify-self:center;width:min(440px,100%)}
.emblem::before{content:"";position:absolute;inset:var(--halo-size);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--bonnet) var(--halo-in),transparent),color-mix(in srgb,var(--teal) var(--halo-out),transparent) 55%,transparent)}
.emblem img{position:relative}
/* hero: the ceiba grows in over a steady glow, the canopy and the bluebonnets sway in a light breeze, and a soft band of
   light rises through the leaves and flowers (not the trunk) now and then. Every loop animates only transform and
   opacity, which the graphics chip handles on its own, so it stays light on phones */
.emblem img{animation:ceiba-grow 1.4s cubic-bezier(.2,.7,.2,1) both}
.emblem::before{animation:glow-in 1.8s ease-out both}
.emblem .shine{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:url(/images/emblem-leaves-mask.webp) center/contain no-repeat;mask:url(/images/emblem-leaves-mask.webp) center/contain no-repeat}
.emblem .shine::before{content:"";position:absolute;left:0;top:0;width:100%;height:300%;
  background:linear-gradient(33deg,transparent 42%,var(--shine) 50%,transparent 58%);
  opacity:0;transform:translateY(-16.667%);animation:ceiba-shine 9s ease-in-out 1.6s infinite}
@keyframes ceiba-grow{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
@keyframes glow-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* the light rises from the base of the tree on a 33° tilt, so it reaches the top of the canopy and the tip of the
   tallest bluebonnet at the same moment (22%), then fades out */
@keyframes ceiba-shine{0%{transform:translateY(-16.667%);opacity:1}22%{transform:translateY(-47%);opacity:1}28%,100%{transform:translateY(-50.667%);opacity:0}}
/* breeze: the trunk stays still; the canopy leans from low in the tree and the bluebonnets rock from their base,
   each on its own rhythm. The pivots are written as translate…translate so the grow-in keeps its center */
.emblem .trunk{-webkit-mask:url(/images/emblem-trunk-region.webp) center/contain no-repeat;mask:url(/images/emblem-trunk-region.webp) center/contain no-repeat}
.emblem .canopy,.emblem .bonnets{position:absolute;inset:0;width:100%}
.emblem .canopy{-webkit-mask:url(/images/emblem-canopy-region.webp) center/contain no-repeat;mask:url(/images/emblem-canopy-region.webp) center/contain no-repeat;
  animation:ceiba-grow 1.4s cubic-bezier(.2,.7,.2,1) both,canopy-sway 8s 1.4s infinite}
.emblem .bonnets{-webkit-mask:url(/images/emblem-bonnets-region.webp) center/contain no-repeat;mask:url(/images/emblem-bonnets-region.webp) center/contain no-repeat;
  animation:ceiba-grow 1.4s cubic-bezier(.2,.7,.2,1) both,bonnet-sway 5.6s 2.2s infinite}
/* a sine-like swing: out from rest, ease into each side, back through rest */
@keyframes canopy-sway{
  0%,50%,100%{transform:translateY(25%) skewX(0deg) translateY(-25%)}
  25%{transform:translateY(25%) skewX(-.8deg) translateY(-25%)}
  75%{transform:translateY(25%) skewX(.8deg) translateY(-25%)}
  0%,50%{animation-timing-function:cubic-bezier(.61,1,.88,1)}25%,75%{animation-timing-function:cubic-bezier(.12,0,.39,0)}}
@keyframes bonnet-sway{
  0%,50%,100%{transform:translate(24%,30%) rotate(0deg) translate(-24%,-30%)}
  25%{transform:translate(24%,30%) rotate(1.3deg) translate(-24%,-30%)}
  75%{transform:translate(24%,30%) rotate(-1.3deg) translate(-24%,-30%)}
  0%,50%{animation-timing-function:cubic-bezier(.61,1,.88,1)}25%,75%{animation-timing-function:cubic-bezier(.12,0,.39,0)}}
/* rest while the hero is off screen (only the loops pause, never the grow-in) */
.hero-calm .emblem .canopy,.hero-calm .emblem .bonnets{animation-play-state:running,paused}
.hero-calm .emblem .shine::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.emblem img,.emblem .canopy,.emblem .bonnets,.emblem::before{animation:none}.emblem .shine{display:none}}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.emblem{order:-1;width:min(300px,80%)}}

/* appxolotl band */
.band{background:radial-gradient(80% 110% at 100% 0%,var(--band-glow) 0%,transparent 62%),var(--band-base);color:var(--band-ink);padding:clamp(56px,8vw,104px) 0}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.band .kicker{color:var(--band-muted);margin-bottom:10px}
.ax-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.ax-head h2{margin:0}
.ax-badge{flex:none;width:72px;height:72px;padding:2px;border-radius:50%;background:#FFFFFF}
.band h2{margin-bottom:18px}
.band p{color:var(--band-muted);max-width:32em}
.band ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.band li{padding-left:28px;position:relative;color:var(--band-ink)}
.band li::before{content:"";position:absolute;left:0;top:0.62em;width:12px;height:12px;border-radius:50%;background:var(--band-dot)}
.watch{display:grid;gap:14px}
.video{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:18px;background:var(--band-card);border:1px solid var(--band-card-line);color:var(--band-ink);text-decoration:none}
.video:hover{background:var(--band-card-hover)}
.video .play{flex:none;width:52px;height:52px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 1px var(--band-card-line);display:grid;place-items:center}
.video strong{display:block;font-size:1.05rem}
.video span{color:var(--band-muted);font-size:0.95rem}
.band .btn.solid{background:var(--band-btn);color:var(--band-btn-ink);margin-top:10px;justify-self:start}
@media (max-width:820px){.band .wrap{grid-template-columns:1fr}}

/* services */
.services{padding:clamp(64px,9vw,112px) 0}
.hero + .services{padding-top:clamp(16px,3vw,40px)}
.services header{max-width:40em;margin-bottom:48px}
.services header p{margin-top:14px}
.rule::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--bonnet);margin-top:16px}
.paths{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:stretch}
.path{display:flex;flex-direction:column;gap:36px}
.path .cta{margin-top:auto;align-self:flex-start}
.path-title{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--teal);margin:0}
.path{border-radius:24px;padding:clamp(24px,3.5vw,40px)}
.path.biz{background:var(--bonnet-soft)}
.path.biz .path-title{color:var(--bonnet)}
.path.eng{background:var(--panel)}
.path.eng .svc{border-top-color:var(--teal)}
.svc h4{font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.2;margin:0 0 12px}
.skills{margin:18px 0 0;padding-left:1.1em;color:var(--ink);display:grid;gap:6px}
.path.biz .btn.solid{background:var(--bonnet)}
.svc{border-top:2px solid var(--bonnet);padding-top:22px}
.svc h3{margin-bottom:12px}
.svc p{color:var(--muted)}
.svc .fine{margin-top:14px;font-size:0.95rem;color:var(--ink)}
@media (max-width:900px){.paths{grid-template-columns:1fr}}

/* name story */
.story{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--panel) 30%,var(--bonnet-soft));padding:clamp(72px,10vw,128px) 0}
.story .wrap{position:relative}
.story .wrap::before{content:"";position:absolute;top:50%;left:max(-110px,calc((100% - 100vw) / 2 + 12px));width:min(600px,56vw);aspect-ratio:1;transform:translateY(calc(-50% + var(--py, 0px)));background:url(/images/emblem.webp) center/contain no-repeat;opacity:var(--wm);pointer-events:none}
.story .wrap::before{will-change:transform}
.story .text{position:relative;max-width:40em;margin-left:34%}
.story h2{margin-bottom:20px;font-size:clamp(1.7rem,3vw,2.4rem)}
.story p{color:var(--muted);line-height:1.7}
.story p+p{margin-top:16px}
.story em{font-style:italic;font-weight:bold;color:var(--ink)}
.story em.w-blue{color:var(--w-blue)}
.story em.w-teal{color:var(--w-teal)}
@media (max-width:820px){.story .wrap::before{left:-30%;width:115vw;opacity:calc(var(--wm) * 0.4)}.story .text{margin-left:0}}

/* contact */
.contact{padding:clamp(64px,9vw,112px) 0}
.contact h2{margin-bottom:16px}
.contact p{color:var(--muted);max-width:40em}
.mail{display:inline-block;margin-top:26px;font-family:var(--serif);font-size:clamp(1.5rem,4.4vw,2.4rem);color:var(--bonnet);text-decoration-thickness:1px;text-underline-offset:8px;overflow-wrap:anywhere}
.mail:hover{color:var(--teal)}
.social{display:grid;place-items:center;width:44px;height:44px;margin:14px 0 0 -8px;color:var(--li)}
.social svg{display:block}
.social:hover{opacity:.8}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;max-width:640px;margin-top:30px}
.contact-form .full,.form-actions,.form-status{grid-column:1/-1}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.contact-form .turnstile:empty{display:none}
.field span{display:block;margin-bottom:6px;font-weight:500;font-size:.95rem}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:11px 14px;font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px}
.field textarea{min-height:140px;resize:vertical}
/* Safari draws native dropdowns slim and ignores most styling: turn that off and draw the arrow in the theme's colors */
.field select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--bonnet);outline-offset:1px;border-color:var(--bonnet)}
.contact-form .btn{justify-self:start;border:0;font-family:inherit;cursor:pointer}
.contact-form .btn:disabled{opacity:.6;cursor:progress}
.contact .form-status{margin:0;min-height:1.6em}
.contact .form-done{margin-top:30px;max-width:36em;padding:18px 22px;border-radius:16px;background:var(--panel);color:var(--ink)}
.contact .form-done:focus{outline:none}
.contact .or-mail{margin:28px 0 0}
.or-mail+.mail{margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.contact-form{grid-template-columns:1fr}}
/* with the form showing, email and LinkedIn sit beside it on wide screens and below it on narrow ones */
.contact-grid.with-form{display:grid;grid-template-columns:minmax(0,640px) minmax(300px,1fr);gap:28px clamp(40px,6vw,88px);align-items:start;margin-top:30px}
.contact-grid.with-form .contact-form,.contact-grid.with-form .form-done,.contact-grid.with-form .or-mail{margin-top:0}
@media (min-width:901px){.contact-grid.with-form .mail{font-size:clamp(1.3rem,1.9vw,1.75rem)}}
@media (max-width:900px){.contact-grid.with-form{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:0.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer a{color:var(--muted)}
footer .legal{display:block;margin-bottom:4px;font-size:0.78rem}

/* phones: menu button with the links and language toggle inside */
.menu-btn{display:none}
@media (max-width:640px){
  .menu-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:none;color:var(--ink);cursor:pointer}
  .menu-btn svg{display:block}
  .menu-btn .x{display:none}
  .menu-btn[aria-expanded="true"] .bars{display:none}
  .menu-btn[aria-expanded="true"] .x{display:block}
  .brand>span{display:inline}
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 24px -16px rgba(0,0,0,.25)}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch;gap:0;padding:4px 20px 20px}
  nav li.hide-sm{display:list-item}
  nav li>a{display:block;padding:14px 2px;font-size:1.05rem;border-bottom:1px solid var(--line)}
  nav li:last-child{padding-top:16px}
  .lang-toggle a{min-width:44px;min-height:36px;font-size:13px}
}

/* scroll reveal: only active when the head script added .js-reveal */
.js-reveal .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;transform:none;transition:none}}
@media print{.js-reveal .reveal{opacity:1;transform:none}}