/* ============================================================
   synchresis2026 - "broadcast" theme for SyncCMS (static theme)
   Palette from analogue broadcast test gear: phosphor amber
   trace, signal teal, neutrals warmed toward the accent.
   Content classes below match page bodies authored for
   synchresis2025 so existing pages render unchanged.
   NOTE: do not write CMS placeholder tokens inside comments -
   they get substituted here too.
   ============================================================ */
:root{
  --ground:#f2efe7; --ground-2:#e9e4d9; --ground-3:#ded8ca;
  --rule:#c9c2b2; --text:#1b232a; --text-dim:#5c6771;
  --amber:#a86c12; --amber-lift:#c98a22;
  --cyan:#1a636c; --cyan-lift:#24838e;
  --clip:#95381d; --ink:#10161c;
  --measure:66ch; --pad:26px; --max:1080px;
  /* Vertical rhythm. Quinn, 2026-08-31: too much air between the text and
     the rules. These three are the knobs for that - raise them to loosen the
     whole site again rather than hunting individual rules. */
  --v-section:30px; /* was 44 - top and bottom of every *-section band */
  --v-block:16px;   /* was 24 - space under a heading, and under a grid */
  --v-hero:44px;    /* was 64 - top and bottom inside a hero */
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --display:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Iowan Old Style","Palatino Linotype",Charter,Georgia,serif;
}
/* Dark palette, stated twice on purpose. Once for a system asking for dark
   where the visitor has not overridden to light, and once for a visitor who
   chose dark explicitly - so the toggle beats the system setting in both
   directions rather than only one. A visitor who has chosen nothing keeps the
   automatic behaviour. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0e1418; --ground-2:#151d23; --ground-3:#1d272e;
    --rule:#2b3740; --text:#dfe4e2; --text-dim:#93a0a8;
    --amber:#e0a13c; --amber-lift:#f2bd63;
    --cyan:#4fb3bf; --cyan-lift:#7fd0d9; --clip:#d9764f;
  }
}
:root[data-theme="dark"]{
    --ground:#0e1418; --ground-2:#151d23; --ground-3:#1d272e;
    --rule:#2b3740; --text:#dfe4e2; --text-dim:#93a0a8;
    --amber:#e0a13c; --amber-lift:#f2bd63;
    --cyan:#4fb3bf; --cyan-lift:#7fd0d9; --clip:#d9764f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--cyan);text-underline-offset:3px}
a:hover{color:var(--cyan-lift)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
code,pre{font-family:var(--mono);font-size:.9em}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;margin:0 0 .42em}
h1{font-weight:800;letter-spacing:-.034em;line-height:1.0;font-size:clamp(38px,6.4vw,68px)}
h2{font-weight:750;letter-spacing:-.024em;line-height:1.1;font-size:clamp(26px,3.4vw,38px)}
h3{font-weight:700;letter-spacing:-.012em;font-size:21px}
h4{font-weight:650;font-size:17px}
p{margin:0 0 .85em;max-width:var(--measure)}

/* ---------- chrome ---------- */
.site-head{border-bottom:1px solid var(--rule);background:var(--ground)}
.bars{display:flex;height:5px}
.bars span{flex:1}
.head-inner{max-width:var(--max);margin:0 auto;padding:13px var(--pad);
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
/* Colour-scheme toggle, top right - where sites conventionally put it.
   Anchored to .banner rather than to .site-head on purpose: .banner is the
   1080px content column, so the control lines up with the page's right edge
   instead of drifting to the far side of a wide monitor.
   Hidden until theme.js adds .js, because without a script it cannot do
   anything and the automatic media query is already the right answer for a
   no-JS visitor. Typography follows the nav. */
.theme-toggle{display:none}
.js .theme-toggle{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;line-height:1;
  background:transparent;border:1px solid var(--rule);border-radius:2px;
  color:var(--text-dim);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;padding:8px 11px;
  position:absolute;top:16px;right:var(--pad);
}
.js .theme-toggle:hover{border-color:var(--amber);color:var(--text)}
.theme-toggle-icon{font-size:12.5px;line-height:1}
/* Narrow screens: the banner content is centred and nearly fills the column,
   so an absolutely positioned control would sit on top of the logo. Put it
   back in flow there, still at the right. */
@media(max-width:620px){
  .js .theme-toggle{position:static;margin:10px auto 0}
}
/* ---------- masthead banner ---------- */
.banner{
  max-width:var(--max);margin:0 auto;padding:24px var(--pad) 18px;
  text-align:center;position:relative;
}
.banner-brand{display:inline-block;line-height:0;text-decoration:none}
.banner-brand img{margin:0 auto}
.banner-brand img{
  width:100%;max-width:430px;height:auto;display:block;
}
/* The mark's gradient runs to near-black at one end, which disappears on
   a dark ground. Render it as a light monochrome there instead. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .banner-brand img{filter:brightness(0) invert(1);opacity:.94}
}
:root[data-theme="dark"] .banner-brand img{filter:brightness(0) invert(1);opacity:.94}
/* Second half of the wordmark. The logo reads "Synchresis" only, so this
   completes the company name and belongs to the mark, not to the strapline -
   hence text colour rather than the accent. The trailing letter-space is
   compensated with text-indent so it optically centres under the mark. */
.banner-solutions{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(15px,2.6vw,25px);line-height:1;
  letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;
  color:var(--text);margin-top:9px;
}
.banner-brand{color:inherit}
.banner-brand:hover .banner-solutions{color:var(--amber)}

.banner-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--amber);margin:14px auto 0;max-width:none;
}
.banner-sub{
  font-family:var(--body);font-style:italic;font-size:15px;
  color:var(--text-dim);margin:5px auto 0;max-width:none;
}
.banner::after{
  content:"";display:block;width:120px;height:1px;
  background:var(--rule);margin:14px auto 0;
}
@media(max-width:560px){
  .banner{padding-top:18px}
  .banner-tag{letter-spacing:.18em;font-size:10px}
}
nav.site-nav{margin-left:auto}
nav.site-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap;max-width:none}
nav.site-nav li{position:relative}
nav.site-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-dim);text-decoration:none;padding:6px 0;display:inline-block}
nav.site-nav a:hover{color:var(--amber)}
nav.site-nav ul ul{display:none;position:absolute;top:100%;left:0;z-index:40;
  background:var(--ground-2);border:1px solid var(--rule);flex-direction:column;gap:0;
  min-width:210px;padding:6px 0;border-radius:2px;box-shadow:0 6px 22px rgba(0,0,0,.16)}
