/* Allegro IT Redesign */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;padding:0}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
.ait-page{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:#1e293b;line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.ait-page *{margin:0;padding:0;box-sizing:border-box}
/* HEADER */
.ait-header{background:#0f172a;padding:0 2rem;position:sticky;top:0;z-index:1000;border-bottom:1px solid rgba(255,255,255,0.08)}
.admin-bar .ait-header{top:32px}
.ait-header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px}
.ait-header-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.ait-header-brand img{width:40px;height:auto;border-radius:6px}
.ait-header-brand span{font-weight:700;font-size:1.15rem;color:#fff}
.ait-header-nav{display:flex;align-items:center;gap:8px}
.ait-header-nav a{color:#94a3b8;text-decoration:none;font-size:0.9rem;font-weight:500;padding:8px 16px;border-radius:8px;transition:all 0.2s}
.ait-header-nav a:hover{color:#fff;background:rgba(255,255,255,0.06)}
.ait-header-cta{background:#2563eb!important;color:#fff!important;padding:8px 20px!important;border-radius:8px!important}
.ait-header-cta:hover{background:#1d4ed8!important}
.ait-mobile-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;width:32px;height:32px;padding:4px}
.ait-mobile-toggle svg{width:100%;height:100%}
/* LANGUAGE SWITCHER */
.ait-lang-switcher{display:flex;align-items:center;gap:4px}
.ait-lang-switcher ul{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.ait-lang-switcher li{margin:0;padding:0}
.ait-lang-switcher a{display:flex;align-items:center;padding:4px;border-radius:6px;opacity:0.5;transition:opacity 0.2s,box-shadow 0.2s}
.ait-lang-switcher a:hover{opacity:0.85}
.ait-lang-switcher a.current-lang{opacity:1;box-shadow:0 0 0 2px #2563eb;border-radius:4px}
.ait-lang-switcher img{width:22px;height:auto;border-radius:3px;display:block}
/* HERO */
.ait-hero{padding:80px 2rem 80px;background:linear-gradient(135deg,#0f172a 0%,#162044 50%,#1e293b 100%);position:relative;overflow:hidden}
.ait-hero:before{content:'';position:absolute;top:-50%;right:-20%;width:800px;height:800px;background:radial-gradient(circle,rgba(37,99,235,0.15) 0%,transparent 70%);border-radius:50%}
.ait-hero-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.ait-hero-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ait-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(37,99,235,0.15);border:1px solid rgba(37,99,235,0.3);color:#93bbfd;padding:6px 16px;border-radius:100px;font-size:0.8rem;font-weight:500;margin-bottom:24px}
.ait-badge .dot{width:6px;height:6px;border-radius:50%;background:#60a5fa;display:inline-block}
.ait-hero h1{font-size:3rem;font-weight:800;color:#fff;line-height:1.1;letter-spacing:-0.03em;max-width:700px;margin-bottom:20px}
.ait-hero h1 .accent{color:#60a5fa}
.ait-hero .subtitle{font-size:1.15rem;color:#94a3b8;max-width:540px;margin-bottom:36px;line-height:1.7}
.ait-hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:#2563eb;color:#fff!important;padding:14px 26px;border-radius:10px;text-decoration:none;font-weight:600;font-size:0.95rem;transition:all 0.2s;border:none;cursor:pointer}
.btn-primary:hover{background:#1d4ed8;transform:translateY(-1px)}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#cbd5e1!important;padding:14px 26px;border-radius:10px;text-decoration:none;font-weight:600;font-size:0.95rem;border:1px solid #475569;transition:all 0.2s;cursor:pointer}
.btn-secondary:hover{border-color:#94a3b8;color:#fff!important}
/* Stats row below both hero columns */
.ait-hero-stats-row{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.ait-hero-stats{display:flex;gap:48px;margin-top:56px;padding-top:36px;border-top:1px solid rgba(255,255,255,0.1)}
.ait-hero-stat .num{font-size:2rem;font-weight:800;color:#fff}
.ait-hero-stat .label{font-size:0.85rem;color:#94a3b8;margin-top:4px}
/* SERVICES */
.ait-services{padding:80px 2rem;background:#fff}
.ait-services-inner{max-width:1100px;margin:0 auto}
.ait-section-label{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#2563eb;margin-bottom:12px}
.ait-section-title{font-size:2.2rem;font-weight:800;color:#0f172a;letter-spacing:-0.02em;margin-bottom:16px;line-height:1.2}
.ait-section-subtitle{font-size:1.05rem;color:#64748b;max-width:560px;margin-bottom:48px;line-height:1.7}
.ait-services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.ait-service-icon.amber{background:rgba(245,158,11,0.1)}
.ait-service-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:32px;transition:all 0.3s}
.ait-service-card:hover{background:#fff;border-color:#2563eb;box-shadow:0 10px 15px -3px rgba(0,0,0,0.08);transform:translateY(-4px)}
.ait-service-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.ait-service-icon.blue{background:#dbeafe}
.ait-service-icon.green{background:#dcfce7}
.ait-service-icon.purple{background:#f3e8ff}
.ait-service-icon svg{width:24px;height:24px}
.ait-service-card h3{font-size:1.15rem;font-weight:700;color:#0f172a;margin-bottom:12px}
.ait-service-card p{font-size:0.95rem;color:#64748b;line-height:1.7;margin-bottom:20px}
.ait-service-link{display:inline-flex;align-items:center;gap:6px;color:#2563eb!important;font-weight:600;font-size:0.9rem;text-decoration:none;transition:gap 0.2s}
.ait-service-link:hover{gap:10px}
/* APPROACH */
.ait-approach{padding:80px 2rem;background:#f8fafc;scroll-margin-top:100px}
.ait-approach+.ait-approach{border-top:1px solid #e2e8f0}
.ait-approach-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ait-approach-alt .ait-approach-inner{grid-template-columns:1fr 1fr}
.ait-approach-alt .ait-approach-photo{order:2}
.ait-approach-alt .ait-approach-content{order:1}
.ait-photo-frame{width:100%;aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:#f1f5f9;border:1px solid rgba(15,23,42,0.08)}
.ait-photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.ait-approach-photo,.ait-hero-photo{position:relative}
/* All photo blocks: card vertical-centre sits on the image's bottom edge.
   Default approach (photo left) → card on left side.
   Alt approach + hero (photo right) → card on right side.
   right/left:0 puts the card edge flush with where the 16px curve starts. */
/* Card inset by 16px — the photo frame's border-radius — so the card edge
   lands exactly where the corner curve begins, not at the flat edge.
   Default approach (photo left) → card on left. Alt + hero → card on right. */
.ait-approach-photo .ait-floating-card{bottom:0;transform:translateY(50%);left:16px;right:auto}
.ait-approach-alt .ait-approach-photo .ait-floating-card{right:16px;left:auto}
.ait-hero-photo .ait-floating-card{right:16px;bottom:0;transform:translateY(50%)}
.ait-icon-frame{width:100%;aspect-ratio:1/1;border-radius:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ait-icon-frame:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.4) 0%,transparent 60%)}
.ait-icon-frame svg{width:35%;height:35%;position:relative;z-index:1}
.ait-icon-frame.green{background:linear-gradient(135deg,#86efac 0%,#16a34a 100%);color:#fff}
.ait-icon-frame.purple{background:linear-gradient(135deg,#c084fc 0%,#9333ea 100%);color:#fff}
.ait-icon-frame.amber{background:linear-gradient(135deg,#fcd34d 0%,#f59e0b 100%);color:#fff}
.ait-floating-card{position:absolute;bottom:-16px;right:-16px;background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.08);display:flex;align-items:center;gap:14px;z-index:2}
.ait-floating-card .fc-icon{width:40px;height:40px;border-radius:10px;background:#dbeafe;display:flex;align-items:center;justify-content:center}
.ait-floating-card .fc-icon.green{background:#dcfce7}
.ait-floating-card .fc-icon.purple{background:#f3e8ff}
.ait-floating-card .fc-icon.amber{background:#fef3c7}
.ait-floating-card .fc-num{font-size:1.3rem;font-weight:800;color:#0f172a}
.ait-floating-card .fc-label{font-size:0.8rem;color:#64748b}
a.fc-icon,a.fc-num{text-decoration:none;color:inherit;transition:background 0.2s ease,color 0.2s ease}
a.fc-icon:hover{background:#bfdbfe}
a.fc-num:hover{color:#2563eb}
.ait-section-label a{color:inherit;text-decoration:none;transition:color 0.2s ease}
.ait-section-label a:hover{color:#1d4ed8;text-decoration:underline}
.ait-approach-content .ait-section-title{max-width:440px}
.ait-approach-content>p{font-size:1rem;color:#475569;line-height:1.8;margin-bottom:28px}
.ait-benefits-list{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.ait-benefit-item{display:flex;align-items:flex-start;gap:12px}
.ait-benefit-check{width:24px;height:24px;border-radius:6px;background:#dcfce7;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center}
.ait-benefit-check svg{width:14px;height:14px;color:#16a34a}
.ait-benefit-item span{font-size:0.95rem;color:#334155;font-weight:500}
/* FEATURE GRID — reusable card grid embedded inside service-page prose. A div grid (not a markdown sibling) so it escapes the `.ait-single-content-inner > p` card-chain wrapper, and we neutralise the inner-content heading ::before side-bar on card titles. Icon tint is driven by `currentColor` so each colour modifier sets one property and both the svg stroke and the background follow. Used on the AI service page (4 cards) and the project management page (5 cards) — same markup, different counts auto-flow via the `auto-fit` grid. */
.ait-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin:36px 0}
.ait-feature-card{position:relative;padding:28px 28px 26px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,0.04);transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden}
.ait-feature-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2563eb 0%,#60a5fa 100%);opacity:0;transition:opacity .2s}
.ait-feature-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -14px rgba(37,99,235,0.22),0 1px 3px rgba(15,23,42,0.04);border-color:#bfdbfe}
.ait-feature-card:hover::before{opacity:1}
.ait-feature-card__icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:currentColor}
.ait-feature-card__icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ait-feature-card__icon.blue{color:#2563eb}
.ait-feature-card__icon.green{color:#16a34a}
.ait-feature-card__icon.purple{color:#9333ea}
.ait-feature-card__icon.amber{color:#d97706}
.ait-feature-card__icon.rose{color:#e11d48}
.ait-single-content-inner .ait-feature-card :is(h1,h2,h3,h4,h5,h6){font-size:1.1rem;font-weight:700;color:#0f172a;padding:0;margin:0 0 10px;line-height:1.35}
.ait-single-content-inner .ait-feature-card :is(h1,h2,h3,h4,h5,h6)::before{display:none}
.ait-feature-card p{font-size:0.95rem;color:#64748b;line-height:1.7;margin:0}
/* VISUAL CARD CHROME — shared by .ait-pyramid-card (impact funnel on PM page), .ait-process-card (step-by-step modernisation on legacy page) and .ait-stack-card (infra stack on hosting page). Blue gradient background, 3px top accent stripe, soft radial glow in the top-right corner, and uppercase eyebrow-style headings instead of the default sidebar h2. Using a compound selector so each new visual card component only needs to contribute its own inner layout rules. */
.ait-pyramid-card,.ait-process-card,.ait-stack-card{position:relative;margin:36px 0;padding:32px 32px 28px;background:linear-gradient(135deg,#f0f9ff 0%,#eff6ff 50%,#eef2ff 100%);border:1px solid #dbeafe;border-radius:16px;box-shadow:0 14px 32px -14px rgba(37,99,235,0.22),0 1px 3px rgba(15,23,42,0.04);overflow:hidden}
.ait-pyramid-card::before,.ait-process-card::before,.ait-stack-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2563eb 0%,#60a5fa 100%)}
.ait-pyramid-card::after,.ait-process-card::after,.ait-stack-card::after{content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(37,99,235,0.14) 0%,transparent 70%);pointer-events:none}
.ait-single-content-inner :is(.ait-pyramid-card,.ait-process-card,.ait-stack-card) :is(h1,h2,h3,h4,h5,h6){position:relative;font-size:0.82rem;font-weight:700;color:#2563eb;text-transform:uppercase;letter-spacing:0.1em;margin:0 0 22px;padding:0;line-height:1.3}
.ait-single-content-inner :is(.ait-pyramid-card,.ait-process-card,.ait-stack-card) :is(h1,h2,h3,h4,h5,h6)::before{display:none}
/* IMPACT FUNNEL — PM page ("Fordelene ved vores tilgang"). 4 input benefits converge via T-connector (each foundation drops 14px to a horizontal bus spanning F1→F4 centres, then one vertical drop to the apex) into a solid-blue outcome card. Horizontal bus uses calc((100% - 36px)/8) to account for 3×12px grid gaps shifting outer centres inward — simple 12.5% would overshoot. */
.ait-pyramid{position:relative}
.ait-pyramid__foundation-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative;margin-bottom:14px}
.ait-pyramid__foundation-row::after{content:"";position:absolute;bottom:-14px;left:calc((100% - 36px)/8);right:calc((100% - 36px)/8);height:1px;background:rgba(37,99,235,0.35);pointer-events:none}
.ait-pyramid__foundation{position:relative;padding:16px 12px;background:#fff;border:1px solid rgba(37,99,235,0.12);border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.ait-pyramid__foundation::before{content:"";position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);width:1px;height:14px;background:rgba(37,99,235,0.35);pointer-events:none}
.ait-pyramid__foundation:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(37,99,235,0.22);border-color:rgba(37,99,235,0.32)}
.ait-pyramid__foundation-icon{width:36px;height:36px;border-radius:9px;background:#dbeafe;color:#2563eb;display:flex;align-items:center;justify-content:center}
.ait-pyramid__foundation-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ait-pyramid__foundation-label{font-size:0.78rem;font-weight:600;color:#0f172a;line-height:1.35}
.ait-pyramid__bus{position:relative;height:20px}
.ait-pyramid__bus::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:20px;background:rgba(37,99,235,0.35);pointer-events:none}
.ait-pyramid__apex{position:relative;max-width:340px;margin:0 auto;padding:18px 28px 16px;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;border-radius:12px;box-shadow:0 16px 32px -14px rgba(37,99,235,0.5);text-align:center}
.ait-pyramid__apex::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #1d4ed8}
.ait-pyramid__apex-label{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;opacity:0.85;margin-bottom:4px}
.ait-pyramid__apex-value{font-size:1.05rem;font-weight:700;line-height:1.3}
/* PROCESS STEPS — legacy code page ("Sådan moderniserer vi" / "How we modernise"). Four numbered circles connected by a horizontal line that runs through the midpoint of each circle. The connector is an absolutely-positioned ::before on the grid container at top:22px (center of 44px circles), spanning only F1→F4 centres via calc((100% - 48px)/8) — same math as the pyramid bus but with 16px gaps × 3. Each step sits over the line with z-index:1 and the number circle uses a 6px white box-shadow halo to "punch out" of the line visually. */
.ait-process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.ait-process-steps::before{content:"";position:absolute;top:22px;left:calc((100% - 48px)/8);right:calc((100% - 48px)/8);height:2px;background:rgba(37,99,235,0.35);pointer-events:none;z-index:0}
.ait-process-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:0 4px}
.ait-process-step__number{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:700;box-shadow:0 8px 16px -6px rgba(37,99,235,0.45),0 0 0 6px #eff6ff;flex-shrink:0}
.ait-process-step__title{font-size:0.98rem;font-weight:700;color:#0f172a;line-height:1.3;margin-top:2px}
.ait-process-step p{font-size:0.85rem;color:#64748b;line-height:1.55;margin:0}
/* INFRASTRUCTURE STACK — hosting page ("Vores infrastruktur-stack"). Four horizontal pill rows stacked vertically — application on top, hardware foundation at the bottom. The last layer (Hetzner VPS) inverts to a solid blue gradient to read as the "ground" the rest sits on — mirrors the impact funnel's solid-blue apex so the three visual cards share a family resemblance. Thin connector lines between layers hint at the stack sitting ON each other layer. */
.ait-stack{display:flex;flex-direction:column;gap:10px;max-width:560px;margin:0 auto;position:relative}
.ait-stack__layer{position:relative;display:flex;align-items:center;gap:14px;padding:16px 20px;background:#fff;border:1px solid rgba(37,99,235,0.12);border-radius:10px;transition:transform .2s,box-shadow .2s}
.ait-stack__layer:hover{transform:translateX(4px);box-shadow:0 10px 22px -8px rgba(37,99,235,0.22)}
.ait-stack__layer:not(:last-child)::after{content:"";position:absolute;left:40px;bottom:-10px;width:1px;height:10px;background:rgba(37,99,235,0.35);pointer-events:none}
.ait-stack__layer:last-child{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;border-color:transparent;box-shadow:0 16px 32px -14px rgba(37,99,235,0.5)}
.ait-stack__icon{width:40px;height:40px;border-radius:10px;background:#dbeafe;color:#2563eb;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ait-stack__layer:last-child .ait-stack__icon{background:rgba(255,255,255,0.18);color:#fff}
.ait-stack__icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ait-stack__text{flex:1;min-width:0}
.ait-stack__title{font-size:1rem;font-weight:700;color:#0f172a;line-height:1.35}
.ait-stack__layer:last-child .ait-stack__title{color:#fff}
.ait-stack__sub{font-size:0.85rem;color:#64748b;line-height:1.5;margin-top:2px}
.ait-stack__layer:last-child .ait-stack__sub{color:rgba(255,255,255,0.85)}
.ait-approach-link{display:inline-flex;align-items:center;gap:8px;color:#2563eb;font-weight:600;text-decoration:none;font-size:0.95rem;transition:gap 0.2s}
.ait-approach-link:hover{gap:12px}
/* POSTS STRIP (front page) */
.ait-posts-strip{padding:80px 2rem;background:#f8fafc;border-top:1px solid #e2e8f0}
.ait-posts-strip-inner{max-width:1100px;margin:0 auto}
.ait-posts-strip-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:16px}
.ait-posts-strip-header .ait-section-title{margin-bottom:0}
.ait-posts-strip-all{color:#2563eb;font-weight:600;font-size:0.9rem;text-decoration:none;white-space:nowrap;flex-shrink:0}
.ait-posts-strip-all:hover{text-decoration:underline}
.ait-posts-track{display:flex;flex-wrap:nowrap;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#e2e8f0 transparent}
.ait-posts-track::-webkit-scrollbar{height:4px}
.ait-posts-track::-webkit-scrollbar-track{background:transparent}
.ait-posts-track::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}
.ait-posts-track .ait-archive-card{flex:0 0 257px;scroll-snap-align:start}
.ait-posts-track .ait-archive-thumb{aspect-ratio:16/9}
.ait-posts-track .ait-archive-card-body{padding:16px 20px 20px}
.ait-posts-track .ait-archive-card-body h3{font-size:1rem}
.ait-posts-track .ait-archive-card-body p{font-size:0.85rem;margin-bottom:10px}
.ait-strip-cat{display:block;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:#2563eb;margin-bottom:6px}
/* TECH */
.ait-tech{padding:64px 2rem;background:#fff;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}
.ait-tech-inner{max-width:1100px;margin:0 auto;text-align:center}
.ait-tech-inner h2{font-size:1.4rem;font-weight:700;color:#0f172a;margin-bottom:40px}
.ait-tech-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ait-tech-tag{padding:10px 20px;border-radius:100px;background:#f8fafc;border:1px solid #e2e8f0;font-size:0.85rem;font-weight:500;color:#475569;transition:all 0.2s}
.ait-tech-tag:hover{border-color:#2563eb;color:#2563eb;background:#dbeafe}
/* CTA */
.ait-cta{padding:80px 2rem;background:linear-gradient(135deg,#0f172a 0%,#162044 100%);text-align:center}
.ait-cta-inner{max-width:640px;margin:0 auto}
.ait-cta h2{font-size:2.2rem;font-weight:800;color:#fff;letter-spacing:-0.02em;margin-bottom:16px}
.ait-cta p{font-size:1.05rem;color:#94a3b8;margin-bottom:36px;line-height:1.7}
/* FOOTER */
.ait-footer{background:#0f172a;padding:48px 2rem 24px;border-top:1px solid rgba(255,255,255,0.05)}
.ait-footer-inner{max-width:1100px;margin:0 auto}
.ait-footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,0.08)}
.ait-footer-brand{display:flex;flex-direction:column;gap:12px}
.ait-footer-brand .logo-row{display:flex;align-items:center;gap:12px}
.ait-footer-brand .logo-row img{width:36px;height:auto}
.ait-footer-brand .logo-row span{font-weight:700;font-size:1.1rem;color:#fff}
.ait-footer-brand p{font-size:0.9rem;color:#94a3b8;line-height:1.7;max-width:300px}
.ait-footer-col h4{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin-bottom:16px}
.ait-footer-col a{display:block;text-decoration:none;color:#64748b!important;font-size:0.9rem;margin-bottom:10px;transition:color 0.2s}
.ait-footer-col a:hover{color:#fff!important}
.ait-footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px}
.ait-footer-bottom p{font-size:0.8rem;color:#475569}
.ait-footer-bottom a{color:#64748b!important;text-decoration:none}
.ait-footer-bottom a:hover{color:#fff!important}
/* ARCHIVE */
.ait-archive-hero{padding:60px 2rem 40px;background:linear-gradient(135deg,#0f172a 0%,#162044 50%,#1e293b 100%);text-align:center}
.ait-archive-hero-inner{max-width:1100px;margin:0 auto}
.ait-archive-title{font-size:2.2rem;font-weight:800;color:#fff;letter-spacing:-0.02em;margin-top:8px}
.ait-archive{padding:0 2rem 80px;background:#f8fafc}
.ait-archive-inner{max-width:1100px;margin:0 auto}
/* Category filter bar */
.ait-archive-filters{display:flex;flex-wrap:wrap;gap:8px;padding:32px 0 40px;border-bottom:1px solid #e2e8f0;margin-bottom:40px}
.ait-filter-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:100px;background:#fff;border:1px solid #e2e8f0;color:#475569;font-size:0.85rem;font-weight:500;text-decoration:none;transition:all 0.2s;cursor:pointer}
.ait-filter-btn:hover{border-color:#2563eb;color:#2563eb;background:#eff6ff}
.ait-filter-btn.active{background:#2563eb;color:#fff;border-color:#2563eb}
.ait-filter-count{font-size:0.75rem;background:rgba(0,0,0,0.08);padding:1px 7px;border-radius:100px}
.ait-filter-btn.active .ait-filter-count{background:rgba(255,255,255,0.2)}
/* Post cards */
.ait-archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.ait-archive-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:all 0.3s}
.ait-archive-card:hover{border-color:#2563eb;box-shadow:0 10px 15px -3px rgba(0,0,0,0.08);transform:translateY(-3px)}
.ait-archive-thumb{aspect-ratio:16/10;overflow:hidden;background:#e2e8f0}
.ait-archive-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
.ait-archive-card:hover .ait-archive-thumb img{transform:scale(1.03)}
.ait-archive-card-body{padding:20px 24px 24px;flex:1;display:flex;flex-direction:column}
.ait-archive-card-body h3{font-size:1.05rem;font-weight:700;color:#0f172a;margin-bottom:8px;line-height:1.4}
.ait-archive-card-body p{font-size:0.9rem;color:#64748b;line-height:1.6;flex:1;margin-bottom:12px}
.ait-archive-meta{font-size:0.8rem;color:#94a3b8;display:flex;align-items:center;gap:6px}
.ait-archive-empty{text-align:center;color:#64748b;padding:60px 0}
/* Pagination */
.ait-pagination{padding-top:40px;text-align:center}
.ait-pagination .nav-links{display:flex;justify-content:center;gap:8px}
.ait-pagination .page-numbers{padding:8px 16px;border-radius:8px;background:#fff;border:1px solid #e2e8f0;color:#475569;font-size:0.9rem;text-decoration:none;transition:all 0.2s}
.ait-pagination .page-numbers:hover,.ait-pagination .page-numbers.current{background:#2563eb;color:#fff;border-color:#2563eb}
@media(max-width:768px){
.ait-archive-grid{grid-template-columns:1fr}
.ait-archive-filters{gap:6px}
.ait-filter-btn{padding:6px 14px;font-size:0.8rem}
.ait-archive-title{font-size:1.6rem}
}
/* SINGLE POST / PAGE */
/* Legacy dark hero — still used by 404.php + contact.php */
.ait-single-hero{padding:60px 2rem 40px;background:linear-gradient(135deg,#0f172a 0%,#162044 50%,#1e293b 100%);text-align:center}
.ait-single-hero-inner{max-width:800px;margin:0 auto}
.ait-single-title{font-size:2.2rem;font-weight:800;color:#fff;letter-spacing:-0.02em;margin-top:8px;line-height:1.25}
/* New two-column hero card used by page.php + post.php */
.ait-single-hero-card{padding:72px 2rem 56px;background:linear-gradient(180deg,#f8fafc 0%,#fff 100%)}
.ait-single-hero-card-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ait-single-hero-photo{position:relative}
.ait-single-hero-photo .ait-floating-card{left:16px;right:auto;bottom:0;transform:translateY(50%)}
.ait-single-hero-photo .ait-photo-frame,.ait-hero-photo .ait-photo-frame{box-shadow:0 20px 40px -12px rgba(15,23,42,0.18)}
.ait-single-hero-content{display:flex;flex-direction:column;gap:14px}
.ait-single-hero-content.is-wide{grid-column:1/-1;max-width:720px;margin:0 auto;text-align:center;align-items:center}
.ait-single-hero-card .ait-single-title{font-size:2.4rem;font-weight:800;color:#0f172a;letter-spacing:-0.02em;line-height:1.2;margin:0}
.ait-single-hero-content .ait-section-label{margin:0}
.ait-single-back{display:inline-flex;align-items:center;color:#2563eb;text-decoration:none;font-weight:600;font-size:0.9rem;transition:gap 0.2s,color 0.2s;width:fit-content;margin-bottom:4px}
.ait-single-back:hover{color:#1d4ed8}
.ait-single-excerpt{font-size:1.05rem;color:#64748b;line-height:1.7;margin:6px 0 0;max-width:560px}
/* POST SHARE BAR — privacy-safe share buttons at the end of every post.
   LinkedIn + Email are plain <a href> intent URLs; Copy link is a button
   wired up in layout.php. Sits at the same 800px column width as the
   article content so it reads as end-of-article furniture rather than
   its own section. Label sits above the buttons as an eyebrow, buttons
   centered as the focal point. Green tint on successful copy, matching
   the check colour used by the benefits list on service pages.
   The `:has()` rule tightens the content's bottom padding *only when*
   a share bar follows — keeps service pages (no share bar) at their
   normal 72px bottom spacing. No border-top: the share bar gets its
   visual boundary from the gray contact-cta background below it. */
.ait-single-content:has(+ .ait-post-share){padding-bottom:32px}
.ait-post-share{padding:0 2rem 56px;background:#fff}
.ait-post-share-inner{max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.ait-post-share-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ait-post-share-label{font-size:0.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.1em}
.ait-post-share a,.ait-post-share button{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;color:#334155;font-size:0.9rem;font-weight:500;font-family:inherit;line-height:1;text-decoration:none;cursor:pointer;transition:border-color 0.2s,color 0.2s,background 0.2s}
.ait-post-share a:hover,.ait-post-share button:hover{border-color:#2563eb;color:#2563eb;background:#f1f5f9}
.ait-post-share svg{width:16px;height:16px;flex-shrink:0}
.ait-post-share .ait-copy-link.is-copied{border-color:#16a34a;color:#16a34a;background:#f0fdf4}
.ait-post-share .ait-copy-link.is-copied:hover{border-color:#16a34a;color:#16a34a;background:#f0fdf4}

.ait-single-content{padding:56px 2rem 72px;background:#fff}
.ait-single-content-inner{max-width:800px;margin:0 auto;font-size:1.05rem;line-height:1.85;color:#334155}
/* Content headings (h1-h6) — card-aligned padding, brand-blue accent bar.
   Per-level font-size preserves the visual hierarchy.
   Accent bar height 1.1em auto-scales with each heading level. */
.ait-single-content-inner :is(h1,h2,h3,h4,h5,h6){position:relative;font-weight:700;color:#0f172a;line-height:1.3;padding:0 32px;margin:40px 0 16px}
.ait-single-content-inner :is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}
/* Accent bar sits at the midpoint of the heading's left padding — i.e. the
   middle of the gap between the card's left edge and the first letter of
   the heading text. 32px padding → bar center at 16px → left:14px for a
   4px-wide bar. Mobile uses 22px padding → left:9px (bar center at 11px). */
.ait-single-content-inner :is(h1,h2,h3,h4,h5,h6)::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:4px;height:1.1em;border-radius:2px;background:#2563eb}
/* Per-level font-size and tighter margins for lower levels */
.ait-single-content-inner h1{font-size:2em}
.ait-single-content-inner h2{font-size:1.6em}
.ait-single-content-inner h3{font-size:1.25em;margin:28px 0 12px}
.ait-single-content-inner h4{font-size:1.1em;margin:24px 0 10px}
.ait-single-content-inner h5{font-size:1em;margin:20px 0 8px}
.ait-single-content-inner h6{font-size:0.95em;margin:18px 0 8px}
.ait-single-content-inner p{margin-bottom:18px}
/* Unified "card-style" content boxes — paragraphs and lists in default
   posts, pages, and the contact page. The ">" direct-child selector
   targets only top-level content blocks. Contiguous blocks share flat
   seams via :has(+ ...) + adjacent sibling, same pattern as the rows
   post style. We deliberately do NOT nest :has() inside :has() (e.g.
   :has(+ p:not(:has(img)))) because the CSS spec forbids it and
   browsers silently drop the whole selector. :is(p, ul, ol) is safe
   because :is() contains no :has(). */
.ait-single-content-inner > p,
.ait-single-content-inner > ul,
.ait-single-content-inner > ol{padding:22px 32px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;margin:0 0 18px}
/* Lists: extra left padding so bullet/number markers sit inside the card */
.ait-single-content-inner > ul,
.ait-single-content-inner > ol{padding-left:56px}
.ait-single-content-inner > ul li:last-child,
.ait-single-content-inner > ol li:last-child{margin-bottom:0}
/* Contiguous boxes share flat seams */
.ait-single-content-inner > :is(p, ul, ol):has(+ :is(p, ul, ol)){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.ait-single-content-inner > :is(p, ul, ol) + :is(p, ul, ol){border-top:none;border-top-left-radius:0;border-top-right-radius:0}
.ait-single-content-inner a{color:#2563eb;text-decoration:underline;text-underline-offset:2px}
.ait-single-content-inner a:hover{color:#1d4ed8}
.ait-single-content-inner img{max-width:100%;height:auto;border-radius:8px;margin:20px 0}
.ait-single-content-inner ul,.ait-single-content-inner ol{margin:0 0 18px 24px}
/* Direct-child lists are cards — reset the legacy 24px left margin so the
   card's own padding controls indentation. Nested lists keep the margin. */
.ait-single-content-inner > ul,
.ait-single-content-inner > ol{margin-left:0}
.ait-single-content-inner li{margin-bottom:8px}
.ait-single-content-inner blockquote{border-left:4px solid #2563eb;padding:16px 24px;margin:24px 0;background:#f8fafc;border-radius:0 8px 8px 0;color:#475569;font-style:italic}
/* Markdown tables inside post/page content. Matches the card pattern used
   for paragraphs and lists (#f8fafc fill, 12px radius, #e2e8f0 border).
   The `display:block + overflow-x:auto` + explicit `display:table` on
   thead/tbody is the standard dance that lets wide tables scroll
   horizontally on mobile without breaking column alignment. Header row
   gets a brand-tinted background so the hierarchy reads at a glance. */
.ait-single-content-inner > table{display:block;width:100%;max-width:100%;overflow-x:auto;margin:0 0 18px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;font-size:0.95rem;line-height:1.55;-webkit-overflow-scrolling:touch}
.ait-single-content-inner > table thead,
.ait-single-content-inner > table tbody{display:table;width:100%}
.ait-single-content-inner > table th,
.ait-single-content-inner > table td{padding:12px 18px;text-align:left;vertical-align:top}
.ait-single-content-inner > table thead th{background:#eff6ff;color:#0f172a;font-weight:700;border-bottom:2px solid #dbeafe;white-space:nowrap}
.ait-single-content-inner > table tbody td{color:#334155;border-bottom:1px solid #e2e8f0}
.ait-single-content-inner > table tbody tr:last-child td{border-bottom:0}
.ait-single-content-inner > table tbody tr strong{color:#0f172a}
/* Single post tags */
.ait-single-tags{margin:40px 0 0;padding-top:24px;border-top:1px solid #e2e8f0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ait-single-tags-label{font-size:0.85rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0.05em;margin-right:4px}
.ait-single-tag{display:inline-flex;align-items:center;padding:6px 14px;background:#eff6ff;color:#1d4ed8;border-radius:999px;font-size:0.85rem;font-weight:500;text-decoration:none;transition:background 0.2s,color 0.2s}
.ait-single-tag:hover{background:#dbeafe;color:#1e3a8a}
/* Single post footer */
.ait-single-footer{padding:0 2rem 60px;background:#fff}
.ait-single-footer-inner{max-width:800px;margin:0 auto;padding-top:24px;border-top:1px solid #e2e8f0}
.ait-back-link{display:inline-flex;align-items:center;gap:8px;color:#2563eb;text-decoration:none;font-weight:600;font-size:0.95rem;transition:gap 0.2s}
.ait-back-link:hover{gap:12px;color:#1d4ed8}
/* REFERENCES GRID (rendered when a page/post frontmatter has `references:`) */
.ait-references{padding:36px 2rem 44px;background:#f8fafc;border-top:1px solid #e2e8f0}
.ait-references-inner{max-width:1100px;margin:0 auto}
.ait-references-details{width:100%;text-align:center}
/* Summary matches the `.btn-cta-outline` ("Get in touch") pill button
   one-for-one — same 220%-wide slide-fill gradient, same 2px border,
   same pill radius, same padding, same font weight. `display:inline-flex`
   keeps the button naturally sized to its content while `text-align:center`
   on the parent details element centers the pill in the section. The grid
   underneath is reset to `text-align:left` so the reference cards don't
   inherit the centering. */
.ait-references-summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:18px 42px;user-select:none;color:#2563eb;background:linear-gradient(to right,#2563eb 50%,#fff 50%);background-size:220% 100%;background-position:right bottom;border:2px solid #2563eb;border-radius:999px;font-size:1.05rem;font-weight:700;letter-spacing:0.02em;transition:background-position .45s ease,color .45s ease}
.ait-references-summary::-webkit-details-marker{display:none}
.ait-references-summary::marker{display:none}
.ait-references-summary:hover{color:#fff;background-position:left bottom}
.ait-references-summary:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
.ait-references .ait-references-summary .ait-section-label{display:inline;margin:0;color:inherit;transition:color .45s ease}
.ait-references-summary:hover .ait-section-label{color:#fff}
.ait-references-chevron{width:14px;height:14px;color:#2563eb;transition:transform .25s ease}
.ait-references-details[open] .ait-references-chevron{transform:rotate(180deg)}
.ait-references-details[open] .ait-references-grid{margin-top:32px;animation:ait-references-fade .3s ease}
@keyframes ait-references-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ait-references-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;text-align:left}
.ait-reference-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;transition:all 0.3s}
.ait-reference-card:hover{border-color:#2563eb;box-shadow:0 10px 25px -5px rgba(0,0,0,0.08);transform:translateY(-3px)}
.ait-reference-logo{height:130px;display:flex;align-items:center;justify-content:center;padding:24px;background:#fff;border-bottom:1px solid #f1f5f9}
.ait-reference-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.ait-reference-logo img{max-width:70%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ait-reference-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.ait-reference-name{font-size:1.1rem;font-weight:700;color:#0f172a;margin:0 0 10px}
.ait-reference-name a{color:inherit;text-decoration:none}
.ait-reference-name a:hover{color:#2563eb}
.ait-reference-desc{font-size:0.92rem;color:#64748b;line-height:1.65;margin:0 0 18px;flex:1}
/* Pill CTA button — solid blue fill by default. On hover the border shifts to a darker blue ring and a soft outer halo appears, giving the button a "coming forward" effect without changing dimensions (border width stays 1.5px, so no layout shift). The ::after arrow is a pseudo-element so translation strings stay clean and `translateX` animates a real horizontal slide. */
.ait-reference-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;width:fit-content;padding:10px 20px;color:#fff;background:#2563eb;border:1.5px solid #2563eb;border-radius:999px;font-weight:600;font-size:0.85rem;letter-spacing:0.01em;text-decoration:none;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.ait-reference-link::after{content:"→";font-size:1.1em;line-height:1;transition:transform .25s ease}
.ait-reference-link:hover{border-color:#1e3a8a;box-shadow:0 0 0 3px rgba(37,99,235,0.2),0 10px 22px -8px rgba(37,99,235,0.5);transform:translateY(-1px)}
.ait-reference-link:hover::after{transform:translateX(4px)}
.ait-reference-link:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
/* === Post style: "rows" (alternating-row paragraphs, hero-framed images) */
/* Keeps default site fonts/colors — the only visual trick is paragraphs
   alternating background like rows in a table. Inline images are promoted
   to <figure> by post.php and framed with the same 3:2 / 16px-radius look
   as the hero photo frame, so the top-of-page and mid-article imagery
   feel consistent. */
.ait-post-rows{padding:56px 2rem 72px;background:#fff}
.ait-post-rows .ait-single-content-inner{max-width:1100px}
/* Standard-width blocks — 840px row-style paragraphs with alternating backgrounds */
.ait-post-rows .ait-post-standard{max-width:840px;margin:0 auto}
.ait-post-rows .ait-post-standard + .ait-post-standard,
.ait-post-rows .ait-post-standard + .ait-post-hero-breakout,
.ait-post-rows .ait-post-hero-breakout + .ait-post-standard,
.ait-post-rows .ait-post-hero-breakout + .ait-post-hero-breakout{margin-top:48px}
/* Paragraph boxes — uniform #f8fafc background used in both standard blocks
   and hero-breakout text columns. Contiguous paragraphs (p + p) share a straight
   seam; the outer corners of every paragraph group round to 12px. */
.ait-post-rows .ait-post-standard > p,
.ait-post-rows .ait-post-hero-text > p{margin:0;padding:22px 32px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;font-size:1.05rem;line-height:1.85;color:#334155}
.ait-post-rows .ait-post-standard > p:has(+ p),
.ait-post-rows .ait-post-hero-text > p:has(+ p){border-bottom-left-radius:0;border-bottom-right-radius:0}
.ait-post-rows .ait-post-standard > p + p,
.ait-post-rows .ait-post-hero-text > p + p{border-top:none;border-top-left-radius:0;border-top-right-radius:0}
.ait-post-rows .ait-post-standard > h2{border-top:none;padding:0 32px;margin:28px 0 14px;font-size:1.6em;line-height:1.3;color:#0f172a}
.ait-post-rows .ait-post-standard > h2:first-child{margin-top:0}
/* Hero breakout — full 1100px, two-column grid, alternating direction */
.ait-post-rows .ait-post-hero-breakout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ait-post-rows .ait-post-hero-breakout.hero-image-left .ait-post-hero-text{order:2}
.ait-post-rows .ait-post-hero-text > h2{margin:0 0 16px;padding:0 32px;border-top:none;font-size:1.6em;font-weight:700;color:#0f172a;line-height:1.3}
.ait-post-rows .ait-post-hero-breakout .ait-post-figure{margin:0;padding:0}
.ait-post-rows .ait-post-hero-breakout .ait-post-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;box-shadow:0 20px 40px -12px rgba(15,23,42,0.18);display:block;margin:0;background:#f1f5f9}
.ait-post-rows .ait-post-hero-breakout .ait-post-figure figcaption{margin-top:14px;padding:0;text-align:center;font-size:0.9rem;color:#64748b;line-height:1.5}
/* Defensive: figures inside standard blocks (not currently used, but future-proof) */
.ait-post-rows .ait-post-standard .ait-post-figure{margin:32px 0;padding:0}
.ait-post-rows .ait-post-standard .ait-post-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;box-shadow:0 20px 40px -12px rgba(15,23,42,0.18);display:block;margin:0;background:#f1f5f9}
.ait-post-rows .ait-post-standard .ait-post-figure figcaption{margin-top:14px;padding:0 32px;text-align:center;font-size:0.9rem;color:#64748b;line-height:1.5}
@media (max-width:960px){
  .ait-post-rows .ait-post-hero-breakout{grid-template-columns:1fr;gap:24px}
  .ait-post-rows .ait-post-hero-breakout.hero-image-left .ait-post-hero-text{order:1}
}
/* === Unified contact CTA (services + posts) ==================== */
/* Slate-100 background sits a step darker than the page body so the CTA
   reads as a continuation of the page rather than a foreign block. 32px
   top padding is the midpoint between the two earlier variants (bold had
   64px, outline had 0) so the separator→text gap feels balanced
   regardless of whether the content above ends flush or not. */
.ait-contact-cta{padding:32px 2rem 80px;background:#f1f5f9;border-top:1px solid #e2e8f0;text-align:center}
.ait-contact-cta-inner{max-width:680px;margin:0 auto}
.ait-contact-cta-eyebrow{display:inline-block;font-size:0.92rem;font-weight:700;color:#2563eb;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:18px}
.ait-contact-cta-title{font-size:2rem;font-weight:800;color:#0f172a;letter-spacing:-0.02em;margin:0 0 14px;line-height:1.2}
.ait-contact-cta-body{font-size:1.08rem;color:#475569;line-height:1.7;margin:0 0 32px}
/* Outline pill button with fill-on-hover — used by contact CTA */
.btn-cta-outline{display:inline-flex;align-items:center;padding:18px 42px;font-size:1.05rem;font-weight:700;color:#2563eb;background:linear-gradient(to right,#2563eb 50%,#fff 50%);background-size:220% 100%;background-position:right bottom;border:2px solid #2563eb;border-radius:999px;text-decoration:none;transition:background-position 0.45s ease,color 0.45s ease;letter-spacing:0.02em}
.btn-cta-outline:hover{color:#fff;background-position:left bottom}
@media(max-width:900px){
.ait-single-hero-card-inner{grid-template-columns:1fr;gap:32px}
.ait-single-hero-photo{order:-1}
.ait-single-hero-content{align-items:flex-start;text-align:left}
}
@media(max-width:768px){
.ait-single-hero-card{padding:48px 1.5rem 40px}
.ait-single-hero-card .ait-single-title{font-size:1.75rem}
.ait-single-excerpt{font-size:0.98rem}
.ait-single-title{font-size:1.6rem}
.ait-single-content{padding:40px 1.5rem 56px}
.ait-single-content-inner{font-size:1rem}
.ait-single-content-inner > p{padding:18px 22px;line-height:1.75}
.ait-single-content-inner > ul,
.ait-single-content-inner > ol{padding:18px 22px 18px 42px;line-height:1.75}
.ait-references{padding:28px 1.5rem 36px}
.ait-references-grid{grid-template-columns:1fr;gap:16px}
.ait-reference-logo{height:110px;padding:20px}
.ait-post-rows{padding:40px 1rem 56px}
.ait-post-rows .ait-post-standard > p,
.ait-post-rows .ait-post-hero-text > p{padding:18px 22px;font-size:1rem;line-height:1.75}
.ait-single-content-inner :is(h1,h2,h3,h4,h5,h6){padding:0 22px}
.ait-single-content-inner :is(h1,h2,h3,h4,h5,h6)::before{left:9px}
.ait-single-content-inner h2{font-size:1.3em}
.ait-single-content-inner h3{font-size:1.1em}
.ait-post-rows .ait-post-hero-breakout{margin-top:32px}
.ait-post-rows .ait-post-hero-breakout .ait-post-figure figcaption{padding:0 8px}
.ait-contact-cta{padding:28px 1.25rem 56px}
.ait-contact-cta-title{font-size:1.55rem}
.btn-cta-outline{padding:15px 32px;font-size:0.98rem}
}
/* 404 PAGE */
.ait-404{padding:120px 2rem 140px;background:linear-gradient(135deg,#0f172a 0%,#162044 50%,#1e293b 100%);position:relative;overflow:hidden;min-height:60vh;display:flex;align-items:center}
.ait-404:before{content:'';position:absolute;top:-30%;right:-15%;width:700px;height:700px;background:radial-gradient(circle,rgba(37,99,235,0.18) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.ait-404:after{content:'';position:absolute;bottom:-40%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(147,51,234,0.12) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.ait-404-inner{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1}
.ait-404-eyebrow{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:#60a5fa;margin-bottom:24px}
.ait-404-code{font-size:9rem;font-weight:800;line-height:1;letter-spacing:-0.05em;background:linear-gradient(180deg,#60a5fa 0%,#2563eb 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#2563eb;margin:0 0 8px;text-shadow:0 0 80px rgba(37,99,235,0.3)}
.ait-404-title{font-size:2.4rem;font-weight:800;color:#fff;letter-spacing:-0.02em;line-height:1.15;margin:0 0 18px;max-width:600px;margin-left:auto;margin-right:auto}
.ait-404-subtitle{font-size:1.1rem;color:#94a3b8;line-height:1.7;max-width:540px;margin:0 auto 40px}
.ait-404-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ait-404-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:10px;text-decoration:none;font-weight:600;font-size:0.95rem;transition:all 0.2s;border:1px solid transparent}
.ait-404-btn.primary{background:#2563eb;color:#fff!important;border-color:#2563eb}
.ait-404-btn.primary:hover{background:#1d4ed8;border-color:#1d4ed8;transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,99,235,0.3)}
.ait-404-btn.secondary{background:rgba(255,255,255,0.04);color:#cbd5e1!important;border-color:rgba(148,163,184,0.3)}
.ait-404-btn.secondary:hover{background:rgba(255,255,255,0.08);border-color:#94a3b8;color:#fff!important;transform:translateY(-1px)}
@media(max-width:768px){
.ait-404{padding:80px 1.5rem 100px}
.ait-404-code{font-size:6rem}
.ait-404-title{font-size:1.7rem}
.ait-404-subtitle{font-size:1rem}
.ait-404-actions{flex-direction:column;align-items:stretch}
.ait-404-btn{justify-content:center}
}
/* CONTACT FORM */
.ait-contact-form{max-width:640px;margin:32px 0 0;display:flex;flex-direction:column;gap:20px}
.ait-contact-form .ait-form-field{display:flex;flex-direction:column;gap:6px}
.ait-contact-form label{font-size:0.9rem;font-weight:600;color:#334155}
.ait-contact-form input[type="text"],.ait-contact-form input[type="email"],.ait-contact-form textarea{width:100%;padding:12px 16px;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;font-family:inherit;background:#fff;color:#0f172a;transition:border-color 0.2s,box-shadow 0.2s}
.ait-contact-form input[type="text"]:focus,.ait-contact-form input[type="email"]:focus,.ait-contact-form textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.ait-contact-form textarea{min-height:160px;resize:vertical;line-height:1.6}
.ait-contact-form .has-error input,.ait-contact-form .has-error textarea{border-color:#dc2626}
.ait-contact-form .ait-form-err{font-size:0.8rem;color:#dc2626;font-weight:500}
.ait-contact-form button{align-self:flex-start;margin-top:8px}
.ait-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ait-form-success{padding:16px 20px;background:#dcfce7;border:1px solid #86efac;border-radius:8px;color:#166534;font-weight:500;margin:24px 0 0}
.ait-form-error{padding:16px 20px;background:#fee2e2;border:1px solid #fca5a5;border-radius:8px;color:#991b1b;font-weight:500;margin:24px 0 0}
.ait-form-debug{margin:12px 0 0;padding:10px 12px;background:#fff0f0;border:1px dashed #f87171;border-radius:4px;font-size:0.78rem;font-weight:400;color:#7f1d1d;white-space:pre-wrap;word-break:break-all}
/* COOKIE NOTICE — "we don't use cookies" banner. Uses sessionStorage (not cookies) to remember dismissal per tab. Hidden by default; JS adds .is-visible after a short delay so no-JS visitors see nothing rather than a stuck banner. Lives outside .ait-page so it gets its own font stack (the .ait-page rule would otherwise override). */
.ait-cookie-notice{position:fixed;bottom:24px;right:24px;z-index:900;max-width:380px;background:#0f172a;color:#e2e8f0;border:1px solid rgba(96,165,250,0.4);border-radius:12px;padding:18px 20px;box-shadow:0 12px 32px -8px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04);display:flex;gap:12px;align-items:flex-start;transform:translateY(calc(100% + 32px));opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease;pointer-events:none;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
.ait-cookie-notice.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
.ait-cookie-notice__body{flex:1;min-width:0}
.ait-cookie-notice__title{font-size:0.78rem;font-weight:700;color:#60a5fa;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px}
.ait-cookie-notice__text{font-size:0.85rem;line-height:1.55;color:#cbd5e1;margin:0}
.ait-cookie-notice__link{color:#93bbfd;text-decoration:underline;text-decoration-color:rgba(147,187,253,0.4);text-underline-offset:2px}
.ait-cookie-notice__link:hover{color:#fff;text-decoration-color:#fff}
.ait-cookie-notice__close{background:transparent;border:0;color:#64748b;cursor:pointer;padding:4px;width:28px;height:28px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s}
.ait-cookie-notice__close:hover{color:#fff;background:rgba(255,255,255,0.08)}
.ait-cookie-notice__close svg{width:16px;height:16px;display:block}
/* RESPONSIVE */
@media(max-width:768px){
.ait-cookie-notice{left:16px;right:16px;bottom:16px;max-width:none}
.ait-feature-grid{grid-template-columns:1fr;gap:16px;margin:28px 0}
.ait-feature-card{padding:24px 22px 22px}
.ait-pyramid-card,.ait-process-card,.ait-stack-card{padding:24px 22px 22px;margin:28px 0}
.ait-process-steps{grid-template-columns:1fr;gap:22px}
.ait-process-steps::before{display:none}
.ait-stack{max-width:none}
.ait-stack__layer{padding:14px 16px;gap:12px}
.ait-stack__icon{width:36px;height:36px}
.ait-pyramid__foundation-row{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:28px}
.ait-pyramid__foundation-row::after{display:none}
.ait-pyramid__foundation::before{display:none}
.ait-pyramid__bus{display:none}
.ait-pyramid__apex{max-width:none}
.ait-pyramid__apex::before{display:none}
.ait-header-nav{display:none;position:absolute;top:72px;left:0;right:0;background:#0f172a;flex-direction:column;padding:16px;border-top:1px solid rgba(255,255,255,0.08);gap:4px}
.ait-header.menu-open .ait-header-nav{display:flex}
.ait-mobile-toggle{display:block}
.ait-hero h1{font-size:2rem}
.ait-hero-cols{grid-template-columns:1fr;gap:32px}
.ait-services-grid{grid-template-columns:1fr}
.ait-approach{display:none}
.ait-posts-track .ait-archive-card{flex:0 0 85vw}
.ait-footer-top{grid-template-columns:1fr 1fr}
.ait-hero-stats{gap:24px}
.admin-bar .ait-header{top:46px}
}