@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,380..700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#16130f;
  --ink-soft:#5c554c;
  --ink-faint:#8a8175;
  --paper:#f7f3ec;
  --paper-strong:#ffffff;
  --signal:#b8481f;
  --signal-soft:#f3ded4;
  --line:#e2d9c9;
  --line-strong:#c9bfae;
  --radius:6px;
  --max:1180px;
  --gutter:32px;
  --font-display:'Fraunces', Georgia, serif;
  --font-sans:'Inter', -apple-system, system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--signal-soft);color:var(--ink);}

h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .45em;line-height:1.08;font-weight:600;letter-spacing:-0.01em;}
h1{font-size:clamp(2.6rem,5vw,4.4rem);font-weight:500;}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:500;}
h3{font-size:1.4rem;font-weight:600;}
h4{font-size:1.05rem;font-weight:600;font-family:var(--font-sans);}
p{margin:0 0 1em;color:var(--ink-soft);max-width:62ch;}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2;}
@media (max-width:640px){:root{--gutter:20px;}}

.eyebrow{display:block;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-bottom:16px;}
.eyebrow::before{content:"";display:inline-block;width:18px;height:1px;background:var(--signal);margin-right:10px;vertical-align:middle;}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:4px;font-weight:600;font-size:.92rem;border:1px solid transparent;transition:all .2s ease;cursor:pointer;letter-spacing:.01em;}
.btn-primary{background:var(--ink);color:var(--paper-strong);}
.btn-primary:hover{background:var(--signal);}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-outline:hover{border-color:var(--signal);color:var(--signal);}
.btn-light{background:var(--paper-strong);color:var(--ink);}
.btn-light:hover{background:var(--signal-soft);}
.btn-arrow{gap:6px;}
.btn-arrow::after{content:"\2192";transition:transform .2s ease;}
.btn-arrow:hover::after{transform:translateX(3px);}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(247,243,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;}
.logo{font-family:var(--font-display);font-size:1.3rem;font-weight:600;letter-spacing:-0.01em;}
.logo span{color:var(--signal);}
.nav-links{display:flex;align-items:center;gap:40px;font-weight:500;font-size:.92rem;}
.nav-links a{position:relative;padding:4px 0;color:var(--ink-soft);transition:color .2s ease;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--signal);transition:width .25s ease;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:20px;}
.menu-btn{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink);}
@media (max-width:860px){
  .nav-links{position:fixed;inset:69px 0 0 0;background:var(--paper-strong);flex-direction:column;align-items:flex-start;padding:40px var(--gutter);gap:26px;transform:translateY(-110%);transition:transform .3s ease;font-size:1.3rem;}
  .nav-links.open{transform:translateY(0);}
  .menu-btn{display:block;}
  .nav-cta .btn{display:none;}
}

/* ---------- hero ---------- */
.hero{padding:96px 0 100px;}
.hero-grid{display:grid;grid-template-columns:1fr .85fr;gap:64px;align-items:center;}
.hero h1{margin-bottom:.4em;}
.hero .lede{font-size:1.15rem;max-width:46ch;color:var(--ink-soft);}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.hero-meta{display:flex;gap:0;margin-top:56px;border-top:1px solid var(--line);padding-top:24px;}
.hero-meta div{flex:1;padding-right:20px;}
.hero-meta strong{display:block;font-family:var(--font-display);font-size:1.15rem;font-weight:500;margin-bottom:4px;}
.hero-meta span{font-size:.82rem;color:var(--ink-faint);}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;}.hero-meta{flex-wrap:wrap;gap:20px;}.hero-meta div{flex:1 1 45%;padding-right:0;}}
@media (max-width:480px){.hero-meta{flex-direction:column;gap:18px;}.hero-meta div{flex:1 1 auto;}}

