/* ==========================================================================
   Speedy Websites — site.css
   One stylesheet for the whole site. Loaded by layouts/sw-newlayout.twig via
   {{ cms.builder.css('sw/site.css') }}  →  /assets/sw/site.css

   Replaces: the <style> in sw-newlayout, partials/block-styles.twig, and the
   <style> blocks in pages/sw-page, journal-index, journal-post and
   partials/block-changelog.

   1. Tokens & base          7. Page header & body (sw-page)
   2. Buttons                8. Blocks
   3. Header & nav           9. Journal (grid block + single post)
   4. Hero                  10. Changelog
   5. Marquee               11. CTA band
   6. Sections & shared     12. Footer
                            13. Mobile nav
   ========================================================================== */


/* ---------- 1. Tokens & base ---------- */
:root{
  --ink:#12141c;
  --ink-soft:#1c1f2a;
  --paper:#ecefe6;
  --paper-line:#d4d8c9;
  --volt:#ff4b2b;
  --volt-dark:#b8301a; /* darkened from #d63a1e for 4.5:1 text contrast on --paper (Lighthouse, 9 Oct 2026) */
  --zap:#d7ff3e;
  --mist:#9aa0ad;
  --line-dark:rgba(255,255,255,.14);
  --muted-on-paper:#5b5f52;
  --max:1180px;
  --gap:clamp(1.25rem,3vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Big Shoulders Display','Inter',sans-serif;
  font-weight:800;
  letter-spacing:.002em;
  margin:0;
  line-height:.92;
}

a{color:inherit;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}


/* ---------- 2. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Inter',sans-serif; font-weight:600; font-size:.95rem;
  padding:.85rem 1.5rem;
  border-radius:2px;
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-volt{background:var(--volt); color:var(--ink);}
.btn-volt:hover{background:var(--zap);}
.btn-outline{border-color:var(--line-dark); color:var(--paper); background:transparent;}
.btn-outline:hover{border-color:var(--paper);}
.btn-ink{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-ink:hover{background:transparent; color:var(--ink); border-color:var(--ink);}


/* ---------- 3. Header & nav ---------- */
#siteHeader{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:1.1rem 0;
  background:transparent;
  transition:background .25s ease, padding .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
#siteHeader.is-scrolled{
  background:rgba(18,20,28,.92);
  backdrop-filter:blur(8px);
  padding:.75rem 0;
  border-bottom-color:var(--line-dark);
}
#siteHeader .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem;}

.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none;}
.logo svg{width:30px; height:30px; flex:none;}
.logo-text{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:1.4rem; line-height:1; color:var(--paper);}
.logo-text b{color:var(--volt); font-weight:800;}

nav.primary-nav{display:flex; align-items:center; gap:clamp(1.1rem,2vw,2rem);}
nav.primary-nav a{
  text-decoration:none; color:var(--paper); font-size:.95rem; font-weight:500;
  opacity:.85; position:relative;
}
nav.primary-nav a:not(.btn){display:inline-block; padding:.35rem 0;} /* 24px+ tap targets */
nav.primary-nav a:hover{opacity:1;}
nav.primary-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--volt);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
nav.primary-nav a:hover::after{transform:scaleX(1);}
nav.primary-nav a.btn{color:var(--ink); opacity:1;}
nav.primary-nav a.btn::after{display:none;}
nav.primary-nav a.btn:hover{background:var(--zap); color:var(--ink);}
nav.primary-nav .nav-close{display:none;}

.nav-toggle{display:none; background:none; border:none; color:var(--paper); cursor:pointer; padding:.4rem;}
.nav-toggle svg{width:24px; height:24px;}


