/* ==========================================================================
   Some Company: shared stylesheet (home + service pages)
   No build step. Sections:
     1  Tokens                  8  Mono scene (ownership)
     2  Base & utilities        9  Process timeline
     3  Buttons & links        10  Selected work
     4  Building blocks        11  Image band, contact, footer
     5  Hero, header, panel    12  Service pages: glance, AWS account diagram, engagement, FAQ
     6  Stack scene + slabs    12b Flat diagrams (DevOps, Data, AI pages)
     7  Results                13  Keyframes
     8  Mono scene             14  Scroll reveals, responsive, reduced motion
                               15  AWS account diagram, 16  Work pages (case studies)
   Page-level layout values are custom properties set on <body class="page-*">.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  --bg:#15120F;            /* page */
  --bg-raised:#1E1A16;     /* cards, alternate sections */
  --bg-slab:#25201B;       /* fills inside the exploded stack */
  --ink:#F2ECE4;
  --ink-soft:#CFC6BA;      /* text on slabs */
  --muted:#A89F94;
  --accent:#D9B48A;
  --accent-hi:#E8C9A0;     /* glowing travelling dots */
  --line:rgba(242,236,228,.14);
  --font-serif:'Newsreader',Georgia,serif;
  --font-sans:'Hanken Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* page-level layout tokens */
.page-home{
  --hero-h:1000px;
  --pw-overlap:290px;      /* how far the panel rises into the bottom of the hero photo */
  --pw-hang:150px;         /* how far the panel sticks out below the hero into the next section */
  --pw-gap:64px;           /* guaranteed clear space between the CTA row and the panel top */
  --hc-pad:20px 24px calc(var(--pw-overlap) + var(--pw-gap));
  --hc-jc:center;
  --h1-size:clamp(44px,6.4vw,96px);
  --hero-lede-mt:28px;
  --hero-cta-mt:36px;
  --panel-pad:26px 32px 30px;
  --rsec-pad:140px 40px;
  --rsec-bg:var(--bg);
  --psec-bg:linear-gradient(to bottom,var(--bg-raised) 0%,var(--bg) 100%);
  --pstage-h:270px;
}
.page-service,.page-work{
  --hero-h:760px;
  --pw-overlap:72px;
  --pw-hang:80px;
  --pw-gap:120px;
  --hc-pad:40px 24px calc(var(--pw-overlap) + var(--pw-gap));
  --hc-jc:flex-start;
  --h1-size:clamp(40px,5.2vw,76px);
  --hero-lede-mt:26px;
  --hero-cta-mt:34px;
  --panel-pad:30px 32px 32px;
  --rsec-pad:150px 40px;
  --rsec-bg:linear-gradient(to bottom,var(--bg-raised) 0%,var(--bg-raised) 80%,var(--bg) 100%);
  --psec-bg:linear-gradient(to bottom,var(--bg) 0%,var(--bg-raised) 100%);
  --pstage-h:300px;
}

/* 2. BASE & UTILITIES ------------------------------------------------------ */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
h1,h2,h3,p,dl,dd,ul,li{margin:0}
ul{padding:0;list-style:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--accent);color:var(--bg);font-weight:500;text-decoration:none}
.skip:hover{color:var(--bg)}
.skip:focus{top:16px}
.todo{padding:0 4px;border-radius:3px;background:var(--accent);color:var(--bg)}
.glass{-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%)}

/* count-up. The final value is the default (no JS, reduced motion): it is written into the markup.
   With JS, site.js counts it up from 0 over 1.4s once the card is in view (see 'Results count-up' there). */

/* 3. BUTTONS & LINKS ------------------------------------------------------- */
.btn,.btn:hover{color:var(--bg)}
.btn{display:inline-block;box-sizing:border-box;text-decoration:none;font-family:inherit;font-weight:500;font-size:16px;line-height:1.2;background:var(--accent);border-radius:10px;cursor:pointer;transition:filter .4s ease,box-shadow .4s ease}
.btn:hover{filter:brightness(1.08);box-shadow:0 0 0 6px rgba(217,180,138,.14)}
.link-line{color:var(--ink);text-decoration:none;font-size:16px;border-bottom:1px solid rgba(242,236,228,.32);padding-bottom:3px;transition:color .4s ease,border-color .4s ease}
.link-line:hover{color:var(--accent);border-color:var(--accent)}
.nav-link{color:rgba(242,236,228,.85);text-decoration:none;font-size:15px;padding:9px 18px;border-radius:9px;transition:background-color .4s ease,color .4s ease}
.nav-link:hover{color:var(--ink);background:rgba(242,236,228,.08)}
.nav-link.cur{color:var(--ink);background:rgba(242,236,228,.1)}
.foot-link{color:var(--muted);text-decoration:none;transition:color .4s ease}
.foot-link:hover{color:var(--accent)}
.email-link{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(217,180,138,.5);padding-bottom:6px;transition:color .4s ease,border-color .4s ease}
.email-link:hover{color:var(--accent);border-color:var(--accent)}
.crumb-link{color:var(--muted);text-decoration:none;transition:color .4s ease}
.crumb-link:hover{color:var(--accent)}
.arrow{color:var(--muted);transition:transform .4s ease,color .4s ease}

