/* ether. site styles
   Layout concept: clinical label system. White paper, black ink, thin rules, products named by what they are.
   Single deliberate light look (brand is black on white); colours set explicitly. */
@font-face{font-family:"DM Serif Display";src:url("../fonts/dm-serif-display-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("../fonts/dm-serif-display-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}
:root{
  --ink:#F4F4F2;          /* text, rules, buttons */
  --paper:#050505;        /* page */
  --mist:#0D0D0D;         /* alternate sections, a whisper warm to sit with the gold logo variant */
  --grey:#A6A6A1;         /* secondary text, AA on paper and mist */
  --hair:#2C2C2A;         /* hairlines inside cards */
  --gold:#B8955A;         /* logo variant only */
  --sans:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;   /* headlines: the soft serif from the current hero and the wordmark */
  --step--1:.8125rem; --step-0:1rem; --step-1:1.1875rem; --step-2:1.5rem; --step-3:2.125rem; --step-4:clamp(2.25rem,5vw,3.75rem);
  --gutter:clamp(1rem,4vw,2.5rem); --max:72rem;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--step-0);line-height:1.65;font-weight:400}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img,svg{max-width:100%;height:auto}
h1,h2,h3{text-wrap:balance;margin:0}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.12}
h1{font-size:var(--step-4)}
h1 em,h2 em{font-style:italic;color:var(--grey)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-weight:500;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem}
.label{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.09em;font-weight:500}
.muted{color:var(--grey)}
.preview-bar{background:var(--ink);color:var(--paper);font-size:var(--step--1);padding-block:.5rem;text-align:center;padding-inline:1rem}

/* header */
.site-head{border-bottom:1px solid var(--ink);background:var(--paper);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.site-head .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4.25rem}
.brand{display:block;line-height:0;flex:none}
.brand img{height:2.3rem;width:auto}
.nav{display:flex;gap:1.5rem;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-size:.9375rem}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:.8rem 1.2rem;text-decoration:none;font-weight:500;font-size:.9375rem;font-family:inherit;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.nav .btn{color:var(--paper)}
.nav .btn:hover{color:var(--ink)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;border:1px solid var(--ink);padding:.45rem .8rem;font-size:.875rem}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu-panel{display:flex}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--ink);flex-direction:column;padding:1rem var(--gutter);gap:.9rem}
.menu-panel a{text-decoration:none;font-size:1.0625rem}
@media (max-width:60rem){.nav{display:none}.menu{display:block}}

/* sections */
section{padding-block:clamp(3rem,7vw,5.5rem)}
section.alt{background:var(--mist)}
.sec-head{display:grid;gap:.75rem;margin-bottom:2rem;max-width:44rem}
.rule-top{border-top:1px solid var(--ink)}

/* hero */
.hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,6vw,4rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,5vw,4rem);align-items:end}
.hero-copy{display:grid;gap:1.4rem;min-width:0}
.hero .lede{font-size:var(--step-1);max-width:40rem;line-height:1.7;font-weight:300;color:#333}
.hero-mark{width:clamp(7rem,18vw,15rem)}
.spec{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;padding-top:1rem;border-top:1px solid var(--ink);max-width:40rem}
.spec span{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.09em}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}
@media (max-width:40rem){.hero-grid{grid-template-columns:1fr}.hero-mark{display:none}}
.crumbs{font-size:var(--step--1);color:var(--grey);display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.crumbs a{color:var(--grey)}

/* router (where to start) */
.router{border-top:1px solid var(--ink)}
.router a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:1rem 2rem;align-items:baseline;padding-block:1.1rem;border-bottom:1px solid var(--ink);text-decoration:none}
.router a:hover .go{text-decoration:underline}
.router .q{font-size:var(--step-1);min-width:0}
.router .go{font-weight:500;white-space:nowrap}
@media (max-width:40rem){.router a{grid-template-columns:1fr}.router .go{white-space:normal}}

/* ladder */
.ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.ladder div{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:1.1rem;display:grid;gap:.5rem;align-content:start;min-width:0}
.ladder .n{font-size:var(--step--1);color:var(--grey);font-variant-numeric:tabular-nums}
.ladder h3{font-size:var(--step-1)}
.ladder ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.875rem}
@media (max-width:56rem){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){.ladder{grid-template-columns:1fr}}

