/* ============================================================
   SHARED BRAND KIT — the one file all three sites import.
   This is the "bridge": same palette, same type, same buttons,
   same card/header/footer patterns everywhere. Each site keeps
   its own logo, nav items, and content — just wearing the same
   clothes.

   DESIGN SYSTEM — "Ink & Field": a warm paper background instead
   of stark white, near-black ink for type, and a single deep
   emerald accent used sparingly (links, icon strokes, small
   stamps) instead of spread across buttons and fills. Buttons are
   solid ink, not colored — the accent is a highlight color, not a
   UI-chrome color. Corners are small and consistent (never a full
   pill except on tag-sized chips), borders are hairline, shadows
   are close to none. The goal is something that reads like a
   well-set page, not a template.

   Porting to WordPress later: this becomes either (a) a single
   mu-plugin enqueued on all three installs, or (b) the base
   stylesheet of a shared parent theme with a child theme per
   site for logo/content differences. Either way, change a value
   here once and it should propagate everywhere.
   ============================================================ */

:root{
  /* Paper, not white — warm, slightly off-white, easier on the eyes
     at length and less "default Bootstrap" than pure #fff. */
  --bg: #F7F5F0;
  --bg-alt: #EDE8DC;
  --panel: #FFFFFF;
  --panel-border: #DBD4C3;

  /* Ink, not gray-900 — a near-black with a faint warm-green cast so
     it sits comfortably next to the emerald accent instead of fighting it. */
  --ink: #161B18;
  --ink-soft: #565F5A;

  /* One accent, two strengths. --accent for fills/borders/icon strokes
     at largeish sizes; --accent-ink for anything that has to read as
     TEXT (links, prices, small stamps) and needs real contrast on paper. */
  --accent: #2E8B69;
  --accent-ink: #12402F;

  --success: #2F7D53;
  --danger: #A6432E;
  --radius: 10px;
  --maxw: 1160px;

  /* Per-site accent hue — kept as an override point even though every
     site currently shares the same value. Override this per site if
     you ever want AquilaNera / Platinum Steno / Robert Rasha to each
     carry a faint hue difference without touching component CSS. */
  --hue: var(--accent);
  --hue-ink: var(--accent-ink);

  /* Buttons are ink, not colored — deliberately separate from --accent.
     Solid fills only. No gradients, no glow shadows, no full pill radius. */
  --btn: var(--ink);
  --btn-hover: #333C36;
  --btn-text: var(--bg);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Source Sans 3', system-ui, sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Playfair Display', Georgia, serif;
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.18;
  letter-spacing:-.01em;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- Network bar: the literal bridge between sites in the
   family. A slim ink strip — small caps, tracked out — reads as a
   masthead rule rather than a colorful banner. ---------- */
.network-bar{
  background:var(--ink);
  border-bottom:1px solid var(--panel-border);
  font-size:.72rem;
}
.network-bar .wrap{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 24px;flex-wrap:wrap;color:#9AA39C;
  text-transform:uppercase;letter-spacing:.08em;
}
.network-bar a{
  color:#C9CFC7;text-decoration:none;padding:2px 4px;
}
.network-bar a:hover{color:#7FD6AE;}
.network-bar a.is-active{color:#C9CFC7!important;font-weight:700;background:rgba(201,207,199,.11);box-shadow:inset 0 -1px 0 rgba(201,207,199,.62);border-radius:4px;}
.network-bar .sep{opacity:.4;}

/* ---------- Buttons: flat, crisp, solid ink. No gradients, no glow
   shadows, no full pill radius — every button on every site uses this
   one treatment. The accent color is reserved for text/links, not
   button chrome, so buttons never compete with the emerald highlights
   around them. ---------- */
.btn{
  display:inline-block;padding:14px 26px;border-radius:6px;font-weight:600;
  text-decoration:none;font-size:15px;letter-spacing:.01em;cursor:pointer;
  border:1.5px solid transparent;transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-gold{
  background:var(--btn);
  color:var(--btn-text);
  border-color:var(--btn);
}
.btn-gold:hover{background:var(--btn-hover);border-color:var(--btn-hover);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--btn-text);}
.btn.full{width:100%;text-align:center;}
.btn.small{padding:9px 18px;font-size:13px;border-radius:5px;}

/* ---------- Sticky top wrapper: holds the network bar AND the header
   together so both stay pinned while scrolling, instead of the bar
   disappearing and only the nav sticking. ---------- */
.sticky-top{position:sticky;top:0;z-index:60;}

/* ---------- Header ---------- */
.site-header{
  background:rgba(247,245,240,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--panel-border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand-mark{
  font-family:'Playfair Display',serif;font-weight:800;
  background:var(--ink);color:var(--bg);padding:5px 10px;border-radius:5px;
  font-size:13px;letter-spacing:.06em;
}
.brand-text{font-weight:600;font-size:15px;display:none;}
@media(min-width:640px){.brand-text{display:inline;}}

/* ---------- Brand logo: placeholder wordmark lockup (mark + name, no
   colored box) used in place of the plain brand-mark badge for
   AquilaNera Global, Platinum Steno, and Robert Rasha. Swap the
   underlying SVG for a real logo file later — sizing/placement holds. ---------- */
.brand-logo{height:34px;width:auto;display:block;}
.footer-logo{height:30px;width:auto;display:block;}
.nav-links{display:none;gap:20px;font-size:14px;font-weight:500;flex-wrap:nowrap;}
.nav-links a{text-decoration:none;opacity:.8;white-space:nowrap;}
.nav-links a:hover{opacity:1;color:var(--accent-ink);}
@media(min-width:860px){.nav-links{display:flex;}}
@media(min-width:1180px){.nav-links{gap:26px;font-size:15px;}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:112px 0 78px;overflow:hidden;text-align:center;}
.hero-overlay{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at top, rgba(46,139,105,.12), transparent 60%);
}
.hero-content{position:relative;max-width:740px;margin:0 auto;}
.badge{
  display:inline-block;background:transparent;border:1px solid var(--accent);
  color:var(--accent-ink);padding:6px 16px;border-radius:999px;font-size:12px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:22px;
}
.hero h1{font-size:clamp(2rem, 5vw, 3.4rem);}
.hero-sub{font-size:1.1rem;color:var(--ink-soft);max-width:600px;margin:0 auto 30px;}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------- Service switcher: quick nav between AquilaNera's service
   pages, so switching from e.g. Managed IT to Website Design doesn't
   require going back to the homepage first. ---------- */
.service-switch{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  padding:20px 0 44px;
}
.service-switch a{
  background:var(--panel);border:1px solid var(--panel-border);color:var(--ink-soft);
  padding:9px 18px;border-radius:999px;font-size:.85rem;font-weight:600;text-decoration:none;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.service-switch a:hover{border-color:var(--ink);color:var(--ink);}
.service-switch a.active{background:var(--ink);border-color:var(--ink);color:var(--bg);}

/* ---------- Sections & cards ---------- */
.section{padding:80px 0;}
.section.alt{background:var(--bg-alt);}
.center{text-align:center;}
.section-intro{max-width:620px;margin:0 auto 46px;text-align:center;color:var(--ink-soft);}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:22px;}

/* ---------- Horizontal scroll row: used for "From the Blog" so the
   homepage always shows a fixed number of posts (4 fit in view) while
   supporting more (up to ~8) that reveal on scroll — new posts just get
   appended to the markup, no layout changes needed as the blog grows. ---------- */
.scroll-row{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:10px;margin:0 -4px;scrollbar-width:thin;
}
.scroll-row .card{flex:0 0 260px;scroll-snap-align:start;}
.scroll-row::-webkit-scrollbar{height:6px;}
.scroll-row::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:3px;}
.scroll-row::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);}
.card{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:30px 26px;transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow:0 1px 2px rgba(22,27,24,.04);
}
.card:hover{border-color:var(--ink);box-shadow:0 6px 16px rgba(22,27,24,.08);}
.card .icon-badge{
  width:42px;height:42px;border-radius:8px;background:transparent;border:1.5px solid var(--accent);
  color:var(--accent-ink);display:flex;align-items:center;justify-content:center;
  font-size:19px;margin-bottom:16px;
}
.card h3{font-size:1.1rem;margin-bottom:8px;}
.card p{font-size:.92rem;color:var(--ink-soft);margin:0;}

/* ---------- Cross-brand promo card (used to point at sister sites) ---------- */
.cross-promo{
  display:grid;grid-template-columns:1fr;gap:24px;
  background:var(--panel);border:1px solid var(--panel-border);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:32px;align-items:center;
}
@media(min-width:760px){.cross-promo{grid-template-columns:auto 1fr auto;}}
.cross-promo .cp-mark{
  font-family:'Playfair Display',serif;font-weight:800;font-size:1rem;
  background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:5px;white-space:nowrap;
}
.cross-promo p{margin:0;color:var(--ink-soft);}
.cross-promo h4{margin:0 0 6px;font-size:1.05rem;color:var(--ink);}

/* ---------- Featured book banner: a highlighted spotlight card, used
   to promote the founder's book from within a sister site. Deliberately
   more prominent than .cross-promo — an ink-bordered panel with real
   cover art, not just a text stamp — since this is meant to stand out
   as a one-off highlight, not blend in as routine cross-promotion. ---------- */
.book-feature{
  display:grid;grid-template-columns:1fr;gap:32px;align-items:center;
  background:var(--panel);border:1.5px solid var(--accent);border-radius:var(--radius);
  padding:40px;box-shadow:0 10px 28px rgba(22,27,24,.08);
}
@media(min-width:760px){.book-feature{grid-template-columns:auto 1fr;}}
.book-feature-cover{
  width:150px;display:block;margin:0 auto;box-shadow:0 14px 30px rgba(22,27,24,.22);
  border-radius:2px;
}
@media(min-width:760px){.book-feature-cover{margin:0;}}
.book-feature-body{text-align:center;}
@media(min-width:760px){.book-feature-body{text-align:left;}}
.book-feature-body h3{font-size:1.5rem;margin:2px 0 12px;}
.book-feature-body p{color:var(--ink-soft);margin:0 0 22px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-alt);border-top:1px solid var(--panel-border);padding:60px 0 20px;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:36px;}
@media(min-width:760px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr;}}
.footer-tag{color:var(--ink-soft);font-size:.9rem;max-width:280px;}
.footer-grid h4{
  color:var(--ink);font-size:.78rem;margin-bottom:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}