/* 4. BUILDING BLOCKS (shared by several sections) --------------------------- */
.fill{position:absolute;inset:0}
.stage{position:relative;overflow:hidden;overflow:clip}
.display{
  font-family:var(--font-serif);
  font-weight:300;
  letter-spacing:-0.025em;
  color:var(--ink);
  font-optical-sizing:auto;
}
.eyebrow{font-size:13px;color:var(--muted)}
.cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.hero{display:flex;flex-direction:column;background:var(--bg)}
.hd-side{flex:1 1 0;display:flex;align-items:center}
.hero-content{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.panel-wrap{
  position:absolute;
  left:0;
  right:0;
  z-index:5;
  display:flex;
  justify-content:center;
  padding:0 24px;
  box-sizing:border-box;
}
.panel{
  width:100%;
  max-width:1180px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(30,26,22,.42);
}
.cap{font-size:13px;line-height:1.4;color:var(--muted)}
.lede{font-size:17px;line-height:1.55;color:var(--muted)}
.wrap{max-width:1280px;margin:0 auto}
.bignum{
  position:relative;
  display:flex;
  align-items:baseline;
  font-family:var(--font-serif);
  font-weight:200;
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.unit{font-weight:300;letter-spacing:-0.01em;color:var(--muted)}
.sec-head{text-align:center;padding:0 20px;box-sizing:border-box}
.psec{padding:130px 40px 140px}

/* 5. HERO, HEADER, PANEL ---------------------------------------------------- */
.hero-wrap{position:relative}
.hero{min-height:var(--hero-h)}
.scrim-hero{background:linear-gradient(to bottom,rgba(21,18,15,.62) 0px,rgba(21,18,15,0) 240px),radial-gradient(ellipse at 50% 42%,rgba(21,18,15,.58),rgba(21,18,15,.3) 40%,rgba(21,18,15,0) 68%),linear-gradient(to bottom,rgba(21,18,15,0) 30%,rgba(21,18,15,.6) 66%,var(--bg) 100%)}
/* Film grain: one pre-rendered 64px noise tile (assets/img/grain.png, the old feTurbulence output baked at 2x) instead of a live SVG filter
   per section, which Safari re-rasterised on the CPU every time a section scrolled into view. */
.grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;pointer-events:none;background:url(img/grain.png) 0 0/64px 64px repeat}
.hero-content{padding:var(--hc-pad);justify-content:var(--hc-jc)}
.h1{font-size:var(--h1-size);line-height:1.02;max-width:1000px}
.hero-lede{
  margin-top:var(--hero-lede-mt);
  max-width:520px;
  font-size:18px;
  line-height:1.55;
  color:var(--ink);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.hero-cta{
  margin-top:var(--hero-cta-mt);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:20px 32px;
}
.hero-shadow{text-shadow:0 1px 12px rgba(0,0,0,.55)}
.blackout{z-index:10;background:#000;pointer-events:none}
.page-service .scrim-hero,.page-work .scrim-hero{background:linear-gradient(to bottom,rgba(21,18,15,.62) 0px,rgba(21,18,15,0) 240px),radial-gradient(ellipse at 50% 38%,rgba(21,18,15,.58),rgba(21,18,15,.3) 40%,rgba(21,18,15,0) 68%),linear-gradient(to bottom,rgba(21,18,15,0) 30%,rgba(21,18,15,.6) 66%,var(--bg) 100%)}
.site-header{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:28px 40px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
  font-size:18px;
  letter-spacing:-0.01em;
}
.brand-mark{display:block;flex:none;height:17px;width:auto;aspect-ratio:27/22}
.nav-pill{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(30,26,22,.42);
}
.hd-side--end{justify-content:flex-end;gap:8px}
/* Services disclosure. Without JS the plain link (.nav-dd-fb) is shown; site.js swaps in the button. */
.nav-dd{position:relative}
.nav-dd-btn{display:none;appearance:none;-webkit-appearance:none;margin:0;border:0;background:transparent;font:inherit;font-size:15px;line-height:inherit;cursor:pointer;align-items:center;gap:8px}
.js .nav-dd-fb{display:none}
.js .nav-dd-btn{display:inline-flex}
.nav-dd-btn::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s ease}
.nav-dd-btn[aria-expanded="true"]{color:var(--ink);background:rgba(242,236,228,.08)}
.nav-dd-btn[aria-expanded="true"]::after{margin-top:3px;transform:rotate(225deg)}
.nav-menu{position:absolute;z-index:20;top:calc(100% + 14px);left:-6px;width:min(420px,86vw);box-sizing:border-box;padding:8px;border:1px solid var(--line);border-radius:16px;background:rgba(30,26,22,.97);box-shadow:0 28px 60px rgba(0,0,0,.45);animation:menuin .25s var(--ease) both}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nm-i{display:block;padding:12px 14px;border-radius:10px;color:var(--ink);text-decoration:none;transition:background-color .3s ease}
.nm-i:hover,.nm-i:focus-visible{background:rgba(242,236,228,.08)}
.nm-i:focus-visible{outline-offset:-2px}
.nm-t{display:block;font-weight:500;font-size:16px;line-height:1.3}
.nm-s{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.nm-i[aria-current="page"] .nm-t{color:var(--accent)}
.nm-i[aria-current="page"] .nm-t::after{content:" \00B7 You are here";font-weight:400;font-size:12.5px;color:var(--muted)}
.menu-btn{display:none;appearance:none;-webkit-appearance:none;margin:0;box-sizing:border-box;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:rgba(30,26,22,.42);font:inherit;font-size:15px;line-height:1.2;color:var(--ink);cursor:pointer;align-items:center}
.menu-btn:hover{background:rgba(242,236,228,.1)}
.sheet{position:fixed;z-index:60;top:0;right:0;bottom:0;left:0;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 20px 40px;background:rgba(21,18,15,.93);animation:fade .25s ease both}
.sheet[hidden]{display:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.sheet .menu-close{display:inline-flex}
.sheet-k{margin:0 0 6px;font-size:13px;color:var(--muted)}
.sheet-k--2{margin-top:22px}
.sheet-list{display:flex;flex-direction:column;margin:0 -14px}
.sheet-list .nm-i{padding:14px}
.sheet-nav{display:flex;flex-direction:column;margin-top:22px;padding-top:10px;border-top:1px solid var(--line)}
.sheet-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--font-serif);font-weight:300;font-size:30px;line-height:1.2;letter-spacing:-0.02em;color:var(--ink);text-decoration:none}
.sheet-mail{display:inline-block;margin-top:30px;font-size:22px}
html.lock,html.lock body{overflow:hidden}
.bt--sm{padding:11px 20px;font-size:15px}
.bt--lg{padding:16px 28px}
.blk{display:block}
.wrap--rel{position:relative}
.h2-md{font-size:clamp(32px,3.6vw,48px);line-height:1.05;max-width:820px;margin:0 auto}
.lede-md{margin:14px auto 0;max-width:560px}
.h2-results{font-size:clamp(36px,4.4vw,56px);line-height:1.05;margin-bottom:64px}
.h2-mono{
  font-size:clamp(34px,4.4vw,64px);
  line-height:1.05;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
  max-width:1100px;
  margin:0 auto;
}
.h2-lg{font-size:clamp(32px,4vw,56px);line-height:1.05;max-width:760px;margin:0 auto}
.lede-sm{margin:20px auto 0;max-width:460px}
.band-text{font-size:clamp(32px,4vw,56px);line-height:1.1;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.h2-cta{font-size:clamp(44px,5.6vw,72px);line-height:1.02}
.h2-quote{font-size:clamp(30px,3.7vw,52px);line-height:1.12}
.h2-faq{font-size:clamp(32px,3.6vw,48px);line-height:1.05;max-width:400px}

/* hero load-in motion */
.hero-drift{animation:kb 40s ease-in-out infinite alternate;transform-origin:50% 60%;will-change:transform}
.hero-zoom{animation:zoomin 2.4s var(--ease) both;transform-origin:50% 60%}
.blackout{opacity:0;animation:blackout 1.2s ease .1s both}
.fade-in{animation:fade 1.2s ease .3s both}
.blur-in{animation:blurin 1s var(--ease) both}
.blur-in.blk{animation-name:blurh}
.d1{animation-delay:.55s}.d2{animation-delay:.73s}.d3{animation-delay:.91s}.d4{animation-delay:1.2s}.d5{animation-delay:1.4s}

/* hero glass panel (48-hour deliverables on home, at-a-glance strip on service pages) */
.panel{animation:panel 1.5s var(--ease) 1.6s both}
/* The panel sits in the page flow right after the hero and is pulled up by --pw-overlap, so its top edge is always exactly that far
   above the hero's bottom edge. The hero pads its content by --pw-overlap + --pw-gap, so the CTA row can never reach the panel,
   however tall the content or the panel get. The negative bottom margin lets the next section start --pw-hang below the hero. */
.panel-wrap{position:relative;margin-top:calc(-1 * var(--pw-overlap));margin-bottom:calc(-1 * var(--pw-hang))}
.panel{padding:var(--panel-pad)}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.panel-title{font-family:inherit;font-weight:500;font-size:15px;line-height:1.3;color:var(--ink)}
.tabs{
  display:none;            /* no JS: the three panes show stacked, so there is nothing to switch */
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:12px;
  font-size:14px;
  line-height:1;
}
.tabs-ready .tabs{display:flex}
.tab{position:relative;appearance:none;-webkit-appearance:none;margin:0;border:0;background:transparent;font:inherit;color:var(--muted);cursor:pointer;padding:10px 16px;border-radius:9px;transition:color .3s ease,background-color .3s ease}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:rgba(242,236,228,.1);color:var(--ink)}
.tab::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;border-radius:1px;background:var(--accent);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.tabs.auto .tab[aria-selected="true"]::after{animation:tabprog 5s linear both}
.tabs.auto.intro .tab[aria-selected="true"]::after{animation-delay:3s}
.pg{--base:3s;margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr)}
.pg > .wg + .wg{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
/* no JS: the three panes are stacked, so the panel flows in the page instead of overlapping the hero */
html:not(.js) .panel-wrap{margin-top:-90px;margin-bottom:0}
.cap{margin-top:18px}
.dot{
  position:absolute;
  left:0;
  top:-2px;
  width:100%;
  height:5px;
  opacity:0;
  pointer-events:none;
  animation:hop var(--hp,8s) linear var(--hd,5.2s) infinite;
}
.dot::before{content:"";position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 10px 2px rgba(217,180,138,.6)}
/* architecture diagram: inline SVG (wide) and a vertical redraw for phones. Lines draw in, then request dots loop (12s). */
.ar{margin:0}
.ar-svg{display:block;width:100%;max-width:1040px;margin:0 auto;height:auto;overflow:visible}
.ar-v{display:none}
.ar-bx{fill:rgba(242,236,228,.05);stroke:rgba(242,236,228,.26);stroke-width:1}
.ar-bx--s{fill:rgba(217,180,138,.08);stroke:rgba(217,180,138,.45)}
.ar-n{fill:var(--ink);font-size:14.5px}
.ar-r{fill:var(--muted);font-size:11.5px}
.ar-z{fill:var(--muted);font-size:11.5px;letter-spacing:.02em}
.ar-z--s{font-size:10.5px}
.ar-vpc{fill:rgba(242,236,228,.015);stroke:rgba(217,180,138,.55);stroke-width:1.2;stroke-dasharray:6 5}
.ar-zone{fill:rgba(242,236,228,.035);stroke:rgba(242,236,228,.1);stroke-width:1}
.ar-cw{fill:rgba(242,236,228,.03);stroke:rgba(242,236,228,.2);stroke-width:1}
.ar-cwt{font-size:12px}
.ar-l{fill:none;stroke:rgba(217,180,138,.8);stroke-width:1.3;stroke-dasharray:1;animation:dash .7s var(--ease) calc(var(--base,0s) + .15s + var(--i,0) * .18s) both}
.ar-dl{fill:none;stroke:rgba(242,236,228,.3);stroke-width:1;stroke-dasharray:2 4}
.ar-rep{fill:none;stroke:rgba(242,236,228,.65);stroke-width:1.3;stroke-dasharray:3 3}
.ar-g{animation:fade .5s ease calc(var(--base,0s) + var(--i,0) * .18s) both}
.ar-d{fill:var(--accent-hi);opacity:0;offset-rotate:0deg;filter:drop-shadow(0 0 4px rgba(217,180,138,.8));animation:trav 12s linear calc(var(--base,0s) + 2.4s + var(--t,0) * 1s) infinite both}
.ar-d--rep{fill:var(--ink);filter:drop-shadow(0 0 4px rgba(242,236,228,.7));animation-name:trav2}
@keyframes trav{0%{offset-distance:0;opacity:0}1.5%{opacity:1}8.5%{opacity:1}10%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes trav2{0%{offset-distance:0;opacity:0}2%{opacity:1}18%{opacity:1}20%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@media (max-width:880px){.ar-h{display:none}.ar-v{display:block;max-width:340px;margin:0 auto}}
.pn-t{margin:0;font-family:inherit;font-weight:500;font-size:16px;line-height:1.3;color:var(--ink)}
.pn-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;margin-bottom:26px}
.pn-s{margin:0;font-size:14.5px;line-height:1.4;color:var(--muted)}
.dx{transform-origin:left center;animation:drawx .8s var(--ease) calc(var(--base,0s) + var(--i,0) * .2s) both}

/* budget (range bars) and plan (Gantt): label column + a shared axis. Static, flat bars, nothing draggable. */
.rb,.gt{margin:0}
.rb{--rs:.14s}
.rb-row{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:20px;align-items:center;margin-bottom:12px}
.rb-lab{font-size:14.5px;line-height:1.25;color:var(--ink)}
.rb-lab small{display:block;margin-top:2px;font-size:12px;line-height:1.2;color:var(--muted)}
.rb-trk{position:relative;display:block;height:32px;border-radius:6px;background-color:rgba(242,236,228,.05);background-image:repeating-linear-gradient(90deg,rgba(242,236,228,.12) 0 1px,transparent 1px calc(100% / 4));box-shadow:inset -1px 0 0 rgba(242,236,228,.12)}
.gt .rb-trk{background-image:repeating-linear-gradient(90deg,rgba(242,236,228,.09) 0 1px,transparent 1px calc(100% / 19))}
.rb-row:nth-child(2){--r:1}.rb-row:nth-child(3){--r:2}.rb-row:nth-child(4){--r:3}.rb-row:nth-child(5){--r:4}
.rb-bar,.gt-b{position:absolute;top:0;bottom:0;box-sizing:border-box;border-radius:5px;transform-origin:left center;animation:drawx .9s var(--ease) calc(var(--base,0s) + .15s + var(--r,0) * var(--rs,.25s)) both}
.rb-bar{left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);background:var(--accent)}
.rb-val{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-size:14px;line-height:1;white-space:nowrap;animation:fade .4s ease calc(var(--base,0s) + .85s + var(--r,0) * var(--rs,.25s)) both}
.rb-val--out{left:calc(var(--b) * 1% + 10px);color:var(--ink)}
.rb-val--in{right:calc((100 - var(--b)) * 1% + 12px);font-weight:500;color:var(--bg)}
.rb-ax{margin-bottom:0}
.rb-ax .rb-trk{height:24px;border-radius:0;background:none;box-shadow:none;border-top:1px solid rgba(242,236,228,.3)}
.gt .rb-ax .rb-trk{background-image:repeating-linear-gradient(90deg,rgba(242,236,228,.3) 0 1px,transparent 1px calc(100% / 19));background-size:100% 4px;background-repeat:no-repeat}
.rb-ax .rb-lab{font-size:12.5px;color:var(--muted)}
.rb-tk{position:absolute;top:0;left:calc(var(--p) * 1%);transform:translateX(-50%);padding-top:9px;font-size:12.5px;line-height:1;color:var(--muted);white-space:nowrap}
.rb-tk::before{content:"";position:absolute;top:0;left:50%;width:1px;height:6px;background:rgba(242,236,228,.4)}
.rb-tk--ph{display:none}
.rb-tk:first-child{transform:none}.rb-tk:first-child::before{left:0}
.rb-tk:last-child{transform:translateX(-100%)}.rb-tk:last-child::before{left:auto;right:0}
.gt-b{left:calc(var(--a) / 19 * 100%);width:calc((var(--b) - var(--a)) / 19 * 100%)}
.gt-b--d{min-width:10px;background:var(--accent)}
.gt-b--s{border-radius:5px 0 0 5px;background:var(--accent)}
.gt-b--h{display:flex;align-items:center;justify-content:center;border-radius:0 5px 5px 0;background:repeating-linear-gradient(135deg,rgba(217,180,138,.5) 0 5px,rgba(217,180,138,.16) 5px 10px);animation-delay:calc(var(--base,0s) + .55s)}
.gt-b--h em{font-style:normal;padding:3px 8px;border-radius:4px;background:rgba(21,18,15,.78);font-size:12.5px;line-height:1.2;color:var(--ink);white-space:nowrap}
.gt-n{position:absolute;top:0;bottom:0;right:calc((19 - 16) / 19 * 100% + 10px);display:flex;align-items:center;font-size:12.5px;line-height:1;color:var(--muted);white-space:nowrap;animation:fade .4s ease calc(var(--base,0s) + 1s + var(--r,0) * var(--rs,.25s)) both}
.gt-n i{font-style:normal;margin-right:6px;font-size:14px;color:var(--ink)}
@media (min-width:721px){.gt .rb-row{grid-template-columns:236px minmax(0,1fr)}}
.gt-b--f{background:var(--ink)}
/* plan pane, wider screens: what each phase delivers, as three columns under the Gantt (it replaces the caption).
   On phones the Gantt alone already fills the panel, so the list and its facts stay out of the way. */
.ph{display:none}
@media (min-width:721px){
  .ph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin:18px 0 0}
  .ph li{padding-top:10px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.4}
  .ph b{display:block;margin-bottom:2px;font-weight:500;color:var(--ink)}
  .ph span{color:var(--muted)}
  .tabs-ready .wg-3 > .cap{display:none}
}

/* once the tabs have run (or been used) the panes no longer wait for the panel intro */
.tabs-ready:has(.tabs:not(.intro)) .pg{--base:0s}
/* tabs on: one pane at a time. Panes share one grid cell so the panel keeps its height. */
.tabs-ready .pg{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(148px,auto);margin-top:20px}
.tabs-ready .pg > .wg{grid-area:1 / 1;display:flex;flex-direction:column;justify-content:flex-start;margin:0;padding:0;border:0;animation:fade .3s ease both}
/* hidden panes stay in layout (invisible) so the panel keeps the height of the tallest pane; their animations restart when shown */
.tabs-ready .pg > .wg[hidden]{visibility:hidden;pointer-events:none;animation:none}
.tabs-ready .pg > .wg[hidden] *{animation:none!important}
.tabs-ready .pg > .wg.out{animation:fadeout .3s ease both;pointer-events:none}
.tabs-ready .pg > .wg:focus-visible{outline-offset:8px;border-radius:8px}
.tabs-ready .cap{font-size:15px}
.tabs-ready .cap{margin-top:14px}

/* 6. STACK SCENE (home: what we do) -------------------------------------- */
/* slab layers: --gap is the exploded spacing, --k the layer index (plain custom properties, no registration needed) */
.xst{--gap:110px}
.sl{--tf:perspective(1600px) rotateX(58deg) rotateZ(-38deg)}
.xsec{height:1120px;background:var(--bg)}
.rk{position:absolute;top:0;bottom:0;left:-4%;width:108%;opacity:.28}
.scrim-stack{background:linear-gradient(to bottom,var(--bg) 0%,rgba(21,18,15,.5) 18%,rgba(21,18,15,.42) 80%,var(--bg) 100%);pointer-events:none}
.xh{position:absolute;top:190px;left:0;right:0;text-align:center;padding:0 24px;box-sizing:border-box}
.xst{position:absolute;top:384px;left:50%;width:1280px;height:680px;margin-left:-640px}
.rk{animation:rkdrift 40s ease-in-out infinite alternate;will-change:transform}
/* site.js adds .pz to a section while it is off screen: its ambient loops pause and release their layers */
.pz :is(.hero-drift,.rk,.dot,.ar-d,.pls,.fdot,.pdot){animation-play-state:paused}
.pz :is(.hero-drift,.rk){will-change:auto}
.xi{display:block;color:var(--ink);text-decoration:none}
.xi:focus-visible{outline:none}
.xi:focus-visible .xl{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}
.sl{position:absolute;left:140px;top:223px;width:660px;height:410px;box-sizing:border-box;border:1px solid rgba(242,236,228,.26);border-radius:6px;background-color:rgba(30,26,22,.5);background-image:repeating-linear-gradient(0deg,rgba(242,236,228,.035) 0,rgba(242,236,228,.035) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,rgba(242,236,228,.035) 0,rgba(242,236,228,.035) 1px,transparent 1px,transparent 40px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 40px rgba(242,236,228,.04);transition:border-color .5s ease,background-color .5s ease}
.sl1{--k:0}
.sl2{--k:1}
.sl3{--k:2}
.sl4{--k:3}
.sl{transform:var(--tf) translateZ(calc(var(--gap) * var(--k)))}
.sl::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 50%,rgba(217,180,138,.34),rgba(217,180,138,0) 68%);opacity:0;pointer-events:none;transition:opacity .6s ease}
.sl4::after{opacity:.7}
.xst:has(.xi:hover) .sl4::after,.xst:has(.xi:focus-visible) .sl4::after{opacity:0}
.xi:hover .sl,.xi:focus-visible .sl{border-color:rgba(217,180,138,.7);background-color:rgba(64,54,43,.52)}
.xst:hover .xi:hover .sl::after,.xst .xi.xi:focus-visible .sl::after{opacity:1}
.xl{position:absolute;z-index:2;display:block;height:56px}
.xlr{position:absolute;left:0;top:12px;height:1px;background:rgba(242,236,228,.34);transform-origin:left center;transition:background-color .4s ease}
.xdt{position:absolute;left:-3px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(217,180,138,.14);transition:transform .4s ease}
.xlt{position:absolute;top:0;width:320px}
.xl::before{content:"";position:absolute;top:-12px;right:-16px;bottom:-12px;left:-16px}
.xnm{display:block;font-weight:500;font-size:19px;line-height:24px;color:rgba(242,236,228,.92);text-decoration:underline;text-decoration-color:rgba(242,236,228,.3);text-decoration-thickness:1px;text-underline-offset:6px;transition:color .4s ease,text-decoration-color .4s ease}
.xi:hover .xnm,.xi:focus-visible .xnm{text-decoration-color:var(--accent)}
.xms{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--muted);transition:color .4s ease}
.xi:hover .xnm,.xi:focus-visible .xnm{color:#FFF8EE}
.xi:hover .xms,.xi:focus-visible .xms{color:#D3C9BC}
.xi:hover .xlr,.xi:focus-visible .xlr{background:var(--accent)}
.xi:hover .xdt,.xi:focus-visible .xdt{transform:scale(1.35)}
.xi:hover .arrow,.xi:focus-visible .arrow{transform:translate(3px,-3px);color:var(--accent)}

/* content drawn on the slab surfaces (658 x 408 canvas, scaled down on phone) */
.sc{position:absolute;left:0;top:0;width:658px;height:408px;z-index:1;display:block;font-size:10.5px;line-height:1;color:var(--ink-soft);pointer-events:none}
.sc *{box-sizing:border-box}
.sa{position:absolute;display:block}
.sk{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid rgba(242,236,228,.34);border-radius:4px;background:rgba(242,236,228,.05);font-size:10.5px;line-height:1.3;color:var(--ink-soft);white-space:nowrap}
.sk.ac{border-color:rgba(217,180,138,.7)}
.sk.col{flex-direction:column;justify-content:flex-end;padding-bottom:8px}
.sk.two{flex-direction:column;gap:5px}
.sbx{position:absolute;display:block;border:1px solid rgba(242,236,228,.3);border-radius:6px;background:rgba(242,236,228,.04);white-space:nowrap}
.sbx.ac{border-color:rgba(217,180,138,.7)}
.sdv{position:absolute;display:block;border:1px dashed rgba(242,236,228,.46);border-radius:8px}
.slb{position:absolute;display:block;font-size:10px;line-height:1;color:var(--ink-soft);white-space:nowrap}
.slb.dim{color:rgba(207,198,186,.68)}
.slb.hi{color:#EFE8DD;font-size:10.5px}
.slb.acc{color:var(--accent)}
.slb.ctr{text-align:center}
.sln{position:absolute;display:block;background:rgba(242,236,228,.4)}
.sln.f{background:rgba(242,236,228,.16)}
.skl{position:absolute;display:block;height:4px;border-radius:2px;background:rgba(242,236,228,.22)}
.dt{position:absolute;display:block;width:6px;height:6px;border-radius:50%;background:rgba(242,236,228,.5)}
.dt.g{background:#9DB08A}
.dt.ac{background:var(--accent)}
.av{position:absolute;display:block;border-radius:50%;border:1px solid rgba(242,236,228,.5);background:rgba(242,236,228,.22)}
.cb{position:absolute;display:block;width:12px;height:12px;border:1px solid rgba(242,236,228,.45);border-radius:3px}
.cb::after{content:"";position:absolute;left:3px;top:0;width:3px;height:6px;border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);transform:rotate(45deg)}
.sch{position:relative;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border:1px solid rgba(242,236,228,.34);border-radius:6px;background:rgba(242,236,228,.05);font-size:10.5px;line-height:1;color:var(--ink-soft);white-space:nowrap}
.cd{display:block;flex:none;width:5px;height:5px;border-radius:50%;background:rgba(242,236,228,.55)}
.strk{position:relative;display:block;flex:none;width:36px;height:1px;background:rgba(217,180,138,.6)}
.strk::after{content:"";position:absolute;right:0;top:-3px;width:5px;height:5px;border-top:1px solid rgba(217,180,138,.85);border-right:1px solid rgba(217,180,138,.85);transform:rotate(45deg)}
.pls{position:absolute;display:block;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 8px 2px rgba(217,180,138,.55);animation:trail 3.4s ease-in-out infinite}
.fdot{position:absolute;display:block;left:47px;top:153px;width:6px;height:6px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 8px 2px rgba(217,180,138,.55);animation:dflow 9s linear infinite}
.bub{position:absolute;display:block;border:1px solid rgba(242,236,228,.3);border-radius:12px;background:rgba(242,236,228,.05);font-size:10.5px;line-height:15px;color:var(--ink-soft)}
.ty{position:absolute;display:block;height:5px;border-radius:3px;transform-origin:left center;background:rgba(242,236,228,.26);animation:growx 1.4s var(--ease) both}
.ty1{animation-delay:.1s}.ty2{animation-delay:.7s}.ty3{animation-delay:1.2s}
.tyc{animation:fade 1s ease 2s both}
.ah{position:absolute;display:block;width:6px;height:6px;border-top:1px solid rgba(242,236,228,.62);border-right:1px solid rgba(242,236,228,.62);transform:rotate(45deg)}
.lk{position:absolute;display:block;width:10px;height:8px;border:1.2px solid var(--accent);border-radius:2px}
.lks{position:absolute;display:block;left:1px;top:-7px;width:6px;height:6px;border:1.2px solid var(--accent);border-bottom:0;border-radius:4px 4px 0 0}
.cy{position:absolute;display:block;left:0;top:7px;width:100%;height:36px;border:1px solid rgba(242,236,228,.4);border-top:0;border-radius:0 0 26px 26px/0 0 8px 8px}
.ce{position:absolute;display:block;left:0;top:0;width:100%;height:14px;border:1px solid rgba(242,236,228,.5);border-radius:50%;background:rgba(242,236,228,.08)}
.sbar{display:block;flex:none;width:12px;border-radius:2px 2px 0 0;background:rgba(242,236,228,.4)}
.sbar.ac{background:var(--accent)}
.pdot{position:absolute;display:block;left:256px;top:28px;width:6px;height:6px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 8px 2px rgba(217,180,138,.55);animation:pipe 7s linear infinite}
/* slab variants (after the base slab rules so they win) */
.sk--pill{border-radius:6px}
.meter{border-radius:2px}
.sbars{display:flex;align-items:flex-end}
.sk--soft{background:rgba(242,236,228,.1)}
.hub{border:1px solid rgba(242,236,228,.6);border-radius:50%;background:var(--bg-slab)}
.hub-core{border-radius:50%;background:var(--ink-soft)}
.sk--xs{font-size:10px}
.sbx--faint{border-color:rgba(242,236,228,.2)}
.sq{border:1px solid rgba(242,236,228,.5);border-radius:3px}
.sq-db{border:1px solid rgba(242,236,228,.5);border-radius:50% 50% 6px 6px/30% 30% 6px 6px}
.chips-row{display:flex;gap:8px}
.arrow--inline{display:inline-block;vertical-align:-2px;margin-left:7px}
.sq-r2{border:1px solid rgba(242,236,228,.5);border-radius:2px}
.sk--step{border-radius:50%;font-size:10px}
.diamond{border:1px solid rgba(242,236,228,.7);background:var(--bg-slab);transform:rotate(45deg)}
.dt--dim{opacity:.7}
.sln--mid{background:rgba(242,236,228,.3)}
.sdays{display:flex;gap:10px}
.slb--static{position:static}
.sk-title{display:block;color:#EFE8DD}
.sk-sub{display:block;font-size:10px;color:rgba(207,198,186,.78)}
.sq-r1{border:1px solid rgba(242,236,228,.5);border-radius:1px}
.sq-r1a{border:1px solid rgba(217,180,138,.6);border-radius:1px}
.sq-round{border:1px solid rgba(242,236,228,.5);border-radius:50%}
.skl--block{border-radius:3px;background:rgba(242,236,228,.3)}
.bub--user{padding:8px 12px;border-radius:12px 12px 3px 12px;background:rgba(242,236,228,.1);white-space:normal}
.bub--bot{border-radius:12px 12px 12px 3px}
.sk--acctext{color:var(--accent)}
.sk--quiet{color:rgba(207,198,186,.78)}
.sbx--r8{border-radius:8px}
.sk--r5{border-radius:5px}
.meter--track{background:rgba(242,236,228,.12)}
.meter--hi{background:var(--accent)}
.meter--lo{background:rgba(242,236,228,.5)}

/* 7. RESULTS (home) -------------------------------------------------------- */
.results{padding:var(--rsec-pad);background:var(--rsec-bg);position:relative}
.rg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rcd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tag{
  display:inline-block;
  padding:4px 11px;
  border:1px solid rgba(242,236,228,.2);
  border-radius:8px;
  font-size:13px;
  line-height:1.3;
  color:var(--muted);
}
.arrow--card{flex:none}
.rcd-body{margin-top:56px}
.bignum{gap:8px}
.cn{font-size:104px;font-variant-numeric:tabular-nums}
.unit{font-size:28px}
.rcd-note{margin-top:14px;font-size:15px;line-height:1.45;color:var(--muted)}
.rcd-foot{margin-top:auto;padding-top:36px;overflow:hidden;overflow:clip}
.cells-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.cells-legend{display:flex;justify-content:space-between;margin-top:10px}
.bignum--tight{gap:6px}
.unit--pre{align-self:flex-start;margin-top:12px}
.dxr{display:block;width:64px;height:1px;background:var(--accent);transform-origin:left center}
.cells-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.rcd{position:relative;display:flex;flex-direction:column;min-height:500px;box-sizing:border-box;padding:28px;border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none;background-color:var(--bg-raised);transition:border-color .5s ease,background-color .5s ease}
.rcd:hover,.rcd:focus-visible{border-color:rgba(217,180,138,.55);background-color:#241F1A}
.rcd:hover .arrow,.rcd:focus-visible .arrow{transform:translate(4px,-4px);color:var(--accent)}
.trk{position:relative;height:14px;box-sizing:border-box;border:1px solid rgba(242,236,228,.26);border-radius:4px}
.fil{position:absolute;top:0;left:0;bottom:0;border-radius:3px;background:rgba(242,236,228,.22)}
.fil.ac{background:var(--accent)}
.pc{position:absolute;top:50%;margin-top:-10px;line-height:20px;font-size:13px;white-space:nowrap;color:var(--ink)}
.pc.out{left:100%;margin-left:10px}
.pc.ins{right:10px}
.bn{font-size:13px;line-height:20px;color:var(--muted)}
.wkc{position:relative;display:block;height:30px;box-sizing:border-box;border:1px solid rgba(242,236,228,.26);border-radius:4px;overflow:hidden;overflow:clip}
.wkf{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent);transform-origin:left center}
.ckk{position:absolute;top:50%;left:50%;margin:-7px 0 0 -7px}

/* 8. MONO SCENE (home: ownership) ------------------------------------------ */
.mono{height:900px;background:var(--bg-raised)}
.mpar{position:absolute;top:-60px;right:0;bottom:-60px;left:0}
.scrim-mono{background:linear-gradient(to bottom,var(--bg-raised) 0px,rgba(30,26,22,.5) 70px,rgba(30,26,22,0) 220px),radial-gradient(ellipse 62% 30% at 50% 26%,rgba(15,12,10,.62) 0%,rgba(15,12,10,.55) 45%,rgba(15,12,10,0) 100%),linear-gradient(to bottom,rgba(30,26,22,0) 58%,rgba(30,26,22,.7) 82%,var(--bg-raised) 100%);pointer-events:none}
.mt{position:absolute;top:130px;left:0;right:0;padding:0 24px;box-sizing:border-box;text-align:center}
.mono-lede{
  margin:22px auto 0;
  max-width:620px;
  font-weight:500;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.5;
  letter-spacing:0;
  color:var(--ink);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}

/* 9. PROCESS TIMELINE ------------------------------------------------------ */
.vl{display:none;position:absolute;left:6px;top:22px;bottom:22px;width:1px;background:linear-gradient(to bottom,rgba(217,180,138,.6),rgba(217,180,138,.15));transform-origin:center top}
.pax{position:absolute;transform-origin:left center}
.pbr{position:absolute;top:92px;height:8px;box-sizing:border-box;border:1px solid rgba(242,236,228,.3);border-bottom:0}
.psl{position:absolute;top:66px;text-align:center;font-size:13px;line-height:20px;color:var(--muted)}
.pnd{position:absolute;top:113px}
.pdt{display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(217,180,138,.14)}
.ptx{display:block;margin-top:19px}
.ptt{display:block;font-weight:500;font-size:17px;line-height:1.3;color:var(--ink)}
.pms{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.pms.fee{margin-top:8px;color:var(--accent)}
.psec{background:var(--psec-bg)}
.pstage{height:var(--pstage-h);position:relative;width:1280px;margin:0 auto}
.pbase{position:absolute;background:rgba(242,236,228,.12)}
.pa1{background:rgba(242,236,228,.5)}
.pa2{border-radius:2px;background:var(--accent)}
.pa3{border-radius:2px;background:rgba(217,180,138,.3)}
.pa4{border-radius:2px;background:rgba(217,180,138,.7)}
.pdt--final{box-shadow:0 0 0 5px rgba(217,180,138,.3)}
.page-service .pa3{background:rgba(217,180,138,.55)}

/* 10. SELECTED WORK (home) ------------------------------------------------- */
.wk{padding:20px 40px 160px}
.wr{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  gap:32px;
  align-items:center;
  padding:44px 0;
  color:var(--ink);
  text-decoration:none;
}
.wl{position:absolute;left:0;top:0;width:100%;height:1px;background:var(--line)}
.wt-name{display:block;font-weight:500;font-size:17px}
.oc{
  position:relative;
  display:block;
  font-family:var(--font-serif);
  font-weight:300;
  font-size:clamp(24px,2.3vw,32px);
  line-height:1.2;
  letter-spacing:-0.02em;
}
.yr{display:block;text-align:right;font-size:15px;color:var(--muted)}
.wlb{width:100%;height:1px;background:var(--line)}
.oc{transition:transform .6s var(--ease)}
.ru{position:absolute;left:0;bottom:-14px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease)}
.wcta{display:block;margin-top:10px;font-size:15px;line-height:1.3;color:var(--accent);opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .6s var(--ease)}
.wr:hover .wcta,.wr:focus-visible .wcta{opacity:1;transform:none}
.wr:hover .oc,.wr:focus-visible .oc{transform:translateX(6px)}
.wr:hover .ru,.wr:focus-visible .ru{transform:scaleX(1)}
.wl,.wlb{transform-origin:left center}

/* 11. IMAGE BAND, CONTACT, FOOTER ------------------------------------------ */
.bd{height:560px;background:var(--bg)}
.dr{
  position:absolute;
  left:0;
  top:-100px;
  width:100%;
  height:760px;
  object-fit:cover;
  object-position:center 70%;
  display:block;
}
.scrim-band{background:linear-gradient(to bottom,var(--bg) 0%,rgba(21,18,15,0) 30%,rgba(21,18,15,0) 70%,var(--bg) 100%),radial-gradient(ellipse 60% 45% at 50% 50%,rgba(15,12,10,.5),rgba(15,12,10,0) 100%),rgba(21,18,15,.55)}
.band-center{display:flex;align-items:center;justify-content:center;padding:0 24px;text-align:center}
.contact{
  padding:160px 24px;
  text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(217,180,138,.07),rgba(217,180,138,0) 60%);
}
.rise-in{position:relative;max-width:900px;margin:0 auto}
.cta-note{margin-top:24px;font-size:17px;color:var(--muted)}
.cta-row{margin-top:44px}
.email-link{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:clamp(24px,3.2vw,40px);
  letter-spacing:-0.02em;
  overflow-wrap:anywhere;
}
.site-footer{border-top:1px solid var(--line)}
/* footer: brand block + two link columns on a 8/16/24/32/48 spacing scale; copyright bar below a divider */
.foot-inner{max-width:1280px;margin:0 auto;padding:48px 40px 32px;font-size:14px;line-height:1.5;color:var(--muted)}
.foot-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px 32px;align-items:start}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.foot-name{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-0.01em}
.foot-line{max-width:34em;margin:0}
.foot-mail{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(217,180,138,.5);text-underline-offset:5px;transition:color .4s ease,text-decoration-color .4s ease}
.foot-mail:hover{color:var(--accent);text-decoration-color:var(--accent)}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.foot-k{margin-bottom:8px;color:var(--ink);font-weight:500}
.foot-col .foot-link{display:inline-flex;align-items:center;min-height:36px}
.foot-link.cur{color:var(--ink)}
.foot-bar{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:13px}
.foot-bar p{margin:0}

/* 12. SERVICE PAGE (AWS) ---------------------------------------------------- */
/* at-a-glance strip */
.gs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.gc{padding:0 28px;border-left:1px solid var(--line)}
.gc.gf{padding-left:0;border-left:0}
.gk{font-size:13px;line-height:1.4;color:var(--muted)}
.gvl{margin-top:10px;font-family:var(--font-serif);font-weight:300;font-size:28px;line-height:1.12;letter-spacing:-0.02em;color:var(--ink);font-optical-sizing:auto}
.gn{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
.crumbs{margin-bottom:28px;font-size:13px;line-height:1.4;color:var(--muted)}
.crumb-sep{margin:0 8px}
.wsec{padding:200px 40px 150px;background:var(--bg)}
.wy{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:64px;align-items:center}
.dgw{
  box-sizing:border-box;
  padding:32px 36px 26px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--bg-raised);
}
.fsec{padding:140px 40px;background:var(--bg)}
.fg{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:64px;
  align-items:start;
}
/* account structure diagram */
.dl{position:absolute;display:block;background:rgba(242,236,228,.4)}
.dl.ac{background:rgba(217,180,138,.75)}
.dh{transform-origin:left center}
.dv{transform-origin:center top}
.dli{position:relative;padding:26px 0;font-family:var(--font-serif);font-weight:300;font-size:clamp(22px,2.1vw,28px);line-height:1.2;letter-spacing:-0.02em;color:var(--ink);font-optical-sizing:auto}
.dli:last-child{border-bottom:1px solid var(--line)}
.dln{position:absolute;left:0;top:0;width:100%;height:1px;background:var(--line);transform-origin:left center}
.rsec{padding:var(--rsec-pad);background:var(--rsec-bg)}
.eng-wrap{max-width:980px;margin:0 auto;text-align:center}
.credit{margin-top:22px;font-size:15px;color:var(--muted)}
.resg{max-width:640px;margin:64px auto 0;text-align:left}
.chs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px}
.chip{display:inline-block;padding:4px 11px;border:1px solid rgba(217,180,138,.5);border-radius:8px;font-size:13px;line-height:1.3;color:var(--ink)}
/* FAQ */
.fq{border-top:1px solid var(--line)}
.fq:last-child{border-bottom:1px solid var(--line)}
.fq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;cursor:pointer;list-style:none;font-weight:500;font-size:19px;line-height:1.35;color:var(--ink);transition:color .4s ease}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--accent)}
.pm{position:relative;flex:none;width:16px;height:16px}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1px;background:currentColor;transition:transform .4s ease}
.pm::after{transform:rotate(90deg)}
.fq[open] .pm::after{transform:rotate(0deg)}
.fq p{max-width:680px;padding:0 48px 28px 0;font-size:16.5px;line-height:1.6;color:var(--muted)}
.fq[open] p{animation:fade .6s ease both}