/* service groups */
.groups{display:grid;gap:0;border-top:1px solid var(--ink)}
.group{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:1rem 2rem;padding-block:1.4rem;border-bottom:1px solid var(--ink)}
.group ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:.6rem 2rem;min-width:0}
.group li a{display:flex;justify-content:space-between;gap:1rem;text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:.4rem}
.group li a:hover span:first-child{text-decoration:underline}
.group .from{color:var(--grey);font-size:.875rem;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:40rem){.group{grid-template-columns:1fr}}

/* shelf labels */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1.25rem}
.lbl{border:1px solid var(--ink);background:var(--paper);padding:1.1rem 1.1rem 1rem;display:grid;grid-template-rows:auto auto 1fr auto;gap:.75rem;min-width:0}
.lbl .top{display:flex;justify-content:space-between;gap:1rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em}
.lbl .name{font-family:var(--serif);font-size:1.375rem;font-weight:400;line-height:1.15}
.lbl .what{font-size:.875rem;color:var(--grey)}
.lbl .price{border-top:1px solid var(--ink);padding-top:.65rem;display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;font-variant-numeric:tabular-nums}
.lbl .price strong{font-size:1.25rem;font-weight:500}
.lbl .price span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey)}

/* two-col lists */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem}
@media (max-width:48rem){.cols{grid-template-columns:1fr}}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.list li{padding-block:.7rem;border-bottom:1px solid var(--hair);padding-left:1.4rem;position:relative}
.list li::before{content:"";position:absolute;left:0;top:1.25rem;width:.55rem;height:1px;background:var(--ink)}
.list.no li::before{width:.55rem;height:.55rem;top:1.05rem;background:transparent;border:1px solid var(--ink);border-radius:50%}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1.25rem;counter-reset:s}
.steps li{border-top:2px solid var(--ink);padding-top:.9rem;display:grid;gap:.4rem;counter-increment:s;min-width:0}
.steps li::before{content:"Step " counter(s);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.09em;color:var(--grey)}
.note{border-left:2px solid var(--ink);padding:.25rem 0 .25rem 1rem;max-width:44rem}

/* faq */
.faq{border-top:1px solid var(--ink);max-width:52rem}
.faq details{border-bottom:1px solid var(--ink)}
.faq summary{cursor:pointer;list-style:none;padding-block:1.1rem;font-size:var(--step-1);font-weight:500;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding-bottom:1.2rem;max-width:44rem}

/* tables */
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--ink)}
table{border-collapse:collapse;width:100%;min-width:40rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.7rem .75rem .7rem 0;border-bottom:1px solid var(--hair);vertical-align:top;font-size:.9375rem}
th{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;font-weight:500;border-bottom:1px solid var(--ink)}
td.p{white-space:nowrap;font-weight:600}
.price-step{margin-top:3rem}
.price-step:first-of-type{margin-top:0}

/* industries */
.ind{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:0 2.5rem;border-top:1px solid var(--ink)}
.ind article{border-bottom:1px solid var(--ink);padding-block:1.25rem;display:grid;gap:.5rem;min-width:0}
.ind .subs{font-size:.9375rem}
.strip{display:flex;flex-wrap:wrap;gap:.5rem}
.strip a{border:1px solid var(--ink);padding:.4rem .75rem;text-decoration:none;font-size:.875rem}
.strip a:hover{background:var(--ink);color:var(--paper)}

/* founder */
.founder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:2rem 4rem;align-items:start}
@media (max-width:48rem){.founder{grid-template-columns:1fr}}
.facts{border-top:1px solid var(--ink);margin:0}
.facts div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;padding-block:.6rem;border-bottom:1px solid var(--hair)}
.facts dt{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.09em;color:var(--grey)}
.facts dd{margin:0}
.prose{display:grid;gap:1rem;max-width:40rem}

/* forms */
.form{display:grid;gap:1rem;max-width:40rem}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:36rem){.form .row{grid-template-columns:1fr}}
.field{display:grid;gap:.35rem;min-width:0}
.field label{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.09em}
.field input,.field textarea,.field select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:0;padding:.7rem .8rem;width:100%}
.field textarea{min-height:7rem;resize:vertical}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.875rem}
.check input{margin-top:.25rem}
.hp{position:absolute;left:-5000px}
.form-msg{padding:.9rem 1rem;border:1px solid var(--ink);background:var(--mist)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.5rem 4rem}
@media (max-width:48rem){.contact-grid{grid-template-columns:1fr}}
.copyable{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.copyable button{font:inherit;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;background:transparent;border:1px solid var(--ink);padding:.2rem .5rem;cursor:pointer}

/* landing pages */
.lp-head .wrap{justify-content:space-between}
.lp-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2.5rem 4rem;align-items:start}
@media (max-width:52rem){.lp-grid{grid-template-columns:1fr}}
.lp-box{border:1px solid var(--ink);padding:1.5rem;display:grid;gap:1rem;background:var(--paper)}