.footer-grid a{color:var(--ink-soft);text-decoration:none;}
.footer-grid a:hover{color:var(--accent-ink);}
.footer-bottom{border-top:1px solid var(--panel-border);margin-top:40px;padding-top:20px;font-size:.8rem;color:var(--ink-soft);}
.footer-family{
  display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;margin-top:10px;
}
.footer-family a{
  border:1px solid var(--panel-border);padding:4px 12px;border-radius:999px;
}
.footer-family a:hover{border-color:var(--accent);color:var(--accent-ink);}

.tag{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--panel);
  border:1px solid var(--panel-border);color:var(--ink-soft);padding:6px 12px;border-radius:999px;
}

/* ---------- Forms: booking / request forms used across the network
   (AquilaNera's Request Service, Robert Rasha's Book, Platinum
   Steno's Book a Session). One shared system so every booking form
   looks and behaves the same way. ---------- */
.form-card{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:40px;max-width:760px;margin:0 auto;box-shadow:0 1px 2px rgba(22,27,24,.04);
}
@media(max-width:560px){.form-card{padding:28px 22px;}}
.form-row{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px;}
.form-row.two{grid-template-columns:1fr;}
@media(min-width:640px){.form-row.two{grid-template-columns:1fr 1fr;}}
.form-field label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:6px;}
.form-field .hint{font-size:.78rem;color:var(--ink-soft);font-weight:400;margin-left:4px;}
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=tel],
.form-field input[type=number],
.form-field input[type=date],
.form-field select,
.form-field textarea{
  width:100%;background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:6px;
  padding:11px 14px;color:var(--ink);font-size:.94rem;font-family:inherit;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,139,105,.15);
}
.form-field textarea{resize:vertical;min-height:110px;}
.check-grid, .radio-grid{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:640px){.check-grid, .radio-grid{grid-template-columns:1fr 1fr;}}
.check-item, .radio-item{
  display:flex;align-items:center;gap:10px;background:var(--bg-alt);border:1px solid var(--panel-border);
  border-radius:6px;padding:10px 14px;font-size:.9rem;color:var(--ink);cursor:pointer;
}
.check-item input, .radio-item input{width:16px;height:16px;flex:none;accent-color:var(--ink);}
.form-section-title{
  font-size:.78rem;font-weight:700;color:var(--ink);margin:32px 0 14px;
  text-transform:uppercase;letter-spacing:.08em;
}
.form-section-title:first-child{margin-top:0;}
.form-msg{font-size:.9rem;color:var(--success);margin-top:16px;min-height:1.2em;}
.conditional-block{
  border-left:3px solid var(--accent);padding:18px 22px;margin-top:16px;border-radius:0 8px 8px 0;
  background:rgba(46,139,105,.06);display:none;
}
.conditional-block.show{display:block;}
.form-thanks{text-align:center;padding:20px 0;}
.form-thanks .icon-badge{margin:0 auto 16px;}

/* ---------- Back to top: injected by shared/js/back-to-top.js on every
   page. Hidden until the page has scrolled a bit, then fades/slides in. ---------- */
.back-to-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--btn);color:var(--btn-text);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(22,27,24,.22);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s, background .15s ease;
  z-index:70;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--btn-hover);}
.back-to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}


/* 2.7.3 family-bar hardening: active family label is highlighted without changing text hue. */
.network-bar .wrap a.is-active,
.network-bar .wrap a.is-active:visited,
.network-bar .wrap a.is-active:hover,
.network-bar .wrap a.is-active:focus-visible{
  color:#C9CFC7!important;
  background:rgba(201,207,199,.11)!important;
  box-shadow:inset 0 -1px 0 rgba(201,207,199,.62)!important;
  border-radius:4px;
  text-decoration:none!important;
}

/* 2.7.5: make the shared back-to-top control comfortable and reachable on phones. */
@media (max-width: 859px){
  .back-to-top{
    right:max(16px, env(safe-area-inset-right));
    bottom:max(18px, calc(env(safe-area-inset-bottom) + 12px));
    width:48px;
    height:48px;
    z-index:120;
  }
}