/* 12b. FLAT DIAGRAMS (DevOps, Data, AI pages). Built from divs; lines draw in on scroll. */
.fx{display:flex;flex-direction:column}
.fx *,.fx *::before,.fx *::after{box-sizing:border-box}
.fcap{font-size:13px;line-height:1.4;color:var(--muted)}
.fb{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border:1px solid rgba(242,236,228,.34);border-radius:8px;background:rgba(242,236,228,.05);font-size:13.5px;line-height:1.25;text-align:center;color:rgba(242,236,228,.88)}
.fb.ac{border-color:rgba(217,180,138,.62)}
.fb--col{flex-direction:column}
.fb-t{display:block;font-weight:500;color:var(--ink)}
.fb-s{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.fl{display:block;background:rgba(242,236,228,.4)}
.fh{height:1px;transform-origin:left center}
.fc{position:relative;display:block;flex:1 1 0;min-width:14px;height:1px;background:rgba(217,180,138,.75);transform-origin:left center}
.fc::after,.fc--both::before{content:"";position:absolute;top:-3px;width:5px;height:5px;border-top:1px solid rgba(217,180,138,.95);border-right:1px solid rgba(217,180,138,.95)}
.fc::after{right:1px;transform:rotate(45deg)}
.fc--both::before{left:1px;transform:rotate(225deg)}
.fc--v{flex:none;width:1px;height:28px;min-width:0;margin:0 auto;transform-origin:center top}
.fc--v::after{right:auto;left:-3px;top:auto;bottom:1px;transform:rotate(135deg)}
.fx .dot{top:-2px}
/* devops: pull request, pipeline, environments */
.fpr{padding:16px 18px;border:1px solid rgba(242,236,228,.3);border-radius:10px;background:rgba(242,236,228,.04)}
.fpr-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.fpr-id{font-size:13px;color:var(--muted)}
.fpr-t{font-weight:500;font-size:15px;color:var(--ink)}
.fchip{margin-left:auto;padding:2px 10px;border:1px solid rgba(217,180,138,.5);border-radius:8px;font-size:12px;line-height:1.4;color:var(--accent)}
.fpr-c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.fck{position:relative;padding-left:22px;font-size:13.5px;line-height:1.3;color:var(--ink-soft)}
.fck::before{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;border:1px solid rgba(242,236,228,.45);border-radius:3px}
.fck::after{content:"";position:absolute;left:4px;top:50%;width:3px;height:6px;margin-top:-5px;border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);transform:rotate(45deg)}
.fpr-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.fpr-f .fb{min-height:32px;padding:0 18px;font-size:13px}
.fpipe .fcap{margin-bottom:12px}
.fpr-row{display:flex;align-items:center;padding-bottom:26px}
.fpr-row .fb{flex:none;width:72px;padding:0 4px}
.fgw{position:relative;flex:none;width:12px;height:12px}
.fgate{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgba(242,236,228,.7);background:var(--bg-raised);transform:rotate(45deg)}
.fgl{position:absolute;left:50%;top:34px;transform:translateX(-50%);white-space:nowrap;font-size:12px;line-height:1.3;color:var(--muted)}
.fenv{border:1px solid rgba(242,236,228,.3);border-radius:10px;background:rgba(242,236,228,.04);overflow:hidden;overflow:clip}
.fer{position:relative;display:grid;grid-template-columns:104px 84px minmax(0,1fr);gap:0 12px;align-items:center;min-height:42px;padding:8px 18px;font-size:13.5px;line-height:1.3;color:var(--ink-soft)}
.fer.fet{min-height:38px;font-size:12.5px;color:var(--muted)}
.fer .fl{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.fst{display:flex;align-items:center;gap:8px}
.fst .dt{position:static;flex:none}
/* data: sources, lakehouse, query, dashboard */
.fsrc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fsrc .fb::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;background:rgba(242,236,228,.4)}
.fbus{margin:16px calc(12.5% - 3px) 0}
.fing{width:min(260px,100%);min-height:56px;margin:0 auto}
.flake{position:relative;padding:40px 16px 16px;border:1px dashed rgba(242,236,228,.46);border-radius:12px}
.flake-t{position:absolute;left:16px;top:13px;font-weight:500;font-size:14px;line-height:1.3;color:var(--ink)}
.flake-row{display:flex;align-items:center}
.flake-row .fb{flex:1 1 0;min-width:0;min-height:64px}
.flake-row .fc{flex:none;width:28px;min-width:0}
.fdash{padding:14px 16px 16px;border:1px solid rgba(242,236,228,.3);border-radius:10px;background:rgba(242,236,228,.04)}
.fdash-h{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:500;color:var(--ink)}
.fdash-d{display:flex;gap:5px}
.fdash-d i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(242,236,228,.5)}
.fdash-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.ftile{min-height:96px;padding:10px 12px;border:1px solid rgba(242,236,228,.22);border-radius:8px}
.ftile .fcap{font-size:12px}
.fsk{display:block;height:4px;margin-top:10px;border-radius:2px;background:rgba(242,236,228,.22)}
.fsk--blk{height:14px;margin-top:14px;border-radius:3px;background:rgba(242,236,228,.3)}
.ftr{display:block;width:100%;height:46px;margin-top:8px;overflow:visible}
.ftr path{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.fbars{display:flex;align-items:flex-end;gap:8px;height:46px;margin-top:8px}
.fbars span{display:block;width:12px;border-radius:2px 2px 0 0;background:rgba(242,236,228,.4);transform-origin:center bottom}
.fbars span.ac{background:var(--accent)}
/* ai: chat window and retrieved chunks inside the VPC */
.fvpc{position:relative;padding:42px 16px 16px;border:1px dashed rgba(217,180,138,.6);border-radius:12px}
.fvpc-t{position:absolute;left:16px;top:13px;font-weight:500;font-size:15px;line-height:1.3;color:var(--accent)}
.fai{display:grid;grid-template-columns:minmax(0,1.35fr) 40px minmax(0,1fr);align-items:center}
.fai>.fc{width:100%;min-width:0}
.fwin{border:1px solid rgba(242,236,228,.3);border-radius:10px;background:rgba(242,236,228,.04);overflow:hidden;overflow:clip}
.fwin-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.3;font-weight:500;color:var(--ink)}
.fwin-h .fwin-n{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--muted)}
.fwin-b{padding:14px}
.fbub-u{width:82%;margin:0 0 14px auto;padding:9px 12px;border-radius:12px 12px 3px 12px;background:rgba(242,236,228,.1);font-size:13px;line-height:1.4;color:var(--ink-soft)}
.fbot{display:flex;align-items:flex-start;gap:8px}
.fav{flex:none;width:16px;height:16px;margin-top:4px;border-radius:50%;border:1px solid rgba(242,236,228,.5);background:rgba(242,236,228,.22)}
.fbub-b{flex:1 1 0;min-width:0;padding:13px 14px 14px;border:1px solid rgba(242,236,228,.3);border-radius:12px 12px 12px 3px;background:rgba(242,236,228,.05)}
.fty{display:block;height:5px;margin-top:9px;border-radius:3px;transform-origin:left center;background:rgba(242,236,228,.26)}
.fty:first-child{margin-top:0}
.fcit{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.fcit .fb{min-height:24px;padding:0 9px;border-radius:6px;font-size:12px}
.fcit .fb.ac{color:var(--accent)}
.fin{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:5px 5px 5px 12px;border:1px solid rgba(242,236,228,.3);border-radius:8px;font-size:12.5px;color:var(--muted)}
.fin .fb{flex:none;width:24px;min-height:24px;padding:0;border-radius:5px;font-size:12px}
.fwin-b--ch{display:flex;flex-direction:column;gap:8px}
.fch{padding:10px 12px;border:1px solid rgba(242,236,228,.3);border-radius:8px;background:rgba(242,236,228,.04)}
.fch-n{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.3;color:var(--ink)}
.fdoc{flex:none;width:9px;height:12px;border:1px solid rgba(242,236,228,.5);border-radius:1px}
.fm{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12px;line-height:1;color:var(--muted)}
.fm span{position:relative;flex:1 1 0;height:4px;border-radius:2px;background:rgba(242,236,228,.12)}
.fm b{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:rgba(242,236,228,.5);transform-origin:left center}
.fm b.ac{background:var(--accent)}
.fgr{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fsch{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid rgba(242,236,228,.34);border-radius:6px;background:rgba(242,236,228,.05);font-size:12.5px;line-height:1.3;color:var(--ink-soft)}
.fsch::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:rgba(242,236,228,.55)}
/* result block (DevOps, Data, AI) */
.cn--sm{font-size:56px}
.unit--sm{font-size:28px}
.res-bars{margin-top:32px;overflow:hidden;overflow:clip}
.res-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.res-sub .rcd-note{margin-top:0}

/* single-property overrides that must come last */
.unit--lg{font-size:40px}
.accent-text{color:var(--accent)}

/* 13. KEYFRAMES ------------------------------------------------------------ */
@keyframes blurin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes blurh{from{opacity:0;filter:blur(6px);transform:translateY(12px)}to{opacity:1;filter:none;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes blackout{from{opacity:1}to{opacity:0}}
@keyframes zoomin{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes panel{from{opacity:0;transform:translateY(80px);max-width:700px}to{opacity:1;transform:none;max-width:1180px}}
@keyframes drawx{from{transform:scaleX(0)}to{transform:none}}
@keyframes growy{from{transform:scaleY(0)}to{transform:none}}
@keyframes menuin{from{opacity:0;transform:translateY(-6px)}}
@keyframes fadeout{to{opacity:0}}
@keyframes tabprog{to{transform:scaleX(1)}}
@keyframes cell{from{background-color:rgba(242,236,228,.08);transform:scaleY(.4)}to{transform:none}}
@keyframes hop{0%{transform:none;opacity:0}2%{opacity:1}13%{opacity:1}15%{transform:translateX(calc(100% - 5px));opacity:0}100%{transform:translateX(calc(100% - 5px));opacity:0}}
@keyframes dash{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes shrink{from{width:100%}}
@keyframes growx{from{transform:scaleX(0)}}
@keyframes growxw{from{width:0}}
@keyframes sdrop{from{transform:var(--tf) translateZ(calc(var(--gap) * var(--k) + 40px));opacity:0}}
@keyframes sdrop1{from{transform:var(--tf) translateZ(calc(var(--gap) * var(--k) + 40px));opacity:.2}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:translateY(90px)}to{transform:translateY(-90px)}}
@keyframes rkdrift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
@keyframes mzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes mdrift{from{transform:translateY(-45px)}to{transform:translateY(45px)}}
@keyframes pipe{0%{transform:none;opacity:0}5%{opacity:1}60%{transform:translateX(321px)}72%{transform:translateX(321px)}95%{opacity:1}100%{transform:translateX(382px);opacity:0}}
@keyframes trail{0%{transform:none;opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translateX(31px);opacity:0}}
@keyframes dflow{0%{transform:none;opacity:0}6%{opacity:1;transform:none}26%{transform:none}42%{transform:translateX(92px)}58%{transform:translateX(92px)}74%{transform:translateX(184px)}94%{opacity:1;transform:translateX(184px)}100%{transform:translateX(184px);opacity:0}}

/* 14. REVEALS. Everything is time-based: a reveal may START on scroll but always finishes on its own.
   site.js adds .is-in to an element (or to its section) when it comes into view and CSS plays a short
   sequence (all under 2.5s; the stack scene about 3.7s). .mo is only set when JS runs and motion is allowed,
   so without JS or with reduced motion nothing is hidden and every final state is simply there.
   The only scroll-linked motion left is slow parallax on photos (it never hides content). */
@supports (animation-timeline: view()){
  .dr{animation:drift both linear;animation-timeline:view();animation-range:cover 0% cover 100%}
  .mpar{animation:mdrift both linear;animation-timeline:view();animation-range:cover 0% cover 100%}
  .mzm{animation:mzoom both linear;animation-timeline:view();animation-range:cover 0% cover 50%}
}

/* text, contact block, result cards */
.mo :is(.bv,.rise-in,.rcd):not(.is-in){opacity:0}
.bv.is-in{animation:blurin .9s var(--ease) both}
.bv-a.is-in{animation-delay:.1s}
.bv-b.is-in{animation-delay:.2s}
.rise-in.is-in{animation:rise .9s var(--ease) both}
.rcd.is-in{animation:rise .8s var(--ease) both}
.rcd.k2.is-in{animation-delay:.08s}
.rcd.k3.is-in{animation-delay:.16s}
.rcd.k4.is-in{animation-delay:.24s}

/* stack scene: site.js adds .is-in once the stage itself is mostly on screen (not when the section starts).
   Before that the stage waits: every slab hidden and lifted, only a faint outline of the bottom slab shows.
   Then the four layers land one after another, 380ms apart, each straight onto its exploded position:
   a 450ms drop + fade, its contents fading in 120ms after it lands (200ms fade), its leader line and label with it.
   The last layer lands at about 1.6s; its contents, the AI answer lines and the citation chips finish by about 2.0s. */
.xi1{--si:0}.xi2{--si:1}.xi3{--si:2}.xi4{--si:3}
.mo .xst:not(.is-in) :is(.sl,.sc,.xdt,.xlt,.tyc){opacity:0}
.mo .xst:not(.is-in) :is(.sl2,.sl3,.sl4){transform:var(--tf) translateZ(calc(var(--gap) * var(--k) + 40px))}
.mo .xst:not(.is-in) .sl1{opacity:1;border-color:rgba(242,236,228,.16);background-color:transparent;background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:var(--tf) translateZ(40px)}
.mo .xst:not(.is-in) .xlr{transform:scaleX(0)}
.mo .xst:not(.is-in) .ty{transform:scaleX(0)}
.xst.is-in .sl{animation:sdrop .45s var(--ease) calc(var(--si) * .38s) both}
.xst.is-in .sl1{animation-name:sdrop1}
.xst.is-in .sc{animation:fade .2s ease calc(.57s + var(--si) * .38s) both}
.xst.is-in .xlr{animation:drawx .35s var(--ease) calc(.2s + var(--si) * .38s) both}
.xst.is-in .xdt{animation:fade .3s ease calc(.2s + var(--si) * .38s) both}
.xst.is-in .xlt{animation:blurin .45s var(--ease) calc(.25s + var(--si) * .38s) both}
/* AI slab: answer lines type in, then the citation chips appear */
.xst.is-in .ty{animation:growx .22s var(--ease) both}
.xst.is-in .ty1{animation-delay:1.71s}
.xst.is-in .ty2{animation-delay:1.76s}
.xst.is-in .ty3{animation-delay:1.81s}
.xst.is-in .tyc{animation:fade .2s ease 1.8s both}

/* selected work, deliverable rows */
.mo .wr:not(.is-in) .wl,.mo .wlb:not(.is-in),.mo .dli:not(.is-in) .dln{transform:scaleX(0)}
.mo .wr:not(.is-in) .wt,.mo .dli:not(.is-in) .dlt{opacity:0}
.wr.is-in .wl{animation:drawx .9s var(--ease) both}
.wr.is-in .wt{animation:blurin .8s var(--ease) .25s both}
.wlb.is-in{animation:drawx 1s var(--ease) both}
.dlt{display:block}
.dli.is-in .dln{animation:drawx .8s var(--ease) both}
.dli.is-in .dlt{animation:blurin .8s var(--ease) .2s both}

/* process timeline: --t is the delay and --d the duration of each part (differs per page) */
.mo .pstage:not(.is-in) .pax{transform:scaleX(0)}
.mo .pstage:not(.is-in) :is(.nd,.pbl){opacity:0}
.mo .pstage:not(.is-in) .vl{transform:scaleY(0)}
.pstage.is-in .pax{animation:drawx var(--d,.3s) var(--ease) var(--t,0s) both}
.pstage.is-in .nd{animation:blurin var(--d,.3s) var(--ease) var(--t,0s) both}
.pstage.is-in .pbl{animation:fade var(--d,.3s) ease var(--t,0s) both}
.pstage.is-in .vl{animation:growy 1.4s var(--ease) .1s both}
.page-home .nd1{--t:.06s;--d:.26s}.page-home .pa1{--t:.13s;--d:.32s}.page-home .nd2{--t:.22s;--d:.26s}
.page-home .nd3{--t:.42s;--d:.26s}.page-home .pa2{--t:.45s;--d:.29s}.page-home .pb1{--t:.48s;--d:.26s}
.page-home .pa3{--t:.74s;--d:.32s}.page-home .nd4{--t:1.02s;--d:.26s}.page-home .pa4{--t:1.06s;--d:.22s}
.page-home .pb2{--t:1.06s;--d:.22s}.page-home .nd5{--t:1.22s;--d:.29s}
.page-service .nd1{--t:.08s;--d:.3s}.page-service .pa1{--t:.15s;--d:.34s}.page-service .pb1{--t:.23s;--d:.3s}
.page-service .nd2{--t:.38s;--d:.3s}.page-service .pa2{--t:.49s;--d:.65s}.page-service .pb2{--t:.65s;--d:.34s}
.page-service .nd3{--t:.72s;--d:.3s}.page-service .nd4{--t:1.1s;--d:.34s}.page-service .pa3{--t:1.14s;--d:.38s}
.page-service .pb3{--t:1.18s;--d:.3s}

/* service page diagrams: --a / --b are the start and end of each part on a 0 to 90 scale (1 unit = 16.7ms) */
.mo .dgw:not(.is-in) .fx .rv{opacity:0}
.mo .dgw:not(.is-in) :is(.dh,.fx .fc,.fx .fh){transform:scaleX(0)}
.mo .dgw:not(.is-in) :is(.dv,.fx .fc--v,.fx .fbars span){transform:scaleY(0)}
.mo .dgw:not(.is-in) :is(.fx .fty,.fx .fm b){transform:scaleX(0)}
.mo .dgw:not(.is-in) .fx .ftr path{stroke-dashoffset:1}
.dgw.is-in :is(.fx .rv,.dh,.dv,.fx .fc,.fx .fh,.fx .fty,.fx .fm b,.fx .fbars span,.fx .ftr path){animation-duration:calc((var(--b,30) - var(--a,8)) * .0167s);animation-delay:calc(var(--a,8) * .0167s);animation-timing-function:var(--ease);animation-fill-mode:both}
.dgw.is-in .fx .rv{animation-name:blurin}
.dgw.is-in :is(.dh,.fx .fc,.fx .fh){animation-name:drawx}
.dgw.is-in :is(.dv,.fx .fc--v,.fx .fbars span){animation-name:growy}
.dgw.is-in :is(.fx .fty,.fx .fm b){animation-name:growx}
.dgw.is-in .fx .ftr path{animation-name:dash}

/* RESULTS: time-based. site.js adds .is-in to a card (.rcd / .resg) once it is in view and counts its .count digits up.
   Without JS (or with reduced motion) every graphic simply shows its final state. */
.mo :is(.rcd,.resg):not(.is-in) .sh{width:100%!important}
.mo :is(.rcd,.resg):not(.is-in) .gr{width:0!important}
.mo :is(.rcd,.resg):not(.is-in) .cf,.mo :is(.rcd,.resg):not(.is-in) .dxr{transform:scaleX(0)}
.mo :is(.rcd,.resg):not(.is-in) :is(.ckk,.apv,.rwk,.ch1,.ch2,.ch3){opacity:0}
.is-in .sh{animation:shrink 1.4s var(--ease) .1s both}
.is-in .gr{animation:growxw 1.4s var(--ease) .1s both}
.is-in .cf{animation:drawx .35s var(--ease) both}
.is-in .cf1{animation-delay:.05s}.is-in .cf2{animation-delay:.2s}.is-in .cf3{animation-delay:.35s}
.is-in .cf4{animation-delay:.5s}.is-in .cf5{animation-delay:.65s}.is-in .cf6{animation-delay:.8s}
.is-in .dxr{animation:drawx 1.2s var(--ease) .1s both}
.is-in .ckk{animation:fade .3s ease 1.1s both}
.is-in .apv,.is-in .rwk{animation:blurin .5s var(--ease) 1.1s both}
.is-in .ch1{animation:blurin .4s var(--ease) 1s both}
.is-in .ch2{animation:blurin .4s var(--ease) 1.1s both}
.is-in .ch3{animation:blurin .4s var(--ease) 1.2s both}

/* 15. SERVICE PAGE LINKS, AWS DIAGRAM ------------------------------------------------------------------
   Account structure diagram (services/aws-architecture.html). Everything sits in a grid so rows and
   columns stay aligned at any width; below 900px it becomes one column (organization, accounts, network). */
.case-link{margin-top:56px}
.dli[data-hl]{cursor:default}
.dli[data-hl]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dli[data-hl] .dlt{transition:color .3s ease}
.dli[data-hl]:is(:hover,:focus-visible) .dlt{color:var(--accent)}
.dl-hint{margin-top:18px}
.aw{--awp:15px;--awc:minmax(0,1fr) 44px minmax(0,1.25fr) 44px minmax(0,1fr);--rh:60px;--rg:10px;--y1:72px;--y2:142px;--y3:212px}
.aw-k{align-self:start;font-size:13px;line-height:20px;color:var(--muted)}
.aw-top{display:grid;grid-template-columns:var(--awc);align-items:end;padding:0 var(--awp)}
.aw-top .aw-k{grid-column:1;grid-row:1}
.aw-root{grid-column:3;grid-row:1;min-height:48px}
.aw-sso{grid-column:5;grid-row:1;padding:10px;gap:6px}
.aw-tree,.aw-vc{display:grid;grid-template-columns:var(--awc);padding:0 var(--awp)}
.aw-tree{height:26px}
.aw-vc{height:22px}
.aw-tc{position:relative;display:block}
.aw-tc--5{grid-column:5}
.aw-scp{position:relative;padding:20px 14px 14px;border:1px dashed rgba(217,180,138,.6);border-radius:12px}
.aw-scpt,.aw-nt{position:absolute;left:14px;top:-10px;padding:0 8px;background:var(--bg-raised);font-size:13px;line-height:20px;color:var(--accent)}
.aw-cols{display:grid;grid-template-columns:var(--awc)}
.aw-g{position:relative}
.aw-oc{display:flex;flex-direction:column;gap:var(--rg);padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(242,236,228,.025)}
.aw-ot{display:block;height:22px;font-size:13px;line-height:22px;color:var(--ink-soft)}
.aw-ot i{margin-left:6px;font-style:normal;font-size:11.5px;color:var(--muted)}
.aw-a{height:var(--rh);padding:0 10px;gap:4px}
.aw-a--2{height:calc(var(--rh) * 2 + var(--rg))}
.aw-a--3{height:calc(var(--rh) * 3 + var(--rg) * 2)}
.aw-a--ac{border-color:rgba(217,180,138,.62)}
.aw-a .fb-s,.aw-sso .fb-s,.aw-np .fb-s,.aw-tgw .fb-s{margin-top:0}
.aw-cs{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.aw-cs--col{flex-direction:column;align-items:center}
.aw-cs--col .aw-c{max-width:100%;white-space:normal;text-align:center}
.aw-c{display:inline-block;padding:2px 7px;border:1px solid rgba(242,236,228,.3);border-radius:5px;font-size:12px;line-height:1.35;color:var(--ink-soft);white-space:nowrap}
.aw-net{position:relative;padding:24px 14px 14px;border:1px dashed rgba(217,180,138,.6);border-radius:12px}
.aw-nrow{display:grid;grid-template-columns:minmax(84px,.75fr) minmax(76px,.7fr) minmax(80px,.75fr) 22px minmax(0,3fr);align-items:center}
.aw-np,.aw-tgw{padding:12px 8px}
.aw-lk{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:6px;padding:0 6px}
.aw-lk--s{padding:0}
.aw-lk .fc{flex:none;width:100%;min-width:0}
.aw-ll{font-size:11.5px;line-height:1.3;text-align:center;color:var(--muted)}
.aw-vpc{position:relative;padding:36px 12px 12px;border:1px solid rgba(217,180,138,.5);border-radius:12px}
.aw-vt{position:absolute;left:14px;top:10px;font-weight:500;font-size:14px;line-height:1.3;color:var(--accent)}
.aw-vg{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);grid-template-rows:auto auto auto auto 8px;row-gap:8px}
.aw-azp{grid-row:1 / 6;border:1px dashed rgba(242,236,228,.3);border-radius:8px}
.aw-azp--a,.aw-azh--a,.aw-ca{grid-column:1}
.aw-azp--b,.aw-azh--b,.aw-cb{grid-column:3}
.aw-azh{grid-row:1;margin:8px 0 0 10px;font-size:12px;line-height:16px;color:var(--muted)}
.aw-ca,.aw-cb{margin:0 8px}
.aw-t{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:54px;padding:7px 9px;border:1px solid rgba(242,236,228,.3);border-radius:6px;background:rgba(242,236,228,.04)}
.aw-t--pub{border-color:rgba(217,180,138,.5)}
.aw-t .aw-cs{justify-content:flex-start}
.aw-tn{font-size:11.5px;line-height:1;color:var(--muted)}
.aw-rep{grid-column:2;display:flex;align-items:center}
.aw-rep .fc{width:100%;min-width:0}
.fx .dot--v{left:-2px;top:0;width:5px;height:100%;animation-name:hopv}
.fx .dot--r{animation-name:hopr}
.dl--ar::after,.dl--al::after,.dl--ad::after{content:"";position:absolute;width:5px;height:5px;border-top:1px solid rgba(217,180,138,.95);border-right:1px solid rgba(217,180,138,.95)}
.dl--ar::after{right:1px;top:-3px;transform:rotate(45deg)}
.dl--al::after{left:1px;top:-3px;transform:rotate(225deg)}
.dl--ad::after{left:-3px;bottom:1px;transform:rotate(135deg)}
@keyframes hopv{0%{transform:none;opacity:0}2%{opacity:1}13%{opacity:1}15%{transform:translateY(calc(100% - 5px));opacity:0}100%{transform:translateY(calc(100% - 5px));opacity:0}}
@keyframes hopr{0%{transform:translateX(calc(100% - 5px));opacity:0}2%{opacity:1}13%{opacity:1}15%{transform:none;opacity:0}100%{transform:none;opacity:0}}
/* a deliverable lights up the part of the diagram it lives in (hover, focus or tap) */
.fx .hl,.fx .aw-scp,.fx .aw-net,.fx .aw-vpc{transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease}
.wy:has(.dli[data-hl="org"]:is(:hover,:focus-visible)) .aw :is(.fb,.aw-t)[data-hl~="org"],
.wy:has(.dli[data-hl="net"]:is(:hover,:focus-visible)) .aw :is(.fb,.aw-t)[data-hl~="net"],
.wy:has(.dli[data-hl="iac"]:is(:hover,:focus-visible)) .aw :is(.fb,.aw-t)[data-hl~="iac"],
.wy:has(.dli[data-hl="run"]:is(:hover,:focus-visible)) .aw :is(.fb,.aw-t)[data-hl~="run"]{border-color:rgba(217,180,138,.95);background-color:rgba(217,180,138,.12);box-shadow:0 0 0 3px rgba(217,180,138,.1)}
.wy:has(.dli[data-hl="org"]:is(:hover,:focus-visible)) .aw :is(.aw-oc,.aw-scp,.aw-net,.aw-vpc)[data-hl~="org"],
.wy:has(.dli[data-hl="net"]:is(:hover,:focus-visible)) .aw :is(.aw-oc,.aw-scp,.aw-net,.aw-vpc)[data-hl~="net"],
.wy:has(.dli[data-hl="iac"]:is(:hover,:focus-visible)) .aw :is(.aw-oc,.aw-scp,.aw-net,.aw-vpc)[data-hl~="iac"],
.wy:has(.dli[data-hl="run"]:is(:hover,:focus-visible)) .aw :is(.aw-oc,.aw-scp,.aw-net,.aw-vpc)[data-hl~="run"]{border-color:rgba(217,180,138,.95)}
@media (max-width:900px){
  .aw-top{grid-template-columns:minmax(0,1fr);padding:0;gap:10px;align-items:stretch}
  .aw-top .aw-k,.aw-root,.aw-sso{grid-column:1;grid-row:auto}
  .aw-root{margin-bottom:0}
  .aw-tree,.aw-vc,.aw-g,.aw .dot{display:none}
  .aw-scp{margin-top:20px;padding:20px 10px 10px}
  .aw-cols{display:flex;flex-direction:column;gap:12px}
  .aw-a,.aw-a--2,.aw-a--3{height:auto;min-height:var(--rh);padding:10px}
  .aw-net{margin-top:24px}
  .aw-nrow{grid-template-columns:minmax(0,1fr)}
  .aw-lk,.aw-lk--s{flex-direction:row;justify-content:center;gap:10px;height:56px;padding:0}
  .aw-lk .fc{width:1px;height:36px;margin:0}
  .aw-lk .fc::after{right:auto;left:-3px;top:auto;bottom:1px;transform:rotate(135deg)}
  .aw-lk .fc--both::before{left:-3px;top:1px;transform:rotate(315deg)}
  .aw-ll{text-align:left}
  .dgw.is-in :is(.fx .aw-lk .fc){animation-name:growy}
  .fx .aw-lk .fc{transform-origin:center top}
  .aw-np,.aw-tgw{padding:10px}
}
@media (max-width:560px){
  .aw-vg{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)}
  .aw-ca,.aw-cb{margin:0 6px}
  .aw-vpc{padding:34px 8px 8px}
  .aw-t{padding:6px 7px}
}

/* 16. WORK PAGES (work/*.html): problem, what we built, timeline, outcomes, stack, next ------------------ */
.prb{padding:90px 40px 150px;background:var(--bg)}
.prb-g{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:start}
.pq{margin:22px 0 0;font-family:var(--font-serif);font-weight:300;font-size:clamp(30px,3.7vw,52px);line-height:1.12;letter-spacing:-0.025em;color:var(--ink);font-optical-sizing:auto}
.pq-by{margin-top:24px;font-size:15px;color:var(--muted)}
.pctx{margin-top:2px}
.pctx .dli{padding:24px 0;font-size:clamp(19px,1.6vw,22px);line-height:1.3}
.pctx-k{margin-bottom:6px}
.page-work .wsec{padding:130px 40px 150px}
.wdg{padding:32px 36px 28px}
.engl{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:0 48px;margin-top:64px}
.engl .dli{padding:26px 0 8px;font-size:clamp(19px,1.55vw,21px);line-height:1.3}
.engl .dli:last-child{border-bottom:0}
.engn{display:block;margin-bottom:10px;font-family:var(--font-sans);font-size:13px;line-height:1;letter-spacing:0;color:var(--accent)}

/* timeline: a drawn axis; segments and brackets sit on real durations only */
.tl{--n:4;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:auto 24px auto;max-width:1240px;margin:0 auto;padding:0 20px}
.tl-i{display:contents}
.tl-base{grid-column:1 / -1;grid-row:2;align-self:center;height:1px;background:rgba(242,236,228,.14)}
.tl-seg{grid-row:2;align-self:center;height:3px;border-radius:2px;background:var(--accent);transform-origin:left center}
.tl-seg--dim{background:rgba(217,180,138,.32)}
.tl-br{position:relative;grid-row:1;margin:0 6px;padding-bottom:16px;text-align:center;font-size:13px;line-height:20px;color:var(--muted)}
.tl-br::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:8px;border:1px solid rgba(242,236,228,.3);border-bottom:0}
.tl-dt{grid-row:2;align-self:center;justify-self:start;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(217,180,138,.14)}
.tl-dt--dim{background:rgba(217,180,138,.55)}
.tl-tx{grid-row:3;padding:20px 22px 0 0}
.tl-tt{display:block;font-weight:500;font-size:17px;line-height:1.3;color:var(--ink)}
.tl-ms{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.tl-dur{display:none}
.mo .tl:not(.is-in) :is(.tl-base,.tl-seg){transform:scaleX(0)}
.mo .tl:not(.is-in) :is(.tl-dt,.tl-tx,.tl-br){opacity:0}
.tl.is-in .tl-base{animation:drawx .5s var(--ease) both}
.tl.is-in .tl-seg{animation:drawx .6s var(--ease) var(--t,.2s) both}
.tl.is-in :is(.tl-dt,.tl-tx,.tl-br){animation:blurin .5s var(--ease) var(--t,.2s) both}

/* outcome cards (reuse the home result card; not links, so no hover) */
.osec{padding:150px 40px 130px;background:var(--bg-raised)}
.og{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rcd.ocd{min-height:0;background-color:var(--bg)}
.rcd.ocd:hover{border-color:var(--line);background-color:var(--bg)}
.ocd .rcd-body{margin-top:44px}
.ocd .rcd-foot{padding-top:32px}
.ocd .cn{font-size:88px}
.ocd .unit{font-size:26px}
.ocd .rcd-note{min-height:44px}
.ctx{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--muted)}
.cells-8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.cells-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.cells-8 .wkc,.cells-12 .wkc{height:24px}
.is-in .cf7{animation-delay:.95s}.is-in .cf8{animation-delay:1.1s}
.is-in .cf9{animation-delay:.9s}.is-in .cf10{animation-delay:1s}.is-in .cf11{animation-delay:1.1s}.is-in .cf12{animation-delay:1.2s}
.dxr--full{width:100%}
.fil.ac .pc.ins{color:var(--bg)}
.trk--empty .fil{display:none}
.zlin{position:relative;height:20px}
.zlin::before{content:"";position:absolute;left:0;right:0;top:10px;height:1px;background:rgba(242,236,228,.2)}
.zlin .dxr{position:absolute;left:0;top:10px;width:100%}
.zlin i{position:absolute;top:5px;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(217,180,138,.14)}

/* stack chips and next steps */
.stsec{padding:110px 40px 90px;background:var(--bg)}
.stw{max-width:1280px;margin:0 auto}
.skc-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.skc{display:inline-block;padding:9px 16px;border:1px solid rgba(242,236,228,.3);border-radius:8px;background:rgba(242,236,228,.04);font-size:15px;line-height:1.3;color:var(--ink)}
.nxsec{padding:30px 40px 150px;background:var(--bg)}
.nxw{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
.nxc{position:relative;display:flex;flex-direction:column;box-sizing:border-box;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--bg-raised);color:var(--ink);text-decoration:none;transition:border-color .5s ease,background-color .5s ease}
.nxc:hover,.nxc:focus-visible{border-color:rgba(217,180,138,.55);background-color:#241F1A}
.nxc:hover .arrow,.nxc:focus-visible .arrow{transform:translate(4px,-4px);color:var(--accent)}
.nxc-k{font-size:13px;color:var(--muted)}
.nxc-t{display:block;margin-top:18px;font-family:var(--font-serif);font-weight:300;font-size:clamp(26px,2.6vw,38px);line-height:1.1;letter-spacing:-0.02em}
.nxc-s{display:block;margin-top:12px;max-width:520px;font-size:16px;line-height:1.5;color:var(--muted)}
.nxc .arrow{position:absolute;right:24px;top:24px}
.nxc--svc{min-height:260px}
.nxo{display:flex;flex-direction:column;gap:16px}
.nxo .nxc{flex:1 1 0;padding:22px 24px}
.nxo .nxc-t{margin-top:10px;font-size:24px}
.nxo .nxc-s{margin-top:8px;font-size:15px}

/* work diagrams (built on the .fx flat diagram system) */
.wd{--g:30px}
.wd-lane{display:flex;align-items:center}
.wd-lane>.fb{flex:none;width:136px}
.wd-lane>.fc{min-width:28px}
.wd-cap{margin-bottom:12px}
.wd-cap b{font-weight:500;color:var(--ink)}
.wd-div{height:1px;margin:30px 0 26px;background:var(--line)}
.wd-note{margin-top:12px;font-size:13px;line-height:1.4;color:var(--muted)}
.fb.wb{align-items:flex-start;justify-content:flex-start;padding:12px 14px;text-align:left;gap:3px}
.fb.wb .fb-s{margin-top:0}
.fb.wg{border-style:dashed;border-color:rgba(242,236,228,.3);background:transparent;color:var(--muted)}
.fb.wg .fb-t{color:var(--ink-soft)}
.fc--m{display:none}
.fc.fc--dash{background:none;border-top:1px dashed rgba(242,236,228,.4)}
.fc.fc--dash::after{border-color:rgba(242,236,228,.5)}
.wd-x{position:absolute;left:50%;top:-9px;width:18px;height:18px;margin-left:-9px;border:1px solid rgba(242,236,228,.5);border-radius:50%;background:var(--bg-raised)}
.wd-x::before,.wd-x::after{content:"";position:absolute;left:4px;top:8px;width:8px;height:1px;background:var(--ink-soft);transform:rotate(45deg)}
.wd-x::after{transform:rotate(-45deg)}
.wd-chips{display:flex;flex-wrap:wrap;gap:6px}
.wd-chip{display:inline-block;padding:2px 8px;border:1px solid rgba(242,236,228,.3);border-radius:5px;font-size:12px;line-height:1.35;color:var(--ink-soft);white-space:nowrap}
.wd-chip.ac{border-color:rgba(217,180,138,.55);color:var(--accent)}
.wd-cells{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.wd-cells i{display:block;width:9px;height:9px;border:1px solid rgba(242,236,228,.4);border-radius:2px}
.wd-cells i.on{background:var(--accent);border-color:var(--accent)}
.wf{position:relative;align-self:stretch}
.wf .dl.ac{background:rgba(217,180,138,.75)}
.wd .fc{align-self:center}
.wd-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:22px}
.wd-strip .fcap{margin-right:4px}
.wd-strip .fb{min-height:34px;padding:0 12px;font-size:13px}

/* hero meta line on work pages */
.page-work .crumbs{text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hero-meta{margin-top:18px;font-size:14.5px;line-height:1.4;color:var(--ink-soft);text-shadow:0 1px 12px rgba(0,0,0,.55)}

/* bank */
.bk-grid{display:grid;grid-template-columns:130px var(--g) minmax(0,1fr) var(--g) minmax(0,1fr) var(--g) minmax(0,1fr) var(--g) minmax(0,1fr);grid-template-rows:auto auto auto 30px auto;--bw:calc((100% - 90px) / 4)}
.bk-frame{grid-column:3 / 10;grid-row:1 / 6;margin:-12px -12px -12px -14px;border:1px dashed rgba(217,180,138,.6);border-radius:14px;pointer-events:none}
.bk-ttl{grid-column:3 / 10;grid-row:1;align-self:start;display:flex;align-items:center;gap:10px;margin:-1px 0 12px 0;font-weight:500;font-size:15px;line-height:1.3;color:var(--accent)}
.bk-ttl .lk{position:relative;flex:none;margin-top:6px}
.bk-ttl small{font-weight:400;font-size:13px;color:var(--muted)}
.bk-acc{grid-column:3 / 10;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:16px;padding:10px 14px;border:1px solid rgba(242,236,228,.22);border-radius:8px;background:rgba(242,236,228,.03);font-size:13px;color:var(--muted)}
.bk-u{grid-column:1;grid-row:3;align-self:center}
.bk-fu{grid-column:2;grid-row:3}
.bk-s1{grid-column:3;grid-row:3}.bk-f1{grid-column:4;grid-row:3}
.bk-s2{grid-column:5;grid-row:3}.bk-f2{grid-column:6;grid-row:3}
.bk-s3{grid-column:7;grid-row:3}.bk-f3{grid-column:8;grid-row:3}
.bk-s4{grid-column:9;grid-row:3}
.bk-bus{position:relative;grid-column:3 / 10;grid-row:4}
.bk-s3b{grid-column:3 / 6;grid-row:5}
.bk-ct{grid-column:7 / 10;grid-row:5}
.bk-fa{grid-column:2;grid-row:5}
.bk-a{grid-column:1;grid-row:5;align-self:center}
.bk-grid .fb.wb{height:100%}
.bk-grid .fb.wb .wd-chips{margin-top:6px}
.bk-st{align-self:stretch}
.bk-bus .dl{background:rgba(217,180,138,.6)}
.bk-note{display:block;margin-top:8px;font-size:12px;line-height:1.35;color:var(--muted)}

/* aerospace */
.ae-grid{display:grid;grid-template-columns:112px 30px minmax(0,1.05fr) 30px minmax(0,2.7fr) 30px 108px 30px minmax(0,1.15fr);align-items:stretch}
.ae-grid>.fb,.ae-grid>.flake,.ae-grid>.ae-col{grid-row:1}
.ae-e{grid-column:1}.ae-g1{grid-column:2}.ae-in{grid-column:3}.ae-g2{grid-column:4}.ae-lk{grid-column:5}.ae-g3{grid-column:6}.ae-rs{grid-column:7}.ae-g4{grid-column:8}.ae-au{grid-column:9}
.ae-col{display:flex;flex-direction:column;gap:12px}
.ae-col>.fb{flex:1 1 0}
.ae-lk .flake-row{align-items:stretch}
.ae-lk .flake{height:100%}
.ae-gl{position:relative;display:block;margin-top:14px;padding-top:12px;text-align:center;font-size:12px;line-height:1.3;color:var(--muted)}
.ae-gl::before{content:"";position:absolute;left:12%;right:12%;top:0;height:7px;border:1px solid rgba(217,180,138,.55);border-bottom:0}
.ae-bef{align-items:center}
@media (min-width:1181px){
  .ae-bwf{flex:none;width:44px}
  .ae-bef>.fb{flex:none;width:210px}
  .ae-bef>.ae-col{flex:none;width:300px}
  .ae-bef>.wf{align-self:stretch}
}
.ae-col>.fb{min-height:56px}

/* ataccama */
.at-grid{display:grid;grid-template-columns:minmax(0,1.05fr) 30px minmax(0,.85fr) 30px minmax(0,2.5fr) 30px 118px;align-items:stretch}
.at-fn{grid-column:1}.at-g1{grid-column:2}.at-git{grid-column:3}.at-g2{grid-column:4}.at-cl{grid-column:5}.at-g3{grid-column:6}.at-dd{grid-column:7}
.at-grid>*{grid-row:1}
.at-fn{padding:40px 14px 14px}
.at-list{display:flex;flex-direction:column;gap:8px}
.at-list .fb{min-height:40px;justify-content:center;padding:8px 12px}
.at-git{display:flex;flex-direction:column;justify-content:center;gap:0}
.at-git .fb{flex:none}
.at-git .fc--v{height:26px}
.at-cl .flake{height:100%;display:flex;flex-direction:column;gap:10px;padding:46px 14px 14px}
.at-c{display:grid;grid-template-columns:minmax(96px,.8fr) repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
.at-ch{display:flex;flex-direction:column;justify-content:center;padding:8px 10px;border:1px solid rgba(217,180,138,.5);border-radius:8px;background:rgba(242,236,228,.05);font-size:13px;line-height:1.3}
.at-ch b{font-weight:500;color:var(--ink)}
.at-ch span{margin-top:2px;font-size:12px;color:var(--muted)}
.at-ns{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:8px 10px;border:1px solid rgba(242,236,228,.3);border-radius:8px;font-size:12px;line-height:1.2;color:var(--ink-soft)}
.at-ns b{font-weight:500}
.at-ns .wd-chips{gap:4px}
.at-q{display:block;height:4px;border-radius:2px;background:rgba(242,236,228,.12)}
.at-q i{display:block;height:100%;border-radius:2px;background:rgba(242,236,228,.5);transform-origin:left center}
.at-dd{display:flex;align-self:stretch}
.at-dd .fb{flex:1 1 auto}
.at-env{display:flex;gap:6px;margin-top:2px}

@media (max-width:1180px){
  .prb-g{grid-template-columns:minmax(0,1fr);gap:48px}
  .engl{grid-template-columns:minmax(0,1fr)}
  .og{grid-template-columns:minmax(0,1fr)}
  .rcd.ocd{min-height:0}
  .nxw{grid-template-columns:minmax(0,1fr)}
  /* diagrams: one column, flow downwards */
  .bk-grid,.ae-grid,.at-grid{display:flex;flex-direction:column;gap:12px;width:100%;max-width:560px;margin:0 auto}
    .bk-frame,.bk-bus,.bk-fa,.bk-grid .wf,.ae-grid .wf,.at-grid .wf{display:none}
  .bk-grid>*,.ae-grid>*,.at-grid>*{min-width:0}
  .ae-bwf{display:none}
  .wd .fc--m{display:block}
  .wd-lane>.fb,.wd-lane>.ae-col{width:auto}
  .ae-lk .flake-row{flex-direction:column;align-items:stretch}
  .flake-row .fc{flex:none;width:1px;height:18px;min-width:0;margin:0 auto}
  .flake-row .fc::after{right:auto;left:-3px;top:auto;bottom:1px;transform:rotate(135deg)}
  .bk-grid>.fc,.ae-grid>.fc,.at-grid>.fc,.wd .fc--m{flex:none;width:1px;height:20px;min-width:0;margin:0 auto}
  .wd .fc.fc--m::after,.bk-grid>.fc::after,.ae-grid>.fc::after,.at-grid>.fc::after{right:auto;left:-3px;top:auto;bottom:1px;transform:rotate(135deg)}
  .bk-ttl{margin:8px 0 0}
  .bk-u,.bk-a{align-self:stretch}
  .wd-lane{flex-direction:column;align-items:stretch;gap:0}
  .wd-lane>.fb{width:auto}
  .wd-lane>.fc{flex:none;width:1px;height:20px;min-width:0;margin:0 auto}
  .wd-lane>.fc::after{right:auto;left:-3px;top:auto;bottom:1px;transform:rotate(135deg)}
  .wd-x{top:50%;left:-9px;margin:-9px 0 0 0}
  .at-c{grid-template-columns:repeat(3,minmax(0,1fr))}
  .at-c .at-ch{grid-column:1 / -1}
  .tl{display:block;padding:0 0 0 30px;margin:0 20px}
  .tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:linear-gradient(to bottom,rgba(217,180,138,.6),rgba(217,180,138,.15))}
  .tl-base,.tl-seg,.tl-br{display:none}
  .tl-i{display:block;position:relative;padding-bottom:26px}
  .tl-dt{position:absolute;left:-29px;top:6px}
  .tl-tx{padding:0}
  .tl-dur{display:block;width:fit-content;margin-bottom:8px;padding:4px 12px;border:1px solid rgba(242,236,228,.2);border-radius:8px;font-size:13px;line-height:20px;color:var(--muted)}
  .mo .tl:not(.is-in) .tl-i :is(.tl-dt,.tl-tx){opacity:0}
}
@media (max-width:720px){
  .prb{padding:60px 20px 100px}
  .page-work .wsec{padding:100px 20px 100px}
  .wdg{padding:24px 18px 22px}
  .osec{padding:100px 20px}
  .stsec{padding:80px 20px 60px}
  .nxsec{padding:20px 20px 100px}
  .ocd .cn{font-size:80px}
}

/* process stage is a fixed 1280px drawing: shrink it slightly on 1181-1339px viewports so it never overflows */
@media (min-width:1181px) and (max-width:1339px){.pstage{zoom:.88}}
/* responsive. Rules that override per-element inline coordinates keep !important. */
@media (max-width:1180px){
  /* stack scene: smaller slabs, labels listed under the stack (top layer first) */
  .xsec{height:auto;padding:150px 0 60px}
  .xh{position:static;padding:0 20px;margin-bottom:12px}
  .xst{position:relative;top:auto;left:auto;width:auto;height:auto;margin:0;padding-top:430px;display:flex;flex-direction:column-reverse;--gap:70px}
  .sl{left:50%;top:200px;width:320px;height:200px;margin-left:-160px}
  /* Labels sit above the slabs and are full-width tap rows. The slabs are decorative here, so they never take a tap.
     (.xl::before is a desktop hit-area extender; once .xl is static it would anchor to .xst and cover every label.) */
  .sl{pointer-events:none}
  .xi{padding:12px 20px}
  .xl{position:relative;z-index:2;left:auto!important;top:auto!important;width:auto!important;height:auto;min-height:44px;margin:0;padding:0 0 0 16px;border-left:1px solid rgba(242,236,228,.3)}
  .xl::before{display:none}
  .sc{transform:scale(.485);transform-origin:0 0}
  .xlr,.xdt{display:none}
  .xlt{position:static;display:block;left:auto!important;width:auto}
  .xi:hover .xl,.xi:focus-visible .xl{border-left-color:var(--accent)}
  /* process timeline: vertical */
  .pax,.pbr,.pbase{display:none}
  .pstage{width:auto;height:auto;margin:0 20px;padding-left:30px;display:flex;flex-direction:column}
  .pnd{position:relative!important;left:auto!important;top:auto!important;width:auto!important;padding:0 0 26px}
  .pdt{position:absolute;left:-29px;top:6px}
  .ptx{margin-top:0}
  .psl{position:static;left:auto!important;top:auto;width:fit-content!important;margin:0 0 26px;padding:5px 12px;border:1px solid rgba(242,236,228,.2);border-radius:8px}
  .vl{display:block}
  /* service page */
  .wy{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media (max-width:1100px){
  .page-home{--hero-h:760px}
  .page-service,.page-work{--hero-h:700px}
  /* panel flows in the page here and overlaps the hero by --pw-overlap; the hero pads its content clear of that */
  .page-home,.page-service,.page-work{--pw-overlap:90px;--pw-hang:0px;--pw-gap:60px;--hc-pad:40px 24px calc(var(--pw-overlap) + var(--pw-gap))}
  .pg{grid-template-columns:minmax(0,1fr)}
  .wg{padding:0;border-left:0}
  .wg + .wg{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
  .rg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
  .gc{border-left:0;padding:0}
  .fg{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:720px){
  .page-home,.page-service,.page-work{--hero-h:700px;--pw-gap:40px;--hc-pad:24px 20px calc(var(--pw-overlap) + var(--pw-gap))}
  .nav-pill{display:none}
  .js .menu-open{display:inline-flex}
  .site-header{padding:20px 20px}
  .brand{font-size:17px;gap:9px;white-space:nowrap}
  .site-header{gap:8px}
  .bt--sm{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;padding:0 13px;white-space:nowrap}
  .menu-btn{padding:0 13px}
  .tabs{width:100%}
  .tab{flex:1 1 0;min-height:44px;padding:0 8px}
  .tab::after{left:8px;right:8px}
  .tabs-ready .pg{margin-top:24px;grid-template-rows:minmax(142px,auto)}
  .pn-h{margin-bottom:22px}
    .tabs-ready .cap{margin-top:20px}
  .rb-row{grid-template-columns:minmax(0,1fr);row-gap:5px;margin-bottom:12px}
  .rb-trk{height:24px}
  .rb-lab small{display:inline;margin:0 0 0 8px}
  .rb-ax{margin-top:-2px}
  .rb-ax .rb-lab{display:none}
  .rb-ax .rb-tk--m{display:none}
  .rb-ax .rb-tk--ph{display:block}
  .gt-b--h em{padding:2px 6px;font-size:12px}
  .wcta{opacity:1;transform:none}
  .panel-wrap{padding:0 20px}
  .panel{padding:22px 20px 24px}
  .xsec{padding:120px 0 60px}
  .mono{height:680px}
  .mt{top:90px}
  .rsec{padding:100px 20px}
  .cn{font-size:92px}
  .psec{padding:100px 0 80px}
  .wk{padding:0 20px 100px}
  .wr{grid-template-columns:minmax(0,1fr);gap:8px;padding:28px 0}
  .yr{text-align:left}
  .bd{height:460px}
  .contact{padding:100px 20px}
  .foot-inner{padding:40px 20px 28px}
  .foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 24px}
  .foot-brand{grid-column:1 / -1}
  .foot-col .foot-link{min-height:44px}
  .foot-bar{margin-top:24px;padding-top:20px}
  /* service page */
  .wsec{padding:130px 20px 100px}
  .dgw{padding:24px 20px 22px}
  .fsec{padding:100px 20px}
  .fq summary{font-size:17px}
  .fq p{padding-right:0}
  .chs{justify-content:center}
  /* flat diagrams */
  .dot{display:none}
  .fer{grid-template-columns:70px 58px minmax(0,1fr);padding:8px 14px;font-size:12.5px}
  .fpr-row{flex-direction:column;align-items:stretch;padding-bottom:0}
  .fpr-row .fb{width:100%}
  .fpr-row .fc{flex:none;width:1px;height:18px;min-width:0;margin:0 auto}
  .fpr-row .fc::after{right:auto;left:-3px;top:auto;bottom:1px;transform:rotate(135deg)}
  .fgw{margin:8px auto}
  .fgl{left:26px;top:50%;transform:translateY(-50%)}
  .fai{grid-template-columns:minmax(0,1fr)}
  .fai>.fc{width:1px;height:28px;margin:0 auto}
  .fai>.fc::after,.fai>.fc--both::before{left:-3px;right:auto}
  .fai>.fc::after{top:auto;bottom:1px;transform:rotate(135deg)}
  .fai>.fc--both::before{top:1px;transform:rotate(315deg)}
  .fvpc{padding:42px 12px 12px}
  .fpr{padding:14px}
  .cn--sm{font-size:48px}
}
@media (max-width:560px){
  .rg{grid-template-columns:minmax(0,1fr)}
  .rcd{min-height:440px}
  .gs{grid-template-columns:minmax(0,1fr)}
  .fdash-g{grid-template-columns:minmax(0,1fr)}
  .ftile{min-height:0}
  .fpr-c{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .dgw.is-in :is(.fx .fpr-row .fc,.fx .fai>.fc){animation-name:growy}
  .fx .fpr-row .fc,.fx .fai>.fc{transform-origin:center top}
}
@media (max-width:380px){.brand{font-size:16px;gap:8px}}
@media (max-width:340px){.hd-side--end .btn{display:none}}
@media (hover:none){.wcta{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* 17. CONTENT ADDITIONS: first-call line, how we work, stages, migrations, built with, not a fit ---------- */
.cta-first{margin:14px auto 0;max-width:620px;font-size:16px;line-height:1.55;color:var(--muted)}
.dli--s{font-size:clamp(19px,1.7vw,23px);line-height:1.35}
.fsec--fit{padding-bottom:20px}
.hw{padding-bottom:40px}
.stg{padding:0 40px 60px;background:var(--bg)}
.stg .engl{margin-top:56px}
.stg .engl .dli{font-family:var(--font-sans);font-weight:400;font-size:15.5px;line-height:1.55;letter-spacing:0;color:var(--muted)}
.stt{display:block;margin-bottom:10px;font-family:var(--font-serif);font-weight:300;font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-0.02em;color:var(--ink)}
.mig{padding:0 40px 50px;background:var(--bg)}
#tools.stsec{padding-top:60px}
.tools-note{max-width:560px;margin-top:10px}
.band-sub{margin-top:18px;font-family:var(--font-sans);font-size:17px;line-height:1.5;letter-spacing:0;color:var(--ink-soft)}
@media (max-width:1180px){
  .stg,.mig{padding-left:20px;padding-right:20px}
  .stg{padding-bottom:50px}
  .mig{padding-bottom:40px}
  #tools.stsec{padding:50px 20px 60px}
}
@media (max-width:720px){
  .fsec--fit{padding-bottom:0}
}
.cells-16{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}
.cells-16 .wkc{height:24px}
.cells-legend--3{position:relative;display:block;height:22px}
.cells-legend--3 .bn{position:absolute;top:0;white-space:nowrap}
.cells-legend--3 .l1{left:0}
.cells-legend--3 .l2{left:calc(4.5 / 16 * 100%);transform:translateX(-50%)}
.cells-legend--3 .l3{right:0}
@media (max-width:560px){
  .cells-legend--3{height:44px}
  .cells-legend--3 .l1{display:none}
  .cells-legend--3 .l2{left:0;transform:none}
  .cells-legend--3 .l3{top:22px}
}

/* hero headline: on phones the three phrases flow and balance instead of breaking each phrase separately.
   Inline spans animate unreliably in WebKit, so on phones the whole h1 lands once, as a block, with the d1 timing. */
@media (max-width:720px){
  .hero-content h1 .blk{display:inline;animation:none;opacity:1;filter:none;transform:none}
  .hero-content h1{text-wrap:balance;animation:blurh 1s var(--ease) .55s both}
}

/* hero sub-line: balance line lengths so no word is left alone on the last line */
.hero-lede{text-wrap:balance}