/*
 * novità, software studio
 * Site stylesheet
 * Designed and built by novità (novita.digital)
 */


:root {
  /* Palette and type from the Claude Design file, design/claude-design/Novita Site.dc.html.
     The token NAMES are unchanged, so the 113 var() references downstream follow automatically.

     TWO violets, still. The design adopted the rule from the brief: #A78BFA carries text (7.24:1
     on this background) and the mark's own #6633FF is only ever a fill, with white on top
     (6.03:1). #6633FF is 3.27:1 as text here, so it never becomes a colour on dark. */
  --accent: #A78BFA; --accent-2: #C4B1FC;
  --accent-solid: #6633FF;
  --grad: linear-gradient(135deg,#6633FF 0%,#A826E2 100%);
  --grad-text: linear-gradient(90deg,#A78BFA 0%,#C4B1FC 100%);
  --glow: 102,51,255;
  --bg: #0B0A10; --bg2: #100E17; --bg3: #100E17;
  --raised: #16131F;
  --surface: #16131F; --border: #221E2E; --border2: #2E2940;
  --text: #F3F1F8; --body: #C3BED6; --muted: #8A849F; --light: #5A5470;
  /* Figtree for text, Bricolage Grotesque for display, as the design loads them. */
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.65; overflow-x: hidden; }
.grad-text { color: var(--accent); }
/* The mock-up's eyebrow is a plain accent word at 15px/500, sentence case, with
   nothing before it. The uppercase, letterspaced version with a gradient rule
   was invented in the first pass. */
.section-label { display: inline-block; font-size: 15px; font-weight: 500; color: var(--accent); margin-bottom: 18px; }
.section-title { font-size: clamp(30px,3.5vw,48px); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; color: var(--text); }
.section-subtitle { font-size: 17px; color: var(--muted); line-height: 1.7; margin-top: 16px; max-width: 540px; }

/* NAV */
/* The redesign mock-up styled its header with a bare `nav` element selector.
   This theme renders `nav.site-nav` inside `.site-header` (inc/layout.php), so that
   rule hijacked the real nav: `position:fixed` + a white background lifted it out of
   the header and pinned it over the logo. The `.nav-*` class rules below are inert , 
   nothing outputs that markup, but never reintroduce a bare `nav` selector here. */
.logo { background: none !important; -webkit-text-fill-color: unset !important; text-decoration: none; display: flex; align-items: center; }
.logo img { height: 40px; width: auto; display: block; }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-wa { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #25D366; text-decoration: none; padding: 9px 18px; border: 1.5px solid rgba(37,211,102,.3); border-radius: 6px; transition: background .2s, border-color .2s; }
.nav-wa:hover { background: rgba(37,211,102,.06); border-color: #25D366; }
.nav-cta { font-size: 13px; font-weight: 700; color: white; text-decoration: none; background: var(--grad); padding: 10px 24px; border-radius: 6px; box-shadow: 0 4px 16px rgba(var(--glow),.28); transition: opacity .2s, transform .2s; }
.nav-cta:hover { opacity: .88; transform: translateY(-1px); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s; }

/* HERO */
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px 32px 100px; background: radial-gradient(ellipse 80% 55% at 50% -5%,rgba(var(--glow),.09) 0%,transparent 68%); }
.hero h1 { font-size: clamp(42px,6.5vw,88px); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; color: var(--text); max-width: 860px; margin-bottom: 28px; opacity: 0; animation: fadeUp .8s .2s forwards; }
.hero-sub { font-size: 18px; color: var(--muted); max-width: 480px; margin-bottom: 52px; line-height: 1.7; opacity: 0; animation: fadeUp .8s .38s forwards; }
.hero-actions { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp .8s .54s forwards; }
.btn-primary { background: var(--grad); color: white; font-size: 15px; font-weight: 700; text-decoration: none; padding: 16px 40px; border-radius: 8px; box-shadow: 0 8px 28px rgba(var(--glow),.32); transition: opacity .2s, transform .2s; }
.btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.btn-secondary { color: var(--accent); font-size: 15px; font-weight: 600; text-decoration: none; padding: 16px 32px; border-radius: 8px; border: 1.5px solid var(--border2); background: var(--bg2); transition: border-color .2s, background .2s; }
.btn-secondary:hover { border-color: var(--accent); background: var(--surface); }

/* TICKER */
.ticker-wrap { overflow: hidden; padding: 14px 0; border-bottom: 1px solid var(--border); background: var(--raised); }
.ticker { display: flex; white-space: nowrap; animation: ticker 32s linear infinite; }
.ticker-item { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--light); padding: 0 36px; }
.ticker-item .dot { color: var(--accent); margin-right: 36px; }

/* SECTIONS */
section { padding: 110px 60px; }
.section-inner { max-width: 1100px; margin: 0 auto; }

/* SERVE */
.serve-section { background: var(--text); }
.serve-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.serve-left .section-label { color: var(--accent-2); }
.serve-left .section-title { color: white; }
.serve-left .section-subtitle { color: rgba(255,255,255,.45); }
.serve-list { margin-top: 52px; display: flex; flex-direction: column; list-style: none; }
.serve-item { display: flex; align-items: baseline; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.07); transition: .2s; }
.serve-item:first-child { border-top: 1px solid rgba(255,255,255,.07); }
.serve-num { font-family: var(--font); font-size: 13px; font-style: italic; color: rgba(255,255,255,.2); min-width: 20px; }
.serve-name { font-size: 20px; font-weight: 700; color: white; letter-spacing: -.01em; flex: 1; }
.serve-arrow { color: rgba(255,255,255,.15); font-size: 18px; transition: color .2s, transform .2s; }
.serve-item:hover .serve-arrow { color: var(--accent-2); transform: translateX(4px); }
.serve-right-text { padding: 48px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.serve-right-text p { font-size: 20px; font-weight: 300; font-style: italic; color: rgba(255,255,255,.7); line-height: 1.65; font-family: var(--font); }
.serve-right-text strong { color: var(--accent-2); font-weight: 700; font-style: normal; font-family: var(--font); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; display: block; margin-top: 28px; }

/* SERVICES */
.services-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; flex-wrap: wrap; gap: 24px; }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.service-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 40px 32px; transition: background .25s, box-shadow .25s, transform .25s; position: relative; overflow: hidden; cursor: default; }
.service-card:hover { background: var(--raised); box-shadow: 0 14px 44px rgba(var(--glow),.1); transform: translateY(-3px); }
.service-card.coming-soon { opacity: .65; }
.service-emoji { font-size: 34px; margin-bottom: 22px; display: block; }
.service-name { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 12px; letter-spacing: -.01em; }
.service-desc { font-size: 14px; color: var(--muted); line-height: 1.75; }
.service-tag { display: inline-block; margin-top: 22px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--surface); padding: 5px 14px; border-radius: 100px; }
.coming-soon-badge { position: absolute; top: 18px; right: 18px; background: var(--surface); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; }

/* WORK */
.work-section { background: var(--text); }
.work-section .section-label { color: var(--accent-2); }
.work-section .section-title { color: white; }
.work-section .section-subtitle { color: rgba(255,255,255,.5); }
.work-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; margin-top: 60px; }
.work-card { border-radius: 16px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.work-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.work-visual { height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; position: relative; }
.work-brand-name { font-family: var(--font); font-size: 36px; font-weight: 700; font-style: italic; color: white; text-align: center; text-shadow: 0 2px 20px rgba(0,0,0,.4); margin-bottom: 10px; }
.work-category { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); background: rgba(0,0,0,.3); padding: 5px 16px; border-radius: 100px; }
.work-concept-label { position: absolute; bottom: 16px; right: 16px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); padding: 4px 12px; border-radius: 100px; }
.live-label { color: rgba(255,255,255,.9); background: rgba(var(--glow),.5); border: 1px solid rgba(var(--glow),.6); }
a.work-concept-label { text-decoration: none; transition: background .2s ease, border-color .2s ease; }
a.live-label:hover, a.live-label:focus-visible { background: rgba(var(--glow),.8); border-color: rgba(181,26,251,.8); }
.work-info { background: #1a1729; padding: 24px 28px; }
.work-desc { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 16px; }
.work-posts { display: flex; gap: 8px; flex-wrap: wrap; }
.work-post-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.12); padding: 4px 12px; border-radius: 100px; }

/* PROCESS */
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; margin-top: 64px; list-style: none; }
.step { position: relative; }
.step:not(:last-child)::after { content: '→'; position: absolute; top: 15px; right: -18px; color: var(--light); font-size: 18px; }
.step-num { width: 46px; height: 46px; border-radius: 12px; background: var(--grad); color: white; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; box-shadow: 0 4px 16px rgba(var(--glow),.26); }
.step-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.step-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* TOOLS */
.tools-section { background: var(--bg2); }
.tools-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 52px; }
.tool-card { background: var(--raised); border: 1px solid var(--border); border-radius: 12px; padding: 24px 28px; display: flex; align-items: center; gap: 16px; transition: box-shadow .25s, transform .25s; }
.tool-card:hover { box-shadow: 0 6px 24px rgba(var(--glow),.1); transform: translateY(-2px); }
.tool-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.tool-card .tool-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.tool-card .tool-use { font-size: 12px; color: var(--muted); font-weight: 500; }

/* PRICING */
/* The first-generation pricing rules lived here. They were superseded by the
   block further down but kept filling in the properties that block did not
   name, so the cards kept a 1px border and the tier label stayed uppercase
   after the restyle. Deleted rather than overridden: two live copies of the
   same rule set is what made this hard to see. */

/* CONTACT */
.contact-section { background: var(--text); padding: 110px 60px; }
.contact-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.contact-left .section-label { color: var(--accent-2); }
.contact-left .section-title { color: white; }
.contact-left .section-subtitle { color: rgba(255,255,255,.5); max-width: 400px; }
.contact-options { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.contact-opt { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 20px 24px; text-decoration: none; color: white; transition: background .2s, border-color .2s; }
.contact-opt:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.contact-opt-icon { font-size: 22px; }
.contact-opt-label { font-size: 12px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin-bottom: 2px; }
.contact-opt-value { font-size: 14px; font-weight: 600; }
.wa-opt .contact-opt-value { color: #25D366; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.form-group input, .form-group select, .form-group textarea { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: white; font-family: var(--font); font-size: 14px; padding: 13px 16px; outline: none; transition: border-color .2s, background .2s; }
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,.28); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); background: rgba(255,255,255,.1); }
.form-group select option { background: #1a1729; color: white; }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit { background: var(--grad); border: none; color: white; font-family: var(--font); font-size: 15px; font-weight: 700; padding: 16px 40px; border-radius: 8px; cursor: pointer; box-shadow: 0 6px 24px rgba(var(--glow),.35); transition: opacity .2s, transform .2s; align-self: flex-start; }
.form-submit:hover { opacity: .88; transform: translateY(-2px); }
.form-note { font-size: 12px; color: rgba(255,255,255,.3); margin-top: 4px; }
.form-success { display: none; background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.3); border-radius: 10px; padding: 20px 24px; color: #25D366; font-size: 14px; font-weight: 600; margin-bottom: 16px; }

/* FAQ */
.faq-section { background: var(--bg3); }
.faq-list { margin-top: 52px; display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; gap: 20px; }
.faq-q h3 { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4; }
.faq-icon { font-size: 20px; color: var(--accent); flex-shrink: 0; transition: transform .3s; font-weight: 300; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { font-size: 15px; color: var(--muted); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s; }
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 24px; }

/* FOOTER */
footer { background: #07060f; padding: 72px 60px 0; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.07); }
.footer-logo { background: none !important; -webkit-text-fill-color: unset !important; display: inline-flex; align-items: center; text-decoration: none; margin-bottom: 12px; }
.footer-logo img { height: 34px; width: auto; display: block; }
.footer-tagline { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 6px; }
.footer-loc { font-size: 12px; color: rgba(255,255,255,.25); }
.footer-links-col h3 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 20px; }
.footer-links-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-links-col a { font-size: 14px; color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; }
.footer-links-col a:hover { color: white; }
.footer-contact-col h3 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 20px; }
.footer-wa { display: flex; align-items: center; gap: 8px; color: #25D366; text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.footer-wa:hover { text-decoration: underline; }
.footer-email, .footer-ig { display: block; font-size: 14px; color: rgba(255,255,255,.45); text-decoration: none; margin-bottom: 8px; transition: color .2s; }
.footer-email:hover, .footer-ig:hover { color: white; }
.footer-bottom { max-width: 1100px; margin: 0 auto; padding: 24px 0; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.2); flex-wrap: wrap; gap: 8px; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; } .reveal-d3 { transition-delay: .3s; }