/* footer */
.site-foot{border-top:1px solid var(--ink);padding-block:3rem 2rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:.9375rem}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{text-decoration:underline}
.foot-brand img{height:2.4rem;width:auto}
.foot-base{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:.5rem 2rem;font-size:var(--step--1);color:var(--grey)}
@media (max-width:48rem){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);border-top:1px solid var(--ink);padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;font-size:.9375rem}
.consent[hidden]{display:none!important}

/* currency switcher */
.cur{display:inline-flex;border:1px solid var(--ink)}
.cur button{font:inherit;font-size:.75rem;letter-spacing:.08em;background:var(--paper);color:var(--ink);border:0;padding:.35rem .55rem;cursor:pointer}
.cur button+button{border-left:1px solid var(--ink)}
.cur button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.menu-panel .cur{align-self:flex-start}

/* connectors */
.connect{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.25rem;border-top:1px solid var(--ink);padding-top:1.25rem}
.connect li{display:grid;gap:.55rem;align-content:start;min-width:0;padding-right:.5rem}
.connect .layer{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--ink);padding:.15rem .45rem;justify-self:start}
.connect p{font-size:.9375rem}
.connect a{font-size:.875rem;font-weight:500}
.layers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.layers li{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:1.1rem;display:grid;gap:.5rem;align-content:start;min-width:0;background:var(--paper)}
.layers p{font-size:.875rem}
@media (max-width:60rem){.layers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){.layers{grid-template-columns:1fr}}
.terms div{grid-template-columns:11rem minmax(0,1fr)}
@media (max-width:36rem){.terms div{grid-template-columns:1fr;gap:.2rem}}
.lbl .price .px,.group .from .px,.router .px{font-size:inherit;color:inherit;text-transform:none;letter-spacing:0}

/* social buttons */
.social{display:flex;gap:.5rem}
.soc{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid var(--ink);color:var(--ink);text-decoration:none}
.soc:hover{background:var(--ink);color:var(--paper)}
/* situations */
.sits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1.5rem;border-top:1px solid var(--ink);padding-top:1.25rem}
.sits li{display:grid;gap:.5rem;align-content:start;min-width:0}
.sits h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.25}
.pipe-line{font-size:.9375rem}
/* pipelines */
.pipes{display:grid;gap:0}
.pipe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.5rem 3rem;padding-block:2.25rem;border-bottom:1px solid var(--ink)}
.pipe:first-child{padding-top:0}
.pipe-price{font-weight:500;font-variant-numeric:tabular-nums}
@media (max-width:52rem){.pipe{grid-template-columns:1fr}}
.contact-grid{align-items:start}.contact-grid .prose{align-content:start}

/* insights */
.posts{display:grid;border-top:1px solid var(--ink)}
.post{padding-block:1.4rem;border-bottom:1px solid var(--hair);display:grid;gap:.5rem}
.post h2{font-size:var(--step-2)}
.post h2 a{text-decoration:none}.post h2 a:hover{text-decoration:underline}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:2.5rem 4rem;align-items:start}
@media (max-width:56rem){.art-grid{grid-template-columns:1fr}}
.art-body{display:grid;gap:1rem;max-width:42rem;font-size:1.0625rem;line-height:1.75}
.art-body h2{font-size:var(--step-2);margin-top:1.25rem}
.art-body ul,.art-body ol{margin:0;padding-left:1.25rem;display:grid;gap:.5rem}
.art-side{display:grid;gap:1.5rem}
.news .row{grid-template-columns:1fr}
/* links page */
.links-wrap{display:grid;justify-items:center;gap:1.5rem;max-width:28rem}
.links-list{display:grid;gap:.75rem;width:100%}
.linkbtn{width:100%;justify-content:center;text-align:center}

