/*
Theme Name: Chas6D Tools
Theme URI: https://chas6d.co.uk
Author: Chas6D
Author URI: https://chas6d.co.uk
Description: A tools-first theme for Chas6D — every calculator and utility sits at the top of the homepage behind an instant search, with guides, jobs and studio services following underneath.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: chas6d
*/

/* ==========================================================================
   0. Tokens
   ========================================================================== */
:root{
  --ink:        #0E1A23;
  --ink-2:      #1B2F3C;
  --ink-3:      #3A5666;
  --ink-mute:   #5E7684;

  --surface:    #FFFFFF;
  --surface-2:  #F1F4F3;
  --surface-3:  #E5EBE9;
  --line:       #D7DFDD;
  --line-soft:  #E8EEEC;

  --signal:     #0C8F63;
  --signal-ink: #076B4A;
  --signal-lit: #45DCA1;
  --signal-wash:#E7F6EF;
  --amber:      #C97A16;
  --amber-wash: #FBF0DD;

  --on-dark:    #EAF2EF;
  --on-dark-mute: rgba(234,242,239,.62);
  --dark-line:  rgba(234,242,239,.16);

  --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --wrap: 1160px;
  --gutter: clamp(18px, 4vw, 48px);
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow: 0 1px 2px rgba(14,26,35,.05), 0 8px 24px -12px rgba(14,26,35,.16);
}

/* ==========================================================================
   1. Base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
html,body{ overflow-x:hidden; }
img,svg,video{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.14; letter-spacing:-.015em; font-weight:600; }
p{ margin:0 0 1em; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; }
button{ cursor:pointer; }
strong{ font-weight:600; }
:focus-visible{ outline:2.5px solid var(--signal); outline-offset:3px; border-radius:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--ink); color:var(--on-dark); padding:.7em 1.1em; border-radius:var(--r-sm);
}
.skip-link:focus{ left:16px; }

/* ==========================================================================
   2. Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--surface);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  display:flex; align-items:center; gap:1.5rem;
  height:68px;
}
.site-logo{
  font-family:var(--font-display); font-weight:700; font-size:1.2rem;
  letter-spacing:-.03em; display:flex; align-items:center; gap:.5rem; flex:none;
}
.site-logo .logo-mark{
  width:28px; height:28px; border-radius:7px; flex:none;
  background:var(--ink); color:var(--signal-lit);
  display:grid; place-items:center; font-size:.85rem; font-weight:700;
}
.site-logo img{ max-height:36px; width:auto; }

.primary-nav{ margin-left:auto; }
.primary-nav ul{ display:flex; align-items:center; gap:.35rem; }
.primary-nav a{
  display:block; padding:.55em .8em; border-radius:var(--r-sm);
  font-size:.94rem; font-weight:500; color:var(--ink-3);
  transition:background .15s ease, color .15s ease;
}
.primary-nav a:hover{ background:var(--surface-2); color:var(--ink); }
.primary-nav .current-menu-item > a{ color:var(--ink); background:var(--surface-2); }

.header-search{ flex:none; }
.header-search button{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm); color:var(--ink-3);
}
.header-search button:hover{ border-color:var(--ink); color:var(--ink); }
.header-search svg{ width:18px; height:18px; }

.menu-toggle{
  display:none; width:40px; height:40px; margin-left:auto;
  border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm);
  padding:0; place-items:center;
}
.menu-toggle span{ display:block; width:17px; height:2px; background:var(--ink); margin:3.5px auto; border-radius:2px; }

@media (max-width: 900px){
  .menu-toggle{ display:grid; order:3; margin-left:0; }
  .header-search{ order:2; margin-left:auto; }
  .primary-nav{
    order:4; position:fixed; inset:68px 0 0 0; margin:0; z-index:70;
    background:var(--surface); overflow-y:auto;
    padding:1rem var(--gutter) 3rem;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .primary-nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .primary-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav a{ padding:1em .2em; border-bottom:1px solid var(--line-soft); border-radius:0; font-size:1.05rem; }
}

/* ==========================================================================
   3. Console — the tools-first hero
   ========================================================================== */
