/*
Theme Name: CENSIS
Theme URI: https://censis.tech
Author: CENSIS Technology Solutions Ltd
Author URI: https://censis.tech
Description: Holding-page theme for CENSIS Technology Solutions Ltd. A small, focused theme presenting CENSIS' current scope and signposting to CareSurround.
Version: 1.4.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: censis
Tags: one-page, business, custom-logo, custom-menu, featured-images
*/

:root{
  /* Navy family — primary palette */
  --navy-deep:#06102E;
  --navy:#0B1437;
  --navy-2:#0F1C4A;
  --navy-3:#15265E;
  --navy-4:#1D3070;

  /* Teal accents */
  --teal:#00A3C7;
  --teal-bright:#1CC3DC;
  --teal-glow:#22D4ED;

  /* Dark surface tints */
  --surface-1:#0E1740;
  --surface-2:#142255;
  --surface-3:#1B2B66;

  /* Text on dark */
  --text:#F4F7FB;
  --text-soft:#C9D3E2;
  --text-mute:#8993AD;
  --text-dim:#5E6A87;

  /* Light card surface (when used) */
  --card-light:#F6F8FB;
  --card-line:#E0E6F0;

  --shadow-md:0 14px 36px rgba(0,0,0,.35);
  --shadow-lg:0 26px 62px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Navy gradient backdrop, mirroring CareSurround's continuous-gradient idea
   but flipped to dark. Subtle waves between navy shades. */
body{
  margin:0;
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  background:linear-gradient(180deg,
    var(--navy-deep) 0%,
    var(--navy) 14%,
    var(--navy-2) 30%,
    var(--navy) 46%,
    var(--navy-2) 62%,
    var(--navy) 78%,
    var(--navy-deep) 94%,
    var(--navy-deep) 100%
  );
}

/* Typography */
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:500;letter-spacing:-.025em;color:var(--text);margin:0;line-height:1.08;font-variation-settings:"opsz" 96}
h1{font-size:clamp(2.8rem,6vw,5.2rem);font-weight:400;letter-spacing:-.03em;line-height:1.02}
h2{font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:500;line-height:1.08;letter-spacing:-.028em}
h3{font-size:1.3125rem;font-weight:600;letter-spacing:-.012em;line-height:1.25;font-variation-settings:"opsz" 24}
p{margin:0;color:var(--text-soft);font-size:1.125rem;line-height:1.7}
h1 em,h2 em,h3 em{font-style:normal;color:var(--teal-bright);font-weight:500}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 22px}}

/* HEADER — dark, translucent */
header{position:sticky;top:0;z-index:50;background:rgba(6,16,46,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px 0}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{display:block;width:170px;height:auto;filter:brightness(0) invert(1)}
nav.links{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center}
nav.links a{font-size:.875rem;text-decoration:none;color:var(--text-soft);padding:9px 14px;border-radius:999px;font-weight:600;transition:all .2s ease;letter-spacing:.005em}
nav.links a:hover{background:rgba(255,255,255,.08);color:var(--text)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:14px 24px;border-radius:999px;font-weight:600;font-size:.9375rem;transition:all .25s cubic-bezier(.2,.7,.3,1);white-space:nowrap;font-family:'Manrope',sans-serif;border:none;cursor:pointer;letter-spacing:.005em}
.btn-teal{background:var(--teal);color:white;box-shadow:0 8px 22px rgba(0,163,199,.32)}
.btn-teal:hover{background:var(--teal-bright);transform:translateY(-1px);box-shadow:0 14px 32px rgba(0,163,199,.4)}
.btn-light{background:white;color:var(--navy);box-shadow:0 8px 22px rgba(0,0,0,.2)}
.btn-light:hover{background:#F0F4FA;transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.06);color:white;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.btn .arrow{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.btn:hover .arrow{transform:translateX(4px)}

/* HERO — text-driven, no video. Big editorial typography over navy backdrop. */
.hero{position:relative;padding:110px 0 100px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-10%;right:-15%;width:65%;height:120%;background:radial-gradient(circle,rgba(0,163,199,.18),transparent 60%);pointer-events:none;z-index:0}
.hero::after{content:"";position:absolute;bottom:-30%;left:-15%;width:55%;height:90%;background:radial-gradient(circle,rgba(28,195,220,.1),transparent 60%);pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:64px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:48px}}

.hero h1{margin-bottom:24px}
.hero p.lead{font-size:1.25rem;color:var(--text-soft);max-width:620px;line-height:1.6}
.hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-meta{margin-top:48px;display:flex;gap:32px;flex-wrap:wrap;padding-top:32px;border-top:1px solid rgba(255,255,255,.1)}
.hero-meta div{font-size:.8125rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.18em;font-weight:600}
.hero-meta div strong{display:block;color:var(--text);font-size:1rem;text-transform:none;letter-spacing:-.005em;font-family:'Bricolage Grotesque',sans-serif;font-weight:500;margin-top:6px}

/* Hero card — small accent: a "CENSIS today" panel */
.hero-card{background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface-1) 100%);border:1px solid rgba(28,195,220,.15);border-radius:24px;padding:36px 30px;position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;top:-40%;right:-30%;width:80%;height:160%;background:radial-gradient(circle,rgba(0,163,199,.2),transparent 60%);pointer-events:none}
.hero-card > *{position:relative;z-index:1}
.hero-card .ec-label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.25em;color:var(--teal-bright);font-weight:700;margin-bottom:16px;display:inline-block}
.hero-card h3{font-size:1.35rem;margin-bottom:12px;color:var(--text)}
.hero-card p{font-size:.9375rem;color:var(--text-soft);line-height:1.6;margin-bottom:22px}
.hero-card .pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hero-card .pill{font-size:.75rem;font-weight:600;background:rgba(28,195,220,.12);color:var(--teal-bright);padding:6px 12px;border-radius:999px;border:1px solid rgba(28,195,220,.2);letter-spacing:.01em}

