:root{--bg:#04050a;--surface:#0b0d15;--surface-2:#171920;--line:#2a2b30;--ink:#f3f5f9;--muted:#aeb7c8;--accent:#66f0ff;--accent-ink:#021217;--accent-soft:rgba(102,240,255,0.1);--accent-glow:rgba(102,240,255,0.22);--accent-line:rgba(102,240,255,0.5);--step-1:0.9rem;--step-0:1.125rem;--step-1:1.406rem;--step-2:1.758rem;--step-3:2.197rem;--step-4:2.747rem;--step-5:3.433rem;--step-6:4.292rem;--display:system-ui, 'Segoe UI', -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;--body:system-ui, 'Segoe UI', -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;--radius:0px;--btn-radius:2px;--wrap:1240px;--pad:96px;--pad-phone:64px;--shadow:none;--track:-0.03em;--speed:220ms;font-synthesis:none;color-scheme:dark}
.tone-surface{background:var(--surface);border-block:1px solid var(--line)}.tone-accent{--bg:#66f0ff;--surface:#5cdae8;--line:rgba(2,18,23,0.25);--ink:#021217;--muted:#021217;--accent:#021217;--accent-ink:#66f0ff;--accent-soft:rgba(2,18,23,0.08);--accent-line:rgba(2,18,23,0.4);--accent-glow:transparent;background:var(--bg);color:var(--ink)}.tone-inverse{--bg:#f3f5f9;--surface:#e0e2e6;--line:#c3c5c9;--ink:#04050a;--muted:#47484d;--accent-ink:#021217;background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-0)/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}a{color:inherit}section[id]{scroll-margin-top:84px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.06;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(var(--step-3),4.6vw,var(--step-5));letter-spacing:calc(var(--track) * 1.15)}h2{font-size:clamp(var(--step-2),3.2vw,var(--step-4));letter-spacing:var(--track)}
h3{font-size:var(--step-1);letter-spacing:calc(var(--track) / 3)}p{margin:0 0 1em;max-width:36em;text-wrap:pretty}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}.mg{padding:var(--pad) 0}.mg-tight{padding:0}
.skip{position:absolute;left:12px;top:-80px;z-index:60;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:8px;font-weight:700}.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.eyebrow{font:600 var(--step-m1)/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.lede{color:var(--muted);font-size:var(--step-1);max-width:32em}.muted{color:var(--muted)}
.mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:.75em 1.4em;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;
 border-radius:var(--btn-radius);box-shadow:0 0 0 1px var(--accent-line),0 8px 30px var(--accent-glow);transition:transform var(--speed),box-shadow var(--speed)}
.mg-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--accent),0 10px 40px var(--accent-glow)}
.mg-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);font-weight:600}.mg-btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.mg-btn.small{min-height:44px;padding:.5em 1.1em;font-size:var(--step-m1)}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.topline{background:var(--accent);color:var(--accent-ink);text-align:center;font-weight:700;font-size:var(--step-m1);padding:6px 12px}.topline a{text-decoration:none}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;gap:26px;min-height:68px}.brand{display:flex;flex-direction:column;text-decoration:none;margin-right:auto;line-height:1}
.brand b{font:700 var(--step-2)/1 var(--display);letter-spacing:var(--track);color:var(--accent)}.brand small{font:700 .66rem/1.6 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:20px}.nav a{text-decoration:none;color:var(--muted);font-size:var(--step-m1);font-weight:600;display:inline-block;padding:10px 4px}.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.menu{display:none}.menu summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:10px;font-weight:700}
.menu summary::-webkit-details-marker{display:none}.menu[open] .menu-list{display:grid}.menu-list{display:none;position:absolute;right:20px;top:64px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;min-width:200px;box-shadow:var(--shadow)}
.menu-list a{padding:12px;text-decoration:none;font-weight:600}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:48px;padding:56px 0 40px}
.hero.centered{grid-template-columns:1fr;text-align:center;justify-items:center}.hero.centered p{margin-inline:auto}.hero.centered .actions,.hero.centered .trust{justify-content:center}
.hero.solo{grid-template-columns:minmax(0,1fr)}.hero-copy{container-type:inline-size;min-width:0}.hero h1 em{font-style:normal;color:var(--accent);text-shadow:0 0 30px var(--accent-glow)}
.hero-media{margin:0;border-radius:calc(var(--radius) + 8px);overflow:hidden;box-shadow:var(--shadow)}.hero-media img{width:100%;height:auto;object-fit:cover}
.hero.centered .hero-media{width:100%;max-width:980px}
.giant{display:inline-flex;flex-direction:column;text-decoration:none;margin:10px 0 8px}.giant-label{font:700 var(--step-m1)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.giant-number{font:700 clamp(2.4rem,15cqi,6.2rem)/.95 var(--display);letter-spacing:-.03em;color:var(--accent);text-shadow:0 0 34px var(--accent-glow);font-variant-numeric:tabular-nums;white-space:nowrap}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 30px;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line);color:var(--muted)}.trust strong{color:var(--ink)}
.pattern{aspect-ratio:16/11;border:1px solid var(--line);background:linear-gradient(135deg,transparent 0 46%,var(--accent-soft) 46% 54%,transparent 54%),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 48px),var(--surface)}
.strip{background:var(--accent);color:var(--accent-ink)}.strip .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding:18px 0}
.strip strong{font:800 var(--step-1)/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}.strip span{font:700 var(--step-1)/1.1 var(--display)}.strip em{font-style:normal;font-weight:600;margin-left:auto}
.cards{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:18px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--radius);padding:26px;transition:transform var(--speed)}
.card p{color:var(--muted);margin:0;font-size:1rem}.card:hover{transform:translateY(-2px)}.tag{display:inline-block;font:700 .72rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-line);border-radius:999px;padding:5px 9px;margin-bottom:12px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;margin-top:36px}.plans:has(>:nth-child(5)){grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column}.plan p{color:var(--muted)}
.plan .mg-btn{margin-top:auto;align-self:flex-start}.plan.featured{border-color:var(--accent-line);background:linear-gradient(160deg,var(--accent-soft),var(--surface) 60%);box-shadow:var(--shadow)}
.amount{font:700 var(--step-6)/1 var(--display);color:var(--ink)!important;letter-spacing:-.04em;margin:4px 0 14px}.amount span{font:600 var(--step-0)/1 var(--body);color:var(--muted);letter-spacing:0;margin-right:6px}
.amount.word{font-size:var(--step-4)}.featured .amount{color:var(--accent)!important;text-shadow:0 0 30px var(--accent-glow)}.fine{color:var(--muted);font-size:var(--step-m1);margin-top:20px}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin:30px 0 0;padding:0}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;color:var(--muted)}
.steps li::before{content:counter(s);display:block;font:800 var(--step-3)/1 var(--display);color:var(--accent);margin-bottom:8px}.steps strong{color:var(--ink);display:block;margin-bottom:4px;font-size:var(--step-1);font-family:var(--display)}
.band-row{display:flex;align-items:center;gap:40px}.badge{flex:none;display:grid;place-items:center;width:132px;height:132px;border-radius:22px;background:var(--ink);color:var(--bg);font:800 2.4rem/1 var(--display)}
.area-grid,.about-grid,.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}.about-grid{grid-template-columns:1fr 1fr}
.towns{list-style:none;padding:0;margin:20px 0;display:flex;flex-wrap:wrap;gap:10px}.towns li{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:600}.towns li:first-child{border-color:var(--accent);color:var(--accent)}
.big-call{display:inline-block;font:700 clamp(2.1rem,4.6vw,3.6rem)/1 var(--display);color:var(--accent);text-decoration:none;letter-spacing:-.03em;margin-top:8px}
.map{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.map figcaption{color:var(--muted);font-size:var(--step-m1);margin-top:8px}
.map .ring{fill:var(--accent-soft);stroke:var(--accent-line);stroke-width:2;stroke-dasharray:6 8}.map .spoke{stroke:var(--line);stroke-width:3}.map .town circle{fill:var(--bg);stroke:var(--accent);stroke-width:3}
.map .home circle{fill:var(--accent)}.map text{fill:var(--ink);font:700 19px var(--display)}.map .home text{fill:var(--accent);font-size:25px}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;align-items:start}.faq-list details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}
.faq-list details[open]{border-color:var(--accent-line)}.faq-list summary{cursor:pointer;font:700 var(--step-1)/1.25 var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:28px}
.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";color:var(--accent);font-size:1.4em;line-height:.8}.faq-list details[open] summary::after{content:"\2013"}.faq-list details p{color:var(--muted);margin:12px 0 0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px;margin-top:30px}.gallery figure{margin:0}
.gallery img,.tile{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:linear-gradient(135deg,var(--accent-soft),var(--surface));border:1px solid var(--line)}.gallery figcaption{color:var(--muted);font-size:var(--step-m1);margin-top:8px}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;margin-top:30px}.reviews blockquote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.reviews footer{color:var(--muted);font-size:var(--step-m1);margin-top:12px}.empty-note{border:2px dashed var(--line);border-radius:var(--radius);padding:22px;color:var(--muted)}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px;margin-top:36px}.case{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);overflow:hidden;display:flex;flex-direction:column}
.case img,.case .tile{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border:0;border-radius:0}.case-body{padding:26px;display:flex;flex-direction:column;gap:6px;flex:1}.case-body p{color:var(--muted);margin:0}
.case .client{color:var(--accent);font-weight:700;font-size:var(--step-m1);letter-spacing:.08em;text-transform:uppercase}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}.chips span{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted)}
.case a.more{margin-top:12px;font-weight:700;color:var(--accent);text-decoration:none;min-height:24px}
.about-photo img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}.about-grid p{color:var(--muted)}
.facts{display:grid;gap:10px;margin:24px 0 0}.facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;border-top:1px solid var(--line);padding-top:10px}.facts dt{color:var(--accent);font-weight:700}.facts dd{margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:18px;margin-top:24px}.stats div{border-top:3px solid var(--accent);padding-top:14px}
.stats strong{display:block;font:700 var(--step-5)/1 var(--display);letter-spacing:-.03em}.stats span{color:var(--muted)}
.contact-grid{align-items:start}.contact-list{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px}.contact-list a{font-weight:700;color:var(--accent);text-decoration:none}
form.mg-form{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}.mg-form label{display:grid;gap:6px;font-weight:600}
.mg-form input,.mg-form textarea,.mg-form select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;min-height:48px}.mg-form textarea{min-height:120px}
.mg-form button{font:inherit;border:0;cursor:pointer}.final-box{text-align:center;border:1px solid var(--accent-line);border-radius:24px;padding:64px 24px;container-type:inline-size;
 background:radial-gradient(ellipse at 50% 0%,var(--accent-soft),transparent 70%),var(--surface)}.final-box p{margin-inline:auto;color:var(--muted)}.final-box .giant{align-items:center}
