/*
Theme Name: The AI Agency
Theme URI: https://theaiagency.example
Author: The AI Agency
Author URI: https://theaiagency.example
Description: Custom one-page marketing theme for The AI Agency, converted from a static HTML/CSS/JS design. Includes the "Throughline" design system (design tokens, masthead, hero, suites, architecture map, story, newsletter and footer sections).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ai-agency
*/

/* =========================================================================
   THE AI AGENCY — "THROUGHLINE"
   Design system tokens
   ========================================================================= */
:root{
  /* ground */
  --ink:            #0B0D0F;
  --ink-deep:       #07080A;
  --surface:        #101317;
  --surface-secondary:#171B20;
  --bone:           #E7E3DA;
  --bone-deep:      #DCD6CA;

  /* type colours (defaults = dark ground) */
  --text-primary:   #F2F0EB;
  --text-secondary: #9BA1A7;
  --text-tertiary:  #6C7378;

  /* accent — a single instrument copper, drawn from the brand mark. no gradients. */
  --accent:         #DB7A43;
  --accent-strong:  #E3986D;
  --accent-ink:     #783A17;

  --border:         rgba(242,240,235,.14);
  --border-strong:  rgba(242,240,235,.30);

  /* spacing */
  --spacing-xs: .5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4.5rem;
  --spacing-xl: 9rem;

  --radius-small: 2px;
  --radius-medium: 6px;

  /* layout */
  --spine: 92px;              /* left rail gutter on desktop */
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 62ch;

  /* type scale */
  --t-display: clamp(2.7rem, 6.4vw, 6.25rem);
  --t-xl:      clamp(2.1rem, 5.4vw, 4.6rem);
  --t-lg:      clamp(1.6rem, 3.1vw, 2.7rem);
  --t-md:      clamp(1.15rem, 1.6vw, 1.4rem);
  --t-base:    1rem;
  --t-sm:      .8125rem;
  --t-xs:      .6875rem;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

/* theme scopes ---------------------------------------------------------- */
[data-theme="bone"]{
  --text-primary:   #14171A;
  --text-secondary: #565C62;
  --text-tertiary:  #7E858A;
  --border:         rgba(20,23,26,.16);
  --border-strong:  rgba(20,23,26,.34);
  --accent:         var(--accent-ink);
}

/* =========================================================================
   Base
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--text-primary);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:var(--t-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
canvas{display:block}
h1,h2,h3,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#0B0D0F}

:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:3px;
  border-radius:var(--radius-small);
}
[data-theme="bone"] :focus-visible{outline-color:#783A17}

.u-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:-100px;left:var(--gutter);z-index:200;
  background:var(--accent);color:#0B0D0F;padding:.75rem 1.25rem;
  font-size:var(--t-sm);font-variation-settings:'wght' 600;
  transition:top .2s var(--ease);
}
.skip:focus{top:16px}

/* =========================================================================
   Layout primitives
   ========================================================================= */
.shell{
  width:100%;
  max-width:1560px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
@media (min-width:1100px){
  .shell{padding-left:calc(var(--spine) + var(--gutter))}
}
.band{
  position:relative;
  padding-block:clamp(5rem,11vw,10.5rem);
}
.band[data-theme="bone"]{background:var(--bone);color:var(--text-primary)}
.band--ink{background:var(--ink)}
.band--deep{background:var(--ink-deep)}

.rule{height:1px;background:var(--border);border:0;margin:0}

/* THE CONTINUOUS FIELD
   One fixed canvas painted above every section's ground and below every
   piece of content, so a single system of conduits runs the whole page.
   Colour is re-clipped per band, which keeps the ink/bone edges crisp. */
#ambient{position:fixed;inset:0;z-index:1;pointer-events:none}
.band > .shell,
.band > .suites__intro,
.band > .suites__stage,
.foot > .shell,
.close > .shell{position:relative;z-index:2}
.foot{position:relative}

/* structural label: sentence case, hairline led — not an all-caps eyebrow */
.tag{
  display:flex;align-items:baseline;gap:.75rem;
  font-size:var(--t-sm);
  font-variation-settings:'wdth' 112,'wght' 500;
  color:var(--text-tertiary);
  letter-spacing:.01em;
}
.tag::before{
  content:"";width:clamp(24px,4vw,56px);height:1px;
  background:var(--border-strong);transform:translateY(-.35em);
}
.tag b{font-variation-settings:'wdth' 112,'wght' 600;color:var(--accent);font-weight:400}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 1.6rem;
  font-size:var(--t-sm);
  font-variation-settings:'wdth' 104,'wght' 600;
  letter-spacing:.015em;
  border-radius:var(--radius-medium);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn--primary{background:var(--accent-strong);color:#0B0D0F}
.btn--primary:hover{background:#F0C9B2}
[data-theme="bone"] .btn--primary{background:#14171A;color:var(--bone)}
[data-theme="bone"] .btn--primary:hover{background:#2A2F35}

.btn--ghost{
  border:1px solid var(--border-strong);
  color:var(--text-primary);
  background:transparent;
}
.btn--ghost:hover{border-color:var(--text-primary)}

.link-u{
  display:inline-block;
  font-size:var(--t-sm);
  font-variation-settings:'wdth' 108,'wght' 600;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--border-strong);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.link-u:hover{border-color:var(--accent);color:var(--accent)}

/* =========================================================================
   Masthead
   ========================================================================= */
.masthead{
  position:fixed;inset:0 0 auto 0;z-index:90;
  transition:background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.masthead.is-stuck{background:rgba(11,13,15,.96);border-bottom-color:var(--border)}
.masthead.is-bone{background:rgba(231,227,218,.96);border-bottom-color:rgba(20,23,26,.14);color:#14171A}
.masthead__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);
  height:74px;
  max-width:1560px;margin-inline:auto;
  padding-inline:var(--gutter);
}
@media (min-width:1100px){.masthead__inner{padding-left:calc(var(--spine) + var(--gutter))}}

.wordmark{display:flex;align-items:center;gap:.6rem;font-size:var(--t-sm)}
/* the brand mark itself: embedded once here so nav, drawer and footer all
   share the same bytes rather than repeating the image per use. */
.brandmark{
  display:inline-block;flex:none;
  width:30px;aspect-ratio:320/215;
  background-image:url("assets/img/logo-mark.webp");
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.wordmark__text{font-variation-settings:'wdth' 112,'wght' 600;letter-spacing:.08em;text-transform:uppercase;font-size:var(--t-xs)}

.masthead__nav{display:none}
@media (min-width:900px){
  .masthead__nav{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.6rem)}
}
.masthead__nav a{
  font-size:var(--t-sm);
  font-variation-settings:'wdth' 104,'wght' 500;
  opacity:.78;transition:opacity .3s var(--ease);
}
.masthead__nav a:hover{opacity:1}
.masthead__nav .btn{opacity:1;padding:.7rem 1.25rem}
.masthead.is-bone .btn--primary{background:#14171A;color:var(--bone)}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;align-items:flex-end;margin-right:-8px;
}
@media (min-width:900px){.burger{display:none}}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:85;
  background:var(--ink);
  padding:120px var(--gutter) var(--gutter);
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s;
}
.drawer[hidden]{display:none}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer a{display:block}
.drawer__links li+li{border-top:1px solid var(--border)}
.drawer__links a{
  padding:1.15rem 0;
  font-size:clamp(1.9rem,9vw,2.6rem);
  font-variation-settings:'wdth' 88,'wght' 500;
  line-height:1.1;
}
.drawer__foot{display:flex;flex-direction:column;gap:1rem;padding-top:2rem}
.drawer__foot .btn{width:100%}
.drawer__meta{font-size:var(--t-xs);color:var(--text-tertiary);letter-spacing:.06em;text-transform:uppercase;font-variation-settings:'wdth' 112,'wght' 500}

/* =========================================================================
   Chapter rail — a real sequence, so numerals are earned
   ========================================================================= */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--spine);z-index:80;
  display:none;align-items:center;justify-content:center;
  pointer-events:none;
}
@media (min-width:1100px){.rail{display:flex}}
.rail__list{display:flex;flex-direction:column;gap:1.35rem;pointer-events:auto}
.rail__item{display:block}
.rail__btn{
  display:flex;align-items:center;gap:.6rem;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wdth' 116,'wght' 500;
  color:var(--rail-dim,#6C7378);
  transition:color .4s var(--ease);
  padding:2px 0;
}
.rail__tick{
  display:block;width:14px;height:1px;background:currentColor;
  transition:width .5s var(--ease),background .4s var(--ease);
}
.rail__label{
  writing-mode:vertical-rl;
  opacity:0;transform:translateY(4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
  font-size:9px;
}
.rail__btn[aria-current="true"]{color:var(--rail-on,#F2F0EB)}
.rail__btn[aria-current="true"] .rail__tick{width:26px;background:var(--accent)}
.rail__btn[aria-current="true"] .rail__label{opacity:1;transform:none}
.rail__btn:hover .rail__label{opacity:.7}
.rail.on-bone{--rail-dim:#8A9096;--rail-on:#14171A}
.rail.on-bone .rail__btn[aria-current="true"] .rail__tick{background:#783A17}

/* =========================================================================
   01 — HERO / the signal field
   ========================================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:118px clamp(1.5rem,2.5vw,2.25rem);
  overflow:hidden;
}
.hero__field{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;
}
.hero__nodes{position:absolute;inset:0;z-index:2;pointer-events:none;display:none}
@media (min-width:900px){.hero__nodes{display:block}}
.hero__node{
  position:absolute;transform:translate(-50%,-50%);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:'wdth' 118,'wght' 500;
  color:var(--text-tertiary);
  white-space:nowrap;
  opacity:0;
  transition:opacity 1.2s var(--ease),color .6s var(--ease);
}
.hero__node.is-on{opacity:1}
.hero__node[data-side="left"]{transform:translate(-100%,-50%);padding-right:18px}
.hero__node[data-side="right"]{transform:translate(0,-50%);padding-left:18px}

.hero__content{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.hero__content a,.hero__content button{pointer-events:auto}
.hero__intro{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.hero__title{
  font-size:var(--t-display);
  line-height:.9;
  letter-spacing:-.035em;
  max-width:14ch;
}
@media (min-width:900px){
  .hero__title{max-width:min(14ch,47vw)}
}
.hero__title .l1{
  display:block;
  font-variation-settings:'wdth' 82,'wght' 620;
}
.hero__title .l2{
  display:block;
  font-variation-settings:'wdth' 82,'wght' 250;
  font-size:.84em;
  text-indent:.06em;
  color:rgba(242,240,235,.56);
}
.hero__title .l2 i{font-style:normal}

.hero__pitch{
  margin-top:clamp(1.25rem,2.4vw,1.9rem);
  max-width:31ch;
  color:var(--text-secondary);
  font-size:var(--t-md);
  line-height:1.5;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.6rem,3vw,2.4rem)}

.hero__foot{
  position:relative;z-index:3;
  border-top:1px solid var(--border);
  margin-top:clamp(2rem,5vw,3.5rem);
  padding-top:1.1rem;
}
.hero__pillars{
  display:flex;flex-wrap:wrap;gap:0 clamp(1.25rem,4vw,3.5rem);
  font-size:var(--t-sm);
  font-variation-settings:'wdth' 110,'wght' 500;
  color:var(--text-secondary);
}
.hero__pillars li{display:flex;align-items:center;gap:.7rem}
.hero__pillars li::before{content:"";width:4px;height:4px;background:var(--accent);flex:none}
.hero__scroll{
  display:none;margin-left:auto;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-tertiary);font-variation-settings:'wdth' 116,'wght' 500;
}
.hero__footrow{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}
@media (min-width:760px){.hero__scroll{display:block}}

/* =========================================================================
   02 — VALUE PROPOSITION
   ========================================================================= */
.value{background:var(--bone)}
.value__statement{
  font-size:clamp(1.75rem,3.7vw,3.5rem);
  line-height:1.08;
  letter-spacing:-.028em;
  font-variation-settings:'wdth' 90,'wght' 500;
  max-width:23ch;
}
.value__statement .w{
  transition:color .55s var(--ease),opacity .55s var(--ease);
}
.value.is-progressive .value__statement .w{color:rgba(20,23,26,.17)}
.value.is-progressive .value__statement .w.is-lit{color:#14171A}
.value__statement .w.k{font-variation-settings:'wdth' 90,'wght' 700}

.value__aside{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:1fr;
  border-top:1px solid var(--border);
  padding-top:1.5rem;
}
@media (min-width:820px){
  .value__aside{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.value__note{max-width:38ch;color:var(--text-secondary);font-size:var(--t-base)}
.value__note strong{color:var(--text-primary);font-variation-settings:'wdth' 100,'wght' 600;font-weight:400}


/* =========================================================================
   03 — SUITES
   ========================================================================= */
.suites{background:var(--ink);padding-block:0}
.suites__intro{padding-block:clamp(4rem,8vw,7rem) clamp(2rem,4vw,3rem)}
.suites__lead{
  font-size:var(--t-lg);line-height:1.18;letter-spacing:-.02em;
  font-variation-settings:'wdth' 88,'wght' 400;
  max-width:22ch;
}
.suites__stage{position:relative;padding-bottom:clamp(3.25rem,5vw,5.5rem)}
@media (min-width:1000px){
  .suites__stage{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(2rem,4vw,5rem);align-items:start}
}
.suites__visual{
  position:sticky;top:74px;
  height:48vh;
  background:radial-gradient(ellipse 85% 75% at 68% 42%,var(--surface) 0%,var(--ink-deep) 78%);
  overflow:hidden;
  z-index:1;
  border-radius:var(--radius-medium);
}
@media (min-width:1000px){
  .suites__visual{
    order:2;height:min(80vh,780px);top:calc(50svh - min(40vh,390px));
  }
}
.suites__canvas{width:100%;height:100%}
.suites__cap{
  position:absolute;left:0;bottom:0;right:0;
  display:flex;justify-content:space-between;gap:1rem;
  padding:1.4rem 1.5rem;
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  font-variation-settings:'wdth' 116,'wght' 500;
  color:var(--text-tertiary);
  text-shadow:0 2px 16px rgba(7,8,10,.9),0 1px 4px rgba(7,8,10,.9);
}
.suites__cap b{color:var(--accent);font-weight:400}

.suites__list{order:1;padding-bottom:clamp(2rem,4vw,4rem)}
@media (min-width:1000px){
  .suites__list{padding-bottom:clamp(5rem,10vw,9rem)}
}
.suite{border-top:1px solid var(--border)}
@media (min-width:760px){
  .suite{min-height:34vh;display:flex;flex-direction:column;justify-content:center}
}
@media (min-width:1000px){
  .suite{min-height:54vh}
  .suite:last-child{min-height:42vh}
}
.suite:last-child{border-bottom:1px solid var(--border)}
.suite__btn{
  width:100%;display:flex;align-items:baseline;gap:clamp(.85rem,2vw,1.5rem);
  padding:clamp(1.35rem,2.6vw,2.1rem) 0;text-align:left;
}
.suite__idx{
  font-size:var(--t-xs);color:var(--text-tertiary);
  font-variation-settings:'wdth' 116,'wght' 500;letter-spacing:.1em;
  flex:none;transition:color .4s var(--ease);
}
.suite__name{
  font-size:clamp(1.85rem,5vw,3.5rem);
  line-height:1;letter-spacing:-.03em;
  font-variation-settings:'wdth' 84,'wght' 500;
  color:var(--text-tertiary);
  transition:color .5s var(--ease),font-variation-settings .5s var(--ease);
}
.suite.is-active .suite__name{color:var(--text-primary);font-variation-settings:'wdth' 84,'wght' 620}
.suite.is-active .suite__idx{color:var(--accent)}
.suite__btn:hover .suite__name{color:var(--text-secondary)}
.suite.is-active .suite__btn:hover .suite__name{color:var(--text-primary)}

.suite__body{overflow:hidden}
.js .suite__body{
  height:0;visibility:hidden;
  transition:height .6s var(--ease-io),visibility 0s linear .6s;
}
.js .suite.is-active .suite__body{visibility:visible;transition:height .6s var(--ease-io),visibility 0s linear 0s}
.suite__inner{padding:0 0 clamp(1.75rem,3vw,2.5rem) 0;max-width:46ch}
@media (min-width:640px){.suite__inner{padding-left:clamp(2.5rem,6vw,5.5rem)}}
.suite__copy{color:var(--text-secondary);font-size:var(--t-md);line-height:1.5}
.suite__copy + .suite__copy{margin-top:.6rem}
.suite__meta{
  display:flex;flex-wrap:wrap;gap:.5rem .5rem;margin-top:1.4rem;
}
.suite__meta li{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wdth' 116,'wght' 500;
  color:var(--text-tertiary);
  border:1px solid var(--border);
  padding:.42rem .7rem;border-radius:100px;
}
.suite__cta{margin-top:1.6rem}

/* =========================================================================
   04 — SPECIFICATION INDEX
   ========================================================================= */
.spec__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--spacing-md);align-items:flex-end}
.spec__title{
  font-size:var(--t-lg);line-height:1;letter-spacing:-.03em;
  font-variation-settings:'wdth' 84,'wght' 520;
  max-width:14ch;margin-top:1.25rem;
}
.spec__note{max-width:32ch;color:var(--text-secondary);font-size:var(--t-sm)}
.spec__grid{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;gap:0 clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr;
}
@media (min-width:760px){.spec__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spec__group{border-top:1px solid var(--border-strong);padding-top:.9rem;margin-top:2.25rem}
@media (min-width:760px){.spec__group{margin-top:0}}
.spec__gname{
  font-size:var(--t-sm);
  font-variation-settings:'wdth' 112,'wght' 600;
  margin-bottom:.35rem;
}
.spec__gnote{font-size:var(--t-xs);color:var(--text-tertiary);letter-spacing:.02em}
.spec__items{margin-top:1.25rem}
.spec__items li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--border);
  padding:.85rem 0;
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  font-variation-settings:'wdth' 92,'wght' 450;
  letter-spacing:-.012em;
}
.spec__items li span{
  font-size:var(--t-xs);color:var(--text-tertiary);
  font-variation-settings:'wdth' 116,'wght' 500;letter-spacing:.08em;
  font-feature-settings:"tnum" 1;
}

/* =========================================================================
   05 — ARCHITECTURE MAP
   ========================================================================= */
.map{background:var(--ink)}
.map__head{display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:space-between;align-items:flex-end}
.map__title{
  font-size:var(--t-lg);line-height:1.1;letter-spacing:-.025em;
  font-variation-settings:'wdth' 86,'wght' 500;max-width:20ch;
}
.map__legend{font-size:var(--t-sm);color:var(--text-secondary);max-width:30ch}
/* the stage is taller than the frame on purpose: the extra height is
   scroll distance the reader spends with the diagram pinned in view while
   it draws. See updateDrawables(), which reads progress from this wrapper
   rather than from the frame itself. */
.map__stage{
  position:relative;
  margin-top:clamp(2.5rem,5vw,4rem);
  min-height:130vh;
}
@media (min-width:760px){
  .map__stage{min-height:230vh}
}
.map__frame{
  position:sticky;
  top:98px;
  border:1px solid var(--border);border-radius:var(--radius-medium);
  background:var(--surface);
  padding:clamp(1rem,2.5vw,2rem);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.map__scrub{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wdth' 116,'wght' 500;
  color:var(--text-tertiary);
  margin-bottom:.9rem;
  opacity:0;transition:opacity .5s var(--ease);
}
.map__stage.is-drawing .map__scrub{opacity:1}
.map__stage.is-done .map__scrub{opacity:0}
@media (prefers-reduced-motion: reduce){
  .map__stage{min-height:0}
  .map__frame{position:static;top:auto}
  .map__scrub{display:none}
}
.map__svg{width:100%;min-width:680px;height:auto;display:block;--draw:0}
.map__svg .wire{
  fill:none;stroke:var(--border-strong);stroke-width:1;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw));
}
.map__svg .wire--live{stroke:var(--accent);opacity:.55}
.map__svg .node{fill:none;stroke:rgba(242,240,235,.5);stroke-width:1}
.map__svg .node--core{stroke:var(--accent)}
.map__svg .lbl{
  fill:#F2F0EB;font-size:13px;
  font-variation-settings:'wdth' 100,'wght' 500;
  opacity:clamp(0,calc((var(--draw) - .1) * 3),1);
  transition:opacity .3s linear;
}
.map__svg .lbl--dim{fill:#8A9096;font-size:10.5px;letter-spacing:.12em;font-variation-settings:'wdth' 118,'wght' 500}
.map__svg .lbl--out{fill:#DB7A43}
.map__svg .grp{opacity:clamp(0,calc((var(--draw) - .05) * 2.4),1)}

/* =========================================================================
   06 — CLIENT STORY
   ========================================================================= */
.story{background:var(--ink-deep);position:relative;overflow:hidden}
/* The label sits on its own hairline with the same diamond mark the signal
   field uses for its nodes — so it reads as part of the page's established
   vocabulary of micro-labels and rules, rather than a pill shape that
   appears nowhere else in the design. */
.story__kicker{
  display:inline-flex;align-items:center;gap:.7rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--border-strong);
  font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wdth' 118,'wght' 500;
  color:var(--text-secondary);
}
.story__mark{
  width:8px;height:8px;flex:none;
  border:1px solid var(--accent);
  transform:rotate(45deg);
}
.story__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:980px){.story__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:end}}
.story__quote{
  font-size:clamp(1.55rem,3.7vw,3.15rem);
  line-height:1.14;letter-spacing:-.028em;
  font-variation-settings:'wdth' 88,'wght' 300;
  max-width:20ch;margin-top:1.5rem;
  text-wrap:balance;
}
.story__quote em{font-style:normal;font-variation-settings:'wdth' 88,'wght' 620}
.story__by{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--border);padding-top:1rem;
  display:flex;gap:1.25rem;align-items:baseline;flex-wrap:wrap;
}
.story__by cite{font-style:normal;font-size:var(--t-base);font-variation-settings:'wdth' 104,'wght' 600}
.story__by span{font-size:var(--t-sm);color:var(--text-secondary)}
.story__vis{
  margin:0;
  border:1px solid var(--border);border-radius:var(--radius-medium);
  padding:clamp(.75rem,1.4vw,1.1rem);
  background:var(--surface);
}
.story__img{
  width:100%;height:auto;display:block;
  aspect-ratio:1179/1435;
  object-fit:cover;
  border-radius:calc(var(--radius-medium) - 2px);
}
/* on wide screens the portrait crops to a calmer ratio so it sits level
   with the quote rather than towering over it */
@media (min-width:980px){
  .story__img{aspect-ratio:4/5;object-position:50% 22%}
}
.story__caption{
  margin-top:.9rem;font-size:var(--t-xs);color:var(--text-tertiary);
  letter-spacing:.1em;text-transform:uppercase;font-variation-settings:'wdth' 116,'wght' 500;
  display:flex;justify-content:space-between;gap:1rem;
}

/* =========================================================================
   07 — NEWSLETTER
   ========================================================================= */
.sub{background:var(--bone);position:relative;overflow:hidden}
.sub__grid{position:relative;display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:900px){.sub__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}}
.sub__title{
  font-size:var(--t-xl);line-height:1;letter-spacing:-.032em;
  font-variation-settings:'wdth' 84,'wght' 560;max-width:11ch;
}
.sub__copy{color:var(--text-secondary);max-width:40ch;margin-top:1.25rem;font-size:var(--t-base)}
.sub__form{display:flex;flex-direction:column;gap:.6rem}
.sub__row{display:flex;align-items:flex-end;gap:1rem;border-bottom:1px solid var(--border-strong);padding-bottom:.6rem;transition:border-color .3s var(--ease)}
.sub__row:focus-within{border-color:#14171A}
.sub__field{flex:1;min-width:0}
.sub__field label{display:block;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary);font-variation-settings:'wdth' 116,'wght' 500;margin-bottom:.4rem}
.sub__field input{
  width:100%;border:0;background:transparent;padding:.2rem 0;
  font-family:inherit;font-size:clamp(1.05rem,2vw,1.3rem);
  font-variation-settings:'wdth' 96,'wght' 450;
  color:var(--text-primary);
}
.sub__field input::placeholder{color:rgba(20,23,26,.32)}
.sub__field input:focus{outline:none}
.sub__row:focus-within{outline:none}
.sub__submit{flex:none}
.sub__msg{font-size:var(--t-sm);min-height:1.4em;color:var(--text-secondary)}
.sub__msg[data-state="error"]{color:#8C2F1E}
.sub__msg[data-state="ok"]{color:#3D5A32}
.sub__fine{font-size:var(--t-xs);color:var(--text-tertiary);max-width:42ch}

/* =========================================================================
   Book Demo form — same underline-field language as the newsletter form,
   extended to a fuller field set. See inc/book-demo-form.php.
   ========================================================================= */
.demo-form-wrap{max-width:680px}
.demo-form__msg{
  font-size:var(--t-sm);
  padding:.85rem 1.1rem;
  border-radius:var(--radius-medium);
  margin-bottom:2rem;
}
.demo-form__msg[data-state="ok"]{color:#3D5A32;background:rgba(61,90,50,.08)}
.demo-form__msg[data-state="error"]{color:#8C2F1E;background:rgba(140,47,30,.08)}
.demo-form{display:flex;flex-direction:column;gap:1.6rem}
.demo-form__row{display:flex;flex-wrap:wrap;gap:1.5rem 2rem}
.demo-form__field{
  flex:1 1 220px;min-width:0;
  border-bottom:1px solid var(--border-strong);
  padding-bottom:.6rem;
  transition:border-color .3s var(--ease);
}
.demo-form__field:focus-within{border-color:#14171A}
.demo-form__field label{
  display:block;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-tertiary);
  font-variation-settings:'wdth' 116,'wght' 500;
  margin-bottom:.4rem;
}
.demo-form__field input,.demo-form__field textarea{
  display:block;width:100%;border:0;background:transparent;padding:.2rem 0;
  font-family:inherit;font-size:clamp(1rem,1.6vw,1.15rem);
  font-variation-settings:'wdth' 96,'wght' 450;
  color:var(--text-primary);
  resize:none;
}
.demo-form__field textarea{min-height:3.2rem}
.demo-form__field input::placeholder,.demo-form__field textarea::placeholder{color:rgba(20,23,26,.32)}
.demo-form__field input:focus,.demo-form__field textarea:focus{outline:none}
.demo-form__row--area .demo-form__field{flex-basis:100%}
.demo-form__actions{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-top:.5rem}
.demo-form__fine{font-size:var(--t-xs);color:var(--text-tertiary);max-width:46ch}

/* =========================================================================
   08 — CLOSE + FOOTER
   ========================================================================= */
.close{background:var(--ink);padding-block:clamp(5rem,11vw,9rem) clamp(3rem,6vw,4.5rem)}
.close__title{
  font-size:clamp(2.6rem,10.5vw,9rem);
  line-height:.88;letter-spacing:-.045em;
  font-variation-settings:'wdth' 78,'wght' 620;
}
.close__row{
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
  margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--border);padding-top:1.5rem;
}
.close__actions{display:flex;flex-wrap:wrap;gap:.85rem}
.close__aside{max-width:34ch;color:var(--text-secondary);font-size:var(--t-sm)}

.foot{background:var(--ink);padding-bottom:clamp(2rem,4vw,3rem)}
.foot__grid{
  display:grid;gap:2.5rem clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--border);padding-top:2.5rem;
}
@media (min-width:860px){.foot__grid{grid-template-columns:1.4fr repeat(3,minmax(0,1fr))}}
.foot__h{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);font-variation-settings:'wdth' 116,'wght' 500;margin-bottom:1rem}
.foot__list li+li{margin-top:.55rem}
.foot__list a{font-size:var(--t-sm);color:var(--text-secondary);transition:color .3s var(--ease)}
.foot__list a:hover{color:var(--text-primary)}
.foot__list span{font-size:var(--t-sm);color:var(--text-tertiary)}
.foot__blurb{color:var(--text-secondary);font-size:var(--t-sm);max-width:32ch;margin-top:1rem}
.foot__base{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--border);
  font-size:var(--t-xs);color:var(--text-tertiary);letter-spacing:.04em;
}

/* =========================================================================
   DEPTH — a handful of panels lift off the page and tilt toward the
   pointer, the way a physical panel catches light as you move around it.
   The perspective lives inside the transform value itself, as a
   perspective() function, rather than as a `perspective` property on an
   ancestor — that keeps it scoped to this one element, which matters
   because two of these panels (.suites__visual, .map__frame) are
   position:sticky, and a transformed *ancestor* would silently break
   their pinning. A transform on the sticky element itself does not.
   ========================================================================= */
.depth{
  --tilt-x:0deg; --tilt-y:0deg; --lift:0px; --pop:1;
  transform:
    perspective(1400px)
    rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateZ(var(--lift)) scale(var(--pop));
  transition:transform .7s var(--ease), box-shadow .7s var(--ease);
}
.depth.is-hot{transition:transform .12s linear, box-shadow .5s var(--ease)}
.depth.is-animating{will-change:transform}
.depth.is-in{
  box-shadow:
    0 36px 64px -30px rgba(0,0,0,.55),
    0 10px 20px -12px rgba(0,0,0,.45),
    0 0 0 1px rgba(242,240,235,.05);
}
[data-theme="bone"] .depth.is-in{
  box-shadow:
    0 32px 56px -28px rgba(20,23,26,.2),
    0 8px 16px -10px rgba(20,23,26,.12),
    0 0 0 1px rgba(20,23,26,.06);
}
/* the agent/suite visual: a deeper, warmer shadow so it reads as the one
   dramatic object breaking off the page, not just another lifted card */
.suites__visual.depth.is-in{
  box-shadow:
    0 60px 100px -34px rgba(0,0,0,.6),
    0 18px 40px -16px rgba(219,122,67,.22),
    0 0 0 1px rgba(242,240,235,.06);
}
[data-theme="bone"] .suites__visual.depth.is-in{
  box-shadow:
    0 60px 100px -34px rgba(20,23,26,.35),
    0 18px 40px -16px rgba(219,122,67,.22),
    0 0 0 1px rgba(20,23,26,.08);
}
@media (prefers-reduced-motion: reduce){
  .depth{transform:none !important;transition:none !important;box-shadow:none !important}
}

/* row-level pop: a lighter version of the same idea on interactive rows */
.suite__btn{transition:transform .35s var(--ease)}
.suite__btn:hover,.suite__btn:focus-visible{transform:translateY(-2px)}

.spec__items li{transition:transform .3s var(--ease),background-color .3s var(--ease)}
.spec__items li:hover{transform:translateY(-2px);background-color:rgba(20,23,26,.028)}
@media (prefers-reduced-motion: reduce){
  .suite__btn,.spec__items li{transition:none !important;transform:none !important}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.12s !important;
    scroll-behavior:auto !important;
  }
  .suite__body{transition:none}
  .map__svg{--draw:1 !important}
  .value.is-progressive .value__statement .w{color:#14171A}
  .hero__node{opacity:1}
}

/* =========================================================================
   WordPress content areas
   Editor output (the_content) doesn't carry the hand-tuned markup the rest
   of the design uses, so restore ordinary reading rhythm inside it.
   ========================================================================= */
.page-content,
.index-post__content{
  max-width:var(--measure);
}
.page-content > * + *,
.index-post__content > * + *{
  margin-top:var(--spacing-sm);
}
.page-content h1,.page-content h2,.page-content h3,
.index-post__content h1,.index-post__content h2,.index-post__content h3{
  font-variation-settings:'wdth' 100,'wght' 600;
  line-height:1.2;
}
.page-content p,.index-post__content p{
  color:var(--text-secondary);
}
.page-content a,.index-post__content a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:.2em;
}
.page-content ul,.page-content ol,
.index-post__content ul,.index-post__content ol{
  padding-left:1.25em;
  list-style:revert;
}
.page-content img,.index-post__content img{
  border-radius:var(--radius-medium);
}

.index-post{padding-block:var(--spacing-md)}
.index-post__title{font-size:var(--t-lg);font-variation-settings:'wdth' 100,'wght' 600}
.index-post__title a{color:inherit}
.index-post__title a:hover{color:var(--accent)}

.page-title{
  font-size:var(--t-xl);
  line-height:.98;
  letter-spacing:-.03em;
  font-variation-settings:'wdth' 90,'wght' 550;
  margin-bottom:var(--spacing-md);
}

/* =========================================================================
   Interior page intro band (Explore AI Agents and similar sub-pages)
   ========================================================================= */
.page-hero{padding-block:clamp(4rem,9vw,7.5rem)}
.page-hero__title{
  font-size:var(--t-xl);
  line-height:.98;
  letter-spacing:-.03em;
  font-variation-settings:'wdth' 90,'wght' 550;
  max-width:16ch;
  margin-top:1.25rem;
}
.page-hero__lede{
  margin-top:clamp(1.25rem,2.4vw,1.9rem);
  max-width:52ch;
  color:var(--text-secondary);
  font-size:var(--t-md);
}

/* =========================================================================
   Agent directory grid
   ========================================================================= */
.agents__grid{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.agent-card{
  background:var(--bone);
  padding:clamp(1.75rem,3vw,2.5rem);
  transition:background-color .35s var(--ease);
}
.agent-card:hover{background-color:rgba(20,23,26,.028)}
.agent-card__idx{
  display:block;
  font-size:var(--t-xs);color:var(--text-tertiary);
  font-variation-settings:'wdth' 116,'wght' 500;letter-spacing:.1em;
}
.agent-card__name{
  margin-top:.85rem;
  font-size:var(--t-md);
  font-variation-settings:'wdth' 100,'wght' 600;
  letter-spacing:-.01em;
}
.agent-card__copy{
  margin-top:.6rem;
  color:var(--text-secondary);
  font-size:var(--t-sm);
  max-width:38ch;
}

/* =========================================================================
   About-page content blocks (tag + lede + optional body paragraphs)
   ========================================================================= */
.about-block__lede{
  margin-top:1.25rem;
  font-size:var(--t-lg);
  line-height:1.15;
  letter-spacing:-.02em;
  font-variation-settings:'wdth' 90,'wght' 500;
  max-width:34ch;
}
.about-block__body{margin-top:clamp(1.75rem,3vw,2.5rem)}

/* =========================================================================
   WPForms — visual alignment with the design system
   (the Book Demo form is a real WPForms shortcode; only its chrome is
   restyled here, none of its validation/error markup is touched)
   ========================================================================= */
.wpforms-container{max-width:640px}
.wpforms-container .wpforms-field{padding:0;margin-bottom:1.5rem}
.wpforms-container .wpforms-field-label{
  display:block;
  font-size:var(--t-sm);
  font-variation-settings:'wdth' 108,'wght' 600;
  margin-bottom:.5rem;
  color:var(--text-primary);
}
.wpforms-container .wpforms-required-label{color:var(--accent)}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container input[type=url],
.wpforms-container textarea,
.wpforms-container select{
  width:100%;
  padding:.85rem 1rem;
  font-family:inherit;
  font-size:var(--t-base);
  color:var(--text-primary);
  background:transparent;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-medium);
  transition:border-color .3s var(--ease);
}
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus{
  outline:none;
  border-color:var(--accent);
}
.wpforms-container textarea{min-height:9rem;resize:vertical}
.wpforms-container .wpforms-field-row{display:flex;gap:1rem;flex-wrap:wrap}
.wpforms-container .wpforms-field-row .wpforms-field-row-block{flex:1 1 200px}
.wpforms-container .wpforms-submit-container{margin-top:.5rem}
.wpforms-container .wpforms-submit{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 1.6rem;
  font-size:var(--t-sm);
  font-variation-settings:'wdth' 104,'wght' 600;
  letter-spacing:.015em;
  border-radius:var(--radius-medium);
  background:var(--accent-strong);
  color:#0B0D0F;
  border:0;
  cursor:pointer;
  transition:background .35s var(--ease);
}
.wpforms-container .wpforms-submit:hover{background:#F0C9B2}
[data-theme="bone"] .wpforms-container .wpforms-submit{background:#14171A;color:var(--bone)}
[data-theme="bone"] .wpforms-container .wpforms-submit:hover{background:#2A2F35}

/* =========================================================================
   Product agent pages
   ========================================================================= */
.product-hero__statement{
  margin-top:1rem;
  font-size:var(--t-lg);
  line-height:1.15;
  letter-spacing:-.02em;
  font-variation-settings:'wdth' 90,'wght' 500;
  max-width:34ch;
  color:var(--text-secondary);
}
.tag.product-hero__built-for{margin-top:1.75rem}

.integrations__list{
  display:flex;flex-wrap:wrap;gap:.75rem;
  margin-top:1.5rem;
}
.integrations__item{
  display:inline-flex;align-items:center;
  padding:.55rem 1.1rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-medium);
  font-size:var(--t-sm);
  font-variation-settings:'wdth' 104,'wght' 550;
}