/* SECTIONS */
section{padding:30px 0;position:relative;overflow:hidden;background:transparent}
.section-intro{max-width:760px;margin-bottom:56px;position:relative;z-index:3}
.section-intro p{font-size:1.1875rem;color:var(--text-soft);margin-top:22px;max-width:680px}

/* Eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--teal-bright);font-size:.6875rem;text-transform:uppercase;letter-spacing:.22em;font-weight:700;margin-bottom:24px;background:rgba(0,163,199,.1);padding:8px 16px;border-radius:999px;border:1px solid rgba(28,195,220,.18)}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--teal-bright);border-radius:50%}

/* Section radial accents */
.accent-tl::before{content:"";position:absolute;top:5%;left:-10%;width:50%;height:65%;background:radial-gradient(circle,rgba(0,163,199,.12),transparent 60%);pointer-events:none;z-index:0}
.accent-tr::before{content:"";position:absolute;top:5%;right:-10%;width:55%;height:70%;background:radial-gradient(circle,rgba(0,163,199,.12),transparent 60%);pointer-events:none;z-index:0}
.accent-bl::after{content:"";position:absolute;bottom:5%;left:-10%;width:50%;height:60%;background:radial-gradient(circle,rgba(28,195,220,.1),transparent 60%);pointer-events:none;z-index:0}
.accent-br::after{content:"";position:absolute;bottom:5%;right:-10%;width:55%;height:65%;background:radial-gradient(circle,rgba(0,163,199,.1),transparent 60%);pointer-events:none;z-index:0}
section .wrap{position:relative;z-index:3}

.flow-curves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.4}

/* STORY / TIMELINE */
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:start}
@media(max-width:960px){.story-grid{grid-template-columns:1fr;gap:48px}}
.story-text p+p{margin-top:18px}
.story-text strong{color:var(--text);font-weight:600}

.timeline{position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;top:14px;bottom:14px;left:9px;width:1px;background:linear-gradient(180deg,var(--teal-bright),var(--teal),rgba(28,195,220,.2))}
.tl-item{position:relative;padding-bottom:28px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-25px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--navy-deep);border:2px solid var(--teal-bright);box-shadow:0 0 0 4px rgba(28,195,220,.12)}
.tl-year{font-family:'Bricolage Grotesque',sans-serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.22em;color:var(--teal-bright);font-weight:700;margin-bottom:6px}
.tl-title{font-family:'Bricolage Grotesque',sans-serif;font-size:1.0625rem;font-weight:600;color:var(--text);margin-bottom:6px}
.tl-body{font-size:.9375rem;color:var(--text-soft);line-height:1.55}