/* ---------- agent network diagram ---------- */
.agent-network{position:relative;width:420px;height:420px;margin:0 auto;}
.agent-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:104px;height:104px;border-radius:50%;background:var(--ink);color:var(--paper-strong);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:.02em;z-index:3;box-shadow:0 0 0 8px var(--paper);}
.agent-line{position:absolute;top:50%;left:50%;width:158px;height:1px;background:var(--line-strong);transform-origin:0 0;z-index:1;}
.agent-line::after{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:0 0;animation:lineDraw 1.6s ease forwards;animation-delay:var(--d,0s);opacity:.55;}
@keyframes lineDraw{to{transform:scaleX(1);}}
.agent-node{position:absolute;top:50%;left:50%;width:112px;transform:rotate(var(--angle)) translate(158px) rotate(calc(-1 * var(--angle))) translate(-50%,-50%);text-align:center;z-index:2;}
.agent-node button{background:var(--paper-strong);border:1px solid var(--line);border-radius:20px;padding:9px 14px;font-size:.78rem;font-weight:600;color:var(--ink);cursor:pointer;width:100%;transition:all .2s ease;font-family:var(--font-sans);}
.agent-node button:hover,.agent-node button:focus-visible{border-color:var(--signal);color:var(--signal);outline:none;}
.node-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ink);color:var(--paper-strong);font-size:.76rem;font-weight:400;padding:9px 12px;border-radius:4px;width:170px;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:5;}
.agent-node button:hover + .node-tip,.agent-node button:focus-visible + .node-tip{opacity:1;transform:translateX(-50%) translateY(0);}
@media (max-width:940px){.agent-network{width:320px;height:320px;transform:scale(.85);margin:20px auto 0;}}
@media (max-width:480px){.agent-network{display:none;}}