/* ---------- 4. Hero (hero block) ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:calc(6.5rem + 2vw) 0 4rem;
  background:var(--ink);
}
.hero.has-image{background-size:cover; background-position:center;}
.hero.has-image::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(18,20,28,.94) 0%, rgba(18,20,28,.8) 45%, rgba(18,20,28,.45) 100%);
}
.hero-lines{position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none;}
.hero-lines svg{width:100%; height:100%;}

.hero .wrap{position:relative; z-index:1;}
.hero-kicker{display:inline-block; font-size:.95rem; color:var(--mist); font-weight:500; margin-bottom:1.25rem;}
.hero-kicker b{color:var(--zap); font-weight:600;}

.hero-headline{max-width:14ch;}
.hero-headline .line{display:block;}
.hero-headline .line1{font-size:clamp(2.2rem,7vw,4.6rem); color:var(--mist); font-weight:600;}
.hero-headline .line2{font-size:clamp(3.2rem,11vw,7.8rem); color:var(--paper);}
.hero-headline .line3{font-size:clamp(3.2rem,11vw,7.8rem); color:var(--volt);}

.hero-sub{max-width:46ch; margin:1.75rem 0 2.25rem; font-size:1.08rem; color:var(--mist);}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem;}


/* ---------- 5. Marquee ---------- */
.marquee-band{
  background:var(--paper); color:var(--ink);
  border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
  overflow:hidden; white-space:nowrap;
  padding:1rem 0;
}
.marquee-track{display:inline-flex; animation:scroll 34s linear infinite;}
.marquee-track span,.marquee-track a{display:inline-flex; align-items:center; font-size:1rem; font-weight:600; padding:0 1.75rem; color:inherit; text-decoration:none;}
.marquee-track span::after,.marquee-track a::after{content:'·'; margin-left:1.75rem; color:var(--volt); font-weight:800;}
.marquee-track a:hover,.marquee-track a:focus-visible{color:var(--volt-dark); text-decoration:underline; text-underline-offset:.2em;}
.marquee-band:hover .marquee-track,.marquee-band:focus-within .marquee-track{animation-play-state:paused;}
@keyframes scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.marquee-ink{background:var(--ink); color:var(--paper); border-color:var(--line-dark);}
.marquee-volt{background:var(--volt); color:var(--ink); border-color:var(--volt-dark);}
.marquee-volt .marquee-track span::after,.marquee-volt .marquee-track a::after{color:var(--ink);}
.marquee-volt .marquee-track a:hover,.marquee-ink .marquee-track a:hover{color:var(--zap);}


/* ---------- 6. Sections & shared ---------- */
section{padding:clamp(4rem,8vw,7rem) 0;}

.on-paper{background:var(--paper); color:var(--ink);}
.on-ink{background:var(--ink); color:var(--paper);}
.on-volt{background:var(--volt); color:var(--ink);}

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  margin-bottom:clamp(2rem,4vw,3.5rem);
  flex-wrap:wrap;
}
.section-head h2{font-size:clamp(2.2rem,5vw,3.6rem); font-weight:700; max-width:16ch;}
.section-head p{max-width:34ch; color:var(--mist); font-size:1rem; margin:0;}
.on-paper .section-head p{color:var(--muted-on-paper);}
.on-volt .section-head p{color:rgba(18,20,28,.75);}

/* Rich text — page content, text blocks, journal posts */
.prose{max-width:68ch; font-size:1.08rem; line-height:1.75;}
.prose > *:first-child{margin-top:0;}
.prose > *:last-child{margin-bottom:0;}
.prose h2,.prose h3,.prose h4{font-family:'Big Shoulders Display',sans-serif; line-height:1.05; margin:2.2em 0 .6em;}
.prose h2{font-size:2.2rem;}
.prose h3{font-size:1.7rem;}
.prose h4{font-size:1.3rem;}
.prose p,.prose ul,.prose ol{margin:0 0 1.2em;}
.prose a{color:var(--volt-dark); text-underline-offset:3px;}
.on-ink .prose a{color:var(--volt);}
.on-volt .prose a{color:var(--ink);}
.prose img{height:auto; margin:1.5em 0;}
.prose blockquote{margin:1.5em 0; padding-left:1.25rem; border-left:3px solid var(--volt); font-style:italic;}


/* ---------- 7. Page header & body (sw-page) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  padding:calc(7rem + 3vw) 0 clamp(3.5rem,7vw,5.5rem);
  background:var(--ink) center/cover no-repeat;
}
.page-hero.has-image::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(18,20,28,.94) 0%, rgba(18,20,28,.8) 45%, rgba(18,20,28,.45) 100%);
}
.page-hero .wrap{position:relative; z-index:1;}
.page-kicker{display:inline-block; font-size:.95rem; color:var(--zap); font-weight:600; margin-bottom:1rem;}
.page-hero .page-title{font-size:clamp(3rem,9vw,6.5rem); color:var(--paper); max-width:16ch;}
.page-hero .page-title .accent{color:var(--volt);}
.page-intro{max-width:50ch; margin:1.5rem 0 0; font-size:1.1rem; color:#c3c7cf;}

.page-body{background:var(--paper); color:var(--ink); padding:clamp(3.5rem,7vw,6rem) 0;}
.page-body .prose{margin:0 auto;}


/* ---------- 8. Blocks ---------- */
/* Block headings & themes */
.blk .accent{color:var(--volt);}
.on-volt .accent{color:var(--paper);}
.blk-kicker{display:block; font-size:.9rem; font-weight:600; color:var(--volt-dark); margin-bottom:.75rem;}
.on-ink .blk-kicker{color:var(--zap);}
.on-volt .blk-kicker{color:var(--ink);}
.blk-h2{font-size:clamp(2.2rem,5vw,3.6rem); font-weight:700; margin-bottom:1.25rem;}
.blk-lead{font-size:1.1rem; margin:0 0 1.5rem; opacity:.85;}
.blk-prose{margin:0 auto;}
.ti-text .prose,.contact-grid .prose{margin:0;}