/* CARDS — dark surface variant */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:2}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:960px){.cards,.cards.two,.cards.four{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:640px){.cards,.cards.two,.cards.four{grid-template-columns:1fr}}

.card{background:linear-gradient(160deg,var(--surface-1) 0%,var(--surface-2) 100%);border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:32px 28px;transition:all .35s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--teal-bright));opacity:0;transition:opacity .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(28,195,220,.5);box-shadow:var(--shadow-lg)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:10px;color:var(--text)}
.card p{font-size:1rem;line-height:1.6;color:var(--text-soft)}
.icon{width:50px;height:50px;border-radius:14px;background:rgba(0,163,199,.12);border:1px solid rgba(28,195,220,.18);display:flex;align-items:center;justify-content:center;color:var(--teal-bright);margin-bottom:20px;transition:all .35s cubic-bezier(.2,.7,.3,1)}
.card:hover .icon{background:var(--teal);border-color:var(--teal);color:white;transform:scale(1.05) rotate(-3deg)}
.icon svg{width:22px;height:22px}

/* CARESURROUND feature panel — light card on dark page, the standout block */
.cs-panel{background:linear-gradient(135deg,#F6FAFB 0%,#E5F0F4 100%);border-radius:32px;padding:64px 56px;position:relative;overflow:hidden;color:var(--navy);box-shadow:var(--shadow-lg)}
.cs-panel::before{content:"";position:absolute;top:-30%;right:-15%;width:55%;height:160%;background:radial-gradient(circle,rgba(0,163,199,.15),transparent 60%);pointer-events:none}
.cs-panel > *{position:relative;z-index:1}
.cs-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:960px){.cs-grid{grid-template-columns:1fr;gap:40px}.cs-panel{padding:44px 32px}}
.cs-label{display:inline-flex;align-items:center;gap:10px;color:var(--teal);font-size:.6875rem;text-transform:uppercase;letter-spacing:.22em;font-weight:700;margin-bottom:20px;background:rgba(0,163,199,.1);padding:8px 16px;border-radius:999px;border:1px solid rgba(0,163,199,.2)}
.cs-label::before{content:"";width:6px;height:6px;background:var(--teal);border-radius:50%}
.cs-panel h2{color:var(--navy);margin-bottom:18px}
.cs-panel h2 em{color:var(--teal)}
.cs-panel p{color:#3A4258;font-size:1.0625rem;line-height:1.65;margin-bottom:28px;max-width:520px}
.cs-list{display:flex;flex-direction:column;gap:14px}
.cs-list-item{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;background:rgba(255,255,255,.7);border:1px solid rgba(0,163,199,.12);border-radius:14px;transition:all .25s ease}
.cs-list-item:hover{background:white;border-color:rgba(0,163,199,.35);transform:translateX(4px)}
.cs-list-item .check{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--teal);color:white;display:flex;align-items:center;justify-content:center}
.cs-list-item .check svg{width:14px;height:14px}
.cs-list-item div{flex:1}
.cs-list-item strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:2px}
.cs-list-item small{font-size:.875rem;color:#525B72}

/* BOARD */
.board-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1080px){.board-grid{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(max-width:560px){.board-grid{grid-template-columns:1fr}}
.board-card{background:linear-gradient(160deg,var(--surface-1) 0%,var(--surface-2) 100%);border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:32px 24px;text-align:center;transition:all .35s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
.board-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--teal-bright));opacity:0;transition:opacity .35s}
.board-card:hover{transform:translateY(-6px);border-color:rgba(28,195,220,.5);box-shadow:var(--shadow-lg)}
.board-card:hover::before{opacity:1}
.board-avatar{width:104px;height:104px;border-radius:50%;margin:0 auto 22px;background:linear-gradient(135deg,var(--navy-3) 0%,var(--navy-4) 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid rgba(28,195,220,.2);box-shadow:0 0 0 6px rgba(28,195,220,.06);transition:all .35s;position:relative}
.board-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.board-card:hover .board-avatar{border-color:var(--teal-bright);box-shadow:0 0 0 8px rgba(28,195,220,.1)}
.board-name{font-family:'Bricolage Grotesque',sans-serif;font-size:1.25rem;font-weight:600;color:var(--text);margin-bottom:4px;letter-spacing:-.01em;line-height:1.2;min-height:3em}
.board-role{color:var(--teal-bright);font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:22px}
.board-bio{font-size:.9375rem;line-height:1.55;color:var(--text-soft);margin-bottom:18px}
.board-link{display:inline-flex;align-items:center;gap:8px;color:var(--teal-bright);font-size:.8125rem;font-weight:600;text-decoration:none;letter-spacing:.01em;padding:8px 14px;border:1px solid rgba(28,195,220,.25);border-radius:999px;transition:all .25s ease}
.board-link:hover{background:rgba(28,195,220,.1);border-color:var(--teal-bright)}
.board-link svg{width:14px;height:14px}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch}
@media(max-width:960px){.contact-grid{grid-template-columns:1fr}}
.contact-info{background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface-1) 100%);border:1px solid rgba(255,255,255,.06);color:var(--text);border-radius:24px;padding:44px 38px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.contact-info::before{content:"";position:absolute;top:-30%;right:-25%;width:60%;height:150%;background:radial-gradient(circle,rgba(0,163,199,.2),transparent 60%);pointer-events:none}
.contact-info > *{position:relative;z-index:2}
.contact-info h2{color:var(--text);margin-bottom:14px}
.contact-info p{color:var(--text-soft);font-size:1rem;line-height:1.65}
.contact-info .addr{margin-top:30px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);color:var(--text-soft);font-size:.9375rem;line-height:1.7}
.contact-info .addr strong{color:var(--text);display:block;font-weight:600;margin-bottom:6px;letter-spacing:.005em}
.contact-info .addr a{color:var(--teal-bright);text-decoration:none}
.contact-info .addr a:hover{text-decoration:underline}

