/* ============ Atelier design system (shared across subpages) ============ */
:root{
    --paper:#F6F3EC; --paper2:#EFEBE1;
    --ink:#1B1A17; --ink2:#46443D; --muted:#7A776D;
    --line:#DAD5C8;
    --accent:#B06A3C; --accent-soft:rgba(176,106,60,.1);
    --accent-dark:#C9824F; --accent-dark-h:#CE8854; --cta-body:#C9C5BA;
}
@supports (color: oklch(0.62 0.13 48)){
    :root{ --accent:oklch(0.62 0.13 48); --accent-soft:oklch(0.62 0.13 48 / .1);
            --accent-dark:oklch(0.72 0.13 48); --accent-dark-h:oklch(0.74 0.13 48); }
}
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--paper); color:var(--ink2); font:400 15px/1.55 "Inter",sans-serif;
      -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:var(--accent-soft); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }
.sec{ padding:96px 0; }
h1,h2,h3,h4{ font-family:"Playfair Display",serif; font-style:italic; font-weight:500; color:var(--ink); line-height:1.04; letter-spacing:-.02em; }
em,.it{ font-style:italic; }
.accent{ color:var(--accent); }
.eyebrow{ display:inline-flex; align-items:center; gap:13px; font:600 12px/1 "Inter",sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.eyebrow::before, .eyebrow::after{ content:""; width:24px; height:1px; background:currentColor; opacity:.5; flex:none; }
.label{ font:600 11px/1 "Inter",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.num{ font:400 13px/1 ui-monospace,monospace; letter-spacing:.05em; color:var(--accent); }

/* Buttons */
.btn{ font:500 14px/1 "Inter",sans-serif; padding:12px 22px; border-radius:999px; border:1px solid var(--ink);
      display:inline-flex; align-items:center; gap:8px; transition:.25s; cursor:pointer; }
.btn svg{ width:14px; height:14px; }
.btn-fill{ background:var(--ink); color:var(--paper); }
.btn-fill:hover{ background:var(--accent); border-color:var(--accent); }
.btn-line{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-line:hover{ border-color:var(--ink); }

/* Nav */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
      padding:20px 40px; background:rgba(246,243,236,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
      border-bottom:1px solid transparent; transition:border-color .3s; }
.nav.scrolled{ border-bottom-color:var(--line); }
.nav img{ height:42px; width:auto; filter:contrast(1.15) saturate(1.2) brightness(.96); }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font:400 14.5px/1 "Inter",sans-serif; color:var(--ink2); transition:color .2s; }
.nav-links a:hover{ color:var(--accent); }
.nav .btn-fill{ color:#fff; }
.nav .btn-fill:hover{ color:#fff; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:101; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); transition:.3s; }
.nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Page hero (subpages) */
.page-hero{ padding:150px 0 64px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero .eyebrow{ display:inline-flex; margin-bottom:18px; }
.page-hero h1{ font-size:clamp(40px,6.2vw,82px); max-width:18ch; letter-spacing:-.03em; }
.page-hero .lede{ font-size:19px; line-height:1.55; color:var(--ink2); max-width:600px; margin-top:24px; }
.page-hero .stat-callout{ display:inline-block; margin-top:26px; padding:10px 20px; border:1px solid var(--line);
      border-radius:999px; font:500 14px "Inter",sans-serif; color:var(--accent); background:var(--accent-soft); }

/* Generic intro */
.intro p{ font-size:18px; line-height:1.65; color:var(--ink2); margin-bottom:18px; }

/* Section heading */
.sec-title{ text-align:center; margin-bottom:54px; }
.sec-title h2{ font-size:clamp(30px,4.4vw,48px); }

/* Service cards (service pages) */
.cards-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.scard{ border:1px solid var(--line); border-radius:8px; padding:30px; background:var(--paper); transition:.25s; }
.scard:hover{ background:var(--paper2); border-color:var(--ink); }
.scard h3{ font-size:26px; margin-bottom:8px; }
.scard .d{ font-size:14.5px; color:var(--ink2); margin-bottom:16px; }
.scard ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.scard li{ font-size:14px; color:var(--ink2); padding-left:18px; position:relative; }
.scard li::before{ content:"-"; position:absolute; left:0; color:var(--accent); }

/* Benefit cards (3-up) */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.bcard{ border:1px solid var(--line); border-radius:6px; padding:26px; background:var(--paper); transition:.25s; }
.bcard:hover{ background:var(--paper2); border-color:var(--ink); }
.bcard h4{ font-size:23px; margin-bottom:8px; }
.bcard p{ font-size:14.5px; color:var(--ink2); }

/* Capabilities list */
.caps{ display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; }
.cap{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink2); }
.cap svg{ width:18px; height:18px; flex-shrink:0; margin-top:3px; color:var(--accent); }

/* Use-case cards */
.uc{ border:1px solid var(--line); border-radius:6px; padding:24px; background:var(--paper); transition:.25s; }
.uc:hover{ background:var(--paper2); border-color:var(--ink); }
.uc h4{ font-size:22px; margin-bottom:7px; }
.uc p{ font-size:14.5px; color:var(--ink2); }

/* Process steps */
.steps{ border-top:1px solid var(--line); }
.step{ display:grid; grid-template-columns:90px 1fr; gap:30px; padding:32px 0; border-bottom:1px solid var(--line); }
.step .num{ font-size:14px; }
.step h3{ font-size:27px; margin-bottom:9px; }
.step p{ font-size:16px; color:var(--ink2); max-width:620px; line-height:1.55; }

/* Testimonial */
.testimonial{ text-align:center; max-width:760px; margin:0 auto; }
.testimonial p.q{ font-family:"Playfair Display",serif; font-style:normal; font-size:26px; line-height:1.4; color:var(--ink); margin-bottom:18px; }
.testimonial .a{ font:600 13px "Inter",sans-serif; color:var(--accent); letter-spacing:.04em; }
.testimonial .r{ font-size:13px; color:var(--muted); margin-top:4px; }

/* FAQ accordion */
.faq{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-question{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; cursor:pointer;
               font-family:"Playfair Display",serif; font-size:21px; color:var(--ink); }
.faq-question svg{ flex-shrink:0; transition:transform .3s; color:var(--accent); }
.faq-item.open .faq-question svg{ transform:rotate(180deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s; color:var(--ink2); line-height:1.65; }
.faq-item.open .faq-answer{ max-height:340px; padding-bottom:22px; }

/* CTA band (dark) */
.cta-band{ background:var(--ink); color:var(--paper); border-radius:10px; padding:72px 56px; text-align:center; }
.cta-band .eyebrow{ color:var(--accent-dark); }
.cta-band h2{ color:var(--paper); font-size:clamp(30px,4.5vw,52px); margin:16px 0 14px; }
.cta-band h2 .accent{ color:var(--accent-dark); }
.cta-band p{ color:var(--cta-body); font-size:18px; max-width:540px; margin:0 auto 28px; line-height:1.55; }
.cta-band .btn-fill{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.cta-band .btn-fill:hover{ background:var(--accent-dark-h); border-color:var(--accent-dark-h); }

/* Footer */
footer{ border-top:1px solid var(--line); padding:64px 0 44px; margin-top:90px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
footer img{ height:52px; width:auto; margin-bottom:16px; filter:contrast(1.15) saturate(1.2) brightness(.96); }
.foot-grid p{ font-size:14px; color:var(--ink2); max-width:280px; line-height:1.55; }
.foot-h{ font:600 12px/1 "Inter",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.foot-col a{ display:block; font-size:14.5px; color:var(--ink2); margin-bottom:10px; transition:color .2s; }
.foot-col a:hover{ color:var(--accent); }
.foot-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
              border-top:1px solid var(--line); margin-top:46px; padding-top:24px; }
.foot-bottom, .foot-bottom a{ font-size:13px; color:var(--muted); }
.foot-bottom a:hover{ color:var(--accent); }
.foot-legal{ display:flex; gap:20px; }

/* Circuit background traces */
.circuit-layer{ position:absolute; top:0; left:0; width:100%; z-index:-1; pointer-events:none; overflow:hidden; filter:blur(2px); }
.circuit-layer svg{ display:block; width:100%; height:100%; }
.circuit-group{ transition:transform .3s ease-out; }
.circuit-trace{ fill:none; stroke:var(--accent); stroke-width:2.4; opacity:.26; stroke-linecap:round; }
.circuit-branch{ fill:none; stroke:var(--accent); stroke-width:1.8; opacity:.2; stroke-linecap:round; }
.circuit-node{ fill:var(--paper); stroke:var(--accent); stroke-width:1.3; opacity:.4; transition:opacity .5s ease, r .5s ease; }
.circuit-node.lit{ opacity:1; }
.circuit-pulse{ fill:var(--accent); opacity:0; }
.circuit-pulse.lit{ animation:cpulse 1.6s ease-out infinite; }
@keyframes cpulse{ 0%{ opacity:.5; r:4; } 100%{ opacity:0; r:16; } }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* Skip link */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; z-index:200; position:fixed; background:var(--ink); color:var(--paper);
             padding:10px 16px; border-radius:8px; font:500 14px "Inter",sans-serif; }

/* Responsive */
@media (max-width:920px){
    .wrap{ padding:0 22px; } .nav{ padding:18px 22px; }
    .nav-toggle{ display:flex; }
    .nav-links{ position:fixed; top:62px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
                background:rgba(246,243,236,.98); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
                border-bottom:1px solid var(--line); padding:8px 22px 18px;
                transform:translateY(-135%); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
    .nav.open .nav-links{ transform:translateY(0); }
    .nav-links a{ padding:15px 0; border-bottom:1px solid var(--line); }
    .nav-links a.btn{ margin-top:14px; justify-content:center; border-bottom:none; }
    .cards-2,.cards-3,.caps{ grid-template-columns:1fr 1fr; }
    .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:600px){
    .sec{ padding:64px 0; }
    .cards-2,.cards-3,.caps{ grid-template-columns:1fr; }
    .step{ grid-template-columns:1fr; gap:8px; }
    .cta-band{ padding:48px 26px; }
    .foot-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
}