/* hero geometry: torus cycle on home, drafting compass on pipelines, insights, pricing and industries (assets/js/geo.js) */
.hero.has-geo{position:relative;overflow:hidden}
.hero.has-geo .hero-grid,.hero-grid:has(.geo){align-items:center}
.geo{position:relative;width:clamp(16rem,32vw,28rem);aspect-ratio:1;max-width:100%}
.geo canvas,.geo img{display:block;width:100%;height:100%}
.geo img{width:62%;height:auto;margin:19%}
.geo [hidden]{display:none!important}
.js .geo img{visibility:hidden}  /* script is on its way: keep the still flower from flashing before the drawing starts */
.geo-ctl{position:absolute;right:0;bottom:0;font:inherit;font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;line-height:1;padding:.4rem .6rem;min-height:1.75rem;border:1px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;opacity:.55;transition:opacity .2s}
.geo-ctl:hover,.geo-ctl:focus-visible{opacity:1}
/* phones: the drawing sits in the flow above the copy, full strength, instead of a faded backdrop */
@media (max-width:48rem){
  .hero-grid:has(.geo){grid-template-columns:1fr;gap:1.25rem}
  .geo{order:-1;justify-self:center;width:min(74vw,20rem)}
  .hero.has-geo .geo{width:min(62vw,16rem)}
  .geo img{display:none}
}