/* Buttons on light / orange backgrounds */
.on-paper .btn-outline{border-color:var(--paper-line); color:var(--ink);}
.on-paper .btn-outline:hover{border-color:var(--ink);}
.on-volt .btn-outline{border-color:var(--ink); color:var(--ink);}
.on-volt .btn-ink:hover{color:var(--ink);}
.blk-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:clamp(2rem,4vw,3rem);}

/* Grids */
.blk-grid{display:grid; gap:clamp(1.25rem,2.5vw,2rem);}
.cols-2{grid-template-columns:repeat(2,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .cols-3,.cols-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;} }

/* Text + image */
.ti-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;}
.ti-left .ti-media{order:-1;}
.ti-media img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;}
.ti-placeholder{aspect-ratio:4/3; background:repeating-linear-gradient(135deg, rgba(128,128,128,.12) 0 12px, transparent 12px 24px);}
@media (max-width:800px){ .ti-grid{grid-template-columns:1fr;} .ti-left .ti-media{order:0;} }

/* Cards */
.blk-card{display:flex; flex-direction:column; gap:.75rem; padding:1.75rem; border:1px solid var(--paper-line); background:rgba(255,255,255,.35);}
.on-ink .blk-card{border-color:var(--line-dark); background:var(--ink-soft);}
.on-volt .blk-card{border-color:rgba(18,20,28,.2); background:rgba(255,255,255,.12);}
.blk-card-img{margin:-1.75rem -1.75rem .5rem; aspect-ratio:16/10; overflow:hidden;}
.blk-card-img img{width:100%; height:100%; object-fit:cover;}
.blk-card h3{font-size:1.7rem; font-weight:700;}
.blk-card p{margin:0; font-size:.98rem; opacity:.8;}
.blk-tag{font-size:.78rem; font-weight:600; color:var(--volt-dark);}
.on-ink .blk-tag{color:var(--zap);}
.blk-link{margin-top:auto; font-weight:600; font-size:.92rem; text-decoration:none;}
.blk-link:hover{color:var(--volt);}

/* Services */
.service-row{
  display:grid;
  grid-template-columns:2.4fr 1fr auto;
  align-items:center;
  gap:1.5rem;
  padding:1.6rem 0;
  border-top:1px solid var(--paper-line);
  text-decoration:none;
  color:inherit;
}
.service-row:last-child{border-bottom:1px solid var(--paper-line);}
.service-name{
  font-family:'Big Shoulders Display',sans-serif; font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  transition:color .15s ease, transform .15s ease;
}
.service-desc{font-size:.95rem; color:var(--muted-on-paper);}
.service-tag{
  font-size:.8rem; font-weight:600; color:var(--volt-dark);
  border:1.5px solid var(--volt-dark); border-radius:999px;
  padding:.3rem .8rem; white-space:nowrap; justify-self:end;
}
.service-row:hover .service-name{color:var(--volt-dark); transform:translateX(6px);}
.on-ink .service-row{border-color:var(--line-dark);}
.on-ink .service-desc{color:var(--mist);}
.on-ink .service-tag{color:var(--zap); border-color:var(--zap);}
@media (max-width:720px){
  .service-row{grid-template-columns:1fr; gap:.5rem;}
  .service-tag{justify-self:start;}
}

/* Steps (process) */
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; position:relative;}
.process::before{
  content:''; position:absolute; top:1.9rem; left:8%; right:8%; height:1px;
  background:repeating-linear-gradient(to right, var(--line-dark) 0 10px, transparent 10px 18px);
  z-index:0;
}
.process-step{position:relative; z-index:1;}
.process-num{
  font-family:'Big Shoulders Display',sans-serif; font-size:3rem; font-weight:800; color:var(--volt);
  line-height:1; margin-bottom:1rem;
}
.process-step h3{font-size:1.5rem; font-weight:700; margin-bottom:.6rem; color:var(--paper);}
.process-step p{color:var(--mist); font-size:.98rem; max-width:32ch;}
.process.steps-1{grid-template-columns:1fr;}
.process.steps-2{grid-template-columns:repeat(2,1fr);}
.process.steps-4{grid-template-columns:repeat(4,1fr);}
.on-paper .process-step h3,.on-volt .process-step h3{color:var(--ink);}
.on-paper .process-step p{color:var(--muted-on-paper);}
.on-volt .process-step p{color:rgba(18,20,28,.75);}
.on-volt .process-num{color:var(--paper);}
.on-paper .process::before{background:repeating-linear-gradient(to right, var(--paper-line) 0 10px, transparent 10px 18px);}
@media (max-width:800px){
  .process,.process.steps-2,.process.steps-4{grid-template-columns:1fr; gap:2.5rem;}
  .process::before{display:none;}
}

