/*
Theme Name: Marcin Ciezki
Theme URI: https://marcinciezki.com
Author: Marcin Ciezki
Author URI: https://marcinciezki.com
Description: Standalone portfolio theme for Marcin Ciezki — freelance digital designer & web designer in Watford, UK. Bootstrap 5, conversion-focused, optimised for speed, SEO and accessibility. Includes landing, contact, review, quote and blog templates.
Version: 1.1.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: marcinciezki
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --ink:        #0E2233;   /* deep clinical navy   */
  --ink-soft:   #33475B;
  --paper:      #F5F8F9;   /* cool clinical white  */
  --white:      #FFFFFF;
  --teal:       #0FB5A6;   /* signal teal — primary action */
  --teal-dark:  #0C978B;
  --teal-tint:  #E2F5F3;
  --coral:      #FF6B5E;   /* diagnostic "attention" state only */
  --amber:      #F5B841;   /* diagnostic "caution" state only  */
  --line:       #DCE5E8;
  --radius: 16px;
  --btn-radius: 12px;      /* rounded-corner buttons */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

/* ---------- Base ---------- */
body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); }
h1,h2,h3,.display-font{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.015em; }
.eyebrow{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-dark); display:inline-flex; align-items:center; gap:.5rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--teal); display:inline-block; }
.section{ padding:96px 0; }
.section-alt{ background:var(--white); }
.lead-copy{ color:var(--ink-soft); font-size:1.08rem; }
img{ max-width:100%; height:auto; }

/* ---------- Buttons (rounded corners) ---------- */
.btn-teal{
  background:var(--teal); color:#fff; font-weight:600; border:none;
  padding:.85rem 1.6rem; border-radius:var(--btn-radius);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-teal:hover,.btn-teal:focus{ background:var(--teal-dark); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,181,166,.35); }
.btn-ghost{
  background:transparent; color:var(--ink); font-weight:600;
  padding:.85rem 1.6rem; border-radius:var(--btn-radius); border:1.5px solid var(--ink);
  transition:background .18s ease,color .18s ease, transform .18s ease;
}
.btn-ghost:hover,.btn-ghost:focus{ background:var(--ink); color:#fff; transform:translateY(-2px); }

/* ---------- Navbar — collapsible on ALL devices ---------- */
.navbar{ background:rgba(245,248,249,.88); backdrop-filter:blur(10px); transition:box-shadow .25s; padding:.9rem 0; }
.navbar.scrolled{ box-shadow:0 2px 20px rgba(14,34,51,.08); }
.navbar-brand{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:.02em; color:var(--ink); }
.navbar-brand .dot{ color:var(--teal); }
.navbar .nav-link{ font-weight:500; color:var(--ink-soft); padding:.65rem 0; font-size:1.05rem; }
.navbar .nav-link:hover,.navbar .nav-link:focus{ color:var(--teal-dark); }
#siteMenu{ border-top:1px solid var(--line); margin-top:.8rem; padding:.6rem 0 1rem; }
#siteMenu .btn-teal{ margin-top:.6rem; }

/* Smoother open/close: eased height animation... */
#siteMenu.collapsing{ transition:height .45s cubic-bezier(.22,.61,.36,1); }

/* ...and menu items cascade in one after another when the panel opens,
   then fade out together (no delay) as it closes. */
#siteMenu .nav-item{
  opacity:0; transform:translateY(-10px);
  transition:opacity .3s ease, transform .3s ease;
}
#siteMenu.show .nav-item{ opacity:1; transform:none; }
#siteMenu.show .nav-item:nth-child(1){ transition-delay:.05s; }
#siteMenu.show .nav-item:nth-child(2){ transition-delay:.1s; }
#siteMenu.show .nav-item:nth-child(3){ transition-delay:.15s; }
#siteMenu.show .nav-item:nth-child(4){ transition-delay:.2s; }
#siteMenu.show .nav-item:nth-child(5){ transition-delay:.25s; }
#siteMenu.show .nav-item:nth-child(6){ transition-delay:.3s; }
#siteMenu.show .nav-item:nth-child(7){ transition-delay:.35s; }
@media (prefers-reduced-motion: reduce){
  #siteMenu .nav-item{ opacity:1; transform:none; }
}