/* ---------- section ---------- */
.section{padding:96px 0;position:relative;border-top:1px solid var(--line);}
.section:first-of-type{border-top:none;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head.wide{max-width:760px;}
.section-flex{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px;flex-wrap:wrap;}
.section-dark{background:var(--ink);color:var(--paper-strong);border-top:none;}
.section-dark p{color:#c9c2b6;}
.section-dark h2,.section-dark h3,.section-dark h4{color:var(--paper-strong);}
.section-dark .eyebrow{color:#e8a988;}

/* ---------- what we do: category rows ---------- */
.category-row{display:grid;grid-template-columns:56px 1.1fr 1.4fr;gap:32px;padding:32px 0;border-top:1px solid var(--line);align-items:flex-start;transition:background .2s ease;}
.category-row:last-child{border-bottom:1px solid var(--line);}
.category-row .idx{font-family:var(--font-display);font-size:1.1rem;color:var(--ink-faint);padding-top:4px;}
.category-row h3{margin-bottom:8px;}
.category-row .cat-link{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;margin-top:10px;color:var(--ink);}
.category-row:hover .cat-link{color:var(--signal);}
@media (max-width:760px){.category-row{grid-template-columns:1fr;gap:10px;padding:28px 0;}.category-row .idx{padding-top:0;}}

/* ---------- how it works ---------- */
.steps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);}
.step-cell{padding:32px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.step-cell .num{font-family:var(--font-display);font-size:1.3rem;color:var(--signal);margin-bottom:14px;}
.step-cell h4{font-size:.98rem;margin-bottom:8px;}
.step-cell p{font-size:.85rem;margin:0;}
@media (max-width:900px){.steps-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.steps-row{grid-template-columns:1fr;}}
.steps-row-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){.steps-row-3{grid-template-columns:1fr;}}

/* ---------- why grid ---------- */
.why-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.why-item{background:var(--ink);padding:32px;}
.why-item h4{font-size:1rem;margin-bottom:8px;}
.why-item p{font-size:.88rem;margin:0;}
@media (max-width:700px){.why-list{grid-template-columns:1fr;}}

/* ---------- decorative editorial graphics ---------- */
.deco-graphic{width:100%;height:auto;}
.deco-graphic .g-line{stroke:var(--line-strong);stroke-width:1;fill:none;}
.deco-graphic .g-accent{stroke:var(--signal);stroke-width:1.5;fill:none;}
.deco-graphic .g-dot{fill:var(--ink);}
.deco-graphic .g-dot-accent{fill:var(--signal);}
.deco-graphic .g-fill{fill:var(--paper-strong);stroke:var(--line-strong);stroke-width:1;}
.hero-side{display:flex;align-items:center;justify-content:center;}
@media (max-width:940px){.hero-side{margin-top:12px;max-width:420px;margin-left:auto;margin-right:auto;}}
@media (max-width:480px){.hero-side{display:none;}}

/* ---------- services page ---------- */
.service-block{padding:48px 0;border-top:1px solid var(--line);}
.service-block:last-child{border-bottom:1px solid var(--line);}
.service-block-head{display:grid;grid-template-columns:70px 1fr;gap:28px;align-items:baseline;margin-bottom:20px;}
.service-block-head .idx{font-family:var(--font-display);font-size:1.5rem;color:var(--ink-faint);}
.service-sub-grid{display:grid;grid-template-columns:70px repeat(auto-fit,minmax(180px,1fr));gap:28px;}
.service-sub{border-left:1px solid var(--line);padding-left:18px;}
.service-sub h4{font-size:.95rem;margin-bottom:6px;}
.service-sub p{font-size:.86rem;margin:0;}
@media (max-width:760px){.service-block-head{grid-template-columns:1fr;gap:8px;}.service-sub-grid{grid-template-columns:1fr;}.service-sub{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:14px;}.service-sub-grid > div:first-child{display:none;}}

/* ---------- blog editorial ---------- */
.featured{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--line);}
.featured .cat-date{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--signal);margin-bottom:14px;display:block;}
.featured .rule{width:100%;height:1px;background:var(--line);margin-bottom:20px;}
@media (max-width:800px){.featured{grid-template-columns:1fr;gap:24px;}}
.article-row{display:grid;grid-template-columns:110px 1fr;gap:28px;padding:30px 0;border-top:1px solid var(--line);align-items:baseline;}
.article-row:last-child{border-bottom:1px solid var(--line);}
.article-row .date{font-size:.8rem;color:var(--ink-faint);}
.article-row h4{font-size:1.15rem;margin-bottom:8px;font-family:var(--font-display);font-weight:500;}
.article-row .cat{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--signal);margin-right:12px;}
.article-row a.read{font-size:.85rem;font-weight:600;}
.article-row a.read:hover{color:var(--signal);}
@media (max-width:640px){.article-row{grid-template-columns:1fr;gap:6px;}}
.filters{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:18px;}
.filter-btn{background:none;border:none;padding:0;font-size:.84rem;font-weight:600;color:var(--ink-faint);cursor:pointer;transition:color .2s ease;}
.filter-btn.active,.filter-btn:hover{color:var(--signal);}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.field{margin-bottom:20px;}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:7px;letter-spacing:.01em;}
.field input,.field textarea,.field select{width:100%;padding:12px 0;border:none;border-bottom:1.5px solid var(--line);background:transparent;font-family:var(--font-sans);font-size:.98rem;color:var(--ink);transition:border-color .2s ease;border-radius:0;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--signal);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:520px){.two-col{grid-template-columns:1fr;}}
.contact-info{border-top:1px solid var(--line);padding-top:28px;}
.contact-info dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-top:20px;}
.contact-info dd{margin:4px 0 0;font-size:1.05rem;}
.contact-info dd a:hover{color:var(--signal);}
.contact-note{margin-top:28px;padding-top:28px;border-top:1px solid var(--line);font-size:.9rem;}
.form-status{margin-top:16px;font-size:.88rem;font-weight:600;}
.form-status.ok{color:#4b7a4f;}
.form-status.err{color:var(--signal);}

/* ---------- final cta ---------- */
.final-cta{padding:110px 0;text-align:left;}
.final-cta h2{font-size:clamp(2.2rem,5vw,3.6rem);max-width:16ch;}
.final-cta p{max-width:48ch;font-size:1.05rem;}
.final-cta-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--line);padding:26px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item h4{font-size:1.05rem;margin-bottom:10px;font-family:var(--font-display);font-weight:500;}
.faq-item p{margin:0;font-size:.92rem;}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:64px 0 30px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-bottom:48px;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;gap:32px;}}
.footer-grid h5{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;color:var(--ink-faint);}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:.92rem;color:var(--ink-soft);}
.footer-grid ul a:hover{color:var(--signal);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-faint);}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .55s ease, transform .55s ease;}
.reveal-stagger.in > *{opacity:1;transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.04s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.14s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.19s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.24s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.29s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.34s;}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important;transition:none !important;}
  .agent-line::after{animation:none !important;transform:scaleX(1);}
  html{scroll-behavior:auto;}
}

/* ---------- focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