/* Stats */
.stat-value{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(3rem,7vw,5rem); line-height:1; color:var(--volt);}
.on-volt .stat-value{color:var(--ink);}
.stat-label{font-weight:600; margin-top:.5rem;}
.stat p{margin:.4rem 0 0; font-size:.92rem; opacity:.75;}

/* Testimonials */
.quote-card{margin:0; padding:2rem; display:flex; flex-direction:column; gap:1.25rem; border:1px solid var(--paper-line); background:rgba(255,255,255,.35);}
.on-ink .quote-card{border-color:var(--line-dark); background:var(--ink-soft);}
.on-volt .quote-card{border-color:rgba(18,20,28,.2);}
.quote-stars{color:var(--volt); letter-spacing:.15em;}
.on-volt .quote-stars{color:var(--ink);}
.quote-card blockquote{margin:0; font-size:1.08rem; line-height:1.6;}
.quote-card figcaption{margin-top:auto; display:flex; align-items:center; gap:.75rem;}
.quote-card figcaption img{border-radius:50%; width:48px; height:48px;}
.quote-card figcaption strong{display:block;}
.quote-card figcaption small{opacity:.7;}
.quote-card figcaption a{text-decoration:none;}

/* FAQ */
.faq-list{max-width:820px; border-top:1px solid var(--paper-line);}
.faq-item{border-bottom:1px solid var(--paper-line);}
.on-ink .faq-list,.on-ink .faq-item{border-color:var(--line-dark);}
.faq-item summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; padding:1.35rem 0; font-weight:600; font-size:1.08rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:1.4rem; line-height:1; color:var(--volt);}
.faq-item[open] summary::after{content:'–';}
.faq-answer{padding:0 0 1.5rem; line-height:1.7; opacity:.85;}
.faq-answer a{color:var(--volt-dark);}

/* Pricing */
.price-card{position:relative; display:flex; flex-direction:column; gap:1rem; padding:2rem; border:1px solid var(--paper-line); background:rgba(255,255,255,.35);}
.on-ink .price-card{border-color:var(--line-dark); background:var(--ink-soft);}
.price-card.is-featured{border:2px solid var(--volt);}
.price-badge{position:absolute; top:-.8rem; left:2rem; background:var(--volt); color:var(--ink); font-size:.75rem; font-weight:700; padding:.25rem .7rem; border-radius:999px;}
.price-card h3{font-size:1.6rem; font-weight:700;}
.price-value{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:3rem; line-height:1;}
.price-features{list-style:none; margin:0 0 .5rem; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.95rem;}
.price-features li{padding-left:1.4rem; position:relative;}
.price-features li::before{content:'✓'; position:absolute; left:0; color:var(--volt); font-weight:700;}
.price-card .btn{margin-top:auto; align-self:flex-start;}

/* Logos */
.logo-grid{align-items:center;}
.logo-cell{display:flex; align-items:center; justify-content:center; min-height:90px; padding:1rem; text-decoration:none;}
.logo-cell img{max-height:60px; width:auto; filter:grayscale(1); opacity:.75; transition:filter .2s ease, opacity .2s ease;}
.logo-cell:hover img{filter:none; opacity:1;}
.on-ink .logo-cell img{filter:grayscale(1) invert(1);}
.logo-name{font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:1.4rem; opacity:.7;}

/* Gallery */
.gallery-cell{display:block; overflow:hidden; aspect-ratio:4/3;}
.gallery-cell img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.gallery-cell:hover img{transform:scale(1.04);}

/* Video */
.video-frame{position:relative; aspect-ratio:16/9; background:#000; margin-bottom:2rem;}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* Projects feed (portfolio) */
.portfolio-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-dark); border:1px solid var(--line-dark);
}
.portfolio-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.portfolio-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.portfolio-card{
  background:var(--ink-soft); padding:2rem 1.75rem; min-height:200px;
  display:flex; flex-direction:column; justify-content:space-between; gap:1.5rem;
}
.portfolio-tag{font-size:.78rem; font-weight:600; color:var(--zap);}
.portfolio-card h3{font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:1.7rem; color:var(--paper);}
.portfolio-card h3 a{text-decoration:none; color:inherit; transition:color .15s ease;}
.portfolio-card h3 a span{font-size:.7em; color:var(--mist); transition:color .15s ease;}
.portfolio-card h3 a:hover,.portfolio-card h3 a:hover span{color:var(--volt);}
.portfolio-loc{font-size:.85rem; color:var(--mist);}
.portfolio-foot{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;}
.portfolio-story{font-size:.85rem; font-weight:600; color:var(--zap); text-decoration:none;}
.portfolio-story:hover{color:var(--volt);}
@media (max-width:900px){ .portfolio-grid,.portfolio-grid.cols-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .portfolio-grid,.portfolio-grid.cols-2,.portfolio-grid.cols-4{grid-template-columns:1fr;} }

