/* Common Sense Growth & Marketing — site stylesheet
   Layout numbers come from measurements of the original site (see documentation/design-system.md).
   Structure:  1 tokens/fonts  2 base  3 header/nav  4 buttons  5 sections (desktop)  6 pages  7 footer  8 mobile (<=599px, 320px canvas) */

/* ---------- 1. tokens & fonts ---------- */
:root {
  --cream: #f4f1e9;      /* page / hero / testimonial background */
  --green: #2b463c;      /* bio + footer */
  --ink: #191919;        /* text + dark sections */
  --blue: #b8d0ff;       /* call-to-action band */
  --white: #ffffff;
  --paper: #fafafa;      /* about page "Who We Are" */
  --brown: #8b6755;      /* button outline + icon */
  --quote: #242323;      /* "Happy Clients" heading */
  --w: 980px;            /* content column */
  --f-light: poppins-extralight, poppins, sans-serif;   /* body copy */
  --f-semi: poppins-semibold, poppins, sans-serif;      /* headings, buttons */
  --f-serif: "libre baskerville", Georgia, serif;
  --f-avenir: avenir, poppins-semibold, sans-serif;
  --f-kollektif: kollektif, poppins-semibold, sans-serif;
}
/* Font aliases are named like the originals: the *face* is chosen by alias + weight, not by true weight. */
@font-face { font-family: poppins-extralight; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/poppins-light-400.woff2) format("woff2"); }
@font-face { font-family: poppins-extralight; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/poppins-light-700.woff2) format("woff2"); }
@font-face { font-family: poppins-extralight; font-weight: 400; font-style: italic; font-display: swap; src: url(/assets/fonts/poppins-light-400i.woff2) format("woff2"); }
@font-face { font-family: poppins-extralight; font-weight: 700; font-style: italic; font-display: swap; src: url(/assets/fonts/poppins-light-700i.woff2) format("woff2"); }
@font-face { font-family: poppins-semibold; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/poppins-semi-400.woff2) format("woff2"); }
@font-face { font-family: poppins-semibold; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/poppins-semi-700.woff2) format("woff2"); }
@font-face { font-family: poppins-semibold; font-weight: 400; font-style: italic; font-display: swap; src: url(/assets/fonts/poppins-semi-400i.woff2) format("woff2"); }
@font-face { font-family: poppins-semibold; font-weight: 700; font-style: italic; font-display: swap; src: url(/assets/fonts/poppins-semi-700i.woff2) format("woff2"); }
@font-face { font-family: "libre baskerville"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/libre-baskerville-400.woff2) format("woff2"); }
@font-face { font-family: "libre baskerville"; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/libre-baskerville-700.woff2) format("woff2"); }
@font-face { font-family: avenir; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/avenir-heavy.woff2) format("woff2"); }
@font-face { font-family: kollektif; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/kollektif-bold.woff2) format("woff2"); }

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; min-height: 900px; min-width: var(--w); background: var(--cream); color: var(--ink); font: 700 19px/1.5 var(--f-light); }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; font-weight: inherit; }
img { display: block; max-width: none; }
a { color: inherit; }
em { font-style: italic; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--white); color: #116dff; padding: 8px 12px; font: 400 14px/1.2 Helvetica, Arial, sans-serif; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid #116dff; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sec { position: relative; }
.sec > .wrap, .wrap { position: relative; width: var(--w); margin: 0 auto; }
.sec--cream { background: var(--cream); }
.sec--green { background: var(--green); color: var(--white); }
.sec--dark  { background: var(--ink); color: var(--white); }
.sec--white { background: var(--white); }
.sec--paper { background: var(--paper); }
.sec--blue  { background: var(--blue); }
.art { position: absolute; }
.art img { width: 100%; height: 100%; object-fit: cover; }
.blk { position: relative; }              /* a positioned block inside a section; children use .art / .col */
.col { position: relative; }
.center { text-align: center; }
.left { text-align: left; }
.fl { font-family: var(--f-light); }
.fs { font-family: var(--f-semi); }

/* ---------- buttons (look; sizes live in desktop.css / mobile.css) ---------- */
.btn { display: flex; align-items: center; box-sizing: border-box; border: 1px solid var(--brown); border-radius: 50px; background: var(--cream); color: var(--ink); font-family: var(--f-semi); font-weight: 400; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.btn-label { flex: 1; text-align: center; }
.btn-icon { flex: none; fill: var(--brown); transition: fill .2s; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn:hover .btn-icon { fill: var(--white); }
.u { text-decoration: underline; }
em { font-style: italic; }
.site-footer { background: var(--green); color: var(--white); }
.site-footer a { color: var(--white); }
.menu-toggle, .mm-close { display: none; }
.back-to-top { display: none; }
.m-br, .m-only { display: none; }

/* video testimonial ovals (poster + play button -> <video>) */
.video-oval { position: absolute; border-radius: 50%; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, .55); background: #000; cursor: pointer; }
.video-oval img, .video-oval video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-oval .play { position: absolute; left: 50%; top: 50%; width: 94px; height: 94px; margin: -47px 0 0 -47px; border: 0; border-radius: 50%; background: rgba(255, 51, 51, .93); cursor: pointer; padding: 0; }
.video-oval .play::before { content: ""; position: absolute; left: 36px; top: 30px; border-style: solid; border-width: 17px 0 17px 28px; border-color: transparent transparent transparent rgba(255, 255, 255, .5); }
.video-oval.playing .play, .video-oval.playing img { display: none; }
.video-oval .mute { position: absolute; right: 8%; bottom: 8%; display: none; }
.video-oval.playing .mute { display: block; }

/* emphasis runs inside About "Who We Are" copy use the semibold face */
.ab-who .sum b, .ab-who .sum strong { font-family: var(--f-semi); font-weight: 700; }
.ab-who .sum b.w4 { font-weight: 400; }

/* blog subscribe form: look (positions live in desktop.css / mobile.css) */
.subscribe h2 { text-align: center; font: 400 17px/normal var(--f-semi); letter-spacing: .5px; color: #000; }
.subscribe label { font: 400 12px/normal var(--f-serif); color: #000; }
.subscribe input { border: 0; border-bottom: 2px solid #000; border-radius: 0; background: transparent; font: 400 16px/normal var(--f-semi); padding: 0 4px; color: #000; }
.subscribe .submit { border: 0; border-bottom: 1px solid #000; background: transparent; font: 700 18px/normal var(--f-semi); color: #000; padding: 0; overflow: visible; white-space: nowrap; cursor: pointer; }
.subscribe .sub-status { text-align: center; font: 700 19px/normal var(--f-light); }

/* matches the original: heading emphasis is underlined; the contact e-mail link is plain until hovered/focused */
.st-hero h1 em { text-decoration: underline; }
.contact a { text-decoration: none; }
.contact a:hover, .contact a:focus-visible { text-decoration: underline; }

.hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }

.ab-video { background: #000; }
.ab-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* background photo/video blocks fill their box on every layout */
.bl-photo img, .bgvid, .art .bgvid { width: 100%; height: 100%; object-fit: cover; display: block; }

.desktop-only { display: inline; }