.console{
  background:
    radial-gradient(900px 340px at 18% -10%, rgba(69,220,161,.16), transparent 62%),
    linear-gradient(180deg, #10202B 0%, var(--ink) 100%);
  color:var(--on-dark);
  padding:clamp(40px,6vw,68px) 0 clamp(36px,5vw,56px);
}
.console h1{
  font-size:clamp(1.9rem,4.8vw,3.3rem);
  max-width:24ch; color:#fff; letter-spacing:-.025em;
}
.console-lede{
  color:var(--on-dark-mute); max-width:62ch; margin:.9rem 0 0; font-size:1.08rem;
}
.console-count{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.88rem; color:var(--signal-lit); margin-bottom:1rem;
  font-variant-numeric:tabular-nums;
}
.console-count .dot{ width:7px; height:7px; border-radius:50%; background:var(--signal-lit); flex:none; }

/* Search — the centrepiece */
.tool-search{ margin-top:2rem; max-width:720px; position:relative; }
.tool-search .field{
  display:flex; align-items:center; gap:.75rem;
  background:var(--surface); border-radius:var(--r-lg);
  padding:.55rem .6rem .55rem 1.1rem;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.6);
}
.tool-search svg.mag{ width:20px; height:20px; color:var(--ink-mute); flex:none; }
.tool-search input{
  flex:1; min-width:0; border:0; background:none; padding:.75em 0;
  font-size:1.05rem; color:var(--ink);
}
.tool-search input::placeholder{ color:var(--ink-mute); }
.tool-search input:focus{ outline:none; }
.tool-search .clear{
  border:0; background:var(--surface-2); color:var(--ink-3);
  width:34px; height:34px; border-radius:50%; display:none; place-items:center; flex:none;
}
.tool-search.has-value .clear{ display:grid; }
.tool-search .clear svg{ width:15px; height:15px; }

.search-hint{
  margin:.8rem 0 0; font-size:.85rem; color:var(--on-dark-mute);
  display:flex; flex-wrap:wrap; gap:.45rem; align-items:center;
}
.search-hint button{
  border:1px solid var(--dark-line); background:transparent; color:var(--on-dark);
  border-radius:999px; padding:.35em .85em; font-size:.82rem;
}
.search-hint button:hover{ border-color:var(--signal-lit); color:var(--signal-lit); }

/* ==========================================================================
   4. Section rhythm
   ========================================================================== */
.section{ padding:clamp(52px,7vw,92px) 0; }
.section--tight{ padding:clamp(36px,5vw,60px) 0; }
.section--alt{ background:var(--surface-2); }
.section--dark{ background:var(--ink); color:var(--on-dark); }
.section--dark h2,.section--dark h3{ color:#fff; }
.section--dark p{ color:var(--on-dark-mute); }

.section-head{ margin-bottom:2.2rem; max-width:64ch; }
.section-head h2{ font-size:clamp(1.55rem,3vw,2.15rem); }
.section-head p{ color:var(--ink-mute); margin:.7rem 0 0; font-size:1.02rem; }
.section--dark .section-head p{ color:var(--on-dark-mute); }

.head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; max-width:none; }
.head-row > div{ max-width:62ch; }
.head-row .section-head{ margin-bottom:0; }

.link-more{
  font-weight:600; font-size:.95rem; color:var(--signal-ink);
  border-bottom:2px solid var(--signal-wash); padding-bottom:2px; white-space:nowrap;
}
.link-more:hover{ border-bottom-color:var(--signal); }
.section--dark .link-more{ color:var(--signal-lit); border-bottom-color:rgba(69,220,161,.3); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.8em 1.45em; border-radius:var(--r-sm);
  font-weight:600; font-size:.95rem; border:1.5px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  min-height:44px;
}
.btn-primary{ background:var(--signal); color:#fff; }
.btn-primary:hover{ background:var(--signal-ink); }
.btn-dark{ background:var(--ink); color:var(--on-dark); }
.btn-dark:hover{ background:var(--ink-2); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:var(--surface); }
.btn-ghost:hover{ border-color:var(--ink); }
.section--dark .btn-ghost{ border-color:var(--dark-line); color:var(--on-dark); background:transparent; }
.section--dark .btn-ghost:hover{ border-color:var(--on-dark); }
.btn-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem; }

/* ==========================================================================
   6. Tool catalogue
   ========================================================================== */
.cat-bar{
  display:flex; gap:.5rem; overflow-x:auto; padding:0 0 .9rem;
  margin-bottom:1.6rem; border-bottom:1px solid var(--line-soft);
  scrollbar-width:thin;
}
.cat-bar::-webkit-scrollbar{ height:4px; }
.cat-bar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.cat-chip{
  flex:none; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-3); border-radius:999px; padding:.5em 1em;
  font-size:.9rem; font-weight:500; white-space:nowrap; min-height:40px;
  display:inline-flex; align-items:center; gap:.45rem;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.cat-chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.cat-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.cat-chip .n{ font-size:.78rem; color:var(--ink-mute); font-variant-numeric:tabular-nums; }