/* Journal feed (simple list) */
.journal-list{border-top:1px solid var(--line-dark);}
.journal-item{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:1.4rem 0; border-bottom:1px solid var(--line-dark);
  text-decoration:none; color:inherit;
}
.journal-item h3{font-size:1.05rem; font-weight:600; font-family:'Inter',sans-serif; line-height:1.4; max-width:56ch;}
.journal-item span{font-size:.85rem; color:var(--mist); white-space:nowrap;}
.journal-item:hover h3{color:var(--volt);}
.on-paper .journal-list,.on-paper .journal-item{border-color:var(--paper-line);}
.on-paper .journal-item span{color:var(--muted-on-paper);}
.on-paper .journal-item:hover h3{color:var(--volt-dark);}
.on-volt .journal-list,.on-volt .journal-item{border-color:rgba(18,20,28,.25);}
.on-volt .journal-item span{color:var(--ink);}
.on-volt .journal-item:hover h3{color:var(--paper);}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start;}
.contact-details{margin:0; padding:2rem; border:1px solid var(--paper-line);}
.on-ink .contact-details{border-color:var(--line-dark); background:var(--ink-soft);}
.contact-details dt{font-size:.8rem; font-weight:600; opacity:.65; margin-top:1.25rem;}
.contact-details dt:first-child{margin-top:0;}
.contact-details dd{margin:.25rem 0 0; font-size:1.1rem;}
.contact-details a{text-decoration:none;}
.contact-details a:hover{color:var(--volt);}
.contact-actions .blk-actions{margin-top:1rem;}
/* Enquiry form (partials/block-contact) — Total CMS form markup, restyled to match the site */
.contact-form{margin-top:2.5rem;}
.contact-grid > div > .contact-form:first-child{margin-top:0;}
/* Spam checks: honeypot hidden from people (bots that fill it are rejected); human check spans the full row */
.contact-form .hp-field{position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden;}
.contact-form .human-field{grid-column:1 / -1;}
.contact-form .help{display:none;}
.contact-form .form-field{margin-bottom:1.1rem;}
.contact-form label{font-size:.85rem; font-weight:600;}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit; border-radius:0; border:1px solid var(--paper-line); background:#fff;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--volt); outline-offset:0; border-color:var(--volt);}
.contact-form .cms-save{font:inherit; font-weight:600; font-size:.95rem; padding:.85rem 1.5rem; border:0; border-radius:2px; background:var(--volt); color:var(--ink); cursor:pointer; transition:background .15s ease;}
.contact-form .cms-save:hover{background:var(--zap);}
.contact-privacy{margin:1rem 0 0; font-size:.85rem; color:var(--muted-on-paper);}
.on-ink .contact-privacy{color:var(--mist);}
.contact-thanks,.contact-error{display:none;}
.contact-form form.processing .cms-save{opacity:.6; pointer-events:none;}
.contact-form:has(form.success) form,.contact-form:has(form.success) .contact-privacy{display:none;}
.contact-form:has(form.success) .contact-thanks{display:block; padding:2rem; border:1px solid var(--paper-line); background:#fff;}
.contact-thanks h3{font-size:2rem; font-weight:700; line-height:1; margin:0 0 .75rem;}
.contact-thanks p{margin:0;}
.contact-form:has(form.error) .contact-error{display:block; margin:1rem 0 0; font-size:.9rem; color:var(--volt-dark);}


@media (max-width:800px){ .contact-grid{grid-template-columns:1fr;} }


/* ---------- 9. Journal ---------- */
/* Journal grid block (partials/block-journal-grid) — the /journal listing */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem 2rem;}
.post-card{display:flex; flex-direction:column; gap:1rem; text-decoration:none; color:inherit;}
.post-card-img{aspect-ratio:16/10; background:var(--paper-line); overflow:hidden;}
.on-ink .post-card-img{background:var(--ink-soft);}
.post-card-img img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.post-card:hover .post-card-img img{transform:scale(1.03);}
.post-card-meta{font-size:.8rem; font-weight:600; color:var(--volt-dark);}
.on-ink .post-card-meta{color:var(--zap);}
.post-card h3{font-size:1.7rem; font-weight:700; line-height:1; transition:color .15s ease;}
.post-card:hover h3{color:var(--volt-dark);}
.on-ink .post-card:hover h3{color:var(--volt);}
.post-card p{margin:0; font-size:.95rem; color:var(--muted-on-paper);}
.on-ink .post-card p{color:var(--mist);}
.post-card .more{font-size:.9rem; font-weight:600;}
@media (max-width:900px){ .post-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .post-grid{grid-template-columns:1fr;} }