nav.site-nav li:hover>ul,nav.site-nav li:focus-within>ul,
nav.site-nav li.is-open>ul{display:flex}
nav.site-nav ul ul a{padding:7px 16px;display:block;letter-spacing:.08em}

.page-head{border-bottom:1px solid var(--rule);background:var(--ground-2)}
.page-head .container{padding-top:26px;padding-bottom:22px}
.page-head .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin:0 0 6px}
.page-head h1{margin:0;font-size:clamp(30px,4.6vw,50px)}
/* Every page but /blog opens with its own hero carrying the page name, so
   this band just repeats it. Drop it wherever a hero is present and keep
   it as the fallback title on pages that have none. */
body:has(#content .hero,#content .index-hero,#content .page-hero,
         #content .voice-hero,#content .web-hero) .page-head{display:none}
#content{padding-bottom:48px}

/* ---------- generic families (low specificity, easily overridden) ---------- */
.container,
[class$="-container"],[class$="-wrapper"],[class$="-content"],[class$="-inner"]{
  max-width:var(--max);margin-left:auto;margin-right:auto;
}
#content>.container{padding:0 var(--pad)}
[class$="-section"],.services,.accordion,.calculator{padding:var(--v-section) 0}
[class$="-grid"],[class$="-items"],[class$="-list"],[class$="-features"],
[class$="-promises"],[class$="-buttons"]{
  display:grid;gap:14px;list-style:none;padding-left:0;margin:0 0 var(--v-block);max-width:none;
}
@media(min-width:700px){
  [class$="-grid"],[class$="-items"],[class$="-list"],[class$="-features"],[class$="-promises"]{
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  }
}
[class$="-buttons"],.cta-buttons,.index-hero-buttons{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- heroes ---------- */
.hero,.page-hero,.voice-hero,.web-hero,.index-hero{
  background:var(--ink);color:#e9edea;padding:var(--v-hero) 0;margin:0 0 26px;
  border-bottom:3px solid var(--amber);
}
.hero-content,.index-hero-content,.index-hero-wrapper{padding-left:var(--pad);padding-right:var(--pad)}
.index-hero-wrapper{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.index-hero-wrapper{grid-template-columns:1.15fr .85fr}}
.hero h1,.hero h2,.page-hero h1,.page-hero h2,.voice-hero h1,.voice-hero h2,
.web-hero h1,.web-hero h2,.index-hero h1,.index-hero h2{color:#f4f6f3}
.hero p,.page-hero p,.voice-hero p,.web-hero p,.index-hero p{color:#a9b4ba;font-size:19px;max-width:54ch}
.index-hero-features{margin-top:16px}
.index-hero-features li,.index-hero-features div{
  color:#c3ccd1;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  border-left:2px solid var(--cyan);padding-left:12px;
}
.index-hero-image img,.character-image img,.pillars-image img,
.contact-image img{border-radius:3px}

/* ---------- cards & blocks ---------- */
.feature-card,.service-card,.expertise-card,.screenshot-card,.pricing-block,
.accordion-item,.feature-item,.promise-item,.cost-item,.price-item,.info-item,
.differentiator-box,.content-block,.audio-block,.team-member,.strategic-note,
.contact-info,.voice-sample{
  background:var(--ground-2);border:1px solid var(--rule);border-radius:3px;padding:16px 22px;
}
.feature-card h3,.service-card h3,.expertise-card h3,.team-member h3{margin-top:0}
.feature-card p:last-child,.service-card p:last-child,.expertise-card p:last-child{margin-bottom:0}
.pricing-block,.pricing-summary{border-color:var(--amber)}
.promise-item,.feature-item,.strategic-note,.differentiator-box{border-left:2px solid var(--cyan)}
.disclaimer{color:var(--text-dim);font-size:14.5px;border-top:1px solid var(--rule);padding-top:10px}
.highlight,.learn-more{color:var(--amber);font-weight:600}
.quote,.depth-quote,.depth-statement-content{
  border-left:2px solid var(--amber);padding:6px 0 6px 20px;
  font-size:19.5px;font-style:italic;color:var(--text);max-width:58ch;
}
.section-title,.pillars-header h2,.expertise-intro h2{
  font-family:var(--display);font-weight:750;letter-spacing:-.02em;
  font-size:clamp(24px,3vw,34px);margin:0 0 var(--v-block);
}
.pillar-number{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--amber);display:block;margin-bottom:6px}
.pillar-cta,.pillars-scheduler-link,.quality-link{margin-top:10px}
.price,.period{font-family:var(--mono)}
.price{font-size:30px;color:var(--amber);letter-spacing:-.02em}
.period{font-size:12px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase}
.cost-summary,.pricing-summary{background:var(--ground-3);border:1px solid var(--amber);
  border-radius:3px;padding:16px 22px;margin-top:12px}
/* ---------- service pillars ----------
   Graphic on top, the four pillars as boxes beneath it. These stop being
   an accordion here: content is always visible, so the disclosure arrow
   goes and the number becomes the box's marker. */
.pillars-layout{display:grid;gap:22px;grid-template-columns:1fr}
.pillars-image{margin:0 auto 8px}
/* ---------- contact page ----------
   Form on the left, the artwork and the reach-us card stacked on the right.
   Stays one column until there is room for two, so the form never gets
   squeezed on a phone. The graphic sits at its intrinsic 400px and only
   shrinks below that. */
.contact-layout{display:grid;gap:24px;grid-template-columns:1fr;align-items:start}
/* undoes the centred-layout 520px cap, which would otherwise leave the form
   floating in the middle of its own column */
.contact-layout .contact-form{max-width:none;margin-left:0;margin-right:0}
/* Narrow screens, stated first: the aside dissolves so its two children join
   the single column as siblings of the form. That is what lets the graphic
   rise above the form while the reach-us card stays below it — the two cannot
   straddle the form while they share a wrapper. display:contents is safe here
   because .contact-aside is a plain div carrying no semantics of its own. */
.contact-aside{display:contents}
.contact-image{order:-1;margin:0;text-align:center}
/* Wide screens: the aside becomes a real right-hand column again and the
   graphic returns to normal flow inside it. Nothing else about the desktop
   layout changes. */
@media(min-width:780px){
  .contact-layout{grid-template-columns:1.05fr .95fr}
  .contact-aside{display:grid;gap:16px;align-content:start}
  .contact-image{order:0}
}
.contact-illustration{width:400px;max-width:100%;height:auto;border-radius:3px}

/* ---------- gallery widget captions ----------
   The widget prints its own stylesheet inline, in the body, so it lands after
   this file and wins any tie on specificity - hence the #content prefix rather
   than a plain class selector or !important.

   Its caption is dimmed text (opacity .7) with no background, sitting on a
   hardcoded white card, which is washed out and hard to read. Give the caption
   the same dark band the heroes use, so it separates from the screenshot above
   it and reads at a glance. The dark holds in both colour schemes because
   --ink is deliberately not redefined for dark. */
#content .synccms-gallery-item-info{background:var(--ink);color:#f4f6f3}
#content .synccms-gallery-item-info h3{color:#f4f6f3;margin-top:0}
#content .synccms-gallery-item-info p{opacity:1;color:#e9edea;margin-bottom:0}
.service-pillars .accordion{display:grid;gap:14px}
@media(min-width:700px){
  .service-pillars .accordion{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
}
.service-pillars .accordion-item{
  display:flex;flex-direction:column;padding:18px 18px;margin-bottom:0;overflow:visible;
}
.service-pillars .accordion-header{
  display:block;padding:0;background:transparent;cursor:default;width:auto;
}
.service-pillars .accordion-arrow{display:none}
.service-pillars .pillar-number{margin:0 auto 10px;display:block}
.service-pillars .accordion-title{flex:0 0 auto;margin-bottom:7px}
.service-pillars .accordion-title h3{font-size:16.5px;line-height:1.3}
/* always open inside the pillars, whatever the accordion script does */
.js .service-pillars .accordion-content,
.service-pillars .accordion-content{display:block;padding:0;color:var(--text)}
.service-pillars .accordion-content p{font-size:15px}
.service-pillars .pillar-cta{margin-top:auto;padding-top:10px}

/* ---------- buttons ---------- */
.cta-button,a.cta-button,.secondary-button,.scheduler-button,.submit-btn,
button,input[type=submit]{
  display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;padding:9px 18px;border-radius:2px;
  border:1px solid var(--amber);color:var(--amber);background:transparent;cursor:pointer;
}
.cta-button:hover,.secondary-button:hover,.scheduler-button:hover,
.submit-btn:hover,button:hover,input[type=submit]:hover{background:var(--amber);color:var(--ground)}
.secondary-button{border-color:var(--cyan);color:var(--cyan)}
.secondary-button:hover{background:var(--cyan);color:var(--ground)}
.hero .cta-button,.index-hero .cta-button,.page-hero .cta-button,
.voice-hero .cta-button,.web-hero .cta-button{border-color:var(--amber-lift);color:var(--amber-lift)}
.hero .cta-button:hover,.index-hero .cta-button:hover,.page-hero .cta-button:hover,
.voice-hero .cta-button:hover,.web-hero .cta-button:hover{background:var(--amber-lift);color:var(--ink)}
.app-badge-link,.apple-badge{display:inline-block;margin-right:12px}
.app-badge-image,.app-store-badge{height:44px;width:auto}

/* ---------- team ---------- */
.team-member{margin-bottom:12px}
.team-member-header{display:flex;align-items:center;gap:16px;margin-bottom:9px}
.team-member-image{width:74px;height:74px;border-radius:50%;object-fit:cover;
  border:1px solid var(--rule);flex:0 0 auto}

/* ---------- screenshots / carousel ---------- */
.screenshots-carousel{position:relative;overflow:hidden}
/* no-JS: slides stack and all stay visible. .js opts into one-at-a-time. */
.js .screenshot-slide{display:none}
.js .screenshot-slide.active{display:block}
.js .screenshots-carousel:not(:has(.screenshot-slide.active)) .screenshot-slide:first-child{display:block}
.screenshot-image{border:1px solid var(--rule);border-radius:3px}
.carousel-indicators{display:flex;gap:8px;justify-content:center;margin-top:12px;list-style:none;padding:0}
.indicator{width:8px;height:8px;border-radius:50%;background:var(--rule);
  border:0;padding:0;cursor:pointer}
.indicator.active{background:var(--amber)}

/* ---------- 2025 mascot replaced with theme artwork ---------- */
/* index.php rewrites these img src values server-side to this theme's
   artwork, so they are ordinary images here and only need sizing. Two CSS
   approaches were tried first and both failed silently: content:url() is
   unsupported in Firefox on regular elements, and the background-image
   variant could not be verified without a browser. Rewriting the src is
   deterministic and provable with curl. */
.character-image{width:430px;max-width:100%;height:auto}
.pillars-illustration{width:400px;max-width:100%;height:auto;border-radius:3px}
/* justify-self:stretch is load-bearing. .index-hero-wrapper sets
   justify-items:center, which makes this column shrink-to-fit; a width:100%
   image with no intrinsic size then resolves to zero width and vanishes.
   That, not the swap mechanism, is why the artwork kept disappearing. */
.index-hero-image,.pillars-image{
  display:flex;justify-content:center;align-items:center;
  width:100%;justify-self:stretch;min-height:120px;
}

/* ---------- accordion ----------
   Progressive enhancement: without JS every panel stays open and
   readable. The .js class (set by the script below) opts into
   collapse behaviour, so a script failure never hides content. */
.accordion-item{padding:0;margin-bottom:8px;overflow:hidden}
.accordion-header{display:flex;align-items:center;gap:14px;
  padding:12px 18px;background:var(--ground-2);width:100%;text-align:left}
.accordion-title{font-family:var(--display);font-weight:650;font-size:16.5px;flex:1 1 auto}
.accordion-title h3{margin:0;font-size:16.5px}
.pillar-number{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--amber);flex:0 0 auto;display:inline-block;margin:0;
  border:1px solid var(--amber);border-radius:50%;
  width:24px;height:24px;line-height:22px;text-align:center}
.accordion-arrow{color:var(--amber);font-family:var(--mono);flex:0 0 auto;
  font-size:11px;transition:transform .18s ease}
.accordion-content{padding:0 18px 14px;color:var(--text-dim)}

.js .accordion-header{cursor:pointer}
.js .accordion-content{display:none}
.js .accordion-item.is-open .accordion-content{display:block}
.js .accordion-item.is-open .accordion-arrow{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.accordion-arrow{transition:none}}

/* ---------- audio ---------- */
.audio-player,audio{width:100%;margin:8px 0}
.audio-description{color:var(--text-dim);font-size:15px}

/* ---------- forms ---------- */
.form-group{margin-bottom:12px;max-width:520px}
.form-group label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:5px}
.form-group input,.form-group textarea,.form-group select{
  width:100%;padding:9px 12px;font:inherit;font-size:16px;background:var(--ground);
  color:var(--text);border:1px solid var(--rule);border-radius:2px}
.form-group input:focus,.form-group textarea:focus{border-color:var(--amber);outline:none}
.form-message{padding:10px 14px;border-radius:2px;border:1px solid var(--cyan);
  background:var(--ground-2);font-size:15px}
.contact-section,.form-section{padding:var(--v-section) 0}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:7px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-dim);font-weight:400}
td.num,.price,.cost-item .price{font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);background:var(--ground-2);
  padding:24px 0 30px;margin-top:36px}