.cat-chip[aria-pressed="true"] .n{ color:var(--signal-lit); }

.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(258px, 1fr));
  gap:.85rem;
}
.tool-card{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.05rem 1.1rem;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tool-card:hover{ border-color:var(--signal); transform:translateY(-2px); box-shadow:var(--shadow); }
.tool-card:focus-within{ border-color:var(--signal); }
.tool-card .ico-box{
  width:40px; height:40px; flex:none; border-radius:10px;
  background:var(--signal-wash); color:var(--signal-ink);
  display:grid; place-items:center;
}
.tool-card .ico-box .tool-ico{ width:20px; height:20px; }
.tool-card[data-cat="construction"] .ico-box{ background:var(--amber-wash); color:var(--amber); }
.tool-card h3{ font-size:1rem; margin-bottom:.25rem; letter-spacing:-.01em; }
.tool-card p{ font-size:.87rem; color:var(--ink-mute); margin:0; line-height:1.5; }
.tool-card .body{ min-width:0; }

.section--alt .tool-card{ background:var(--surface); }

.cat-block{ margin-bottom:2.6rem; }
.cat-block:last-child{ margin-bottom:0; }
.cat-block-head{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:.9rem; flex-wrap:wrap; }
.cat-block-head h3{ font-size:1.15rem; }
.cat-block-head p{ margin:0; font-size:.9rem; color:var(--ink-mute); }

.no-results{
  display:none; padding:2.5rem 1rem; text-align:center; color:var(--ink-mute);
  border:1px dashed var(--line); border-radius:var(--r);
}
.tools-empty .no-results{ display:block; }
.tool-card.is-hidden,
.cat-block.is-hidden{ display:none; }

/* ==========================================================================
   7. Article cards
   ========================================================================== */
.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:1.4rem;
}
.post-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--surface);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.post-card:hover{ border-color:var(--ink-3); box-shadow:var(--shadow); }
.post-card .thumb{
  aspect-ratio:16/10; background:var(--surface-2); overflow:hidden;
  display:grid; place-items:center; color:var(--ink-mute);
}
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card .thumb .ph{ font-family:var(--font-display); font-size:2rem; opacity:.25; }
.post-card .card-body{ padding:1.1rem 1.15rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-card h3{ font-size:1.08rem; line-height:1.3; }
.post-card p{ margin:0; font-size:.9rem; color:var(--ink-mute); }
.card-meta{
  display:flex; gap:.9rem; font-size:.8rem; color:var(--ink-mute);
  margin-top:auto; padding-top:.5rem; font-variant-numeric:tabular-nums;
}
.card-tag{
  align-self:flex-start; font-size:.76rem; font-weight:600; color:var(--signal-ink);
  background:var(--signal-wash); padding:.25em .6em; border-radius:5px;
}

/* Compact list version used at the bottom of the homepage */
.post-list{ border-top:1px solid var(--line-soft); }
.post-list-item{
  display:flex; gap:1.1rem; align-items:center;
  padding:1.05rem 0; border-bottom:1px solid var(--line-soft);
}
.post-list-item .thumb{
  width:84px; height:62px; flex:none; border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface-2);
}
.post-list-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-list-item h3{ font-size:1rem; margin-bottom:.2rem; }
.post-list-item p{ margin:0; font-size:.83rem; color:var(--ink-mute); }
.post-list-item:hover h3{ color:var(--signal-ink); }

/* ==========================================================================
   8. Jobs
   ========================================================================== */
.job-cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.7rem; margin-bottom:2rem; }
.job-cat{
  border:1px solid var(--line); border-radius:var(--r); padding:.95rem 1rem;
  background:var(--surface); transition:border-color .15s ease, background .15s ease;
}
.job-cat:hover{ border-color:var(--amber); background:var(--amber-wash); }
.job-cat h3{ font-size:.96rem; margin-bottom:.2rem; }
.job-cat span{ font-size:.8rem; color:var(--ink-mute); font-variant-numeric:tabular-nums; }

.job-list{ border-top:1px solid var(--line-soft); }
.job-row{
  display:flex; justify-content:space-between; align-items:center; gap:1.2rem;
  padding:1.15rem 0; border-bottom:1px solid var(--line-soft);
}
.job-row:hover h3{ color:var(--signal-ink); }
.job-row h3{ font-size:1.03rem; margin-bottom:.25rem; }
.job-meta{ margin:0; font-size:.86rem; color:var(--ink-mute); display:flex; gap:1rem; flex-wrap:wrap; }
.job-badge{
  flex:none; font-size:.78rem; font-weight:600; color:var(--amber);
  background:var(--amber-wash); padding:.3em .7em; border-radius:5px; white-space:nowrap;
}