/* Filter buttons (partials/filter-buttons.twig) — journal grid and projects grid */
.filter-bar{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2.5rem;}
.filter-btn{font:inherit; font-size:.85rem; font-weight:600; padding:.5rem 1rem; border:1px solid var(--paper-line); border-radius:999px; background:transparent; color:inherit; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;}
.filter-btn:hover{border-color:var(--volt);}
.filter-btn[aria-pressed="true"]{background:var(--volt); border-color:var(--volt); color:var(--ink);}
.filter-btn:focus-visible{outline:2px solid var(--volt); outline-offset:2px;}
.on-ink .filter-btn{border-color:var(--line-dark);}
[data-tags][hidden]{display:none !important;}

/* Projects grid (partials/block-projects-grid) — the /portfolio page */
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem 2rem;}
.project-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.project-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.project-card{display:flex; flex-direction:column; gap:.9rem;}
.project-card-img{aspect-ratio:16/10; background:var(--paper-line); overflow:hidden;}
.on-ink .project-card-img{background:var(--ink-soft);}
.project-card-img img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.project-card:hover .project-card-img img{transform:scale(1.03);}
.project-card h3{font-size:1.7rem; font-weight:700; line-height:1;}
.project-card p{margin:0; font-size:.95rem; color:var(--muted-on-paper);}
.on-ink .project-card p{color:var(--mist);}
.project-services{display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none;}
.project-services li{font-size:.75rem; font-weight:600; padding:.2rem .6rem; border:1px solid var(--paper-line); border-radius:999px;}
.on-ink .project-services li{border-color:var(--line-dark);}
.project-links{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:auto; font-size:.9rem; font-weight:600;}
.project-links a{color:inherit; text-decoration:none;}
.project-links a:hover{color:var(--volt-dark);}
.on-ink .project-links a:hover{color:var(--volt);}
@media (max-width:900px){ .project-grid,.project-grid.cols-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .project-grid,.project-grid.cols-2,.project-grid.cols-4{grid-template-columns:1fr;} }

/* Roadmap (pages/roadmap) + ideas list (pages/feature-requests) */
.roadmap{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; align-items:start;}
.roadmap-col{display:flex; flex-direction:column; gap:1rem;}
.roadmap-col-title{font-size:1.6rem; font-weight:700; line-height:1; margin:0 0 .5rem; padding-bottom:.75rem; border-bottom:3px solid var(--paper-line); display:flex; align-items:baseline; gap:.6rem;}
.roadmap-in-progress .roadmap-col-title{border-color:var(--volt);}
.roadmap-done .roadmap-col-title{border-color:var(--ink);}
.roadmap-count{font-family:'Inter',sans-serif; font-size:.8rem; font-weight:600; color:var(--muted-on-paper);}
.roadmap-card,.idea-list .idea{padding:1.25rem; background:#fff; border:1px solid var(--paper-line); display:flex; flex-direction:column; gap:.5rem;}
.roadmap-card h3,.idea-list .idea h3{font-size:1.35rem; font-weight:700; line-height:1.05; margin:0;}
.roadmap-card p,.idea-list .idea p{margin:0; font-size:.9rem; color:var(--muted-on-paper);}
.roadmap-empty{font-size:.9rem; color:var(--muted-on-paper);}
.roadmap-more{margin:2.5rem 0 0;}
.idea-list{display:flex; flex-direction:column; gap:1rem;}
.idea-list .roadmap-more{margin:.5rem 0 0; font-weight:600;}
@media (max-width:900px){ .roadmap{grid-template-columns:1fr;} }

/* Themes grid (partials/block-themes-grid) — the /theme-studio page */
.theme-list{display:flex; flex-direction:column; gap:3rem;}
.theme-row{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;}
.theme-snap{display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-line); border:1px solid var(--paper-line); container-type:inline-size;}
.theme-snap img{width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .3s ease;}
.theme-snap:hover img{transform:scale(1.02);}
.theme-snap iframe{position:absolute; top:0; left:0; width:400%; height:400%; border:0; transform:scale(.25); transform-origin:0 0; pointer-events:none; background:#fff;}
.theme-info{display:flex; flex-direction:column; gap:.9rem; align-items:flex-start;}
.theme-info h3{font-size:2.2rem; font-weight:700; line-height:1; margin:0;}
.theme-info p{margin:0; color:var(--muted-on-paper);}
.theme-buy{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:.5rem;}
.theme-buy .blk-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; margin:0;}
.theme-price{font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:1.8rem; line-height:1;}
.theme-price small{font-family:'Inter',sans-serif; font-size:.75rem; font-weight:600; color:var(--muted-on-paper);}
.theme-soon{font-size:.85rem; font-weight:600; padding:.4rem .9rem; border:1px dashed var(--muted-on-paper); border-radius:999px; color:var(--muted-on-paper);}
@media (max-width:840px){ .theme-row{grid-template-columns:1fr;} }