/* ---------- Animated hamburger → X toggler (bars only, no box) ---------- */
.mc-toggler{
  width:48px; height:48px; border:none; background:transparent;
  position:relative; cursor:pointer; padding:0;
}
.mc-toggler span{
  position:absolute; left:10px; width:28px; height:3px; background:var(--ink);
  border-radius:3px; transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease, top .35s cubic-bezier(.22,.61,.36,1);
}
.mc-toggler span:nth-child(1){ top:14px; }
.mc-toggler span:nth-child(2){ top:23px; }
.mc-toggler span:nth-child(3){ top:32px; }
.mc-toggler:hover span{ background:var(--teal-dark); }
.mc-toggler[aria-expanded="true"] span:nth-child(1){ top:23px; transform:rotate(45deg); }
.mc-toggler[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:translateX(-8px); }
.mc-toggler[aria-expanded="true"] span:nth-child(3){ top:23px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ padding:150px 0 90px; position:relative; overflow:hidden; }
.hero h1{ font-size:clamp(2.3rem,5.2vw,4.1rem); line-height:1.08; font-weight:800; }
.hero h1 .rotator{ color:var(--teal-dark); display:inline-block; }
/* Rotating word sits on its own fixed-height line at EVERY breakpoint
   (mobile, tablet and desktop) — longer words like "campaigns" can
   never push the content below, and the headline is always 3 lines. */