.page-head{padding:72px 0 0}.page-head h1{font-size:clamp(var(--step-4),6vw,var(--step-6))}.prose{max-width:46em}.prose p{color:var(--muted)}
.foot{border-top:1px solid var(--line);padding:32px 0 96px;color:var(--muted);font-size:var(--step-m1)}.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.foot strong,.foot a{color:var(--ink)}.foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}.foot nav a{display:inline-block;padding:6px 0}.callbar{display:none}
@media (max-width:900px){.nav,.top .mg-btn{display:none}.menu{display:block}.hero{grid-template-columns:1fr;gap:24px;padding:20px 0 40px}.hero:not(.centered) .hero-media{order:-1}
.cards,.area-grid,.about-grid,.contact-grid,.faq-list{grid-template-columns:1fr;gap:16px}.band-row{gap:18px}.badge{width:76px;height:76px;border-radius:16px;font-size:1.5rem}
.mg{padding:var(--pad-phone) 0}.plan{padding:24px}.amount{font-size:var(--step-5)}.strip em{margin-left:0}
.callbar{display:flex;justify-content:center;align-items:center;position:fixed;inset:auto 12px 12px;z-index:30;min-height:58px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
 font-weight:800;font-size:1.15rem;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 24px var(--accent-glow)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* site css */
/* MeshGlo Node: the house display face, drawn as a wireframe (make_font.py). House only, never for client sites. */
:root { --node: 'MeshGlo Node', 'Segoe UI', system-ui, sans-serif; }
@font-face { font-family: 'MeshGlo Node'; src: url('assets/meshglo-node.ttf') format('truetype'); font-display: swap; }
/* MeshGlo house skin, redo (1 Nov). Only in the MeshGlo site; never in a template or a client site.
   Type (pass 50, taste skill: two faces at most): MeshGlo Node for display, the system text face for everything else.
   Faces checked by measurement on this PC; fallbacks for other systems follow each name. */
:root { --text: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --serif: var(--text); --display: var(--node); }
body { background: var(--bg); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.kicker { font: 600 .76rem/1.4 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
h1, h2, h3 { font-family: var(--text); font-weight: 400; }
.eyebrow { font-family: var(--text); font-weight: 600; letter-spacing: .16em; }
/* header: a thin glass bar; the brand is a type mark, the last link is the action */
.top { background: rgba(4,5,10,.62); border-bottom: 1px solid rgba(255,255,255,.07); }
.brand b { font: 400 1.45rem/1 var(--node); letter-spacing: .03em; color: var(--ink); }
.brand b::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .12em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); vertical-align: .05em; }
.nav a { font: 600 .8rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.nav a[href$="contact/"] { color: var(--accent-ink); background: var(--accent); padding: 10px 16px; }
.nav a[href$="contact/"]:hover { color: var(--accent-ink); box-shadow: 0 0 24px rgba(102,240,255,.45); }
/* buttons: a lit bar and a hairline bar, both square */
.mg-btn { border-radius: 0; box-shadow: none; font: 700 1rem/1 var(--text); letter-spacing: .03em; min-height: 54px; padding: 0 26px; }
.mg-btn:hover { box-shadow: 0 0 34px rgba(102,240,255,.45); transform: none; }
.mg-btn.ghost { box-shadow: inset 0 0 0 1px rgba(243,245,249,.45); color: var(--ink); background: rgba(4,5,10,.35); }
.mg-btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.mg-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* builder blocks under the skin: hairlines and readouts instead of boxes */
.plan, .faq-list details, .mg-form { border-radius: 0; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border-color: var(--line); }
.plan.featured { border-color: rgba(102,240,255,.55); background: linear-gradient(170deg, rgba(102,240,255,.10), transparent 60%); box-shadow: none; }
.amount, .amount.word { font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--text); letter-spacing: -.03em; }
.featured .amount { text-shadow: 0 0 30px rgba(102,240,255,.35); }
.faq-list summary { font: 400 1.35rem/1.25 var(--text); letter-spacing: -.01em; }
.faq-list summary::after { content: "+"; font-family: var(--text); color: var(--accent); }
.faq-list details[open] summary::after { content: "\2212"; }
.mg-form label { font: 600 .74rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mg-form input, .mg-form textarea { border-radius: 0; font: 1rem/1.5 var(--body); text-transform: none; letter-spacing: 0; }
.mg-form input:focus, .mg-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-head h1 { font: 400 clamp(2.8rem, 7.6vw, 6.4rem)/.98 var(--node); letter-spacing: .01em; }
.page-head .lede { max-width: 34em; }
@media (min-width: 901px) { .mg-contact .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.mg-contact .contact-grid > div > p { color: var(--muted); font-size: 1.1rem; }
h2[id], article[id], section[id] { scroll-margin-top: 96px; }
.foot { font: .82rem/1.7 var(--text); }
.foot nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.foot nav a:hover { color: var(--accent); }
.mg-contact { padding-top: 16px; }
.lab-more { display: inline-flex; align-items: center; min-height: 54px; padding: 0 6px; color: var(--ink); font: 600 .8rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; text-underline-offset: 6px; }
.lab-more:hover { color: var(--accent); }

/* pass 9: type system and rhythm */
/* Headings: the house face for the line, the serif italic for the accent (as in the hero). */
section.mg.mg-pricing h2, section.mg.mg-faq h2, section.mg.mg-gallery h2, section.mg.mg-text h2 { font: 400 clamp(2rem, 3.8vw, 3.3rem)/1.02 var(--node); letter-spacing: .01em; }
h2 em { font-family: var(--text); font-style: italic; text-transform: none; letter-spacing: -.02em; font-size: 1.06em; }
/* Surfaces: the panel, pricing and gallery sit on a slightly lifted black with a faint mesh grid. */
main > section[aria-label="Instrument panel"], main > section.mg-pricing, main > section.mg-gallery {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(102,240,255,.05), transparent 70%),
    repeating-linear-gradient(90deg, rgba(243,245,249,.025) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(243,245,249,.025) 0 1px, transparent 1px 72px), #06080e; }
section.mg.mg-pricing, section.mg.mg-faq, section.mg.mg-gallery { padding-top: 88px; padding-bottom: 88px; }

/* pass 10: footer */
.foot { padding: 56px 0 88px; border-top: 1px solid rgba(102,240,255,.22); background: radial-gradient(ellipse 60% 120% at 50% 0%, rgba(102,240,255,.06), transparent 70%), #04050a; }
.foot strong { font: 400 1.9rem/1 var(--node); letter-spacing: .03em; color: var(--ink); display: inline-block; margin-bottom: 10px; }
.foot a { color: var(--ink); text-underline-offset: 4px; }
.foot a:hover { color: var(--accent); }
.foot-row > p:first-child { max-width: 26em; }

/* pass 11: motion and polish */
/* Navigation: the current page and the hovered link get a lit vertex node under them. */
.nav a { position: relative; }
.nav a:not([href$="contact/"])::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px; transform: translateX(-50%) rotate(45deg) scale(0);
  background: #66f0ff; box-shadow: 0 0 10px rgba(102,240,255,.9); transition: transform .25s ease; }
.nav a[aria-current="page"]:not([href$="contact/"])::after, .nav a:not([href$="contact/"]):hover::after { transform: translateX(-50%) rotate(45deg) scale(1); }
.nav a[aria-current="page"] { color: var(--ink); }
/* Scroll-in: content rises into place as it enters the screen (CSS scroll timelines; no script). Off for reduced motion
   and in browsers without scroll timelines, where everything simply shows. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plate, .standard-row > div, .panel-table tbody tr, .mg-pricing .plan, .next-card, .mgx-study, .mg-gallery figure, .faq-list details {
      animation: mg-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes mg-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* pass 31: keyboard focus on whole-card links; every animation still for reduced motion */
a.else-card:focus-visible, a.soc-card:focus-visible, a.plate:focus-visible, .found-actions a:focus-visible, .how-steps a:focus-visible, .next-live:focus-visible {
  outline: 2px solid #66f0ff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .next-live::before, .orbit .body { animation: none !important; } }

/* pass 33: the includes box continues the pricing panel (no seam, same lifted surface) */
main > section[aria-label="Includes"] { background: repeating-linear-gradient(90deg, rgba(243,245,249,.025) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(243,245,249,.025) 0 1px, transparent 1px 72px), #06080e; }
section.mg.mg-pricing { padding-bottom: 40px; }

/* pass 34: the privacy note under a form belongs to the form: no seam over it */

/* pass 35: phone density: same content, less scrolling */
@media (max-width: 560px) {
  .panel, .how, .standard, .else, .next, .proof { padding-top: 56px; padding-bottom: 56px; }
  section.mg.mg-pricing, section.mg.mg-faq, section.mg.mg-gallery { padding-top: 56px; padding-bottom: 40px; }
  .plans { gap: 12px; margin-top: 24px; }
  .mg-pricing .plan { padding: 18px 18px 20px; }
  .mg-pricing .plan p { margin-bottom: 12px; }
  .amount, .amount.word { font-size: 2.1rem; }
  .panel-table tbody tr { padding: 14px 0; }
  .standard-row dt { font-size: 3.2rem; margin-bottom: 10px; }
  .includes { padding-bottom: 48px; }
  .next-head h2, .panel-head h2, .proof-head h2, .standard-head h2, .how-head h2, .else-head h2 { margin-bottom: 24px; }
}

/* pass 42: the featured plan reads as our recommendation; plan cards lift and light on hover */
.mg-pricing .plan { position: relative; transition: transform .25s ease, border-color .25s, box-shadow .25s; }
.mg-pricing .plan:hover { transform: translateY(-3px); border-color: rgba(102,240,255,.45); box-shadow: 0 18px 50px -24px rgba(102,240,255,.45); }
.mg-pricing .plan.featured { border-color: #66f0ff; box-shadow: 0 0 0 1px rgba(102,240,255,.35), 0 24px 70px -28px rgba(102,240,255,.6); }
.mg-pricing .plan.featured::before { content: "Our pick for most businesses"; position: absolute; top: -13px; left: 22px; padding: 6px 12px; background: #66f0ff; color: #021217;
  font: 700 .66rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .mg-pricing .plan, .mg-pricing .plan:hover { transition: none; transform: none; } }

/* pass 46: footer: a clear grid, a copyright line and a huge outlined wordmark sinking off the bottom edge */
.foot { position: relative; overflow: hidden; padding: 64px 0 clamp(120px, 15vw, 230px); }
.foot-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 32px; align-items: start; position: relative; z-index: 1; }
.foot-row > p:nth-child(2) { line-height: 2; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; }
.foot-row::after { content: "\00A9  2026 MeshGlo \00B7  East Texas"; grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; letter-spacing: .08em; }
.foot::after { content: "MESHGLO"; position: absolute; left: 50%; bottom: calc(-0.28 * clamp(110px, 17vw, 300px)); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 400 clamp(110px, 17vw, 300px)/1 var(--node); letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(102,240,255,.22); }
@media (max-width: 860px) { .foot-row { grid-template-columns: 1fr; gap: 20px; } .foot nav { justify-content: flex-start; } }

/* pass 47: footer links stay whole; the client-work note on Work reads as an empty slot waiting for the next case study */
.foot a { white-space: nowrap; }
main > section.mg-text:has(.prose > .eyebrow) .prose { max-width: none; border: 1px dashed rgba(102,240,255,.45); padding: clamp(28px, 4vw, 52px);
  background: repeating-linear-gradient(135deg, rgba(102,240,255,.035) 0 12px, transparent 12px 24px); }
main > section.mg-text:has(.prose > .eyebrow) .prose p:last-child { max-width: 40em; color: var(--muted); }

/* pass 54 (taste skill): no hairlines, outlined boxes or decorative shapes; surfaces are a tone step on the ground */
:root { --tone-1: #0a0d16; --tone-2: #101522; }
main .lab-steps li, main .next-card, main .else-card, main .soc-card, main .mgx-study-media, main .cosmos { border: 0; }
main .lab-steps li { background: rgba(10,13,22,.92); }
main .else-grid, main .soc-grid, main .next-grid { border: 0; gap: 12px; }
main .else-card, main .soc-card, main .next-card { background: var(--tone-1); }
main a.else-card:hover, main a.soc-card:hover { background: var(--tone-2); }
main .how-steps::before, main .how-steps li::before, main .standard-row > div::before, main .found-three > div::before { content: none; }
main .standard-row, main .standard-row > div, main .found-three, main .found-three > div, main .found-steps li, main .found-fix li { border: 0; }
main .standard-row { gap: 12px; } main .standard-row > div { background: var(--tone-1); padding: 30px 26px 32px; }
main .found-three { gap: 12px; } main .found-three > div { background: var(--tone-1); padding: 28px 26px 30px; }
main .found-steps { gap: 12px 12px; } main .found-steps li { background: var(--tone-1); padding: 22px 24px; }
main .found-fix li { padding: 10px 0 10px 26px; }
main .inc-box { border: 0; background: var(--tone-1); }
main .inc-pay { border: 0; padding-top: 6px; }
main .inc-chip { border: 0; background: var(--tone-2); }
main .inc-chip.soon { background: transparent; padding-left: 0; }
main .found-never { border: 0; background: #1a1209; }
main .next-live { border: 0; background: var(--tone-2); }
.faq-list details { border: 0; background: var(--tone-1); }
.faq-list details[open] { background: var(--tone-2); }
.mg-pricing .plan { border: 0; background: var(--tone-1); }
.mg-pricing .plan.featured { border: 0; background: #0b2a31; box-shadow: none; }
.foot, .foot-row::after { border: 0; }
.foot { background: #030409; }

/* pass 55 (taste skill): no gradients anywhere; one dark field top to bottom ("the dark room"), flat tone steps */
main > section[aria-label="Instrument panel"], main > section.mg-pricing, main > section.mg-gallery, main > section[aria-label="Includes"] { background: transparent; }
main .mg-form { background: var(--tone-1); }
main > section.mg-text:has(.prose > .eyebrow) .prose, main > section.mg-text .prose:has(> h2) { background: var(--tone-1); border: 0; }
main .mgx-duo-lg { background: var(--tone-1); }
main .panel-table tbody tr:hover { background: var(--tone-1); }
main a.soc-card:hover { background: var(--tone-2); }
main .soc-card.webb { background: #16121f; }
main .lab-stage::after, main .lab::before { background: none; }

/* pass 56 (taste skill): no glows, no shadows on things at rest. Kept: the GLO of the billboard wordmark (the brand's own glow). */
:where(main, header, footer) *:not(.w-glo, .w-glo *) { text-shadow: none !important; box-shadow: none !important; filter: none !important; }
main .ba-card.after { background: #e3fbff; }
main .ba-card.before { background: #eceef2; }

/* pass 57 (taste skill): no tiny uppercase letter-spaced labels; sentence case at a readable size. data-ui readouts keep theirs. */
.nav a { font: 500 .98rem/1 var(--text); letter-spacing: 0; text-transform: none; }
.nav a[href$="contact/"] { font-weight: 600; }
.foot nav a { font: 500 .95rem/1.6 var(--text); letter-spacing: 0; text-transform: none; }
.mg-form label { font: 600 .95rem/1.35 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink); }
:where(main) :is(.lab-trust li, .next-code, .else-card i, .how-steps a, .soc-state, .soc-handle, .inc-label, .mgx-kind, .plate-meta > span > span,
  .plate-facts span, .orbit b, .cosmos-tag, .cosmos-deep span, .next-live, .flood-follow, .chips span, .lab-more, .found-steps strong) {
  text-transform: none; letter-spacing: 0; font-size: max(.95rem, 15px); }
:where(main) .plate-meta span { text-transform: none; letter-spacing: 0; }
.foot-row::after { letter-spacing: 0; }

/* pass 58 (taste skill): buttons are square and flat, one fill each: cyan for the main action, a dark tone for the second */
.mg-btn { border-radius: 0; transition: background-color .2s ease, color .2s ease, transform .15s ease; }
.mg-btn:hover { transform: translateY(-1px); background: #9df6ff; }
.mg-btn:active { transform: translateY(1px); }
.mg-btn.ghost, .panel-actions .mg-btn.ghost, .found-actions .mg-btn.ghost { background: var(--tone-2); color: var(--ink); }
.mg-btn.ghost:hover { background: #1b2233; color: var(--ink); }
.flood-btn.alt { background: rgba(4,5,10,.12); color: #04050a; }
.flood-btn.alt:hover { background: rgba(4,5,10,.2); }
@media (prefers-reduced-motion: reduce) { .mg-btn, .mg-btn:hover, .mg-btn:active { transform: none; } }

/* pass 59 (taste skill, REA'd gallery layouts): no rows of identical cards */
/* prices: a label wall, one row per service: name | price | what it is | action */
.mg-pricing .plans { display: grid; grid-template-columns: 1fr; gap: 6px; }
.mg-pricing .plan { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr) minmax(0, 6fr) auto; align-items: center; column-gap: 32px; padding: 26px 30px; }
.mg-pricing .plan h3 { margin: 0; font: 500 1.35rem/1.2 var(--text); }
.mg-pricing .plan .amount { margin: 0; font: 400 clamp(1.9rem, 2.8vw, 2.6rem)/1 var(--node) !important; letter-spacing: .01em; }
.mg-pricing .plan .amount span { display: block; font: 500 .9rem/1.4 var(--text); color: var(--muted); margin-bottom: 4px; }
.mg-pricing .plan p:not(.amount) { margin: 0; color: var(--muted); }
.mg-pricing .plan .mg-btn { margin: 0; align-self: center; white-space: nowrap; }
.mg-pricing .plan.featured::before { top: -11px; left: 30px; }
@media (max-width: 980px) {
  .mg-pricing .plan { grid-template-columns: 1fr auto; row-gap: 10px; padding: 22px; }
  .mg-pricing .plan h3 { grid-column: 1; } .mg-pricing .plan .amount { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .mg-pricing .plan p:not(.amount) { grid-column: 1 / -1; } .mg-pricing .plan .mg-btn { grid-column: 1 / -1; justify-self: start; }
}
/* socials: the names as a stacked monument list */
main .soc-grid { grid-template-columns: 1fr; gap: 6px; }
main .soc-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 5fr) auto; align-items: center; column-gap: 28px; min-height: 0; padding: 22px 28px; }
main .soc-card b { font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; }
main .soc-card .soc-state { margin: 0; justify-self: end; }
@media (max-width: 860px) { main .soc-card { grid-template-columns: 1fr auto; row-gap: 6px; } main .soc-card b { grid-column: 1 / -1; } main .soc-card > span:not(.soc-state):not(.soc-handle) { grid-column: 1 / -1; } }
/* what else: a specimen list, one line each */
main .else-grid { grid-template-columns: 1fr; gap: 6px; }
main .else-card { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); align-items: baseline; column-gap: 32px; padding: 22px 28px; }
main .else-card b { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--node); letter-spacing: .01em; }
main .else-card i { margin: 0; padding: 0; justify-self: end; text-align: right; }
@media (max-width: 860px) { main .else-card { grid-template-columns: 1fr; row-gap: 8px; } main .else-card i { justify-self: start; text-align: left; } }
/* standard and Google's three: plain columns of big type, no tiles */
main .standard-row > div, main .found-three > div { background: transparent; padding: 0 12px 0 0; }
main .standard-row { gap: 32px; } main .found-three { gap: 32px; }
main .standard-row dt { font-size: clamp(4rem, 8vw, 7.5rem); }

/* pass 60: socials list: a fixed grid that never collides; names sized to their column; sentence case everywhere */
main .soc-card { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr) minmax(170px, 2fr); grid-template-areas: "name text act" "name handle act"; row-gap: 4px; }
main .soc-card b { grid-area: name; font-size: clamp(2rem, 4.4vw, 3.9rem); white-space: nowrap; }
main .soc-card .soc-handle { grid-area: handle; }
main .soc-card > span:not(.soc-state):not(.soc-handle) { grid-area: text; }
main .soc-card .soc-state { grid-area: act; }
main .soc-card .soc-handle, main .soc-card .soc-state { font: 600 1rem/1.4 var(--text); letter-spacing: 0; text-transform: none; }
main .soc-card.soon .soc-state::before { content: none; }
main .soc-card.soon .soc-state { color: var(--muted); font-weight: 500; }
main .soc-card .soc-live::before { content: none; }
@media (max-width: 860px) { main .soc-card { grid-template-columns: 1fr; grid-template-areas: "name" "handle" "text" "act"; } main .soc-card b { white-space: normal; } main .soc-card .soc-state { justify-self: start; } }

/* pass 61: the last small type brought to reading size; running text in the full ink */
.panel-table thead th { font: 600 .95rem/1.3 var(--text); letter-spacing: 0; text-transform: none; color: var(--muted); }
:where(main) .plate-meta span span, :where(main) .plate-meta > span:not(:first-child) { font: 500 1rem/1.4 var(--text); letter-spacing: 0; text-transform: none; color: var(--muted); }
.foot, .foot a, .foot p { font-size: 1rem; }
main p, main li, main dd, main td { color: var(--ink); }
main .lab-lede, main .panel-lede, main .found-lede, main .mg-pricing .plan p:not(.amount), main .panel-table td:nth-child(2), main .else-card span, main .next-card p,
main .soc-card > span:not(.soc-state):not(.soc-handle), main .how-steps p, main .standard-row dd, main .found-three p, main .found-steps li, main .found-fix p, main .found-never p,
main .mgx-study-body p, main .faq-list p { color: #d8dde7; }

/* pass 62 (taste skill): sections clearly apart (about 140px on desktop); every section's heading, text and content enter in turn */
@media (min-width: 900px) {
  .panel, .how, .standard, .else, .next, .proof, .crate, .socials, .found { padding-top: 140px; padding-bottom: 140px; }
  section.mg.mg-pricing, section.mg.mg-faq, section.mg.mg-gallery, section.mg.mg-text { padding-top: 140px; padding-bottom: 120px; }
  .includes { padding-bottom: 140px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main section h2 { animation: mg-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    main section h2 + p, main section .panel-lede, main section .found-lede, main section .intro { animation: mg-rise linear both; animation-timeline: view(); animation-range: entry 6% entry 48%; }
    main .panel-table tbody tr, main .else-card, main .soc-card, main .mg-pricing .plan, main .how-steps li, main .standard-row > div, main .found-three > div, main .found-steps li {
      animation: mg-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
  }
}

/* pass 64: the monthly work is a plain two-column list, not six identical tiles */
main .found-steps { gap: 0 56px; }
main .found-steps li { background: transparent; padding: 0 0 26px; }
main .found-steps b { display: block; font: 600 1.15rem/1.35 var(--text); color: var(--ink); margin-bottom: 4px; }

/* pass 65: the light illustration cards keep their own dark ink (pass 61's light running text had reached them) */
main .ba-card, main .ba-card li, main .ba-card p, main .pack, main .pack li, main .pack-search { color: #1d222b; }
main .ba-card b, main .pack-list b { color: #1a3d8f; }
main .pack-list span, main .pack figcaption, main .ba-tag { color: #3e4550; }
main .pack-list .you b, main .after .ba-tag { color: #04050a; }

/* pass 68: on phones the Light Lab readout stays off, so the hero's buttons and trust line never pass under it */
@media (max-width: 760px) { .lab-hud { display: none; } }
/* pass 69: gallery pictures sit on a flat tone while they load (the builder default is a gradient) */
main .gallery img { background: var(--tone-1); border: 0; }

/* pass 81: the header's call button is the secondary action: dark, the same size as Start a project */
.top .mg-btn.small { min-height: 0; height: auto; padding: 10px 16px; background: var(--tone-2); color: var(--ink); font: 600 .98rem/1 var(--text); letter-spacing: 0; }
.top .mg-btn.small:hover { background: #1b2233; color: var(--ink); }

/* pass 82 (owner): MeshGlo Node only for the logo, the hero headline, page titles and the wordmarks. Everything else in
   the readable text face, in normal capitals. Prices bold and underlined. The coloured "to glow." is back. */
main section h2, main .cl-item h2, main .est-box h2, main .ready h2, main .inc-box h2, main .found-never h2 {
  font-family: var(--text) !important; font-weight: 700 !important; letter-spacing: -.02em !important; text-transform: none !important; line-height: 1.08 !important; }
main .soc-card b, main .else-card b, main .found-three b, main .cl-item h2 { font-family: var(--text) !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
main .standard-row dt, main .est-out .est-once, main .est-out .est-monthly, main .mgx-numbers dt {
  font-family: var(--text) !important; font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1.05 !important; }
main .standard-row dt { padding-top: .06em; }
main .mg-pricing .plan .amount { font-family: var(--text) !important; font-weight: 800 !important; letter-spacing: -.02em !important;
  text-decoration: underline; text-decoration-color: #66f0ff; text-decoration-thickness: 3px; text-underline-offset: 7px; }
main .mg-pricing .plan .amount { position: relative; padding-top: 1.35rem; }
main .mg-pricing .plan .amount span { position: absolute; top: 0; left: 0; font-weight: 500; }  /* out of flow: no underline */
main .panel-table td:last-child b, main .est-out .est-once, main .est-out .est-monthly {
  font-weight: 800; text-decoration: underline; text-decoration-color: #66f0ff; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.lab-hero h1 em { -webkit-text-fill-color: transparent; }
main .gallery:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { main .gallery:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; } }

/* pass 83: the living background sits behind everything; the page colour moves to <html> so the canvas shows through */
html { background: #04050a; }
body { background: transparent !important; }
.mg-site-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; }

/* pass 84 (owner): a bigger MeshGlo badge with a rainbow running through it; the dot cycles with it. Still for reduced motion. */
header .brand b { font-size: clamp(1.75rem, 2.4vw, 2.3rem) !important; letter-spacing: .04em;
  background-image: linear-gradient(90deg, #ff4d6d, #ffb35c, #ffe066, #6dff8b, #66f0ff, #6d8bff, #c56dff, #ff4d6d) !important;
  background-size: 300% 100% !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent; color: transparent !important; animation: mg-rainbow 6s linear infinite; }
header .brand b::after { background: #66f0ff; animation: mg-rainbow-dot 6s linear infinite; }
@keyframes mg-rainbow { to { background-position: 300% 0; } }
@keyframes mg-rainbow-dot { 0% { background: #ff4d6d; box-shadow: 0 0 14px #ff4d6d; } 17% { background: #ffb35c; box-shadow: 0 0 14px #ffb35c; }
  33% { background: #ffe066; box-shadow: 0 0 14px #ffe066; } 50% { background: #6dff8b; box-shadow: 0 0 14px #6dff8b; }
  67% { background: #66f0ff; box-shadow: 0 0 14px #66f0ff; } 83% { background: #c56dff; box-shadow: 0 0 14px #c56dff; } 100% { background: #ff4d6d; box-shadow: 0 0 14px #ff4d6d; } }
@media (max-width: 760px) { header .brand b { font-size: 1.7rem !important; } }
@media (prefers-reduced-motion: reduce) { header .brand b, header .brand b::after { animation: none; } }