/* ---------- black rebuild ---------- */
.hero .lede{color:#CFCFCB}
.brand img,.foot-brand img,.links-wrap img{filter:invert(1)}
.hero-mark{filter:invert(1)}
.geo img{filter:invert(1)}
tr:hover td{background:#0E0E0E}
.fx-hero.hero{position:relative;overflow:hidden;background:#050505;color:#F4F4F2;padding-block:clamp(3rem,7vw,5.5rem);min-height:clamp(30rem,72vh,46rem);display:flex;align-items:center}
.fx-hero>.wrap{position:relative;z-index:1;width:100%}
.fx-hero>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.9) 36%,rgba(5,5,5,0) 64%)}
.fx-hero .hero-copy{max-width:36rem;pointer-events:none}.fx-hero .hero-copy a{pointer-events:auto}
.fx-hero .hero-grid{display:block}
.field-ctl{position:absolute;z-index:2;right:max(16px,env(safe-area-inset-right,0px));bottom:16px;font:inherit;font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;padding:.45rem .65rem;min-height:1.75rem;background:rgba(5,5,5,.5);color:#F4F4F2;border:1px solid #F4F4F2;cursor:pointer}
.fx-hero .t-grow{z-index:1;pointer-events:none}
#nodes{position:absolute;inset:0;z-index:1;pointer-events:none}
.node{position:absolute;transform:translateY(-50%);font-size:.8125rem;line-height:1.25;opacity:0;transition:opacity .7s;max-width:11rem;text-shadow:0 0 6px #050505,0 0 14px #050505,0 0 2px #050505}
.node b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.1875rem,2vw,1.625rem);line-height:1.1}
.node i{font-style:normal;color:#A6A6A1}.node.on{opacity:1}
@media (max-width:51rem){.fx-hero.hero{display:block;padding-top:19rem}.fx-hero>canvas{height:21rem}#nodes{height:21rem;bottom:auto}.fx-hero::after{top:15rem;background:linear-gradient(180deg,rgba(5,5,5,0) 0,#050505 6rem)}.field-ctl{bottom:auto;top:17.25rem}.node i{display:none}}
.fx-asm>.wrap{position:relative;z-index:1}
.fx-pts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.fx-rain{position:absolute;left:0;width:100%;pointer-events:none;z-index:0}
.ch{display:inline-block;white-space:pre}
.ch.hot{font-family:ui-monospace,Menlo,Consolas,monospace;text-shadow:0 0 8px currentColor}

#seedBox canvas{display:block}

/* ChatGPT + Google AI ads page */

.mocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:1.25rem}
.mock{border:1px solid var(--ink);background:var(--paper);display:flex;flex-direction:column;min-width:0}
.mock-top{display:flex;justify-content:space-between;gap:1rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;padding:.7rem .9rem;border-bottom:1px solid var(--ink)}
.mock-screen{padding:1rem .9rem;font-size:.875rem;line-height:1.5;flex:1;background:#fff}
.mock-foot{border-top:1px solid var(--ink);padding:.8rem .9rem}.mock-foot .name{font-family:var(--serif);font-size:1.125rem;line-height:1.2;margin-bottom:.25rem}.mock-foot .what{font-size:.8125rem;color:var(--grey)}
.ai-q{margin:0 0 .8rem auto;background:#f0f0ee;border-radius:1rem;padding:.5rem .8rem;width:fit-content;max-width:88%}
.mock-aio .ai-q,.mock-aim .ai-q{margin:0 0 .8rem;background:transparent;border:1px solid var(--hair);border-radius:1.5rem;width:100%;max-width:none}
.ai-tag{font-weight:600;font-size:.8125rem;margin-bottom:.35rem}.ai-a{color:#333;margin-bottom:.9rem}
.ai-ad{border:1px solid var(--hair);border-radius:.75rem;overflow:hidden;display:grid;grid-template-columns:6.25rem minmax(0,1fr);background:#fff}
.ai-img{width:100%;height:100%;min-height:9rem;object-fit:cover;display:block}.ai-body{padding:.7rem .8rem;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.ai-brand{display:flex;align-items:center;gap:.45rem;font-size:.75rem;line-height:1.25}.ai-brand img{width:1.35rem;height:1.35rem;object-fit:contain;flex:none}.ai-brand b{font-weight:500;display:block}.ai-site{color:var(--grey);display:block;overflow-wrap:anywhere}.ai-brand>span{min-width:0}.ai-spon{color:var(--grey);font-size:.6875rem;font-weight:500}.ai-brand img{border-radius:50%}
.ai-ad.thumb{grid-template-columns:8.5rem minmax(0,1fr);align-items:start}.ai-ad.thumb .ai-img{height:auto;min-height:0;aspect-ratio:1}
.ai-title{font-weight:500;font-size:.9375rem;line-height:1.3}.mock-aio .ai-title,.mock-aim .ai-title{color:#1a0dab}.ai-desc{color:#444;font-size:.8125rem;line-height:1.4}.ai-broker{font-size:.6875rem;color:var(--grey)}
.ai-cta{align-self:flex-start;margin-top:.2rem;border:1px solid var(--ink);border-radius:2rem;padding:.2rem .65rem;font-size:.75rem}
.ai-ad.wide{grid-template-columns:1fr}.ai-ad.wide .ai-img{height:auto;min-height:0;aspect-ratio:3/2}
.ai-ad.photo-left{grid-template-columns:7.25rem minmax(0,1fr)}.ai-ad.photo-left .ai-img{object-position:50% 0;background:#fff}
.tbl-wrap td,.tbl-wrap th{vertical-align:top;font-size:.875rem}
/* ads fill their cards: no empty space under the ad or beneath its image */
.mock-screen{display:flex;flex-direction:column}
.mock-screen .ai-ad{flex:1}
.ai-body .ai-cta{margin-top:auto}
.ai-ad.thumb{align-items:stretch;grid-template-columns:8.5rem minmax(0,1fr)}
.ai-ad.thumb .ai-img{height:100%;aspect-ratio:auto;min-height:9rem}
.ai-ad.wide{grid-template-rows:minmax(0,1fr) auto}
.ai-ad.wide .ai-img{contain:size;height:100%;min-height:12.5rem;aspect-ratio:auto}.ai-ad.brandbg-b .ai-img{background:#0E1E38}.ai-ad.brandbg-t .ai-img{background:#F0EDE6}
.ai-ad.fit .ai-img{object-fit:contain}.ai-ad.brandbg-w .ai-img{background:#fff}#examples{--ink:#000;--paper:#fff;--mist:#F3F3F1;--grey:#5C5C58;--hair:#D9D9D5;background:#fff;color:#000}#examples :focus-visible{outline-color:#000}
.hero.field-hero{position:relative;overflow:hidden;background:#050505;color:#F4F4F2;padding-block:clamp(3rem,7vw,5.5rem);min-height:clamp(30rem,62vh,42rem);display:flex;align-items:center}
.field-hero>.wrap{position:relative;z-index:1;width:100%}
.field-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.field-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.86) 38%,rgba(5,5,5,0) 62%);pointer-events:none}
.field-hero .hero-copy{max-width:36rem;pointer-events:none}.field-hero .hero-copy a{pointer-events:auto}
.field-hero .lede{color:#D4D4D0}.field-hero .crumbs,.field-hero .crumbs a{color:#A8A8A4}
.field-hero .btn{background:#F4F4F2;color:#050505;border-color:#F4F4F2}.field-hero .btn:hover{background:transparent;color:#F4F4F2}
.field-hero .btn.ghost{background:transparent;color:#F4F4F2}.field-hero .btn.ghost:hover{background:#F4F4F2;color:#050505}
.field-hero :focus-visible{outline-color:#F4F4F2}
.field-ctl{position:absolute;z-index:2;right:max(16px,env(safe-area-inset-right,0px));bottom:16px;font:inherit;font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;padding:.45rem .65rem;min-height:1.75rem;background:transparent;color:#F4F4F2;border:1px solid #F4F4F2;cursor:pointer}
@media (max-width:51rem){.hero.field-hero{display:block;padding-top:19rem}.field-hero canvas{height:21rem}.field-hero::after{top:15rem;background:linear-gradient(180deg,rgba(5,5,5,0) 0,#050505 6rem)}.field-ctl{bottom:auto;top:16px}}
.ai-ad.brandbg-y .ai-img{background:#F3D33B}
.ai-ad.brandbg-s .ai-img{background:#ECE4DA}


/* work page */
.work-list{display:grid;gap:clamp(3rem,7vw,5rem)}
.work-item{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;scroll-margin-top:5rem}
.work-copy{display:grid;gap:.75rem;align-content:start}
.work-copy h2{font-size:var(--step-2)}
.work-who{font-weight:500}
.work-svc{font-size:.9375rem}
.work-shot{position:relative;padding-right:12%}
.work-shot img,.work-ads img{display:block;width:100%;height:auto;border:1px solid var(--hair,#D9D9D5);filter:grayscale(1);transition:filter .5s ease}
.work-shot .m{position:absolute;right:0;bottom:-8%;width:24%;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.work-item:hover img,.work-item:focus-within img,.work-item.on img{filter:none}
.work-ads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem);align-items:start}
.work-item.wide{grid-template-columns:1fr}.work-item.wide .work-copy{order:-1;max-width:46rem}
.work-flow{list-style:none;display:grid;gap:0;counter-reset:s;border-left:1px solid currentColor;margin:0;padding:0}
.work-flow li{counter-increment:s;display:grid;gap:.2rem;padding:.9rem 0 .9rem 1.4rem;position:relative}
.work-flow li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-.95rem;top:.85rem;width:1.9rem;height:1.9rem;display:grid;place-items:center;font-size:.6875rem;border:1px solid currentColor;border-radius:50%;background:var(--paper,#fff)}
.work-flow b{font-weight:500}.work-flow span{color:var(--grey,#5C5C58);font-size:.9375rem}
@media (max-width:48rem){.work-ads{grid-template-columns:repeat(2,minmax(0,1fr))}.work-item{grid-template-columns:1fr}.work-shot{padding-right:0;margin-bottom:2rem}.work-shot .m{width:28%;right:4%}}
@media (hover:none){.work-item img{filter:none}}
@media (prefers-reduced-motion:reduce){.work-shot img,.work-ads img{transition:none}}

.field-tag{position:absolute;z-index:2;right:max(16px,env(safe-area-inset-right,0px));bottom:3.6rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;color:#A8A8A4;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.1rem}
.field-tag:hover,.field-tag:focus-visible{color:#F4F4F2}
@media (max-width:51rem){.field-tag{bottom:auto;top:16px;right:auto;left:max(16px,env(safe-area-inset-left,0px))}}
/* ether. phone layout (mockup v1). Phones only: everything stacks into one column, type gets bigger, tap targets reach 48px. */
@media (max-width:40rem){
:root{--gutter:1.25rem}
body{font-size:1.0625rem;line-height:1.7}
h1{font-size:clamp(2.6rem,11vw,3.2rem);line-height:1.05}
h2{font-size:clamp(1.9rem,8vw,2.3rem)!important;line-height:1.1}
.lede{font-size:1.1875rem;line-height:1.6}
.label,.crumbs{font-size:.8125rem}
.muted{font-size:1rem!important}
.btn{width:100%;min-height:3.25rem;font-size:1.0625rem}
.cta-row{flex-direction:column;gap:.6rem}

/* heroes: animation first and large, the headline sits on its lower edge */
.hero.field-hero{padding-top:58svh!important;min-height:auto}
.field-hero canvas{height:64svh!important}
.field-hero::after{top:40svh!important;background:linear-gradient(180deg,rgba(5,5,5,0) 0,#050505 24svh)!important}
.field-ctl,.geo-ctl{width:2.75rem;height:2.75rem;padding:0;font-size:0!important;border-radius:50%;opacity:.7}
.field-ctl::before,.geo-ctl::before{content:"\275A\275A";font-size:.7rem;letter-spacing:-.1em}
.field-ctl[data-paused]::before,.geo-ctl[data-paused]::before{content:"\25B6";letter-spacing:0}
.field-tag{top:auto!important;bottom:auto!important;left:var(--gutter)!important;right:auto!important;top:calc(58svh - 3.2rem)!important;font-size:.8125rem}
.field-ctl{bottom:auto!important;top:16px!important;right:var(--gutter)!important}
.field-hero:has(#fieldTag) .field-ctl{top:calc(58svh - 3.6rem)!important}
.hero-grid:has(.geo){gap:.5rem}
.geo{width:min(92vw,24rem)!important}
.geo-ctl{right:.25rem;bottom:.25rem}

/* service lists: name on its own line, price under it */
.group li a{flex-direction:column;gap:.15rem;padding-block:.85rem .75rem;min-height:3rem;font-size:1.125rem}
.group .from{font-size:.9375rem!important}
.group{padding-block:1.8rem}
.group h2{font-size:1.75rem!important}

/* price cards: one per row, price large */
.lbl{padding:1.3rem 1.2rem 1.15rem;gap:.6rem}
.lbl .top{font-size:.75rem}
.lbl .name{font-size:1.625rem}
.lbl .what{font-size:1rem}
.lbl .price{flex-direction:column;align-items:flex-start;gap:.1rem}
.lbl .price strong{font-size:1.75rem}
.lbl .price span{font-size:.8125rem}

/* pricing tables become rows: service, then the price in the chosen currency, then the unit */
table{min-width:0!important}
.tbl-wrap{overflow:visible}
thead{display:none}
table,tbody{display:block;width:100%}
tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;padding-block:.95rem;border-bottom:1px solid var(--hair)}
tbody td{padding:0!important;border:0!important}
tbody td:first-child{grid-column:1/-1;font-size:1.125rem}
tbody td.p{font-size:1.375rem;font-weight:500;white-space:normal}
tbody td:last-child{align-self:end;justify-self:end;color:var(--grey);text-transform:uppercase;font-size:.8125rem;letter-spacing:.08em}
html[data-cur="cad"] tbody td:nth-child(3),html[data-cur="cad"] tbody td:nth-child(4),
html[data-cur="usd"] tbody td:nth-child(2),html[data-cur="usd"] tbody td:nth-child(4),
html[data-cur="eur"] tbody td:nth-child(2),html[data-cur="eur"] tbody td:nth-child(3){display:none}

/* footer: one column, grouped links with room to tap */
.foot-grid{grid-template-columns:1fr!important;gap:0}
.foot-grid>div{padding-block:1.4rem;border-bottom:1px solid var(--hair)}
.foot-grid ul{font-size:1.0625rem;gap:0}
.foot-grid li a{display:block;padding-block:.6rem}
.foot-grid .label,.foot-grid h2,.foot-grid h3{font-size:.8125rem!important;margin-bottom:.4rem}
.social .soc{width:3rem;height:3rem}
}

/* on-screen ad mock-ups */
.scr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19.5rem),1fr));gap:1.25rem;align-items:start}
.scr{margin:0;display:flex;flex-direction:column;min-width:0;color:#1f1f1f;font-family:Arial,Helvetica,sans-serif}
.scr>figcaption{font-family:var(--sans);font-size:.875rem;color:#A8A8A4;margin-top:.6rem;line-height:1.4}
.scr-bar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;background:#fff;border:1px solid #dadce0;border-bottom:0;border-radius:18px 18px 0 0;padding:.75rem 1rem .5rem}
.scr-app{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.95rem}
.scr-tag{font-family:var(--sans);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:#5f6368;border:1px solid #dadce0;border-radius:99px;padding:.15rem .5rem}
.scr-body{background:#fff;border:1px solid #dadce0;border-top:0;border-radius:0 0 18px 18px;padding:.4rem 1rem 1rem;display:grid;gap:.75rem;font-size:.875rem;line-height:1.5}
.scr a{color:inherit;text-decoration:none}
.scr-spon{font-size:.75rem;font-weight:700;color:#1f1f1f}
.ad-brand{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;line-height:1.25}
.ad-brand img{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1px solid #e3e3e3;flex:none}
.ad-brand>span{display:grid}.ad-site{color:#4d5156;font-size:.75rem}
.ad-title{font-weight:600;font-size:.95rem;line-height:1.3}
.ad-desc{color:#4d5156;font-size:.8125rem;line-height:1.45}
.g-blue{color:#1a0dab}
.scr-img{display:block;width:100%;object-fit:cover;background:#f1f3f4}.scr-img.fit{object-fit:contain}
.g-logo{font:500 1.15rem/1 Arial,sans-serif;letter-spacing:-.02em}.g-logo b{font-weight:500}
/* ChatGPT */
.gpt-q{justify-self:end;max-width:85%;background:#f4f4f4;border-radius:18px;padding:.55rem .85rem;margin:0}
.gpt-a{margin:0;color:#1f1f1f}
.gpt-ad{display:grid;gap:.45rem;border:1px solid #e3e3e3;border-radius:16px;padding:.75rem;background:#fff}
.gpt-ad .scr-img{aspect-ratio:16/10;border-radius:10px}
.gpt-cta{justify-self:start;background:#0d0d0d;color:#fff;border-radius:99px;padding:.45rem .95rem;font-size:.8125rem;font-weight:600;margin-top:.15rem}
.gpt-input,.g-input{margin:.25rem 0 0;border:1px solid #e3e3e3;border-radius:99px;padding:.6rem 1rem;color:#8e8e8e;font-size:.8125rem}
/* Google AI Mode */
.g-tabs{display:flex;gap:1rem;font-size:.75rem;color:#5f6368;border-bottom:1px solid #ebebeb;padding-bottom:.4rem}
.g-tabs .on{color:#1f1f1f;font-weight:700;border-bottom:2px solid #1f1f1f;padding-bottom:.35rem;margin-bottom:-.45rem}
.g-q{margin:0;font-size:1.05rem;line-height:1.35;color:#1f1f1f}
.aim-a{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:start}
.aim-ad{display:grid;gap:.4rem;border-top:1px solid #ebebeb;padding-top:.7rem}
.aim-row{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem;gap:.75rem;align-items:start}
.aim-row>span{display:grid;gap:.25rem}.aim-row .scr-img{aspect-ratio:1;border-radius:10px}
.aim-cta{justify-self:start;border:1px solid #dadce0;border-radius:99px;padding:.35rem .8rem;font-size:.75rem;color:#0b57d0;font-weight:600;margin-top:.2rem}
/* Google Search */
.g-search{margin:.2rem 0 0;display:flex;gap:.6rem;align-items:center;border:1px solid #dfe1e5;border-radius:99px;padding:.55rem .9rem;box-shadow:0 1px 6px rgba(32,33,36,.12)}
.s-ad{display:grid;gap:.3rem}
.s-head{font-size:1.125rem;line-height:1.3}
.s-links{list-style:none;margin:0;padding:.2rem 0 0;display:grid;gap:.5rem}
.s-links li{display:grid;font-size:.8125rem;border-top:1px solid #ebebeb;padding-top:.45rem}.s-links li span:last-child{color:#4d5156}
.scr a:hover .ad-title,.scr a:hover .s-head{text-decoration:underline}
.scr a:focus-visible{outline:2px solid #0b57d0;outline-offset:3px;border-radius:12px}
.ex-sec .sec-head{margin-bottom:1.5rem}
@media (max-width:40rem){.scr-grid{gap:2rem}.scr-body{font-size:.9375rem}.ad-desc{font-size:.875rem}}

#examples .scr>figcaption{color:#5C5C58}
.ex-note{font-size:.9375rem;color:var(--grey);max-width:44rem;margin-top:1rem}
.ex-more{margin-top:clamp(2.5rem,6vw,4rem)}
.live-link{font-size:.9375rem}
@media (hover:none){.work-item img{filter:grayscale(1)}.work-item.on img,.work-ads img.on{filter:none}}
@media (max-width:40rem){.work-ads{grid-template-columns:1fr 1fr;gap:.6rem}.work-item.wide .work-copy{order:-1}.work-copy h2{font-size:1.75rem}}