.hero h1 .rotator{ display:block; min-height:1.15em; }
.hero h1 .desktop-break{ display:none; }
.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 70% 20%, black 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 20%, black 0%, transparent 70%);
}
.hero-vitals{
  background:var(--ink); color:#DDEBEE; border-radius:var(--radius);
  padding:1.6rem 1.7rem; font-family:var(--font-mono); font-size:.82rem;
  box-shadow:0 24px 60px rgba(14,34,51,.25);
}
.hero-vitals .vt-label{ color:#7FA3AE; letter-spacing:.1em; text-transform:uppercase; font-size:.68rem; }
.hero-vitals .vt-value{ color:#fff; font-size:1rem; }
.hero-vitals .pulse{
  display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--teal);
  margin-right:.45rem; animation:pulse 1.6s infinite;
}
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(15,181,166,.5)} 70%{box-shadow:0 0 0 9px rgba(15,181,166,0)} 100%{box-shadow:0 0 0 0 rgba(15,181,166,0)} }
.hero-vitals hr{ border-color:#27455C; opacity:1; }

/* Hero entrance sequence */
.hero .fade-up{ opacity:0; transform:translateY(24px); animation:fadeUp .7s ease forwards; }
.hero .fade-up.d1{ animation-delay:.1s } .hero .fade-up.d2{ animation-delay:.25s }
.hero .fade-up.d3{ animation-delay:.4s } .hero .fade-up.d4{ animation-delay:.55s }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* ---------- Sector strip — infinite marquee ---------- */
.sector-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); padding:1.1rem 0; overflow:hidden; }
.marquee{ display:flex; width:max-content; animation:marquee 28s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
.marquee-group{ display:flex; align-items:center; gap:2.2rem; padding-right:2.2rem; }
.marquee-group span{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
.marquee-group .sep{ color:var(--teal); font-weight:700; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Health Check (signature) ---------- */
.healthcheck{ background:var(--ink); color:#E7F0F2; border-radius:24px; overflow:hidden; }
.healthcheck .eyebrow{ color:var(--teal); }
.hc-question{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:#fff; min-height:4.2rem; transition:opacity .25s ease; }
.hc-question.swap{ opacity:0; }
.hc-progress{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em; color:#7FA3AE; }
.hc-bar{ height:4px; background:#27455C; border-radius:99px; overflow:hidden; margin:.5rem 0 1rem; }
.hc-bar i{ display:block; height:100%; width:0; background:var(--teal); transition:width .4s ease; }
.hc-btn{
  border:1.5px solid #3A5A72; background:transparent; color:#E7F0F2; border-radius:var(--btn-radius);
  padding:.7rem 2rem; font-weight:600; transition:all .18s ease;
}
.hc-btn:hover,.hc-btn:focus{ border-color:var(--teal); background:rgba(15,181,166,.12); color:#fff; transform:translateY(-2px); }
.gauge-wrap svg{ width:100%; max-width:230px; height:auto; }
.gauge-num{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; fill:#fff; }
.gauge-sub{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.15em; fill:#7FA3AE; text-transform:uppercase; }
.hc-verdict{ font-family:var(--font-mono); font-size:.85rem; letter-spacing:.05em; }

/* ---------- Services ---------- */
.svc-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem; height:100%; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(14,34,51,.1); border-color:var(--teal); }
.svc-num{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--teal-dark); background:var(--teal-tint);
  display:inline-block; padding:.35rem .7rem; border-radius:8px;
  transition:background .25s ease, color .25s ease;
}
.svc-card:hover .svc-num{ background:var(--teal); color:#fff; }
.svc-card h3{ font-size:1.15rem; margin:1rem 0 .5rem; }
.svc-card p{ color:var(--ink-soft); font-size:.93rem; margin:0; }

/* ---------- Portfolio ---------- */
.filter-btn{
  border:1.5px solid var(--line); background:var(--white); color:var(--ink-soft);
  border-radius:var(--btn-radius); padding:.45rem 1.15rem; font-weight:500; font-size:.9rem; transition:all .18s;
}
.filter-btn:hover{ border-color:var(--teal); color:var(--teal-dark); }
.filter-btn.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.work-item{ transition:opacity .25s ease, transform .25s ease; }
.work-item.hide{ opacity:0; transform:scale(.96); position:absolute; pointer-events:none; visibility:hidden; }
.work-card{
  border-radius:var(--radius); overflow:hidden; position:relative; aspect-ratio:4/3;
  display:flex; align-items:flex-end; color:#fff; text-decoration:none;
}
.work-card .wc-bg{ position:absolute; inset:0; transition:transform .4s ease; }
.work-card:hover .wc-bg{ transform:scale(1.06); }
.work-card .wc-meta{
  position:relative; z-index:2; width:100%; padding:1.1rem 1.25rem;
  background:linear-gradient(transparent, rgba(14,34,51,.85));
}
.work-card .wc-tag{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#9BE8E0; }
.work-card h3{ font-size:1.05rem; margin:.2rem 0 0; color:#fff; }
.work-card .wc-arrow{
  position:absolute; top:1rem; right:1rem; z-index:2; color:#fff;
  font-family:var(--font-mono); font-size:1.15rem; line-height:1;
  opacity:0; transform:translate(-6px,6px); transition:all .25s ease;
}
.work-card:hover .wc-arrow{ opacity:1; transform:none; }

/* ---------- Process ---------- */
.step{ position:relative; padding-left:1.6rem; }
.step::before{ content:""; position:absolute; left:0; top:.35rem; width:10px; height:10px; border-radius:50%; background:var(--teal); }
.step::after{ content:""; position:absolute; left:4.5px; top:1.4rem; bottom:-1.4rem; width:1.5px; background:var(--line); }
.step:last-child::after{ display:none; }
.step .st-label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.13em; color:var(--teal-dark); text-transform:uppercase; }
.step h3{ font-size:1.1rem; margin:.25rem 0 .35rem; }
.step p{ color:var(--ink-soft); font-size:.93rem; }

/* ---------- Stats ---------- */
.stat h3{ font-size:clamp(2.2rem,4vw,3.2rem); font-weight:800; margin:0; }
.stat span{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- Testimonials ---------- */
.quote-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem; max-width:760px; margin:0 auto; }
.quote-card .quote-mark{ font-family:var(--font-display); font-size:3rem; line-height:.5; color:var(--teal); display:block; margin-bottom:.8rem; }
.quote-card blockquote{ font-family:var(--font-display); font-size:1.25rem; font-weight:600; line-height:1.45; }
.quote-card cite{ font-style:normal; font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); letter-spacing:.05em; }
.carousel-indicators [data-bs-target]{ background-color:var(--ink); }

/* ---------- Pricing ---------- */
.price-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; height:100%; position:relative; transition:transform .25s ease, box-shadow .25s ease; }
.price-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(14,34,51,.1); }
.price-card.featured{ border:2px solid var(--teal); box-shadow:0 20px 50px rgba(15,181,166,.15); }
.price-card .badge-pop{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--teal); color:#fff; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; padding:.3rem .9rem; border-radius:var(--btn-radius);
}
.price-card .pc-price{ font-family:var(--font-display); font-size:2rem; font-weight:800; }
.price-card .pc-price small{ font-size:.85rem; font-weight:500; color:var(--ink-soft); }
.price-card ul{ list-style:none; padding:0; margin:1.2rem 0 1.6rem; }
.price-card ul li{ padding:.4rem 0 .4rem 1.6rem; position:relative; font-size:.92rem; color:var(--ink-soft); }
.price-card ul li::before{ content:"✓"; position:absolute; left:0; color:var(--teal-dark); font-weight:700; }

/* ---------- FAQ ---------- */
.accordion-button{ font-weight:600; font-family:var(--font-display); }
.accordion-button:not(.collapsed){ background:var(--teal-tint); color:var(--ink); box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 3px rgba(15,181,166,.3); }

/* ---------- CTA / Footer ---------- */
.cta-band{ background:var(--ink); color:#fff; border-radius:24px; }
.cta-band h2{ color:#fff; }
.site-footer{ background:var(--white); border-top:1px solid var(--line); padding:3rem 0 2rem; }
.site-footer a{ color:var(--ink-soft); text-decoration:none; transition:color .15s ease; }
.site-footer a:hover{ color:var(--teal-dark); }
.foot-mono{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; color:var(--ink-soft); }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:1030;
  width:46px; height:46px; border-radius:var(--btn-radius); border:none;
  background:var(--ink); color:#fff; font-size:1.2rem; font-family:var(--font-mono); line-height:1;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, background .2s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ background:var(--teal-dark); }

/* ---------- Reveal on scroll (with stagger) ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; transition-delay:var(--rd,0s); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Accessibility & motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal,.hero .fade-up{ opacity:1 !important; transform:none !important; }
  .marquee{ animation:none !important; flex-wrap:wrap; }
}
:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; }

/* ============================================================
   MANIFESTO — parallax chapters (from the original /home/ page)
   ============================================================ */
.manifesto{ background:var(--ink); color:#E7F0F2; overflow:hidden; }
.manifesto .eyebrow{ color:var(--teal); }
.manifesto-intro{ color:#A9C2CB; max-width:46ch; }
.chapter{ position:relative; padding:5.5rem 0; border-top:1px solid #1E3A50; }
.chapter .ghost{
  position:absolute; top:50%; right:-2%; margin-top:-.5em;
  font-family:var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(9rem,24vw,21rem);
  color:transparent; -webkit-text-stroke:1.5px #24455E;
  user-select:none; pointer-events:none; will-change:transform;
}
.chapter-right .ghost{ left:-2%; right:auto; }
.chapter-right .row > div{ text-align:right; }
.ch-num{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.ch-title{ font-size:clamp(2.4rem,7vw,4.6rem); color:#fff; margin:.4rem 0 .6rem; position:relative; z-index:1; }
.ch-line{ font-family:var(--font-mono); color:#7FA3AE; font-size:1rem; letter-spacing:.04em; position:relative; z-index:1; }
.ch-copy{ color:#A9C2CB; max-width:44ch; position:relative; z-index:1; margin:0; }
.chapter-right .ch-copy{ margin-left:auto; }

/* Word-by-word scroll reveal */
.split .w{
  display:inline-block; opacity:0; transform:translateY(.6em) rotate(2deg);
  transition:opacity .55s ease, transform .55s ease;
  transition-delay:calc(var(--wi) * .05s);
  will-change:transform;
}
.split.in .w{ opacity:1; transform:none; }

/* ============================================================
   PHILOSOPHY — sticky stacking cards (the five colour themes)
   ============================================================ */
.stack{ display:flex; flex-direction:column; }
.stack-card{
  position:sticky; top:calc(96px + var(--i) * 16px);
  background:var(--white); border:1px solid var(--line);
  border-top:6px solid var(--accent);
  border-radius:var(--radius); padding:2.4rem;
  margin-bottom:1.4rem; min-height:230px;
  box-shadow:0 -12px 32px rgba(14,34,51,.08);
}
.stack-card:last-child{ margin-bottom:0; }
.sc-tag{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
  background:color-mix(in srgb, var(--accent) 22%, white);
  border:1px solid var(--accent);
  display:inline-block; padding:.35rem .8rem; border-radius:8px;
}
.stack-card h3{ font-size:clamp(1.3rem,2.6vw,1.8rem); margin:1rem 0 .6rem; }
.stack-card p{ color:var(--ink-soft); max-width:62ch; margin:0; }

/* ============================================================
   MEGA MARQUEE — giant outlined display type
   ============================================================ */
.mega-marquee{ overflow:hidden; padding:4.5rem 0; background:var(--white); border-block:1px solid var(--line); }
.mm-track{ display:flex; width:max-content; animation:marquee 26s linear infinite; }
.mm-track:hover{ animation-play-state:paused; }
.mm-group{ display:flex; }
.mm-group span{
  font-family:var(--font-display); font-weight:800; white-space:nowrap;
  font-size:clamp(2.6rem,7vw,5rem); line-height:1.1; padding-right:1rem;
  color:transparent; -webkit-text-stroke:1.5px var(--ink);
}
.mm-group span b{ color:var(--teal); -webkit-text-stroke:0; }

/* ============================================================
   HERO PARALLAX — soft gradient blobs + scroll progress
   ============================================================ */
.blob{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; will-change:transform; }
.blob-1{ width:440px; height:440px; background:var(--teal); opacity:.28; top:-140px; right:-100px; }
.blob-2{ width:320px; height:320px; background:#4A90D9; opacity:.18; bottom:-120px; left:-80px; }
[data-parallax]{ will-change:transform; }

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:2000;
  background:linear-gradient(90deg, var(--teal), #4A90D9);
}

/* Vitals panel tilt (desktop pointer only) */
@media (hover:hover) and (pointer:fine){
  .hero-vitals{ transition:transform .18s ease-out; transform-style:preserve-3d; }
}

/* ---------- Motion safety for new effects ---------- */
@media (prefers-reduced-motion: reduce){
  [data-parallax]{ transform:none !important; }
  .split .w{ opacity:1 !important; transform:none !important; }
  .mm-track{ animation:none !important; flex-wrap:wrap; }
  .stack-card{ position:static; }
}

/* ============================================================
   INNER PAGES — page hero, contact/review/quote layouts
   ============================================================ */
.page-hero{ padding:150px 0 40px; position:relative; overflow:hidden; }
.page-hero h1{ font-size:clamp(2.2rem,4.6vw,3.5rem); font-weight:800; }
.page-hero .accent{ color:var(--teal-dark); }
.page-hero .lead-copy{ max-width:56ch; }

.availability{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-dark); background:var(--teal-tint);
  padding:.45rem .9rem; border-radius:8px; margin-bottom:1.4rem;
}
.availability .pulse{
  width:9px; height:9px; border-radius:50%; background:var(--teal);
  animation:pulse 1.6s infinite;
}

.info-block{ margin-bottom:1.6rem; }
.info-block .ib-label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.25rem; }
.info-block .ib-value{ font-weight:600; font-size:1.05rem; }
.info-block .ib-value a{ color:var(--ink); text-decoration:none; }
.info-block .ib-value a:hover{ color:var(--teal-dark); }

.check-list{ list-style:none; padding:0; margin:0 0 1.6rem; }
.check-list li{ padding:.45rem 0 .45rem 1.8rem; position:relative; color:var(--ink-soft); }
.check-list li::before{ content:"✓"; position:absolute; left:0; color:var(--teal-dark); font-weight:700; }
.check-list li strong{ color:var(--ink); }

/* ============================================================
   FORM CARD + CONTACT FORM 7 STYLING
   Works with the CF7 markup in contact.txt / review.txt / quote.txt
   ============================================================ */
.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem; box-shadow:0 24px 60px rgba(14,34,51,.08);
}
.form-card h2{ font-size:1.4rem; margin-bottom:.4rem; }
.form-card .fc-sub{ color:var(--ink-soft); font-size:.92rem; margin-bottom:1.6rem; }

.mc-form .mc-field{ margin-bottom:1.15rem; }
.mc-form label{ font-weight:600; font-size:.9rem; display:block; margin-bottom:.4rem; }
.mc-required{ color:var(--coral); }

.mc-form .wpcf7-form-control-wrap{ display:block; }
.mc-form input[type="text"],
.mc-form input[type="email"],
.mc-form input[type="url"],
.mc-form input[type="tel"],
.mc-form select,
.mc-form textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--btn-radius);
  padding:.75rem .95rem; font-family:var(--font-body); font-size:.96rem; color:var(--ink);
  background:var(--paper); transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  appearance:none; -webkit-appearance:none;
}
.mc-form select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2333475B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center; padding-right:2.4rem;
}
.mc-form input:focus,
.mc-form select:focus,
.mc-form textarea:focus{
  outline:none; border-color:var(--teal); background:var(--white);
  box-shadow:0 0 0 3px rgba(15,181,166,.18);
}
.mc-form ::placeholder{ color:#9AACB6; }

/* CF7 acceptance checkbox */
.mc-form .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.mc-form .wpcf7-acceptance label{ display:flex; gap:.6rem; align-items:flex-start; font-weight:400; font-size:.85rem; color:var(--ink-soft); }
.mc-form .wpcf7-acceptance input[type="checkbox"]{ width:1.1rem; height:1.1rem; margin-top:.15rem; accent-color:var(--teal); flex:none; }

/* CF7 validation + response messages */
.mc-form .wpcf7-not-valid-tip{
  color:var(--coral); font-family:var(--font-mono); font-size:.78rem; margin-top:.35rem; display:block;
}
.wpcf7 form .wpcf7-response-output{
  margin:1.2rem 0 0; padding:.9rem 1.1rem; border-radius:var(--btn-radius);
  font-family:var(--font-mono); font-size:.85rem; border:1.5px solid var(--line);
}
.wpcf7 form.sent .wpcf7-response-output{ border-color:var(--teal); background:var(--teal-tint); color:var(--teal-dark); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{ border-color:var(--coral); background:#FFF1EF; color:#C4453A; }
.wpcf7-spinner{ margin:0 0 0 .8rem; }

/* CF7 submit inherits .btn.btn-teal from the form markup */
.mc-form input[type="submit"]{ cursor:pointer; }
.mc-form input[type="submit"]:disabled{ opacity:.6; cursor:wait; }

/* Small cross-link strip under forms */
.alt-cta{
  border:1.5px dashed var(--line); border-radius:var(--radius);
  padding:1.2rem 1.4rem; margin-top:1.4rem;
  font-size:.92rem; color:var(--ink-soft);
}
.alt-cta a{ color:var(--teal-dark); font-weight:600; text-decoration:none; }
.alt-cta a:hover{ text-decoration:underline; }

/* ============================================================
   BLOG — post cards, listing, pagination
   ============================================================ */
.post-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(14,34,51,.1); border-color:var(--teal); }
.post-card .pc-thumb{ display:block; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,var(--ink),var(--teal)); }
.post-card .pc-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.post-card:hover .pc-thumb img{ transform:scale(1.05); }
.post-card .pc-body{ padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex-grow:1; }
.pc-meta{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-bottom:.7rem;
}
.pc-meta a{ color:var(--teal-dark); text-decoration:none; }
.pc-meta a:hover{ text-decoration:underline; }
.post-card .pc-title{ font-size:1.2rem; line-height:1.35; margin:0 0 .55rem; }
.post-card .pc-title a{ color:var(--ink); text-decoration:none; transition:color .15s ease; }
.post-card .pc-title a:hover{ color:var(--teal-dark); }
.post-card .pc-excerpt{ color:var(--ink-soft); font-size:.93rem; margin:0 0 1rem; }
.post-card .pc-more{
  margin-top:auto; font-weight:600; font-size:.9rem; color:var(--teal-dark);
  text-decoration:none; font-family:var(--font-mono); letter-spacing:.05em;
}
.post-card .pc-more:hover{ text-decoration:underline; }

/* Pagination (wraps WP's .page-numbers) */
.mc-pagination{ margin-top:3rem; }
.mc-pagination .nav-links{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.mc-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 .9rem;
  border:1.5px solid var(--line); border-radius:var(--btn-radius);
  background:var(--white); color:var(--ink-soft); font-weight:600; text-decoration:none;
  transition:all .18s ease;
}
.mc-pagination .page-numbers:hover{ border-color:var(--teal); color:var(--teal-dark); }
.mc-pagination .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:#fff; }
.mc-pagination .page-numbers.dots{ border:none; background:transparent; }

/* ============================================================
   SINGLE POST — article typography
   ============================================================ */
.post-hero-meta{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:1rem;
}
.featured-img{ border-radius:var(--radius); overflow:hidden; margin-bottom:2rem; }
.featured-img img{ width:100%; height:auto; display:block; }

.entry-content{ font-size:1.05rem; line-height:1.75; color:var(--ink); }
.entry-content > * + *{ margin-top:1.2rem; }
.entry-content h2{ font-size:1.7rem; margin-top:2.4rem; }
.entry-content h3{ font-size:1.35rem; margin-top:2rem; }
.entry-content a{ color:var(--teal-dark); text-decoration:underline; text-underline-offset:3px; }
.entry-content img{ border-radius:var(--radius); height:auto; }
.entry-content blockquote{
  border-left:4px solid var(--teal); background:var(--white);
  padding:1.2rem 1.5rem; border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
}
.entry-content pre{
  background:var(--ink); color:#DDEBEE; padding:1.2rem 1.4rem;
  border-radius:var(--radius); overflow-x:auto; font-family:var(--font-mono); font-size:.88rem;
}
.entry-content code{ font-family:var(--font-mono); font-size:.9em; background:var(--teal-tint); padding:.15em .4em; border-radius:6px; }
.entry-content pre code{ background:transparent; padding:0; }
.entry-content ul, .entry-content ol{ padding-left:1.4rem; }
.entry-content li + li{ margin-top:.4rem; }

.tag-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.tag-list a{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); border:1.5px solid var(--line); border-radius:8px;
  padding:.3rem .7rem; text-decoration:none; transition:all .15s ease;
}
.tag-list a:hover{ border-color:var(--teal); color:var(--teal-dark); }

/* Prev / next post navigation */
.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.5rem; }
.post-nav a{
  display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.3rem; text-decoration:none; transition:transform .2s ease, border-color .2s ease;
}
.post-nav a:hover{ transform:translateY(-3px); border-color:var(--teal); }
.post-nav .pn-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-dark); display:block; margin-bottom:.3rem; }
.post-nav .pn-title{ font-weight:600; color:var(--ink); font-size:.95rem; }
.post-nav .pn-next{ text-align:right; }
@media (max-width:575.98px){ .post-nav{ grid-template-columns:1fr; } }

/* ============================================================
   SIDEBAR — widgets
   ============================================================ */
.blog-sidebar .widget{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.7rem; margin-bottom:1.4rem;
}
.blog-sidebar .widget-title{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-dark); margin-bottom:1rem; display:block;
}
.blog-sidebar .widget ul{ list-style:none; padding:0; margin:0; }
.blog-sidebar .widget ul li{ padding:.5rem 0; border-bottom:1px solid var(--line); }
.blog-sidebar .widget ul li:last-child{ border-bottom:none; padding-bottom:0; }
.blog-sidebar .widget ul li a{ color:var(--ink); text-decoration:none; font-size:.93rem; font-weight:500; }
.blog-sidebar .widget ul li a:hover{ color:var(--teal-dark); }
.blog-sidebar .widget .post-date{ display:block; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft); margin-top:.15rem; }
.widget-cta{ background:var(--ink) !important; border-color:var(--ink) !important; color:#DDEBEE; }
.widget-cta .widget-title{ color:var(--teal); }
.widget-cta p{ color:#A9C2CB; font-size:.9rem; }

/* Search form */
.mc-search{ display:flex; gap:.6rem; }
.mc-search input[type="search"]{
  flex:1; min-width:0; border:1.5px solid var(--line); border-radius:var(--btn-radius);
  padding:.65rem .9rem; font-size:.95rem; background:var(--paper);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.mc-search input[type="search"]:focus{ outline:none; border-color:var(--teal); background:var(--white); box-shadow:0 0 0 3px rgba(15,181,166,.18); }
.mc-search .btn-teal{ padding:.65rem 1.2rem; }

/* ============================================================
   COMMENTS
   ============================================================ */
.comments-area{ margin-top:3rem; }
.comments-area .comments-title{ font-size:1.3rem; margin-bottom:1.4rem; }
.comment-list{ list-style:none; padding:0; margin:0; }
.comment-list .comment-body{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.5rem; margin-bottom:1rem;
}
.comment-list .children{ list-style:none; padding-left:1.5rem; }
.comment-meta{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-soft); margin-bottom:.5rem; }
.comment-meta .fn{ font-style:normal; font-weight:600; color:var(--ink); }
.comment-content p{ margin:0 0 .5rem; font-size:.95rem; }
.comment-reply-link{ font-size:.82rem; font-weight:600; color:var(--teal-dark); text-decoration:none; }
.comment-form label{ font-weight:600; font-size:.9rem; display:block; margin:.9rem 0 .35rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--btn-radius);
  padding:.7rem .9rem; background:var(--paper); font-size:.95rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.comment-form input:focus, .comment-form textarea:focus{
  outline:none; border-color:var(--teal); background:var(--white); box-shadow:0 0 0 3px rgba(15,181,166,.18);
}
.comment-form .submit{ margin-top:1.2rem; }

/* ============================================================
   404
   ============================================================ */
.err-code{
  font-family:var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(7rem,20vw,15rem); color:transparent; -webkit-text-stroke:2px var(--ink);
}
.err-code b{ color:var(--teal); -webkit-text-stroke:0; }