/* RESPONSIVE */
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto;}
  .oneoff-grid{grid-template-columns:repeat(2,1fr);}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .tools-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .nav-toggle{display:flex;}
  section{padding:80px 24px;}
  .contact-section{padding:80px 24px;}
  .serve-inner{grid-template-columns:1fr;gap:40px;}
  .services-grid,.process-steps{grid-template-columns:1fr;}
  .step::after{display:none;}
  .work-grid{grid-template-columns:1fr;}
  .contact-inner{grid-template-columns:1fr;gap:48px;}
  .form-row{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:36px;}
  .tools-grid{grid-template-columns:repeat(2,1fr);}
  .footer-bottom{flex-direction:column;}
}
@media(max-width:480px){
  .footer-inner{grid-template-columns:1fr;}
  .tools-grid{grid-template-columns:1fr;}
  .oneoff-grid{grid-template-columns:1fr;}
  .hero h1{font-size:38px;}
  .hero-actions{flex-direction:column;}
}


/* ── Dark section (portfolio) ── */
.dark-section { background: #0f0d1a; }

/* ── Toolkit ── */
#toolkit { background: #f5f3ff; }
.toolkit-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 52px; }
.toolkit-card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 18px; background: var(--raised); border: 1px solid rgba(var(--glow),.1); border-radius: 16px; padding: 20px 22px; box-shadow: 0 2px 12px rgba(var(--glow),.07); -webkit-transition: box-shadow .25s, -webkit-transform .25s; transition: box-shadow .25s, transform .25s; }
.toolkit-card:hover { box-shadow: 0 8px 32px rgba(var(--glow),.15); -webkit-transform: translateY(-3px); transform: translateY(-3px); }
.toolkit-icon { width: 56px; height: 56px; min-width: 56px; background: var(--raised); border: 1.5px solid #e0e0e0; border-radius: 12px; -webkit-border-radius: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; overflow: hidden; padding: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.toolkit-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; border-radius: 8px; -webkit-border-radius: 8px; }
.toolkit-icon .fa-pen-nib     { color: #FF9A00; }
.toolkit-icon .fa-image       { color: #31A8FF; }
.toolkit-icon .fa-palette     { color: #7D2AE8; }
.toolkit-icon .fa-film        { color: #000000; }
.toolkit-icon .fa-robot       { color: var(--accent); }
.toolkit-icon .fa-layer-group { color: #168EEA; }
.toolkit-name { font-size: 15px; font-weight: 700; color: #0f0d1a; margin-bottom: 3px; }
.toolkit-role { font-size: 13px; color: #9d9ab8; }

/* ── Contact ── */
.contact-section { background: #0f0d1a; padding: 110px 60px; }
.contact-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-left { }
.contact-options { margin-top: 44px; display: flex; flex-direction: column; gap: 16px; }
.contact-opt { display: flex; align-items: center; gap: 18px; padding: 20px 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; text-decoration: none; transition: background .2s, border-color .2s; }
.contact-opt:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.contact-opt-icon { font-size: 22px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border-radius: 10px; flex-shrink: 0; }
.contact-opt-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 4px; }
.contact-opt-value { font-size: 15px; font-weight: 600; color: white; }
.contact-form { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 32px; }
/* Checkbox grid for one-time services */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.check-item { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; transition: border-color .2s, background .2s; }
.check-item:hover { background: rgba(255,255,255,.07); border-color: rgba(var(--glow),.4); }
.check-item input[type=checkbox] { display: none; }
.check-box { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.25); border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: .2s; }
.check-item input:checked ~ .check-box { background: var(--accent-solid); border-color: var(--accent-solid); }
.check-item input:checked ~ .check-box::after { content: '✓'; font-size: 11px; font-weight: 700; color: white; }
.check-item input:checked ~ .check-label { color: white; }
.check-label { font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500; line-height: 1.3; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.form-group label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); }
.form-group input, .form-group select, .form-group textarea { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: white; font-family: inherit; font-size: 14px; padding: 12px 16px; transition: border-color .2s; outline: none; }
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,.25); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: rgba(var(--glow),.6); }
.form-group select option { background: #1a1729; }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-submit { width: 100%; background: var(--grad); color: white; font-size: 15px; font-weight: 700; border: none; border-radius: 8px; padding: 16px; cursor: pointer; transition: opacity .2s, transform .2s; margin-top: 8px; }
.form-submit:hover { opacity: .88; transform: translateY(-1px); }
.form-note { font-size: 12px; color: rgba(255,255,255,.3); text-align: center; margin-top: 12px; }

/* ── Pricing ──────────────────────────────────────────────────────────────
   The redesign has no pricing section, so there was no card style to copy and
   the first pass invented one: 700-weight type, uppercase letterspaced labels,
   20px radii, 1px borders on everything and mint gradient buttons.

   Rebuilt against the design's actual vocabulary, read off the mock-up's inline
   styles in design/redesign/novita-site/:
     display type   500 weight, -0.05em tracking, line-height 1
     eyebrow        15px / 500 / accent, sentence case, no rule before it
     surface        #12101E at 10px radius, no border
     chip           1px accent border, 6px radius, Geist Mono, 7px dot
     primary button #F4F2FA on #07060D, 6px radius, 600 weight
     secondary      accent text with an arrow, or an underlined link
   Nothing here is a new idea; it is the Work and Home page treatment applied to
   content the mock-up never had to show.
   ───────────────────────────────────────────────────────────────────────── */

.pricing-section { background: var(--bg); }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 56px; }

.price-card { background: var(--raised); border-radius: 10px; padding: 36px 32px; display: flex; flex-direction: column; }
.price-tier { font-size: 15px; font-weight: 500; color: var(--accent); margin-bottom: 10px; }
.price-desc { font-size: 15px; color: var(--body); line-height: 1.65; }
.price-amount { font-size: clamp(40px,4.6vw,60px); font-weight: 500; color: var(--text); letter-spacing: -.05em; margin-top: 28px; line-height: 1; }
.price-amount sup { font-size: .4em; font-weight: 500; vertical-align: baseline; top: -.9em; margin-right: 3px; }
.price-period { font-size: 14px; color: var(--muted); margin-top: 10px; }
.price-divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
/* Divi's inline stylesheet carries
     `#left-area ul, .entry-content ul, .et-l--body ul, … { list-style-type: disc }`
   which outranks a single class, so these items rendered a disc AND the arrow
   in ::before. !important rather than a longer selector, per section 14 of the
   standard: it beats Divi wherever the list ends up, and source order between
   an inline block and an enqueued file is not worth relying on. */
.price-features, .price-features li { list-style: none !important; }
.price-features { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.price-features li { font-size: 15px; color: var(--body); padding-left: 22px; position: relative; }
.price-features li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }
.price-cta { display: block; text-align: center; margin-top: 32px; background: var(--text); color: var(--bg); font-size: 15px; font-weight: 600; text-decoration: none; padding: 15px 26px; border: 0; border-radius: 6px; cursor: pointer; font-family: inherit; transition: opacity .2s; }
.price-cta:hover { opacity: .88; }

.oneoff-section { margin-top: 72px; }
/* The one-line stand-in for the one-time grid, used on the home page. Centred and quiet: it is a
   signpost, not a price tag, and it must not compete with the three Care cards above it. */
.oneoff-summary { margin-top: 56px; text-align: center; }
.oneoff-summary-text { font-size: 19px; line-height: 1.6; color: var(--body); max-width: 620px; margin: 0 auto 18px; }
.oneoff-summary-link { display: inline-block; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1.5px solid var(--border2); padding-bottom: 3px; transition: border-color .2s, color .2s; }
.oneoff-summary-link:hover { color: var(--accent-2); border-color: var(--accent); }
@media (max-width: 640px) { .oneoff-summary { margin-top: 40px; } .oneoff-summary-text { font-size: 17px; } }

.oneoff-title { font-size: 15px; font-weight: 500; color: var(--accent); margin-bottom: 28px; }
.oneoff-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 24px; }
.oneoff-card { background: var(--raised); border-radius: 10px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.oneoff-name { font-size: 17px; font-weight: 500; color: var(--text); letter-spacing: -.01em; }
.oneoff-desc { font-size: 15px; color: var(--body); line-height: 1.65; flex: 1; }
.oneoff-price { font-size: 28px; font-weight: 500; color: var(--text); letter-spacing: -.04em; line-height: 1; margin-top: 6px; }
.oneoff-price sup { font-size: .45em; font-weight: 500; vertical-align: baseline; top: -.85em; margin-right: 2px; color: var(--accent); }
.oneoff-price span { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-left: 6px; }

/* ── FAQ ── */
.faq-section { background: var(--bg); }
.faq-list { margin-top: 52px; max-width: 720px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: none; border: none; cursor: pointer; padding: 24px 0; text-align: left; }
.faq-q span:first-child { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4; }
.faq-icon { font-size: 20px; color: var(--accent); flex-shrink: 0; transition: transform .3s; font-weight: 300; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { font-size: 15px; color: var(--muted); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s; }
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 24px; }

/* ── Section head spacing ── */
.section-head { margin-bottom: 0; }

/* ── Responsive ── */
@media(max-width:1024px){
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .oneoff-grid { grid-template-columns: repeat(2,1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .toolkit-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:768px){
  .nav-toggle { display: flex; }
  section { padding: 80px 24px; }
  .contact-section { padding: 80px 24px; }
  .services-grid, .process-steps { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .work-grid { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; gap: 48px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .toolkit-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}
@media(max-width:480px){
  .footer-inner { grid-template-columns: 1fr; }
  .oneoff-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  .hero-actions { flex-direction: column; }
  .contact-form { padding: 24px 16px; }
}

/* ── Get Started Modal ── */
.gs-modal-overlay { position:fixed; inset:0; background:rgba(15,13,26,.7); backdrop-filter:blur(4px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .2s ease; }
.gs-modal { background:var(--raised); border-radius:20px; padding:40px; width:100%; max-width:620px; max-height:90vh; overflow-y:auto; position:relative; animation:slideUp .25s ease; }
.gs-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:20px; color:#999; cursor:pointer; padding:4px 8px; border-radius:6px; transition:background .15s; }
.gs-close:hover { background:#f0eeff; color:var(--accent-solid); }
.gs-header { margin-bottom:24px; }
.gs-header h2 { font-size:24px; font-weight:800; color:#0f0d1a; margin:6px 0 8px; }
.gs-header p { font-size:14px; color:#6c6a8a; }
.gs-pkg-badge { display:inline-block; background:#f0eeff; color:var(--accent-solid); font-weight:700; font-size:13px; padding:4px 12px; border-radius:20px; margin-top:4px; }
.gs-form { display:flex; flex-direction:column; gap:16px; }
.gs-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gs-field { display:flex; flex-direction:column; gap:6px; }
.gs-field label { font-size:13px; font-weight:600; color:#3d3a5c; }
.gs-field input, .gs-field select, .gs-field textarea { border:1.5px solid #e8e3ff; border-radius:10px; padding:11px 14px; font-size:14px; font-family:inherit; color:#0f0d1a; background:#fafaff; transition:border-color .15s; outline:none; }
.gs-field input:focus, .gs-field select:focus, .gs-field textarea:focus { border-color:var(--accent-solid); background:var(--raised); }
.gs-field textarea { resize:vertical; min-height:80px; }
.gs-submit { background:var(--grad); color:#fff; border:none; border-radius:12px; padding:14px 28px; font-size:15px; font-weight:700; cursor:pointer; transition:opacity .2s, transform .2s; margin-top:4px; }
.gs-submit:hover { opacity:.9; transform:translateY(-1px); }
.gs-note { font-size:12px; color:#9d9ab8; text-align:center; margin-top:4px; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
@media(max-width:560px) { .gs-row{grid-template-columns:1fr} .gs-modal{padding:28px 20px} }

/* ══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS / TEAM / CLIENTS
   Added for the WordPress build. Each section renders nothing until its post
   type has published content, so these rules are inert until then.
   NOTE: this file has now diverged from public_html/assets/css/site.css , 
   the WordPress copy is the one being maintained.
   ═══════════════════════════════════════════════════════════════════════ */

/* TESTIMONIALS */
.testimonials-section { background: var(--bg3); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 52px; }
.testimonial-card { position: relative; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 36px 32px 30px; margin: 0; transition: background .25s, box-shadow .25s, transform .25s; }
.testimonial-card:hover { background: var(--raised); box-shadow: 0 14px 44px rgba(var(--glow),.1); transform: translateY(-3px); }
.testimonial-mark { font-family: var(--font); font-size: 62px; line-height: 1; color: var(--accent); opacity: .18; margin-bottom: -18px; }
.testimonial-quote { font-size: 15px; line-height: 1.8; color: var(--body); margin: 0 0 22px; }
.testimonial-author { display: flex; flex-direction: column; gap: 3px; padding-top: 18px; border-top: 1px solid var(--border2); }
.testimonial-name { font-size: 14px; font-weight: 700; color: var(--text); }
.testimonial-role { font-size: 13px; color: var(--muted); }
.testimonial-project { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: 4px; }

/* TEAM */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 52px; }
.team-card { text-align: center; background: var(--raised); border: 1px solid var(--border); border-radius: 14px; padding: 36px 28px; transition: box-shadow .25s, transform .25s; }
.team-card:hover { box-shadow: 0 14px 44px rgba(var(--glow),.12); transform: translateY(-3px); }
.team-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; display: block; }
.team-photo-placeholder { display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-size: 34px; font-weight: 700; }
.team-name { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.team-role { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 14px; }
.team-bio { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0 0 14px; }
.team-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.team-link:hover { color: var(--accent-2); }

/* CLIENTS LOGO STRIP */
.clients-section { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.clients-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0 0 32px; }
.clients-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 44px; }
.client-item { display: inline-flex; align-items: center; }
.client-logo { max-height: 36px; width: auto; filter: grayscale(1); opacity: .55; transition: filter .25s, opacity .25s; }
.client-item:hover .client-logo { filter: grayscale(0); opacity: 1; }

@media(max-width:1024px) {
  .testimonial-grid, .team-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:768px) {
  .testimonial-grid, .team-grid { grid-template-columns: 1fr; }
  .clients-strip { gap: 28px; }
  .client-logo { max-height: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SITE HEADER / FOOTER, 2026 redesign
   Values taken from design/redesign/novita-site/Novita {Header,Footer}.dc.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* Header, to the Claude Design file: fixed and translucent over the page, 1320px inner,
   26px wordmark, 15px/500 nav, pill CTA in the mark's violet with white on it. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: rgba(11,10,16,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06); font-family: var(--font); }
.site-header.is-overlay { background: rgba(11,10,16,.72); }
.site-header-inner { max-width: 1320px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 26px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.site-nav-link { color: #C9C4D8; text-decoration: none; transition: color .2s; }
.site-nav-link:hover, .site-nav-link.is-current { color: #FFFFFF; }
.site-nav-cta { background: var(--accent-solid); color: #FFFFFF; text-decoration: none; padding: 10px 18px; border-radius: 999px; font-weight: 600; white-space: nowrap; transition: background .2s; }
.site-nav-cta:hover { background: #5225E0; color: #FFFFFF; }
/* The design swaps the links for a single "Menu" button below its wide breakpoint. */
.site-nav-toggle { display: none; background: none; border: 1px solid #3A3450; color: var(--text); border-radius: 999px; padding: 9px 16px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.site-nav-menu { display: none; flex-direction: column; padding: 8px 24px 24px; gap: 4px; border-top: 1px solid #1F1C29; }
.site-header.nav-open .site-nav-menu { display: flex; }   /* assets/js/site.js toggles nav-open on the header */
.site-nav-menu a { color: #C9C4D8; text-decoration: none; font-family: var(--font-display); font-size: 28px; font-weight: 700; padding: 8px 0; }
.site-nav-menu a:hover { color: #FFFFFF; }
@media (max-width: 900px) {
  .site-nav .site-nav-link { display: none; }
  .site-nav-toggle { display: inline-block; }
}
/* The header is fixed, so the page needs its height back. */
body { padding-top: 68px; }

/* Sign-off band, the one light surface on the site, used as a full stop. */
/* Contact CTA and footer, to the Claude Design file. The CTA band is dark now, not light:
   a large Bricolage headline, left aligned, then two pills. */
.signoff { background: var(--bg); color: var(--text); font-family: var(--font); position: relative; overflow: hidden; border-top: 1px solid #1F1C29; }
.signoff-inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 120px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.signoff-title { margin: 0; font-family: var(--font-display); font-size: clamp(44px,7vw,104px); font-weight: 800; letter-spacing: -.045em; line-height: .95; max-width: 1050px; color: var(--text); text-wrap: balance; }
.signoff-row { display: flex; gap: 12px; flex-wrap: wrap; }
.signoff-btn { background: var(--accent-solid); color: #FFFFFF; text-decoration: none; padding: 18px 28px; border-radius: 999px; font-weight: 600; font-size: 17px; white-space: nowrap; transition: background .2s; }
.signoff-btn:hover { background: #5225E0; color: #FFFFFF; }
.signoff-btn-alt { border: 1px solid rgba(255,255,255,.22); color: var(--text); text-decoration: none; padding: 18px 28px; border-radius: 999px; font-weight: 600; font-size: 17px; background: rgba(11,10,16,.5); white-space: nowrap; transition: border-color .2s; }
.signoff-btn-alt:hover { border-color: var(--accent); color: var(--text); }

.site-footer { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; border-top: 1px solid #1F1C29; }
.site-footer-inner { max-width: 1320px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: 40px; }
.site-footer-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.site-footer-brand img { height: 30px; width: auto; align-self: flex-start; }
.site-footer-note { margin: 0; font-size: 15px; line-height: 1.55; color: #B9B4C7; max-width: 260px; }
.site-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.site-footer-col-title { font-size: 12px; font-weight: 700; color: #8F89A3; letter-spacing: .04em; }
.site-footer-link { color: #D9D5E4; text-decoration: none; transition: color .2s; }
.site-footer-link:hover { color: #FFFFFF; }
.site-footer-bottom-wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.site-footer-bottom { padding: 20px 0 32px; border-top: 1px solid #1F1C29; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: #8F89A3; }

@media(max-width:768px) {
  .site-nav-toggle { display: flex; }
  /* The open menu used var(--bg), the same colour as the page behind it, so the
     panel had no edge and the links read as text floating over the hero rather
     than as a menu. It now sits on --raised with a shadow, the links are full
     width with rules between them at a 53px tap height, and the burger turns
     into a close cross so the open state is obvious. */
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--raised); border-bottom: 1px solid var(--border2); box-shadow: 0 18px 40px rgba(0,0,0,.55); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px clamp(20px,4.4vw,56px) 20px; }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav-link { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .site-nav-link:last-of-type { border-bottom: 0; }
  .site-nav-cta { width: 100%; text-align: center; }
  .site-header.nav-open .site-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .site-nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .site-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav-cta { margin-top: 12px; }
  .signoff-inner { gap: 28px; }
  .site-footer-inner { padding-top: 56px; gap: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2026 REDESIGN, STRUCTURAL SECTIONS
   Values taken from design/redesign/novita-site/{Home,Work}.dc.html. These come
   after the original rules deliberately, so they override the 2025 layout for
   the components that changed shape rather than just colour.
   ═══════════════════════════════════════════════════════════════════════ */

.media-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text); opacity: .5; text-align: center; padding: 16px; }

/* HERO, two columns, showcase on the right */
.hero { min-height: 0; display: block; text-align: left; padding: 0; background: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(var(--glow),.09) 0%, rgba(0,0,0,0) 68%); }
.hero-inner { max-width: 1440px; margin: 0 auto; padding: clamp(56px,7vw,96px) clamp(20px,4.4vw,56px) clamp(72px,9vw,120px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,460px),1fr)); gap: 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.hero h1 { margin: 0; font-weight: 500; font-size: clamp(48px,6.4vw,88px); line-height: 1; letter-spacing: -.05em; color: var(--text); max-width: none; text-wrap: balance; opacity: 1; animation: none; }
.hero-sub { margin: 0; font-size: clamp(17px,1.6vw,20px); color: var(--body); max-width: 520px; line-height: 1.5; opacity: 1; animation: none; }
.hero-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; opacity: 1; animation: none; }
.btn-primary { background: #F4F2FA; color: var(--bg); padding: 15px 26px; border-radius: 6px; font-weight: 600; text-decoration: none; box-shadow: none; }
.btn-primary:hover { background: #fff; transform: none; box-shadow: none; }
.btn-link { color: var(--text); border-bottom: 1px solid var(--text); padding-bottom: 2px; text-decoration: none; }
.btn-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.hero-showcase { display: flex; flex-direction: column; gap: 14px; color: var(--text); text-decoration: none; }
/* The mock-up's hero showcase is two tiles, not one: a wide web shot and a tall
   phone beside it, bottom-aligned. Ratios, radii and the 2.2fr/1fr split are
   taken from design/redesign/novita-site/Home.dc.html. */
/* The mock-up splits these 2.2fr/1fr. With two empty placeholders that reads
   fine, but the ratios do the rest: a 16/11 tile beside a 9/19 one at 2.2fr
   makes the phone 1.40x the height of the screen next to it. Once the phone had
   a real bezel that stopped looking like a design and started looking like a
   phone larger than a laptop.

   2.8fr brings it to 1.10x, so the phone stands a little proud of the screen,
   which is what the eye expects. Measured at 1440: 421x290 beside 150x318. */
.hero-showcase-grid { display: grid; grid-template-columns: minmax(0,2.8fr) minmax(0,1fr); gap: 14px; align-items: end; }
.hero-showcase-media { position: relative; aspect-ratio: 16/11; border-radius: 10px; overflow: hidden; background: var(--raised); border: 1px solid var(--border2); }
/* Section 15 of the standard: the device frame is drawn in CSS, never baked
   into the image. The mock-up's tall tile is a plain rounded rectangle, which
   reads as a cropped picture rather than a phone. sourca.co frames its own
   screenshot, and that is the effect wanted here: a dark bezel with the screen
   inset, so the tile says "this runs on a phone" without a word of copy.

   The bezel is padding rather than a border so the inner radius can differ from
   the outer one, which is what makes it read as a device rather than a box. */
/* ── Phone frame ───────────────────────────────────────────────────────────
   Ported from sourca.co, where the same frame already exists as
   `.sourca-device--iphone`. Read off the live stylesheet rather than rebuilt,
   so the two sites show a phone the same way.

   How it works, because none of it is obvious:

   - The body is not a border or padding. It is three stacked box-shadow rings
     on the screen itself: near-black, then a lighter band for the metal rail,
     then near-black again. That is what gives an edge with depth instead of a
     flat outline.
   - Every measurement is in `cqw`, one percent of the container's width, with
     `container-type: inline-size` on the wrapper. So corner radius, body
     thickness and buttons all scale together and the phone is never distorted
     at any size. My hand-rolled version used fixed padding, which fattened the
     silhouette as it shrank: measured 0.4979 against a real iPhone's 0.4816.
   - The `cqw` spacing goes on the image, never on the container. Container
     query units applied to the container that defines them collapse the box:
     tried it, the screen came out 24x50 inside a 150px frame.
   - The side buttons are the wrapper's own ::before and ::after, each repeated
     with box-shadow offsets so one element draws volume up, volume down and
     mute together.

   sourca.co also draws a status bar and a Dynamic Island in CSS, because its
   screenshots are cropped below them. Ours are whole-screen simulator captures
   that already contain both, so those parts are deliberately not ported. Adding
   them would double up.
   ───────────────────────────────────────────────────────────────────────── */

.hero-showcase-phone { position: relative; container-type: inline-size; line-height: 0; }
.hero-showcase-phone img {
  width: calc(100% - 8.8cqw);
  height: auto;
  display: block;
  margin: 4.4cqw;
  border-radius: 12cqw;
  box-shadow:
    0 0 0 3.4cqw #0E0E10,
    0 0 0 3.9cqw #3F3F44,
    0 0 0 4.4cqw #1B1B1E,
    0 40px 70px -24px rgba(0,0,0,.6);
}
.hero-showcase-phone::before,
.hero-showcase-phone::after { content: ''; position: absolute; width: 1.1cqw; border-radius: 1cqw; background: #3F3F44; }
.hero-showcase-phone::before { left: -0.6cqw; top: 20%; height: 6.5%; box-shadow: 0 12cqw 0 #3F3F44, 0 -8cqw 0 #3F3F44; }
.hero-showcase-phone::after { right: -0.6cqw; top: 28%; height: 10%; }

.hero-showcase-phone:not(:has(img)) { aspect-ratio: 9/19; background: var(--raised); border: 1px solid var(--border2); border-radius: 30px; }

/* A mockup with the phone body already drawn into the picture needs none of the
   above, or the device ends up inside a second device. Ticked per portfolio
   item. The image must be a transparent PNG: anything opaque becomes a pale
   slab on the dark hero, whatever shape the phone in it is. */
.hero-showcase-phone.is-framed::before,
.hero-showcase-phone.is-framed::after { display: none; }
.hero-showcase-phone.is-framed img { width: 100%; margin: 0; border-radius: 0; box-shadow: none; }
.hero-showcase-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-showcase-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.hero-showcase-meta strong { color: var(--text); font-weight: 500; }
.hero-status { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
.hero-status .dot, .work-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* PROCESS, a rail of dots joined by a line */
.process-head { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 24px 80px; align-items: end; margin-bottom: 56px; }
.process-head .section-title { font-weight: 500; font-size: clamp(36px,4.4vw,56px); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.process-intro { margin: 0; color: var(--body); max-width: 480px; }
.process-steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.process-steps .step { display: flex; flex-direction: column; gap: 18px; padding: 0 28px 8px 0; }
.process-steps .step::after { content: none; }
.step-rail { display: flex; align-items: center; }
.step-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; background: var(--accent); border: 2px solid var(--accent); }
.step.is-last .step-dot { background: var(--bg); border-color: var(--light); }
.step-line { flex: 1; height: 1px; background: var(--border2); }
/* The 2025 rule made this a 46px gradient tile; reset the box, not just the type. */
.step-num { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; display: block; margin: 0; font-size: 14px; font-weight: 400; color: var(--muted); }
.step-title { font-weight: 500; font-size: clamp(26px,2.4vw,32px); letter-spacing: -.03em; line-height: 1.05; color: var(--text); margin: 0; }
.step-desc { color: var(--body); font-size: 16px; }
.step-detail { color: var(--muted); font-size: 14px; }

/* WHAT WE MAKE */
.makes-inner { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 40px 80px; }
.makes-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.makes-title { margin: 0; font-weight: 500; font-size: clamp(36px,4.4vw,56px); line-height: 1.05; letter-spacing: -.04em; color: var(--text); }
.makes-link { color: var(--text); border-bottom: 1px solid var(--text); padding-bottom: 2px; font-size: 15px; text-decoration: none; }
.makes-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.makes-list { display: flex; flex-direction: column; border-top: 1px solid var(--border2); }
.makes-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border2); align-items: baseline; }
.makes-name { font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text); }
.makes-desc { color: var(--body); font-size: 16px; }

/* WORK */
.work-section { background: var(--bg); }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 24px; margin-top: 24px; }
.work-card { display: flex; flex-direction: column; gap: 14px; color: var(--text); text-decoration: none; border-radius: 0; overflow: visible; box-shadow: none; transform: none; }
.work-card:hover { transform: none; box-shadow: none; }
.work-card:hover .work-media img { transform: scale(1.03); }
.work-card.is-lead { margin-top: 24px; gap: 20px; }
.work-media { position: relative; aspect-ratio: 16/11; border-radius: 10px; overflow: hidden; background: var(--raised); }
.work-card.is-lead .work-media { aspect-ratio: 16/8; min-height: 320px; }
.work-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.work-cat { font-size: 13px; color: var(--muted); }
.work-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; padding: 5px 12px; font-size: 13px; }
.work-title { font-weight: 500; font-size: 28px; letter-spacing: -.03em; line-height: 1.05; color: var(--text); }
.work-card.is-lead .work-title { font-size: clamp(40px,4.6vw,60px); line-height: 1; letter-spacing: -.05em; }
.work-summary { color: var(--body); max-width: 560px; }
.work-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.work-tag { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border2); padding: 4px 12px; border-radius: 100px; }
.work-more { color: var(--accent); font-size: 15px; }
.work-next { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; color: var(--text); text-decoration: none; border: 1px dashed var(--light); border-radius: 10px; padding: clamp(28px,3vw,40px); min-height: 360px; }
.work-next:hover { border-color: var(--accent); }
.work-next-body { display: flex; flex-direction: column; gap: 14px; }
.work-next .work-title { font-size: clamp(32px,3.4vw,44px); letter-spacing: -.04em; text-wrap: balance; }

@media(max-width:768px) {
  .hero-inner { gap: 36px; }
  .process-steps .step { padding-right: 0; padding-bottom: 28px; }
  .makes-row { grid-template-columns: 1fr; gap: 6px; }
  .work-card.is-lead .work-media { min-height: 220px; }
  .work-next { min-height: 260px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE INTRO + SERVICE STAGES, from Services.dc.html
   ═══════════════════════════════════════════════════════════════════════ */

.page-intro { background: var(--bg); }
.page-intro-inner { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; padding-top: clamp(72px,9vw,120px); padding-bottom: 56px; }
.page-intro-label { font-size: 15px; font-weight: 500; color: var(--accent); }
.page-intro-title { margin: 0; font-weight: 500; font-size: clamp(48px,7vw,96px); line-height: 1; letter-spacing: -.05em; max-width: 1000px; color: var(--text); text-wrap: balance; }
.page-intro-sub { margin: 0; font-size: clamp(17px,1.6vw,20px); color: var(--body); max-width: 620px; }
.page-intro-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.page-intro-link { border: 1px solid var(--light); color: var(--text); padding: 10px 18px; border-radius: 6px; font-size: 15px; text-decoration: none; transition: border-color .2s, color .2s; }
.page-intro-link:hover { border-color: var(--accent); color: var(--accent); }

.stage-section { background: var(--bg); padding: clamp(56px,7vw,96px) 0; }
.stage-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 48px 64px; border-top: 1px solid var(--border2); padding-top: 48px; }
.stage-grid.is-single { grid-template-columns: 1fr; }
.stage-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.stage-num { font-size: 14px; color: var(--muted); }
.stage-title { margin: 0; font-weight: 500; font-size: clamp(44px,5.6vw,72px); line-height: 1; letter-spacing: -.05em; color: var(--text); }
.stage-body { margin: 0; color: var(--body); font-size: 18px; max-width: 480px; }
.stage-list { display: flex; flex-direction: column; border-top: 1px solid var(--border2); margin-top: 8px; width: 100%; }
.stage-row { display: grid; grid-template-columns: minmax(0,200px) minmax(0,1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border2); }
.stage-name { font-weight: 500; color: var(--text); }
.stage-desc { color: var(--body); font-size: 16px; }
.stage-media { position: relative; min-height: clamp(360px,40vw,560px); border-radius: 10px; overflow: hidden; background: var(--raised); }
.stage-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media(max-width:768px) {
  .stage-grid { gap: 32px; padding-top: 32px; }
  .stage-row { grid-template-columns: 1fr; gap: 6px; }
  .stage-media { min-height: 240px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STUDIO / CONTACT / CASE STUDY, from Studio.dc.html, Contact.dc.html,
   Sourca.dc.html
   ═══════════════════════════════════════════════════════════════════════ */

/* Shared key/value list */
.fact-list { display: flex; flex-direction: column; border-top: 1px solid var(--border2); margin-top: 8px; width: 100%; }
.fact-row { display: grid; grid-template-columns: minmax(0,180px) minmax(0,1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--border2); }
.fact-key { color: var(--muted); font-size: 15px; }
.fact-value { color: var(--text); }
.fact-value a { color: var(--accent); text-decoration: none; }

/* STUDIO */
.studio-section { background: var(--bg); padding-bottom: clamp(72px,9vw,120px); }
.studio-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 48px 80px; align-items: start; }
.studio-grid.is-single { grid-template-columns: 1fr; max-width: 820px; }
.studio-media { position: relative; aspect-ratio: 4/5; max-width: 560px; border-radius: 10px; overflow: hidden; background: var(--raised); }
.studio-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.studio-title { margin: 0; font-weight: 500; font-size: clamp(32px,3.6vw,48px); line-height: 1.08; letter-spacing: -.04em; color: var(--text); text-wrap: balance; }
.studio-body { display: flex; flex-direction: column; gap: 20px; color: var(--body); font-size: 18px; }
.studio-body p { margin: 0; }
.ways-block { display: flex; flex-direction: column; gap: 48px; margin-top: clamp(72px,9vw,120px); }
.ways-heading { margin: 0; font-weight: 500; font-size: clamp(36px,4.4vw,56px); line-height: 1.05; letter-spacing: -.04em; color: var(--text); }
.ways-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 40px 32px; }
.way { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--text); padding-top: 20px; }
.way-title { font-weight: 500; font-size: 24px; letter-spacing: -.02em; color: var(--text); }
.way-desc { color: var(--body); font-size: 16px; }

/* CONTACT PAGE */
.contact-page { background: var(--bg); padding: clamp(72px,9vw,120px) 0; }
.contact-page-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 56px 80px; align-items: start; }
.contact-page-copy { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.contact-page-title { margin: 0; font-weight: 500; font-size: clamp(48px,6.4vw,88px); line-height: 1; letter-spacing: -.05em; color: var(--text); text-wrap: balance; }
.contact-page-sub { margin: 0; font-size: clamp(17px,1.6vw,20px); color: var(--body); max-width: 480px; }
.enquiry-form { background: var(--raised); border: 1px solid var(--border2); border-radius: 10px; padding: clamp(24px,3vw,40px); display: flex; flex-direction: column; gap: 22px; }
.needs { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.needs-legend { padding: 0; font-size: 15px; color: var(--body); }
.needs-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* Real checkboxes, visually a pill, keyboard and screen readers get proper
   semantics, and the form still works with JavaScript off. */
.need-pill { position: relative; }
.need-pill input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.need-pill span { display: inline-block; font-size: 15px; padding: 9px 16px; border-radius: 6px; border: 1px solid var(--light); color: var(--text); transition: background .2s, border-color .2s, color .2s; }
.need-pill input:checked + span { background: #F4F2FA; border-color: #F4F2FA; color: var(--bg); }
.need-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.field-label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--body); }
.field-label input, .field-label textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--light); border-radius: 6px; padding: 14px 16px; outline: none; }
.field-label textarea { resize: vertical; }
.field-label input:focus, .field-label textarea:focus { border-color: var(--accent); }
.enquiry-submit { font: inherit; font-weight: 600; background: #F4F2FA; color: var(--bg); border: 0; border-radius: 6px; padding: 16px 26px; cursor: pointer; align-self: flex-start; }
.enquiry-submit:hover { background: #fff; }

/* CASE STUDY */
.case-study { background: var(--bg); padding: clamp(72px,9vw,120px) 0; }
.case-intro { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; margin-bottom: 48px; }
.case-title { margin: 0; font-weight: 500; font-size: clamp(40px,6vw,84px); line-height: 1; letter-spacing: -.05em; max-width: 1100px; color: var(--text); text-wrap: balance; }
.case-links { display: flex; gap: 8px; flex-wrap: wrap; }
.case-link { border: 1px solid var(--light); color: var(--text); padding: 10px 18px; border-radius: 6px; font-size: 15px; text-decoration: none; }
.case-link:hover { border-color: var(--accent); color: var(--accent); }
.case-media { position: relative; aspect-ratio: 16/8; min-height: 280px; border-radius: 10px; overflow: hidden; background: var(--raised); margin-bottom: 48px; }
.case-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-facts { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: 24px 32px; border-top: 1px solid var(--border2); padding-top: 28px; margin-bottom: clamp(56px,7vw,96px); }
.case-fact { display: flex; flex-direction: column; gap: 6px; }
.case-block { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 24px 80px; border-top: 1px solid var(--border2); padding-top: 48px; margin-bottom: clamp(56px,7vw,96px); }
.case-block-title { margin: 0; font-weight: 500; font-size: clamp(32px,4vw,52px); line-height: 1.05; letter-spacing: -.04em; color: var(--text); text-wrap: balance; }
.case-block-body { display: flex; flex-direction: column; gap: 18px; color: var(--body); font-size: 18px; }
.case-block-body p { margin: 0; }
.case-work { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 32px; }
.case-work-item { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border2); padding-top: 18px; }
.case-work-num { font-size: 14px; color: var(--muted); }
.case-work-title { font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text); }
.case-work-body { color: var(--body); font-size: 16px; }
.case-status { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border2); padding-top: 28px; }
.case-status-label { font-size: 14px; color: var(--muted); }
.case-status-body { margin: 0; font-weight: 500; font-size: clamp(26px,3vw,40px); line-height: 1.1; letter-spacing: -.03em; color: var(--text); max-width: 900px; }

@media(max-width:768px) {
  .fact-row, .case-block { grid-template-columns: 1fr; gap: 6px; }
  .case-block { gap: 20px; padding-top: 32px; }
  .studio-grid { gap: 32px; }
  .ways-block { margin-top: 56px; gap: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BUILDER IMAGE SLOTS + LEGAL PAGES
   ═══════════════════════════════════════════════════════════════════════ */

/* Only ever rendered inside the Visual Builder, see novita_is_preview(). */
.image-slot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px; border: 1px dashed var(--light); border-radius: 10px; background: rgba(var(--glow),.03); }
.image-slot-label { font-size: 15px; font-weight: 500; color: var(--body); max-width: 320px; }
.image-slot-field { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.stage-media.is-empty, .studio-media.is-empty, .case-media.is-empty { position: relative; background: transparent; }
.work-media .image-slot, .hero-showcase-media .image-slot { background: rgba(7,6,13,.55); }

/* Long-form legal / policy pages */
.legal-content { max-width: 760px; padding: clamp(56px,7vw,96px) 0; color: var(--body); font-size: 17px; line-height: 1.7; }
.legal-content h1 { font-weight: 500; font-size: clamp(40px,5vw,64px); line-height: 1.05; letter-spacing: -.04em; color: var(--text); margin: 0 0 16px; }
.legal-content h2 { font-weight: 500; font-size: clamp(22px,2.4vw,28px); letter-spacing: -.02em; color: var(--text); margin: 48px 0 12px; }
.legal-content h3 { font-weight: 500; font-size: 19px; color: var(--text); margin: 28px 0 8px; }
.legal-content p { margin: 0 0 16px; }
.legal-content ul { margin: 0 0 16px; padding-left: 20px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--accent); }
.legal-content strong { color: var(--text); font-weight: 500; }
.legal-content .legal-updated { font-size: 14px; color: var(--muted); margin-bottom: 40px; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.legal-content th, .legal-content td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--border2); vertical-align: top; }
.legal-content th { color: var(--muted); font-weight: 400; width: 34%; }

.site-footer-legal { display: flex; gap: 24px; }
.site-footer-legal a { color: var(--muted); text-decoration: none; }
.site-footer-legal a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   nv-* CLASS LIBRARY, for native Divi modules
   ══════════════════════════════════════════════════════════════════════════
   The same approach sourca.co uses: build the page out of ordinary Divi
   sections, rows, text and button modules, then put one of these class names in
   the module's CSS Class field to get the design. Every word stays editable in
   the builder, because it is a real Divi module.

   Divi wraps text module content in .et_pb_text_inner, so each rule targets
   both the module itself and its inner elements, the class goes on the module, the
   styling lands on whatever is inside it.

   Use these for prose. The database-driven grids (services, portfolio, pricing,
   FAQ, toolkit) stay as the novità Section module, because Divi cannot loop a
   post type into that markup.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Typography ─────────────────────────────────────────────────────────── */
.nv-eyebrow, .nv-eyebrow .et_pb_text_inner { font-size: 15px; font-weight: 500; color: var(--accent); letter-spacing: 0; }

.nv-h1, .nv-h1 .et_pb_text_inner > *, .nv-h1 h1, .nv-h1 h2 { font-weight: 500; font-size: clamp(48px,7vw,96px); line-height: 1; letter-spacing: -.05em; color: var(--text); margin: 0; text-wrap: balance; }
.nv-h2, .nv-h2 .et_pb_text_inner > *, .nv-h2 h2, .nv-h2 h3 { font-weight: 500; font-size: clamp(36px,4.4vw,56px); line-height: 1.05; letter-spacing: -.04em; color: var(--text); margin: 0; text-wrap: balance; }
.nv-h3, .nv-h3 .et_pb_text_inner > *, .nv-h3 h3, .nv-h3 h4 { font-weight: 500; font-size: clamp(26px,2.4vw,32px); line-height: 1.05; letter-spacing: -.03em; color: var(--text); margin: 0; }
.nv-h4, .nv-h4 .et_pb_text_inner > * { font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--text); margin: 0; }

.nv-lead, .nv-lead .et_pb_text_inner { font-size: clamp(17px,1.6vw,20px); line-height: 1.5; color: var(--body); font-weight: 400; }
.nv-body, .nv-body .et_pb_text_inner { font-size: 17px; line-height: 1.6; color: var(--body); }
.nv-small, .nv-small .et_pb_text_inner { font-size: 14px; color: var(--muted); }
.nv-num, .nv-num .et_pb_text_inner { font-size: 14px; color: var(--muted); }
.nv-accent, .nv-accent .et_pb_text_inner, .nv-accent .et_pb_text_inner a { color: var(--accent); }
.nv-measure, .nv-measure .et_pb_text_inner { max-width: 520px; }

/* The gradient span survives from the old design; here it is the accent colour. */
.nv-h1 .grad-text, .nv-h2 .grad-text, .nv-h3 .grad-text { color: var(--accent); }

/* ── Buttons and links ──────────────────────────────────────────────────── */
/* Put these on a Divi Button module. */
.nv-btn.et_pb_button, .nv-btn .et_pb_button { background: #F4F2FA !important; color: var(--bg) !important; border: 0 !important; border-radius: 6px !important; padding: 15px 26px !important; font-weight: 600 !important; font-size: 16px !important; }
.nv-btn.et_pb_button:hover { background: #fff !important; padding: 15px 26px !important; }
.nv-btn.et_pb_button:after, .nv-btn-ghost.et_pb_button:after { display: none !important; }
.nv-btn-ghost.et_pb_button { background: transparent !important; color: var(--text) !important; border: 1px solid var(--light) !important; border-radius: 6px !important; padding: 14px 24px !important; font-weight: 500 !important; }
.nv-btn-ghost.et_pb_button:hover { border-color: var(--accent) !important; color: var(--accent) !important; padding: 14px 24px !important; }

/* The hero's second action. In the mock-up it is an underlined text link beside
   the solid button, not a second button, so nv-btn-link strips the chrome and
   leaves the rule under the text.

   nv-hero-action puts the two side by side: Divi modules are blocks and would
   otherwise stack, and the design has them on one line with a 20px gap. */
.nv-btn-link.et_pb_button, .nv-btn-link .et_pb_button { background: transparent !important; color: var(--text) !important; border: 0 !important; border-bottom: 1px solid var(--text) !important; border-radius: 0 !important; padding: 0 0 2px !important; font-weight: 400 !important; font-size: 16px !important; }
.nv-btn-link.et_pb_button:hover, .nv-btn-link .et_pb_button:hover { color: var(--accent) !important; border-bottom-color: var(--accent) !important; padding: 0 0 2px !important; }
.nv-btn-link.et_pb_button:after, .nv-btn-link .et_pb_button:after { display: none !important; }

/* The mock-up's two hero actions sit on one line, vertically centred. The class
   lands on Divi's <a>, which is already inline-block, but each button is wrapped
   in a block-level module wrapper and that is what was stacking them. Verified
   against the live DOM: inline-block alone left the link 28px low, because the
   two wrappers have different heights (57px against 30px), so the wrapper is a
   centring flex box rather than relying on vertical-align. */
.et_pb_button_module_wrapper:has(> .nv-hero-action) { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 20px 0 0; }
.et_pb_button_module_wrapper:has(> .nv-hero-action):last-child { margin-right: 0; }
.nv-hero-action { margin: 0 !important; }
.nv-underline a, a.nv-underline { color: var(--text); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.nv-underline a:hover { color: var(--accent); }

/* ── Surfaces ───────────────────────────────────────────────────────────── */
/* On a Divi Row or Column. */
.nv-card { background: var(--raised); border: 1px solid var(--border2); border-radius: 10px; padding: clamp(24px,3vw,40px) !important; }
.nv-card-hover { transition: box-shadow .25s, transform .25s; }
.nv-card-hover:hover { box-shadow: 0 14px 44px rgba(var(--glow),.10); transform: translateY(-3px); }
.nv-bordered { border: 1px solid var(--border2); border-radius: 10px; }
.nv-dashed { border: 1px dashed var(--light); border-radius: 10px; padding: clamp(28px,3vw,40px) !important; }
.nv-rule-top { border-top: 1px solid var(--border2); padding-top: 48px !important; }

/* Media frames, put on a Divi Image module. */
.nv-media, .nv-media .et_pb_image_wrap { border-radius: 10px; overflow: hidden; display: block; }
.nv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nv-media-16-9 .et_pb_image_wrap { aspect-ratio: 16/9; }
.nv-media-16-11 .et_pb_image_wrap { aspect-ratio: 16/11; }
.nv-media-16-8 .et_pb_image_wrap { aspect-ratio: 16/8; }
.nv-media-4-5 .et_pb_image_wrap { aspect-ratio: 4/5; }

/* ── Ruled key/value list ───────────────────────────────────────────────── */
/* Put on a Divi Text module, then write a two-column table or a definition
   list inside it, or use the markup shown in wp/README.md. */
.nv-ruled .et_pb_text_inner > *, .nv-ruled > * { border-top: 1px solid var(--border2); }
.nv-ruled table { width: 100%; border-collapse: collapse; }
.nv-ruled td, .nv-ruled th { text-align: left; padding: 18px 0; border-bottom: 1px solid var(--border2); vertical-align: top; font-weight: 400; }
.nv-ruled th { color: var(--muted); font-size: 15px; width: 34%; }
.nv-ruled td { color: var(--body); font-size: 16px; }
.nv-ruled td:first-child { color: var(--text); font-weight: 500; }
.nv-ruled ul { list-style: none; margin: 0; padding: 0; }
.nv-ruled li { display: grid; grid-template-columns: minmax(0,200px) minmax(0,1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border2); }
.nv-ruled li strong { font-weight: 500; color: var(--text); }

/* ── Badges and pills ───────────────────────────────────────────────────── */
.nv-badge, .nv-badge .et_pb_text_inner { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; padding: 5px 12px; font-size: 13px; }
.nv-pill, .nv-pill .et_pb_text_inner { display: inline-block; border: 1px solid var(--light); color: var(--text); border-radius: 6px; padding: 10px 18px; font-size: 15px; }
.nv-tag, .nv-tag .et_pb_text_inner { display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border2); padding: 4px 12px; border-radius: 100px; }

/* ── Section backgrounds ────────────────────────────────────────────────── */
/* On a Divi Section. */
.nv-section-light { background: #F4F2FA !important; }
.nv-section-light, .nv-section-light .et_pb_text_inner, .nv-section-light h1, .nv-section-light h2, .nv-section-light p { color: var(--bg) !important; }
.nv-section-light .nv-btn.et_pb_button { background: var(--bg) !important; color: #F4F2FA !important; }
.nv-section-raised { background: var(--raised) !important; }
.nv-section-glow { background: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(var(--glow),.09) 0%, rgba(0,0,0,0) 68%) !important; }

/* ── Rails and dividers ─────────────────────────────────────────────────── */
.nv-dot::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); margin-right: 12px; vertical-align: middle; }
.nv-dot-hollow::before { background: var(--bg); border: 2px solid var(--light); }
.nv-divider { height: 1px; background: var(--border2); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   CLASSES USED BY THE DIVI LAYOUTS IN layouts/
   These style native Divi modules, so they reach through .et_pb_text_inner.
   ═══════════════════════════════════════════════════════════════════════ */

/* Header */
.nv-header { border-bottom: 1px solid var(--border); }
.nv-header-row.et_pb_row { display: flex !important; align-items: center; justify-content: space-between; }
.nv-logo .et_pb_text_inner img { height: 26px; width: auto; display: block; }
.nv-nav .et_pb_text_inner { display: flex; gap: clamp(18px,2.6vw,36px); align-items: center; justify-content: flex-end; flex-wrap: wrap; font-size: 15px; }
.nv-nav a { color: var(--text); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.nv-nav a:hover { border-bottom-color: var(--accent); }
.nv-nav a.nv-nav-cta { border: 1px solid rgba(255,255,255,.6); border-radius: 6px; padding: 10px 22px; }
.nv-nav a.nv-nav-cta:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* Footer */
.nv-footer { border-top: 1px solid var(--border); }
.nv-footer-brand .et_pb_text_inner img { height: 32px; width: auto; display: block; margin-bottom: 16px; } /* 32, not the design's 24: the full colour mark has a gradient spiral inside the o,
    which turns to a smudge at 24px. The flat white header mark is fine at 26. */
.nv-footer-note { color: var(--muted); max-width: 260px; }
.nv-footer-col .et_pb_text_inner { display: flex; flex-direction: column; gap: 12px; }
.nv-footer-col a { color: var(--text); text-decoration: none; }
.nv-footer-col a:hover { color: var(--accent); }
.nv-footer-title { font-size: 14px; color: var(--muted); }

/* Process steps, built as four Divi columns */
.nv-step .et_pb_text_inner { display: flex; flex-direction: column; gap: 14px; padding-right: 28px; border-top: 1px solid var(--border2); padding-top: 18px; position: relative; }
.nv-step .et_pb_text_inner::before { content: ''; position: absolute; top: -7px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--accent); }
.nv-step-last .et_pb_text_inner::before { background: var(--bg); border-color: var(--light); }
.nv-step .nv-num, .nv-step span.nv-num { font-size: 14px; color: var(--muted); }
.nv-step h3 { font-weight: 500; font-size: clamp(26px,2.4vw,32px); letter-spacing: -.03em; line-height: 1.05; color: var(--text); margin: 0; }
.nv-step p { color: var(--body); font-size: 16px; margin: 0; }
.nv-step .nv-detail { color: var(--muted); font-size: 14px; }

/* Ways of working */
.nv-way .et_pb_text_inner { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--text); padding-top: 20px; }
.nv-way h3 { font-weight: 500; font-size: 24px; letter-spacing: -.02em; color: var(--text); margin: 0; }
.nv-way p { color: var(--body); font-size: 16px; margin: 0; }

/* Jump links row */
.nv-jumplinks .et_pb_text_inner { display: flex; gap: 8px; flex-wrap: wrap; }
.nv-jumplinks a { border: 1px solid var(--light); color: var(--text); padding: 10px 18px; border-radius: 6px; font-size: 15px; text-decoration: none; }
.nv-jumplinks a:hover { border-color: var(--accent); color: var(--accent); }

@media(max-width:768px) {
  .nv-header-row.et_pb_row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nv-nav .et_pb_text_inner { justify-content: flex-start; }
  .nv-step .et_pb_text_inner { padding-right: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DIVI RESETS
   Divi's own stylesheet sets `.et_pb_section { background-color: #fff }`, which
   on a dark theme turns every section into a white slab with near-invisible
   text. Verified on the live site: only sections carrying one of the nv-section
   classes (which use !important) escaped it.
   Plain specificity is enough, this file loads after Divi's, so a background
   set on a section in the builder still wins, as it should.
   ═══════════════════════════════════════════════════════════════════════ */

.et_pb_section { background-color: transparent; }
.et_pb_row, .et_pb_column { background-color: transparent; }

/* Divi's default body/section text colour is dark; inherit the theme's instead. */
#page-container, #et-main-area, .et-l--body { background-color: transparent; }
/* Non-builder pages (Sourca, Privacy, Terms) render through Divi's own page
   template, where #main-content carries a white background. Measured on
   /sourca/: rgb(255,255,255) behind a dark case study. */
#main-content, #main-content .container, #left-area { background-color: transparent; }
.et_pb_text_inner { color: inherit; }

/* The Theme Builder header and footer wrap `[novita_header]` / `[novita_footer]`
   in a Divi section + row, which add 54px of vertical padding and clamp the row
   to Divi's 1080px content width. Both already lay themselves out full-bleed and
   bring their own gutters, so strip Divi's chrome off those two layouts only , 
   page sections are untouched. */
.et-l--header .et_pb_section,
.et-l--footer .et_pb_section { padding-top: 0; padding-bottom: 0; }

.et-l--header .et_pb_row,
.et-l--footer .et_pb_row { width: 100%; max-width: none; padding: 0; margin: 0; }

.et-l--header .et_pb_module,
.et-l--footer .et_pb_module { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE SECTIONS INSIDE DIVI ROWS
   The section renderers output `<section class="…-section"><div class="section-
   inner">`, geometry inherited from the standalone redesign mock-up where that
   wrapper WAS the page container: `section { padding: 110px 60px }` (line 66)
   plus `.section-inner { max-width: 1100px }` (line 67).

   Nested inside a Divi row those double up. Measured on the live site: Divi's
   row is already 1240px at x=100, so the 60px padding and the 1100px clamp
   pushed shortcode sections to x=170 while the Divi-native sections (hero,
   process) stayed at x=100, two different left margins down the page. Vertical
   was worse: Divi's own 54px stacked on our 110px gave 54 / 110 / 164px gaps
   depending on the section.

   So: inside a Divi row the wrapper keeps its vertical rhythm and gives up its
   horizontal padding and width clamp, and the Divi section it sits in gives up
   its vertical padding. One margin (Divi's row) and one rhythm (ours).
   `:has()` is fine here, Divi 5 needs a modern browser anyway, and support was
   confirmed on the live site before this shipped.
   ═══════════════════════════════════════════════════════════════════════ */

.et_pb_row section { padding-left: 0; padding-right: 0; }
.et_pb_row .section-inner { max-width: none; }
.et_pb_section:has(> .et_builder_inner_content section, .et_pb_row section) {
  padding-top: 0;
  padding-bottom: 0;
}


/* Side gutter.
   Divi rows are width:100% with a 1240px max, so above 1240 they sit in a
   comfortable margin and below it they run edge to edge: measured at a 1024px
   viewport the rows were the full 1024 wide, with the text touching both sides.
   The mock-up keeps a clamp(20px,4.4vw,56px) gutter at every width, so the row
   is capped by whichever is smaller, the content width or the viewport less two
   gutters. Verified at 1024: rows land at x=45, 934 wide, matching the design. */
#et-main-area .et_pb_row {
  width: min(100% - clamp(40px,8.8vw,112px), 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The sign-off panel is a full-bleed band in the mock-up: the light background
   is the section's, and only the words inside are capped at 1440. Ours was
   boxed at 1193px with dark gutters either side, because it sits in the Theme
   Builder footer where `.et-l--footer` carries 60px of padding and the row was
   being auto-centred by the gutter rule above.

   It was also twice as tall as it should be. `.signoff-inner` already has the
   design's clamp(72px,9vw,120px), and the bare `section` rule on line 66 was
   adding another 110px at each end: measured 839px against a design height of
   about 620. Same stray selector that misaligned the page sections earlier. */
.et-l--footer { padding-left: 0; padding-right: 0; }
.signoff { padding: 0; }

/* The Theme Builder header and footer render INSIDE #et-main-area, so the
   gutter rule above was capping them at 1240 and centring them: an id beats
   every class selector, which is why `.et-l--footer .et_pb_row` with
   a doubled class and Divi's own --content-width all failed to move it. The id
   is half the answer; the other half is that the gutter rule is !important, so
   an override needs to be too, whatever its specificity. */
#et-main-area .et-l--header .et_pb_row,
#et-main-area .et-l--footer .et_pb_row {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Phone. This block stays last in the file, per section 14 of the standard. */
@media (max-width: 640px) {
  /* The showcase's split leaves the phone tile too narrow to read on a phone,
     so the two tiles stack.

     The phone needs an explicit width, not a max-width, and cannot be centred
     with justify-items. It carries `container-type: inline-size`, so its inline
     size is resolved without reference to its contents: take away the grid's
     stretch and it has nothing to size from and collapses to zero. Measured it
     doing exactly that at 0x0 before settling on a fixed width. */
  .hero-showcase-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-showcase-phone { width: 200px; max-width: none; justify-self: center; }

  /* The accent phrase gets its own line. At 390px the headline was breaking as
     "and build the" / "software your" / "business runs on.", so the green
     started mid-line and the sentence read as two halves spliced together. */
  .hero h1 .grad-text, .nv-h1 .grad-text { display: block; }
  /* Hero actions go back to stacking, full width, rather than wrapping oddly. */
  .et_pb_button_module_wrapper:has(> .nv-hero-action) { display: flex; margin: 0 0 16px 0; }
}

/* Hero: centre the showcase against the copy, as the mock-up does. */
.nv-section-glow .et_pb_row { display: flex; align-items: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   404
   The numeral is the page. Two text 4s with a drawn ring between them, sharing
   one gradient that sweeps across all three, and the ring turning slowly so the
   O reads as the spiral from the logo rather than a letter. No image, no video,
   nothing to load: it is a background-position and a rotate, both of which the
   compositor handles without touching layout.

   404.php is a plain WordPress template, not a Divi layout, so this sits
   outside .et_pb_row and brings its own width and padding.
   ═══════════════════════════════════════════════════════════════════════ */

.error-page { background: var(--bg); min-height: 72vh; display: flex; align-items: center; padding: clamp(72px,9vw,120px) clamp(20px,4.4vw,56px); }
.error-inner { width: 100%; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.error-num {
  display: flex;
  align-items: center;
  gap: .04em;
  font-weight: 500;
  font-size: clamp(110px,20vw,260px);
  line-height: .85;
  letter-spacing: -.06em;
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 28%, var(--accent) 56%, var(--accent-2) 84%, var(--accent) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nv-404-sweep 7s linear infinite;
}

/* The 0. An empty span, so the ring can rotate independently of the 4s and the
   gap in it stays visible against the page rather than filling with colour. */
.error-ring { width: .62em; height: .62em; border-radius: 50%; border: .115em solid var(--accent); position: relative; flex-shrink: 0; animation: nv-404-spin 3.4s cubic-bezier(.65,0,.35,1) infinite; }
.error-ring::after { content: ''; position: absolute; inset: -.115em; border-radius: 50%; border: .115em solid transparent; border-top-color: var(--bg); }

@keyframes nv-404-sweep { to { background-position: -300% 0; } }
@keyframes nv-404-spin  { to { transform: rotate(360deg); } }

.error-title { margin: 0; font-weight: 500; font-size: clamp(30px,3.6vw,48px); letter-spacing: -.035em; line-height: 1.1; color: var(--text); }
.error-text { margin: 0; font-size: clamp(17px,1.6vw,20px); line-height: 1.6; color: var(--body); max-width: 46ch; }
.error-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.error-link { display: inline-block; padding: 13px 22px; border: 1px solid var(--border2); border-radius: 6px; color: var(--text); text-decoration: none; font-size: 15px; transition: border-color .2s, color .2s; }
.error-link:hover { border-color: var(--accent); color: var(--accent); }
.error-link.is-primary { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.error-link.is-primary:hover { opacity: .88; color: var(--bg); border-color: var(--text); }

/* Motion is decoration here, so it goes entirely rather than slowing down. The
   gradient stops mid-sweep on a flat accent, which is what it should look like
   standing still. */
@media (prefers-reduced-motion: reduce) {
  .error-num { animation: none; background: var(--accent); -webkit-background-clip: text; background-clip: text; }
  .error-ring { animation: none; }
}

/* Group heading inside the Work section, between the two grids. Sized as an
   eyebrow rather than a section title: it separates two kinds of work, it does
   not introduce a new section. */
.work-group { margin: 56px 0 24px; font-size: 15px; font-weight: 500; color: var(--accent); letter-spacing: 0; }
.work-group:first-of-type { margin-top: 40px; }

/* ───────────────────────────────────────────────────────────────────────────
   CLAUDE DESIGN SECTIONS
   Ported from design/claude-design/Novita Site.dc.html. The design keeps its
   styling inline on every element; here it is lifted into classes with the
   same values, so the rendering matches while staying editable.

   The motion is all CSS: two drifting radial glows, two counter-rotating SVG
   arcs and the ring mark. The design's own reduced-motion guard is kept.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes nvDrift1 { 0%,100% { transform: translate(-10%,-6%) scale(1); } 50% { transform: translate(12%,8%) scale(1.25); } }
@keyframes nvDrift2 { 0%,100% { transform: translate(10%,10%) scale(1.1); } 50% { transform: translate(-14%,-4%) scale(.9); } }
@keyframes nvSpin  { to { transform: rotate(360deg); } }
@keyframes nvSpinR { to { transform: rotate(-360deg); } }
@keyframes nvDash  { 0% { stroke-dashoffset: 880; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -880; } }
@keyframes nvPulse { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes nvWord  { 0%,22% { transform: translateY(0); } 25%,47% { transform: translateY(-25%); } 50%,72% { transform: translateY(-50%); } 75%,97% { transform: translateY(-75%); } 100% { transform: translateY(-75%); } }
@keyframes nvTick  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nvIn    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nv-motion, .nv-ticker-row, .nv-cycle span { animation: none !important; }
}

/* ── shared motion layer ── */
.nv-motion { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.nv-glow { position: absolute; border-radius: 50%; filter: blur(20px); }
.nv-glow-a { width: 70vw; height: 70vw; top: -20%; right: -15%; background: radial-gradient(circle, rgba(102,51,255,.55) 0%, rgba(0,0,0,0) 65%); animation: nvDrift1 18s ease-in-out infinite; }
.nv-glow-b { width: 50vw; height: 50vw; bottom: -10%; left: -10%; background: radial-gradient(circle, rgba(177,27,245,.35) 0%, rgba(0,0,0,0) 65%); animation: nvDrift2 22s ease-in-out infinite; }
.nv-ring { position: absolute; display: flex; align-items: center; justify-content: center; }
.nv-ring svg { width: 125%; height: 125%; }
.nv-ring img { width: 52%; height: auto; }
.hero .nv-ring { width: min(620px,46vw); height: min(620px,46vw); right: 6%; top: 50%; transform: translateY(-50%); }
@media (max-width: 900px) { .hero .nv-ring { width: 360px; height: 360px; right: -20%; } }
.nv-ring svg { position: absolute; overflow: visible; }
.nv-ring img { position: relative; z-index: 1; }
.nv-arc-out { transform-origin: 150px 150px; animation: nvSpin 26s linear infinite; }
.nv-arc-out circle { animation: nvDash 21s ease-in-out infinite; }
.nv-arc-in { transform-origin: 150px 150px; animation: nvSpinR 36s linear infinite; }

/* ── hero ── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg); margin-top: -68px; }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(11,10,16,0) 35%,rgba(11,10,16,.8) 78%,#0B0A10 100%); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; max-width: 1320px; width: 100%; margin: 0 auto; padding: 140px 24px 72px; display: flex; flex-direction: column; gap: 28px; }
.hero-eyebrow { margin: 0; font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(44px,7.6vw,116px); line-height: .96; letter-spacing: -.045em; font-weight: 800; max-width: 1150px; }
.hero h1 .hero-line { display: flex; gap: .24em; flex-wrap: wrap; align-items: baseline; }
.hero h1 .hero-line-2 { display: block; }
.nv-cycle { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: bottom; padding-bottom: .08em; box-sizing: content-box; }
.nv-cycle span { display: flex; flex-direction: column; animation: nvWord 9s cubic-bezier(.7,0,.2,1) infinite; color: var(--accent); }
.nv-cycle span b { height: 1em; line-height: 1; white-space: nowrap; font-weight: inherit; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.hero-sub { margin: 0; font-size: clamp(17px,1.5vw,20px); line-height: 1.55; color: #C9C5D6; max-width: 540px; text-wrap: pretty; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-btn { background: var(--accent-solid); color: #FFFFFF; text-decoration: none; padding: 16px 26px; border-radius: 999px; font-weight: 600; font-size: 16px; white-space: nowrap; transition: background .2s; }
.hero-btn:hover { background: #5225E0; color: #FFFFFF; }
.hero-btn-alt { border: 1px solid rgba(255,255,255,.22); color: var(--text); text-decoration: none; padding: 16px 26px; border-radius: 999px; font-weight: 600; font-size: 16px; background: rgba(11,10,16,.4); white-space: nowrap; transition: border-color .2s; }
.hero-btn-alt:hover { border-color: var(--accent); color: var(--text); }

/* ── ticker strip ── */
.nv-ticker { border-top: 1px solid #1F1C29; border-bottom: 1px solid #1F1C29; overflow: hidden; padding: 20px 0; }
.nv-ticker-row { display: flex; gap: 28px; width: max-content; animation: nvTick 40s linear infinite; }
.nv-ticker-row span { display: flex; align-items: center; gap: 28px; font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; color: #8F89A3; }
.nv-ticker-row span:nth-child(odd) { color: var(--text); }
.nv-ticker-row img { width: 18px; height: 18px; }

/* ── section heads used across the design ── */
.nv-sec { max-width: 1320px; margin: 0 auto; padding: 96px 24px; }
.nv-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.nv-sec-head-l { display: flex; flex-direction: column; gap: 14px; }
.nv-eyebrow { margin: 0; font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.nv-h2 { margin: 0; font-family: var(--font-display); font-size: clamp(34px,4.8vw,68px); font-weight: 800; letter-spacing: -.04em; line-height: 1; max-width: 760px; }
.nv-sec-note { margin: 0; color: #B9B4C7; font-size: 17px; max-width: 380px; line-height: 1.55; }

/* ── own apps: cards that expand on hover ── */
.nv-apps { display: flex; gap: 12px; }
/* The design keeps ONE card open at a time and opens the first by default, so the section reads
   as a feature with three siblings rather than four equal tiles. Hover moves the focus. */
.nv-app { position: relative; flex: 1 1 0; min-width: 0; height: 560px; border-radius: 28px; overflow: hidden; background: #15131C; border: 1px solid #241F33; color: var(--text); text-decoration: none; transition: flex .7s cubic-bezier(.2,.8,.2,1), border-color .3s; display: block; }
.nv-app.is-open { flex: 2.4 1 0; }
.nv-apps:hover .nv-app.is-open { flex: 1 1 0; }
.nv-apps .nv-app:hover, .nv-apps .nv-app:focus-visible { flex: 2.4 1 0; border-color: #4A3D7A; color: var(--text); }
.nv-app-fade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(11,10,16,0) 40%,rgba(11,10,16,.94) 100%); pointer-events: none; }
.nv-app-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.nv-app-badge { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: #FFFFFF; white-space: nowrap; background: rgba(11,10,16,.7); border: 1px solid #4A3D7A; }
.nv-app-badge.is-live { background: var(--accent-solid); border-color: var(--accent-solid); }
.nv-app-name { font-family: var(--font-display); font-size: clamp(26px,2.6vw,38px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.nv-app-more { display: none; flex-direction: column; gap: 6px; max-width: 380px; }
.nv-app.is-open .nv-app-more { display: flex; animation: nvIn .5s ease both; }
.nv-apps:hover .nv-app.is-open .nv-app-more { display: none; }
.nv-apps .nv-app:hover .nv-app-more, .nv-apps .nv-app:focus-visible .nv-app-more { display: flex; animation: nvIn .5s ease both; }
.nv-app-what { font-size: 16px; line-height: 1.5; color: #E2DEEC; }
.nv-app-platforms { font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
@media (max-width: 900px) {
  .nv-apps { flex-direction: column; }
  /* In a column flex container `flex: 1` resolves flex-basis against the HEIGHT, which beats the
     height property and collapses the card to its borders. The cards are a fixed height here. */
  /* Narrow: every card is open, as the design has it. */
  .nv-app, .nv-app:hover, .nv-app:focus-visible, .nv-app.is-open { flex: none; height: 460px; }
  .nv-app-more, .nv-app.is-open .nv-app-more, .nv-apps:hover .nv-app.is-open .nv-app-more { display: flex; }
  .nv-app-more { display: flex; }
  .nv-sec { padding: 64px 24px; }
}

/* ── capabilities: alternating media / copy slabs ── */
.nv-band { border-top: 1px solid #1F1C29; }
.nv-band-fill { background: #121019; border-top: 1px solid #1F1C29; border-bottom: 1px solid #1F1C29; }
.nv-head-stack { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.nv-head-stack .nv-h2 { max-width: 900px; }
.nv-caps { display: flex; flex-direction: column; gap: 20px; }
.nv-cap { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,460px),1fr)); border-radius: 28px; overflow: hidden; background: #121019; border: 1px solid #241F33; }
.nv-cap-media { position: relative; min-height: 360px; overflow: hidden; background: #0F0D16; }
.nv-cap-body { padding: clamp(28px,4vw,56px); display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.nv-cap-n { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.nv-cap-body h3 { margin: 0; font-family: var(--font-display); font-size: clamp(30px,3.4vw,48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.nv-cap-body p { margin: 0; font-size: 17px; line-height: 1.6; color: #B9B4C7; max-width: 480px; text-wrap: pretty; }
.nv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-chip { font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px; border: 1px solid #2E2840; color: #D9D5E4; }
.nv-more { display: inline-flex; margin-top: 32px; font-weight: 600; font-size: 16px; color: var(--accent); text-decoration: none; }
.nv-more:hover { color: var(--accent-2); }

/* ── client work grid ── */
.nv-work-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 20px; }
.nv-work { display: flex; flex-direction: column; gap: 16px; color: var(--text); text-decoration: none; }
.nv-work:hover { color: var(--text); }
.nv-work-media { position: relative; aspect-ratio: 4/3; border-radius: 22px; overflow: hidden; background: #15131C; border: 1px solid #241F33; transition: border-color .3s; }
.nv-work:hover .nv-work-media { border-color: #4A3D7A; }
.nv-work-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nv-work-name { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.nv-work-status { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.nv-work-what { font-size: 16px; color: #B9B4C7; margin-top: -8px; }

/* ── stages: a hairline grid of four ── */
.nv-stages { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 1px; background: #241F33; border: 1px solid #241F33; border-radius: 24px; overflow: hidden; }
.nv-stage { background: #121019; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.nv-stage-n { font-family: var(--font-display); font-size: 44px; font-weight: 800; color: var(--accent); letter-spacing: -.04em; line-height: 1; }
.nv-stage-t { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
.nv-stage-b { margin: 0; font-size: 16px; line-height: 1.55; color: #B9B4C7; }
.nv-stage-eg { margin-top: auto; padding-top: 16px; border-top: 1px dashed #2E2840; display: flex; flex-direction: column; gap: 6px; }
.nv-stage-eg-k { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.nv-stage-eg-v { font-size: 15px; line-height: 1.5; color: #D9D5E4; }

/* ── the price strip between sections ── */
.nv-strip { max-width: 1320px; margin: 0 auto; padding: 72px 24px 24px; }
.nv-strip-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 32px 0; border-top: 1px solid #241F33; border-bottom: 1px solid #241F33; }
.nv-strip p { margin: 0; font-family: var(--font-display); font-size: clamp(22px,2.4vw,32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; max-width: 900px; }
.nv-strip b { color: var(--accent); font-weight: 800; }
.nv-strip-btn { border: 1px solid #3A3450; color: var(--text); text-decoration: none; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 16px; white-space: nowrap; transition: border-color .2s; }
.nv-strip-btn:hover { border-color: var(--accent); color: var(--text); }
@media (max-width: 900px) {
  .nv-cap-media { min-height: 240px; }
  .nv-strip { padding: 48px 24px 16px; }
}

/* Card imagery fills its tile; the gradient above it keeps the label legible whatever the shot. */
.nv-app-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nv-work-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nv-app-fade { z-index: 1; }
.nv-app-body { z-index: 2; }

/* ───────────────────────────────────────────────────────────────────────────
   SECTION MOTION
   capMotion / tileMotion / ctaMotion from the design, as CSS. Every card in
   the design carries animated artwork; without these the cards are flat
   rectangles, which is what made the first build look like a skeleton.
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes nvScan { 0% { transform: translateY(-120%); } 100% { transform: translateY(520%); } }
@keyframes nvBar  { 0%,100% { transform: scaleX(.3); } 50% { transform: scaleX(1); } }
@keyframes nvFloatA { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(-4deg); } }
@keyframes nvFloatB { 0%,100% { transform: translateY(-10px) rotate(6deg); } 50% { transform: translateY(12px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  .nv-fx, .nv-fx * { animation: none !important; }
}

.nv-fx { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 24px; overflow: hidden; pointer-events: none; }

/* the ring variant: arcs, a slowly counter-spinning mark and a pulsing circle */
.nv-fx-ring .nv-fx-glow { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; filter: blur(20px); top: 10%; left: 10%; background: radial-gradient(circle, rgba(102,51,255,.5) 0%, rgba(0,0,0,0) 65%); animation: nvDrift1 14s ease-in-out infinite; }
.nv-fx-ringbox { position: relative; width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; }
.nv-fx-ringbox svg { position: absolute; width: 100%; height: 100%; overflow: visible; }
.nv-fx-ringbox img { width: 60%; animation: nvSpinR 30s linear infinite; }
.nv-fx-pulse { position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--accent); animation: nvPulse 2.6s ease-out infinite; }

/* the web variant: a browser window with a scanning band and loading bars */
.nv-fx-web .nv-fx-glow { position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; filter: blur(20px); top: -10%; right: -10%; background: radial-gradient(circle, rgba(177,27,245,.35) 0%, rgba(0,0,0,0) 65%); animation: nvDrift2 18s ease-in-out infinite; }
.nv-fx-win { width: 72%; max-width: 420px; border-radius: 16px; background: #15131C; border: 1px solid #3A3450; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.5); animation: nvFloatA 9s ease-in-out infinite; position: relative; }
.nv-fx-win-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #241F33; }
.nv-fx-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3A3450; display: block; }
.nv-fx-win-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.nv-fx-win-img { height: 90px; border-radius: 10px; background: repeating-linear-gradient(135deg,#1A1724 0 10px,#1E1A2A 10px 20px); position: relative; overflow: hidden; }
.nv-fx-win-img span { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg,rgba(167,139,250,0),rgba(167,139,250,.2)); animation: nvScan 3.5s linear infinite; }
.nv-fx-row { height: 10px; border-radius: 6px; background: #2E2840; transform-origin: left; }
.nv-fx-row:nth-child(2) { width: 90%; background: var(--accent-solid); animation: nvBar 3s ease-in-out 0s infinite; }
.nv-fx-row:nth-child(3) { width: 60%; animation: nvBar 4s ease-in-out .3s infinite; }
.nv-fx-row:nth-child(4) { width: 75%; animation: nvBar 5s ease-in-out .6s infinite; }
.nv-fx-row:nth-child(5) { width: 45%; animation: nvBar 6s ease-in-out .9s infinite; }

/* the apps variant: two floating device shapes */
.nv-fx-apps .nv-fx-glow { position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; filter: blur(20px); top: 0; left: 5%; background: radial-gradient(circle, rgba(102,51,255,.45) 0%, rgba(0,0,0,0) 65%); animation: nvDrift1 16s ease-in-out infinite; }
.nv-fx-phone { width: 130px; aspect-ratio: 9/19; border-radius: 21px; border: 1px solid #3A3450; background: #15131C; box-shadow: 0 24px 50px rgba(0,0,0,.55); position: relative; overflow: hidden; }
.nv-fx-phone::after { content: ""; position: absolute; inset: 0; }
.nv-fx-phone:nth-of-type(1) { animation: nvFloatA 7s ease-in-out infinite; }
.nv-fx-phone:nth-of-type(1)::after { background: radial-gradient(circle at 50% 30%, rgba(102,51,255,.25) 0%, rgba(0,0,0,0) 70%); }
.nv-fx-phone:nth-of-type(2) { animation: nvFloatB 8s ease-in-out infinite; }
.nv-fx-phone:nth-of-type(2)::after { background: radial-gradient(circle at 50% 30%, rgba(177,27,245,.25) 0%, rgba(0,0,0,0) 70%); }

/* work tiles: diagonal weave, a tinted glow, a scanning band and a corner label */
.nv-tile { position: absolute; inset: 0; background: repeating-linear-gradient(135deg,#17141F 0 12px,#1B1826 12px 24px); overflow: hidden; }
.nv-tile-glow { position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; filter: blur(20px); top: -30%; left: -10%; }
.nv-tile:nth-of-type(3n+1) .nv-tile-glow { background: radial-gradient(circle, rgba(102,51,255,.4) 0%, rgba(0,0,0,0) 65%); animation: nvDrift1 16s ease-in-out infinite; }
.nv-tile:nth-of-type(3n+2) .nv-tile-glow { background: radial-gradient(circle, rgba(177,27,245,.35) 0%, rgba(0,0,0,0) 65%); animation: nvDrift2 18s ease-in-out infinite; }
.nv-tile:nth-of-type(3n+3) .nv-tile-glow { background: radial-gradient(circle, rgba(167,139,250,.35) 0%, rgba(0,0,0,0) 65%); animation: nvDrift1 20s ease-in-out infinite; }
.nv-tile-scan { position: absolute; left: 0; right: 0; height: 22%; background: linear-gradient(180deg,rgba(167,139,250,0),rgba(167,139,250,.14)); animation: nvScan 5s linear infinite; }
.nv-tile-label { position: absolute; left: 16px; bottom: 14px; font-size: 12px; font-weight: 600; color: #B9B4C7; }

/* the contact band */
.nv-cta-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.nv-cta-fx .nv-fx-glow { position: absolute; width: 60vw; aspect-ratio: 1; border-radius: 50%; filter: blur(20px); top: -30%; right: -10%; background: radial-gradient(circle, rgba(102,51,255,.5) 0%, rgba(0,0,0,0) 65%); animation: nvDrift2 20s ease-in-out infinite; }
.nv-cta-ring { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: 560px; height: 560px; display: flex; align-items: center; justify-content: center; opacity: .6; }
.nv-cta-ring svg { position: absolute; width: 100%; height: 100%; overflow: visible; }
.nv-cta-ring img { width: 68%; opacity: .25; animation: nvSpin 50s linear infinite; }

/* ───────────────────────────────────────────────────────────────────────────
   DIVI NEUTRALISER
   These sections render inside et_pb_section > et_pb_row > et_pb_column >
   et_pb_text > et_pb_text_inner. Divi styles all five, and anything it sets
   for alignment, colour or width is inherited by whatever we put inside.

   The headline looked right only by accident: its lines are flex containers,
   and flex ignores text-align. The eyebrow is a plain <p>, so it inherited a
   centre from the wrapper. Everything below pins what the design specifies so
   no builder default can reach it.
   ─────────────────────────────────────────────────────────────────────────── */
.hero, .hero-inner, .nv-sec, .nv-band, .nv-band-fill, .nv-strip, .signoff, .site-footer,
.hero *, .nv-sec *, .nv-band *, .nv-band-fill *, .nv-strip *, .signoff *, .site-footer * {
  text-align: left;
}
/* Divi's "light background" class forces dark text; these sections are dark. */
.et_pb_bg_layout_light .hero, .et_pb_bg_layout_light .nv-sec, .et_pb_bg_layout_light .nv-band,
.et_pb_bg_layout_light .nv-band-fill, .et_pb_bg_layout_light .nv-strip, .et_pb_bg_layout_light .signoff {
  color: var(--text);
}
/* The sections are full-bleed and bring their own 1320px inner, so Divi's wrappers must get
   out of the way entirely.

   site.css line ~1091 caps every row at 1240px with an ID selector AND !important, which both
   narrows these sections and stops the hero reaching the window edges. The layout tags each
   section, row and module with a class so this override is exact rather than depending on how
   Divi happens to nest things. The :has() rules below are the fallback for any layout that has
   not been reinstalled yet. */
#et-main-area .et_pb_section.nv-section-full,
#et-main-area .et_pb_row.nv-row-full,
#et-main-area .nv-text-full,
#et-main-area .nv-text-full > .et_pb_text_inner {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
#et-main-area .et_pb_row.nv-row-full > .et_pb_column { width: 100% !important; margin: 0 !important; padding: 0 !important; }
#et-main-area .et_pb_row:has(> .et_pb_column > .et_pb_module > .et_pb_text_inner > .hero),
#et-main-area .et_pb_row:has(> .et_pb_column > .et_pb_module > .et_pb_text_inner > .nv-sec),
#et-main-area .et_pb_row:has(> .et_pb_column > .et_pb_module > .et_pb_text_inner > .nv-band),
#et-main-area .et_pb_row:has(> .et_pb_column > .et_pb_module > .et_pb_text_inner > .nv-band-fill),
#et-main-area .et_pb_row:has(> .et_pb_column > .et_pb_module > .et_pb_text_inner > .nv-strip),
#et-main-area .et_pb_row:has(> .et_pb_column > .et_pb_module > .et_pb_text_inner > .nv-ticker) {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Divi gives paragraphs a bottom margin; the design spaces with flex gaps. */
.hero p, .nv-sec p, .nv-band p, .nv-band-fill p, .nv-strip p, .signoff p { margin-bottom: 0; }
.hero a, .nv-sec a, .nv-band a, .nv-band-fill a, .nv-strip a { text-decoration: none; }

/* App screenshots sit top-aligned so the status bar and first rows stay visible as the
   card narrows; the gradient below keeps the name legible over them. */
.nv-app-img { object-position: top center; opacity: .92; }
.nv-app:hover .nv-app-img, .nv-app:focus-visible .nv-app-img { opacity: 1; }

/* Divi sets align-items:center on its text wrapper, and that is inherited by every flex
   container we put inside it. text-align only fixes text WITHIN a box; this is what was
   centring the boxes themselves, so the eyebrow floated to the middle while the headline
   looked left only because its own line is a flex row. The design sets no align-items on
   these, so they take the CSS default. */
.hero-inner, .hero-row, .nv-sec-head, .nv-sec-head-l, .nv-head-stack, .nv-caps, .nv-cap-body,
.nv-stage, .nv-stages, .nv-apps, .nv-app-body, .nv-app-more, .nv-work, .nv-work-grid,
.site-footer-col, .site-footer-inner, .nv-chips, .hero-actions, .signoff-row, .nv-strip-inner {
  align-items: stretch;
}
/* The three the design does align explicitly. */
.signoff-inner, .site-footer-brand { align-items: flex-start; }
.hero-row, .nv-sec-head { align-items: flex-end; }
.nv-strip-inner, .nv-work-row { align-items: center; }
.nv-work-row { align-items: baseline; }
.hero-actions, .signoff-row, .nv-chips { align-items: center; }
.nv-app-badge { align-self: flex-start; }
.nv-more { align-self: flex-start; }

/* ── the phone in each app card ──
   The design puts a tilted device playing a muted loop of the app inside every card, which is
   what makes this section read as products rather than tiles. The frame is the design's phone():
   9/19, 16% corner radius, a 4% bezel and a coloured bloom behind it. */
.nv-app-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 80px; overflow: hidden; }
.nv-app-bloom { position: absolute; width: 140%; aspect-ratio: 1; top: -30%; left: -20%; border-radius: 50%; filter: blur(20px); }
/* The bezel is deliberately heavier than the design's 4%: with the striped placeholder in the
   design file a thin frame still read as a device, but with a real bright screenshot inside it
   disappeared and the shot looked like it was floating in front of the phone rather than inside
   it. A thicker body, a notch and an inner lip put the frame back in front. */
.nv-phone { position: relative; width: 158px; aspect-ratio: 9/19; border-radius: 26px; background: linear-gradient(145deg,#2A2540 0%,#15131C 42%,#0B0A10 100%); border: 1px solid #4A4468; padding: 9px; flex: none; box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14); }
.nv-phone::after { content: ""; position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 42%; height: 9px; border-radius: 0 0 8px 8px; background: #0B0A10; z-index: 3; }
.nv-phone-screen { width: 100%; height: 100%; border-radius: 18px; overflow: hidden; position: relative; background: repeating-linear-gradient(135deg,#1A1724 0 10px,#1E1A2A 10px 20px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.65); }
.nv-phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nv-phone-scan { position: absolute; left: 0; right: 0; height: 25%; background: linear-gradient(180deg,rgba(167,139,250,0) 0%,rgba(167,139,250,.18) 100%); animation: nvScan 4s linear infinite; }
.nv-app:nth-of-type(odd)  .nv-phone { animation: nvFloatA 7s ease-in-out infinite; }
.nv-app:nth-of-type(even) .nv-phone { animation: nvFloatB 8s ease-in-out infinite; }
.nv-app:hover .nv-phone, .nv-app:focus-visible .nv-phone { animation-play-state: paused; }
@media (max-width: 900px) { .nv-app-stage { padding-bottom: 120px; } .nv-phone { width: 136px; } }
@media (prefers-reduced-motion: reduce) { .nv-phone { animation: none !important; } }

/* ───────────────────────────────────────────────────────────────────────────
   The only rules the design cannot express inline: its style-hover attribute,
   the card flex behaviour and the ring's responsive size. Everything else in
   those sections is inline on the element, where Divi cannot reach it.
   ─────────────────────────────────────────────────────────────────────────── */
.nv-btn:hover { background: #5225E0 !important; color: #FFFFFF !important; }
.nv-btn-alt:hover { border-color: #A78BFA !important; color: #F3F1F8 !important; }
/* One card open at a time; the first is open until you point at another. */
.nv-apps .nv-app { flex: 1 1 0; transition: flex .7s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.nv-apps .nv-app.is-open { flex: 2.4 1 0; }
.nv-apps:hover .nv-app.is-open { flex: 1 1 0; }
.nv-apps .nv-app:hover, .nv-apps .nv-app:focus-visible { flex: 2.4 1 0; border-color: #4A3D7A !important; }
.nv-apps .nv-app .nv-app-more { display: none; }
.nv-apps .nv-app.is-open .nv-app-more { display: flex; animation: nvIn .5s ease both; }
.nv-apps:hover .nv-app.is-open .nv-app-more { display: none; }
.nv-apps .nv-app:hover .nv-app-more, .nv-apps .nv-app:focus-visible .nv-app-more { display: flex; animation: nvIn .5s ease both; }
@media (max-width: 900px) {
  .nv-apps { flex-direction: column; }
  .nv-apps .nv-app, .nv-apps .nv-app.is-open, .nv-apps .nv-app:hover { flex: none !important; height: 460px !important; }
  .nv-apps .nv-app .nv-app-more, .nv-apps:hover .nv-app.is-open .nv-app-more { display: flex !important; }
  .nv-hero-ring { width: 360px !important; height: 360px !important; right: -20% !important; }
  .nv-hero-ring svg { width: 450px !important; height: 450px !important; }
  .nv-hero-ring img { width: 187px !important; }
}