/* ==========================================================================
   9. Services (bottom of the page, deliberately quieter)
   ========================================================================== */
.service-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:1.2rem 2.5rem;
  padding:1.6rem 0; border-top:1px solid var(--dark-line); align-items:start;
}
.services-list .service-row:last-child{ border-bottom:1px solid var(--dark-line); }
.service-row h3{ font-size:1.2rem; }
.service-row p{ margin:0; color:var(--on-dark-mute); font-size:.97rem; }
@media (max-width:720px){ .service-row{ grid-template-columns:1fr; gap:.5rem; } }

.stats-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--dark-line); border:1px solid var(--dark-line);
  border-radius:var(--r); overflow:hidden; margin-bottom:3rem;
}
.stats-strip div{ background:var(--ink); padding:1.3rem 1.2rem; }
.stats-strip strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:#fff; font-variant-numeric:tabular-nums; }
.stats-strip span{ font-size:.84rem; color:var(--on-dark-mute); }

/* ==========================================================================
   10. Long-form copy
   ========================================================================== */
.prose{ max-width:70ch; }
.prose h2{ font-size:1.5rem; margin:2.2em 0 .5em; }
.prose h3{ font-size:1.18rem; margin:1.9em 0 .45em; }
.prose h2:first-child,.prose h3:first-child{ margin-top:0; }
.prose p{ color:var(--ink-2); }
.prose a{ color:var(--signal-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.prose img{ border-radius:var(--r); margin:1.6em 0; }
.prose ul,.prose ol{ margin:0 0 1.3em; padding-left:1.3em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ margin-bottom:.4em; color:var(--ink-2); }
.prose blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 1.3em; border-left:3px solid var(--signal);
  color:var(--ink-2); font-size:1.08rem;
}
.prose table{ width:100%; border-collapse:collapse; margin:1.5em 0; font-size:.94rem; }
.prose th,.prose td{ border:1px solid var(--line); padding:.65em .8em; text-align:left; }
.prose th{ background:var(--surface-2); font-weight:600; }
.prose code{ background:var(--surface-2); padding:.15em .4em; border-radius:4px; font-size:.9em; }

/* Collapsible long copy — keeps the homepage short without hiding content from crawlers */
.readmore{ position:relative; }
.readmore[data-collapsed="true"] .readmore-body{ position:relative; max-height:340px; overflow:hidden; }
.readmore[data-collapsed="true"] .readmore-body::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:130px;
  background:linear-gradient(transparent, var(--surface-2));
}
.readmore-toggle{
  margin-top:1rem; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-sm); padding:.65em 1.2em; font-weight:600; font-size:.92rem;
  position:relative; min-height:44px;
}
.readmore-toggle:hover{ border-color:var(--ink); }

/* ==========================================================================
   11. Page chrome: hero, breadcrumbs, pagination
   ========================================================================== */
.page-hero{ padding:clamp(28px,5vw,48px) 0 clamp(20px,3vw,28px); border-bottom:1px solid var(--line-soft); }
.page-hero h1{ font-size:clamp(1.7rem,4vw,2.6rem); max-width:22ch; }
.page-hero .lede{ margin:.85rem 0 0; color:var(--ink-mute); max-width:60ch; font-size:1.05rem; }

.crumbs{ margin-bottom:1rem; font-size:.84rem; color:var(--ink-mute); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.crumbs li + li::before{ content:"/"; margin-right:.4rem; color:var(--line); }
.crumbs a:hover{ color:var(--signal-ink); }

.pagination{ padding:2.5rem 0 0; }
.pagination .nav-links{ display:flex; gap:.4rem; flex-wrap:wrap; }
.pagination .page-numbers{
  display:grid; place-items:center; min-width:42px; min-height:42px; padding:0 .7em;
  border:1px solid var(--line); border-radius:var(--r-sm); font-size:.92rem;
}
.pagination .page-numbers:hover{ border-color:var(--ink); }
.pagination .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* Related strip on tool pages */
.related-strip{ background:var(--surface-2); border-top:1px solid var(--line-soft); }

/* ==========================================================================
   12. Tool UI (inside a single tool page)
   ========================================================================== */
.tool-panel{
  border:1px solid var(--line); background:var(--surface-2);
  border-radius:var(--r-lg); padding:clamp(1.1rem,3vw,1.9rem);
}
.tool-tabs{
  display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.4rem;
  padding-bottom:1rem; border-bottom:1px solid var(--line);
}
.tool-tab{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-3);
  padding:.55em 1em; border-radius:999px; font-size:.88rem; font-weight:500; min-height:40px;
}
.tool-tab.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.tool-pane{ display:none; }
.tool-pane.is-active{ display:block; }
.tool-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem 1.2rem; margin-bottom:.5rem; }