.form-card{background:white;border-radius:24px;padding:42px 36px;box-shadow:var(--shadow-md);color:var(--navy)}
.form-card .form-title,.form-card h3.form-title,.form-card .wpcf7 .form-title,.form-card form .form-title{font-family:'Bricolage Grotesque',sans-serif;font-size:1.5rem;font-weight:500;color:#0B1437!important;margin:0 0 6px 0!important;letter-spacing:-.02em;font-variation-settings:"opsz" 32}
.form-card .form-sub,.form-card p.form-sub,.form-card .wpcf7 .form-sub,.form-card form .form-sub{font-size:.9375rem;color:#525B72!important;margin:0 0 26px 0!important;line-height:1.55}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{font-size:.75rem;font-weight:600;color:var(--navy);text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:8px}
.form .field{display:flex;flex-direction:column}
.form .field.full{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;border:1.5px solid var(--card-line);border-radius:12px;padding:13px 15px;font:inherit;color:var(--navy);background:#F8FAFC;transition:all .2s ease;font-size:.9375rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--teal);background:white;box-shadow:0 0 0 4px rgba(0,163,199,.1)}
.form textarea{min-height:120px;resize:vertical;font-family:inherit}
@media(max-width:640px){.form{grid-template-columns:1fr}}
.form-card .btn{background:var(--navy);color:white}
.form-card .btn:hover{background:var(--navy-2);transform:translateY(-1px)}

/* FOOTER */
footer{background:var(--navy-deep);color:white;padding:60px 0 34px;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.05)}
footer::before{content:"";position:absolute;top:0;right:-10%;width:40%;height:100%;background:radial-gradient(circle at top right,rgba(0,163,199,.1),transparent 60%);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:42px;position:relative;z-index:2}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:540px){.footer-grid{grid-template-columns:1fr;gap:28px}}
footer .logo img{width:170px;filter:brightness(0) invert(1);opacity:.95}
footer .footer-tag{color:var(--text-mute);font-size:.9375rem;line-height:1.65;margin-top:18px;max-width:340px}
footer h4{color:white;font-family:'Manrope',sans-serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700;margin:0 0 16px}
footer .links-col{display:flex;flex-direction:column;gap:10px}
footer .links-col a{color:var(--text-mute);text-decoration:none;font-size:.9375rem;transition:color .2s}
footer .links-col a:hover{color:var(--teal-bright)}
footer .contact-detail{color:var(--text-mute);font-size:.9375rem;line-height:1.7;font-style:normal}
footer .contact-detail a{color:var(--teal-bright);text-decoration:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;position:relative;z-index:2}
.footer-bottom p{color:var(--text-dim);font-size:.8125rem;margin:0}
.footer-bottom .legal{display:flex;gap:24px}
.footer-bottom .legal a{color:var(--text-dim);font-size:.8125rem;text-decoration:none}
.footer-bottom .legal a:hover{color:white}

/* Reveals */
.reveal{opacity:0;transform:translateY(28px);transition:all .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:all .7s cubic-bezier(.2,.7,.3,1)}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:0s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.24s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.32s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.4s}