.foot-inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.site-foot,.site-foot p,.site-foot a{font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;color:var(--text-dim)}
.site-foot ul{list-style:none;padding:0;margin:0 0 12px;display:flex;gap:20px;flex-wrap:wrap}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--amber)}
.colophon{margin-top:10px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   CENTERED LAYOUT
   Everything centred per direction. Kept as one block at the end
   of the sheet so it can be removed in one piece to return to the
   asymmetric setting. Measure boxes get auto side margins so the
   text column itself centres rather than only its contents.
   ============================================================ */
body,#content,.page-head,.site-foot{text-align:center}
p,ul,ol,blockquote{margin-left:auto;margin-right:auto}
h1,h2,h3,h4,.section-title,.accordion-title{text-align:center}

/* header + navigation */
.head-inner{justify-content:center;text-align:center}
nav.site-nav{margin-left:0}
nav.site-nav>ul{justify-content:center}
nav.site-nav ul ul{text-align:center;left:50%;transform:translateX(-50%)}

/* heroes */
.hero p,.page-hero p,.voice-hero p,.web-hero p,.index-hero p{margin-left:auto;margin-right:auto}
.index-hero-wrapper{justify-items:center;text-align:center}
.index-hero-features li,.index-hero-features div{
  border-left:0;border-top:1px solid var(--cyan);padding-left:0;padding-top:8px;
}

/* cards and blocks */
.feature-card,.service-card,.expertise-card,.screenshot-card,.pricing-block,
.feature-item,.promise-item,.cost-item,.price-item,.info-item,
.differentiator-box,.content-block,.audio-block,.team-member,.strategic-note,
.contact-info,.voice-sample{text-align:center}
.promise-item,.feature-item,.strategic-note,.differentiator-box{
  border-left:1px solid var(--rule);border-top:2px solid var(--cyan);
}
.quote,.depth-quote,.depth-statement-content{
  border-left:0;border-top:2px solid var(--amber);
  padding:12px 0 0;margin-left:auto;margin-right:auto;text-align:center;
}
ul.feature-list,ul.tech-list,.services-list{list-style-position:inside}

/* rows that must stay rows */
.cta-buttons,[class$="-buttons"]{justify-content:center}
.accordion-header{justify-content:center;text-align:center}
.accordion-title{flex:0 1 auto}
.team-member-header{justify-content:center;text-align:center}
.carousel-indicators{justify-content:center}

/* forms */
.form-group{margin-left:auto;margin-right:auto;text-align:center}
.form-group label{text-align:center}
.form-group input,.form-group textarea,.form-group select{text-align:center}
.contact-form,.calculator-form{max-width:520px;margin-left:auto;margin-right:auto}

/* footer */
.site-foot ul{justify-content:center}

/* ============================================================
   FULL-THEME MARKUP (index.php)
   The static template emits {{NAVIGATION}} / {{FOOTER}} as plain
   lists; the full theme renders dropdown buttons and footer
   columns, which need their own rules. Declared last so they
   beat the generic button styling above.
   ============================================================ */
nav.site-nav .dropdown-toggle{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-dim);background:transparent;border:0;padding:6px 0;margin:0;
  cursor:pointer;border-radius:0;display:inline-flex;align-items:center;gap:6px;
}
nav.site-nav .dropdown-toggle:hover,
nav.site-nav li:hover>.dropdown-toggle,
nav.site-nav li:focus-within>.dropdown-toggle,
nav.site-nav li.is-open>.dropdown-toggle{background:transparent;color:var(--amber)}
nav.site-nav .dropdown-arrow{font-size:8px;opacity:.7;transition:transform .18s ease}
nav.site-nav li:hover>.dropdown-toggle .dropdown-arrow,
nav.site-nav li:focus-within>.dropdown-toggle .dropdown-arrow,
nav.site-nav li.is-open>.dropdown-toggle .dropdown-arrow{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){nav.site-nav .dropdown-arrow{transition:none}}

.footer-content{
  display:grid;gap:18px;margin:0 auto 14px;justify-content:center;text-align:center;
}
@media(min-width:640px){.footer-content{grid-template-columns:repeat(auto-fit,minmax(180px,auto))}}
.footer-section h4{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin:0 0 7px;font-weight:400;
}
.footer-section ul{display:block;margin:0;padding:0;list-style:none}
.footer-section li{margin-bottom:5px}