/* Screenshot block (partials/block-screenshot) — product screenshots on the extension pages */
.shot{margin:2.5rem 0 0; border:1px solid var(--paper-line); border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 24px 60px rgba(18,20,28,.14);}
.on-ink .shot{border-color:var(--line-dark); box-shadow:0 24px 60px rgba(0,0,0,.45);}
.shot-bar{display:flex; gap:.4rem; padding:.7rem .9rem; background:#eef0ea; border-bottom:1px solid var(--paper-line);}
.shot-bar span{width:.7rem; height:.7rem; border-radius:50%; background:#d4d8c9;}
.shot-link{display:block; cursor:zoom-in;}
.shot img{display:block; width:100%; height:auto;}
.shot figcaption{padding:.75rem 1rem; font-size:.85rem; color:var(--muted-on-paper); border-top:1px solid var(--paper-line);}

/* Single post (pages/journal-post) */
.post-hero{padding:calc(6.5rem + 2vw) 0 3rem; background:var(--ink);}
.post-back{display:inline-block; font-size:.9rem; color:var(--mist); text-decoration:none; margin-bottom:1.5rem;}
.post-back:hover{color:var(--volt);}
.post-meta{display:block; font-size:.9rem; font-weight:600; color:var(--zap); margin-bottom:1rem;}
.post-hero h1{font-size:clamp(2.6rem,7vw,5.2rem); color:var(--paper); max-width:20ch;}
.post-image{max-width:var(--max); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem);}
.post-image img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;}
.post-body{background:var(--paper); color:var(--ink); padding:clamp(3rem,6vw,5rem) 0;}
.post-body .prose{margin:0 auto;}
.post-next{max-width:68ch; margin:3rem auto 0; padding-top:2rem; border-top:1px solid var(--paper-line);}
.post-next a{font-weight:600; color:var(--ink); text-decoration:none;}
.post-next a:hover{color:var(--volt-dark);}


/* ---------- 10. Changelog block ---------- */
.changelog{display:flex; flex-direction:column; max-width:820px;}
.release{padding:2rem 0; border-top:1px solid var(--paper-line);}
.release:last-child{border-bottom:1px solid var(--paper-line);}
.on-ink .release{border-color:var(--line-dark);}
.release-head{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem 1.5rem; flex-wrap:wrap; margin-bottom:.75rem;}
.release-head h3{font-size:1.9rem; font-weight:700;}
.release-version{color:var(--volt);}
.on-volt .release-version{color:var(--paper);}
.release-meta{font-size:.85rem; opacity:.75;}
.release-type{display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.15rem .55rem; border-radius:999px; border:1.5px solid currentColor;}
.release-type.type-major{color:var(--volt-dark);}
.on-ink .release-type.type-major{color:var(--volt);}
.release-summary{margin:0 0 1.25rem; font-size:1.05rem; line-height:1.6;}
.release-group{margin:1rem 0 0;}
.release-group h4{margin:0 0 .4rem; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
.release-group.g-added h4{color:#3f8f3a;}
.on-ink .release-group.g-added h4{color:var(--zap);}
.release-group.g-fixed h4{color:var(--volt-dark);}
.on-ink .release-group.g-fixed h4{color:var(--volt);}
.release-group.g-changed h4,.release-group.g-removed h4{opacity:.7;}
.release-group ul{margin:0; padding-left:1.2rem; line-height:1.65;}
.release-notes{margin-top:1.25rem; padding:1rem 1.25rem; border-left:3px solid var(--volt); background:rgba(255,75,43,.07); font-size:.98rem;}
.release-notes strong{display:block; margin-bottom:.35rem;}
.release-link{display:inline-block; margin-top:1.25rem; font-weight:600; font-size:.92rem; text-decoration:none;}
.release-link:hover{color:var(--volt);}


/* ---------- 11. CTA band ---------- */
.cta-band{
  background:var(--volt); color:var(--ink);
  padding:clamp(4rem,9vw,7rem) 0;
  clip-path:polygon(0 4%, 100% 0, 100% 96%, 0% 100%);
  margin:-2px 0;
}
.cta-band h2{font-size:clamp(2.4rem,7vw,5rem); font-weight:800; max-width:16ch; margin-bottom:1.5rem;}
.cta-band p{max-width:42ch; font-size:1.05rem; margin-bottom:2rem;}
.cta-band .btn-ink:hover{background:var(--paper); color:var(--ink); border-color:var(--paper);}


/* ---------- 12. Footer ---------- */
footer{background:var(--ink); padding:4rem 0 2rem; border-top:1px solid var(--line-dark);}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:3rem; border-bottom:1px solid var(--line-dark);
}
.footer-tagline{font-family:'Big Shoulders Display',sans-serif; font-size:1.6rem; font-weight:700; max-width:16ch; margin-bottom:1.25rem;}
.footer-col .footer-title{font-family:'Inter',sans-serif; font-size:.85rem; font-weight:600; line-height:1.3; color:var(--mist); margin:0 0 1rem;}
.footer-col .footer-title a{color:inherit;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem;}
.footer-col li{font-size:.92rem;}
.footer-col a{display:inline-block; padding:.25rem 0; text-decoration:none; color:var(--paper); font-size:.92rem; opacity:.85;}
.footer-col a:hover{opacity:1; color:var(--volt);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:2rem; font-size:.82rem; color:var(--mist);
}
.footer-social{display:flex; gap:1rem;}
.footer-social a{color:var(--mist); text-decoration:none;}
.footer-social a:hover{color:var(--volt);}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }


/* ---------- 13. Mobile nav ---------- */
@media (max-width:840px){
  .nav-toggle{display:inline-flex;}
  nav.primary-nav{
    position:fixed; inset:0; top:0; z-index:60;
    background:var(--ink);
    flex-direction:column; justify-content:center; align-items:center; gap:2rem;
    /* -110% (not -100%) so no sliver of the menu shows while scrolling */
    transform:translateY(-110%); transition:transform .3s ease;
    will-change:transform;
    pointer-events:none;
  }
  nav.primary-nav.is-open{transform:translateY(0); pointer-events:auto;}
  nav.primary-nav a{font-size:1.6rem; font-family:'Big Shoulders Display',sans-serif; font-weight:700;}
  nav.primary-nav .nav-close{position:absolute; top:1.3rem; right:clamp(1.25rem,4vw,3rem); display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; background:none; border:none; color:var(--paper); cursor:pointer;}
  .nav-close svg{width:26px; height:26px;}
  .service-row{grid-template-columns:1fr auto;}
  .service-desc{display:none;}
}

/* ---------- 14. Header dropdowns ----------
   Moved from an inline <style> in partials/header (which loaded after this file),
   so it stays last to keep the same cascade over section 13 on phones. */
.nav-group{position:relative; display:flex; align-items:center;}
button.nav-parent{background:none; border:0; padding:0; cursor:pointer; color:var(--paper); font:inherit; font-size:.95rem; font-weight:500; opacity:.85; display:inline-flex; align-items:center; gap:.35rem;}
button.nav-parent:hover, .nav-group.is-open button.nav-parent{opacity:1;}
.nav-caret{width:10px; height:10px; transition:transform .2s ease;}
.nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret, .nav-group.is-open .nav-caret{transform:rotate(180deg);}
.nav-sub{
  position:absolute; top:calc(100% + .9rem); left:-1rem; min-width:14rem;
  display:flex; flex-direction:column; padding:.5rem;
  background:var(--ink-soft); border:1px solid var(--line-dark); border-radius:.5rem;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-sub::before{content:''; position:absolute; left:0; right:0; top:-1rem; height:1rem;} /* hover bridge */
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub, .nav-group.is-open .nav-sub{opacity:1; visibility:visible; transform:none;}
nav.primary-nav .nav-sub a{padding:.5rem .75rem; border-radius:.35rem; white-space:nowrap;}
nav.primary-nav .nav-sub a::after{display:none;}
nav.primary-nav .nav-sub a:hover, nav.primary-nav .nav-sub a[aria-current="page"]{background:rgba(255,255,255,.07);}
nav.primary-nav a[aria-current="page"]{opacity:1;}
nav.primary-nav > a[aria-current="page"]::after, .nav-group > a[aria-current="page"]::after{transform:scaleX(1);}
@media (max-width:840px){
  nav.primary-nav{justify-content:flex-start; overflow-y:auto; padding:5.5rem 1.5rem 3rem; gap:1.4rem;}
  .nav-group{flex-direction:column; gap:.5rem;}
  button.nav-parent{font-size:1.6rem; font-family:'Big Shoulders Display',sans-serif; font-weight:700; opacity:1;}
  .nav-caret{display:none;}
  .nav-sub{position:static; min-width:0; padding:0; background:none; border:0; box-shadow:none; opacity:1; visibility:visible; transform:none; align-items:center; gap:.15rem;}
  .nav-sub::before{display:none;}
  nav.primary-nav .nav-sub a{font-family:'Inter',sans-serif; font-size:1rem; font-weight:500; padding:.3rem .6rem;}
}