@media(max-width:880px){
  nav.links{display:none}
  .hero{padding:70px 0 60px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
}
@media(max-width:640px){
  .nav .btn{display:none}
  .logo img{width:150px}
}

/* Contact Form 7 integration — keep the form looking native to the design.
   CF7 wraps each input in <span class="wpcf7-form-control-wrap"> and emits
   <br> elements; the rules below normalise that so the grid layout holds. */
.form-card .wpcf7 { margin: 0; padding: 0; }
.form-card .wpcf7 form { margin: 0; padding: 0; }
.form-card .wpcf7 label,.form-card form label { color: var(--navy) !important; }
.form-card .wpcf7 br { display: none; }
.form-card .wpcf7 .wpcf7-form-control-wrap { display: block; width: 100%; }
.form-card .wpcf7 .wpcf7-form-control-wrap input,
.form-card .wpcf7 .wpcf7-form-control-wrap select,
.form-card .wpcf7 .wpcf7-form-control-wrap textarea { width: 100%; }
/* Validation messages */
.form-card .wpcf7 .wpcf7-not-valid-tip { font-size: .8125rem; color: #C2410C; margin-top: 6px; font-weight: 600; }
.form-card .wpcf7-response-output { border: none !important; margin: 18px 0 0 !important; padding: 14px 16px !important; border-radius: 12px; font-size: .9375rem; }
.form-card .wpcf7 form.sent .wpcf7-response-output { background: rgba(0,163,199,.1); color: var(--teal-deep); }
.form-card .wpcf7 form.invalid .wpcf7-response-output,
.form-card .wpcf7 form.failed .wpcf7-response-output,
.form-card .wpcf7 form.spam .wpcf7-response-output { background: rgba(194,65,12,.1); color: #C2410C; }
/* Submit button — CF7 emits a <p> wrapper around [submit] */
.form-card .wpcf7 p:has(.wpcf7-submit) { margin: 22px 0 0; }
.form-card .wpcf7-submit.btn { background: var(--navy); color: white; width: 100%; justify-content: center; cursor: pointer; }
.form-card .wpcf7-submit.btn:hover { background: var(--navy-2); transform: translateY(-1px); }
/* Loading spinner positioning */
.form-card .wpcf7-spinner { vertical-align: middle; }

/* ==========================================================================
   v1.4.0 — Gutenberg block-editor integration
   ========================================================================== */

/* Group blocks render as div/section containers — zero out the automatic
   block-gap inside containers that already handle their own spacing.

   NOTE: We deliberately do NOT add a blanket `.wp-block-group{max-width:none}`
   rule here, because that would override the `.wrap{max-width:1200px}` rule
   for any pattern element that also carries the `wp-block-group` class. */
.wp-block-heading{margin-top:0;margin-bottom:0}

/* Block-gap reset inside our structural containers. Without this, WordPress
   adds margin-block-start:24px to siblings, breaking grid alignment. */
.wp-block-group.hero-text > * + *,
.wp-block-group.hero-card > * + *,
.wp-block-group.section-intro > * + *,
.wp-block-group.story-text > * + *,
.wp-block-group.timeline > * + *,
.wp-block-group.tl-item > * + *,
.wp-block-group.cs-panel > * + *,
.wp-block-group.contact-info > * + *,
.wp-block-group.contact-info > div > * + *,
.wp-block-group.card > * + *,
.wp-block-group.form-card > * + *{margin-block-start:0;margin-top:0}

/* Reset block-gap on direct children of grid containers (matches the
   pattern that caught me out on the CareSurround conversion: first item
   appears taller than the rest). */
.wp-block-group.hero-grid > *,
.wp-block-group.story-grid > *,
.wp-block-group.cards > *,
.wp-block-group.cards.two > *,
.wp-block-group.cards.four > *,
.wp-block-group.cs-grid > *,
.wp-block-group.contact-grid > *,
.wp-block-group.board-grid > *{margin-block-start:0;margin-top:0}

/* Re-apply our design-intended margins inside section-intro and similar
   containers where the heading/paragraph should sit a precise distance apart. */
.wp-block-group.section-intro > .wp-block-heading{margin-top:0}
.wp-block-group.section-intro > p{margin-top:22px}
.wp-block-group.hero-text > .wp-block-heading{margin-top:0}
.wp-block-group.hero-text > p.lead{margin-top:22px}
.wp-block-group.hero-text > .hero-actions{margin-top:32px}
.wp-block-group.hero-text > .hero-meta{margin-top:32px}

/* Hero card spacing inside Gutenberg */
.wp-block-group.hero-card > .ec-label{margin-bottom:16px}
.wp-block-group.hero-card > .wp-block-heading{margin-top:0;margin-bottom:12px}
.wp-block-group.hero-card > p{margin-top:0;margin-bottom:22px}
.wp-block-group.hero-card > .pill-row{margin-top:8px}

/* Story prose: paragraph spacing */
.wp-block-group.story-text > p + p{margin-top:18px}

/* Timeline items spacing */
.wp-block-group.timeline > .tl-item + .tl-item{margin-top:0}

/* Card content spacing */
.wp-block-group.card > .wp-block-heading{margin-top:0;margin-bottom:12px}
.wp-block-group.card > p{margin-top:0}

/* CS panel inner content */
.wp-block-group.cs-panel > .wp-block-group > .wp-block-heading{margin-top:0;margin-bottom:18px}
.wp-block-group.cs-panel > .wp-block-group > p{margin-top:0;margin-bottom:28px}

/* Form-card heading/sub spacing inside Gutenberg */
.wp-block-group.form-card > p,
.wp-block-group.form-card > h3{margin-top:0}

/* Callout-style heading variant used inside cs-panel and contact-info */
.is-style-callout{font-size:clamp(1.6rem,3vw,2.4rem)}
.contact-info .is-style-callout{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.cs-panel .is-style-callout{font-size:clamp(1.6rem,3vw,2.4rem);color:var(--navy)}
.cs-panel .is-style-callout em{color:var(--teal)}

/* The contact section intro had margin-bottom:32px via inline style.
   Re-apply that as a class so the editor doesn't need inline styling. */
#contact .section-intro,
.wp-block-group#contact .wp-block-group.section-intro{margin-bottom:32px}

/* ==========================================================================
   v1.4.0 — Accessibility
   ========================================================================== */

/* Skip-to-content link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:100;
}
.skip-link:focus{
  position:fixed;
  top:12px;
  left:12px;
  width:auto;
  height:auto;
  padding:12px 20px;
  background:var(--teal);
  color:white;
  font-weight:600;
  border-radius:8px;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  outline:3px solid white;
  outline-offset:2px;
}

/* Visible keyboard-focus rings on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
nav.links a:focus-visible{
  outline:3px solid var(--teal-bright);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible{
  outline-offset:4px;
  border-radius:999px;
}
nav.links a:focus-visible{
  border-radius:999px;
}

/* Reduced-motion preference: disable decorative animations */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important}
}

/* ==========================================================================
   v1.4.0 — Mobile responsiveness tightening
   ========================================================================== */

/* WCAG 2.5.5 — 44x44 minimum tap targets on nav and footer links */
nav.links a,
.footer-bottom .legal a,
footer .links-col a{min-height:44px;display:inline-flex;align-items:center}

.btn{min-height:44px}

/* Hero adjustments for very narrow widths */
@media(max-width:640px){
  .hero{padding:60px 0 50px}
  .hero h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .hero .lead{font-size:1rem}
  .hero-actions .btn{padding:14px 20px;font-size:.875rem}
}

/* Story timeline: at narrow widths the timeline goes under prose. Ensure
   it doesn't get cramped. */
@media(max-width:520px){
  .timeline{padding-left:24px}
  .timeline::before{left:7px}
  .tl-item::before{left:-21px}
}

/* CS panel padding tighter on small screens */
@media(max-width:520px){
  .cs-panel{padding:32px 22px;border-radius:24px}
  .cs-list-item{padding:14px 14px}
}

/* Board grid: tighter spacing on small screens */
@media(max-width:380px){
  .board-card{padding:24px 18px}
}

/* Form inputs: 16px+ font prevents iOS zoom-on-focus */
@media(max-width:480px){
  .form-card{padding:30px 22px}
  .form input,.form select,.form textarea{font-size:1rem}
}

/* Footer reflow at very narrow widths */
@media(max-width:380px){
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .footer-bottom .legal{flex-wrap:wrap;gap:12px 18px}
  .wrap{padding:0 18px}
}