.tool-result{
  margin-top:1.2rem; padding:1.1rem 1.25rem;
  background:var(--ink); color:var(--signal-lit);
  border-radius:var(--r); font-weight:600; font-size:1.1rem;
  font-variant-numeric:tabular-nums;
}
.tool-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:.8rem; margin-top:1.2rem; }
.tool-stats div{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.95rem 1rem; }
.tool-stats strong{ display:block; font-family:var(--font-display); font-size:1.5rem; font-variant-numeric:tabular-nums; }
.tool-stats span{ font-size:.79rem; color:var(--ink-mute); }

/* Form controls (shared by tools and the contact form) */
.form-field{ margin-bottom:1.15rem; }
.form-field label{ display:block; font-size:.86rem; font-weight:500; margin-bottom:.4rem; color:var(--ink-2); }
input[type=text],input[type=email],input[type=number],input[type=date],input[type=url],input[type=search],input[type=password],select,textarea{
  width:100%; border:1.5px solid var(--line); background:var(--surface);
  padding:.72em .85em; border-radius:var(--r-sm); color:var(--ink); min-height:46px;
  transition:border-color .15s ease;
}
textarea{ min-height:130px; resize:vertical; }
input:focus,select:focus,textarea:focus{ border-color:var(--signal); outline:none; }
.form-note{ font-size:.82rem; color:var(--ink-mute); margin-top:.7rem; }
.form-success{ border-left:3px solid var(--signal); background:var(--signal-wash); padding:.9rem 1.1rem; border-radius:var(--r-sm); margin-bottom:1.4rem; }
.form-error{ border-left:3px solid var(--amber); background:var(--amber-wash); padding:.9rem 1.1rem; border-radius:var(--r-sm); margin-bottom:1.4rem; }

/* ==========================================================================
   13. Contact
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,5vw,64px); align-items:start; }
.contact-info dl{ margin:1.4rem 0 0; }
.contact-info dt{ font-size:.82rem; color:var(--ink-mute); margin-top:1.1rem; }
.contact-info dd{ margin:.15rem 0 0; font-size:1.02rem; font-weight:500; }
.contact-info dd a:hover{ color:var(--signal-ink); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   14. Footer
   ========================================================================== */
.site-footer{ background:var(--ink); color:var(--on-dark-mute); padding:3.2rem 0 2rem; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem;
  padding-bottom:2.2rem; border-bottom:1px solid var(--dark-line); margin-bottom:1.5rem;
}
.footer-brand .site-logo{ color:#fff; margin-bottom:.8rem; }
.footer-brand p{ font-size:.9rem; max-width:34ch; margin:0; }
.footer-col h3{ font-size:.92rem; color:#fff; margin-bottom:.8rem; }
.footer-col li{ margin-bottom:.45rem; }
.footer-col a{ font-size:.89rem; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; }
.site-footer .widget-title{ font-size:.92rem; color:#fff; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:1.8rem; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   15. Back to top
   ========================================================================== */
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:50;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); display:grid; place-items:center;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top svg{ width:18px; height:18px; }

/* ==========================================================================
   16. Comments
   ========================================================================== */
.comments-area{ max-width:70ch; padding:2.5rem 0 0; border-top:1px solid var(--line-soft); margin-top:3rem; }
.comments-area h2{ font-size:1.3rem; margin-bottom:1.2rem; }
.comment-list li{ padding:1.1rem 0; border-bottom:1px solid var(--line-soft); }
.comment-meta{ font-size:.85rem; color:var(--ink-mute); margin-bottom:.4rem; }

/* ==========================================================================
   17. Small screens
   ========================================================================== */
@media (max-width:600px){
  .console h1{ font-size:1.72rem; }
  .console-lede{ font-size:.98rem; }
  .tool-search .field{ padding:.45rem .5rem .45rem .9rem; }
  .tool-search input{ font-size:1rem; }
  .tool-grid{ grid-template-columns:1fr; }
  .post-grid{ grid-template-columns:1fr; }
  .btn-row .btn{ width:100%; }
  .job-row{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .post-list-item .thumb{ width:64px; height:50px; }
}