@import url('fonts.css');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* =============================================
     BRAND COLORS
     To change a color sitewide, edit it here.
     ============================================= */
  --teal:        #248f9f;
  --teal-light:  #3ab8cc;
  --teal-dim:    #1a6e7c;
  --teal-pale:   #d6f0f4;
  --black:       #171616;
  --near-black:  #1e1d1d;
  --white:       #ffffff;
  --off-white:   #f4f4f4;
  --gray:        #666666;
  --gray-light:  #e0e0e0;
  --logo-gray:   #a8a9ad;

  /* =============================================
     FONTS
     Anton          = headlines, names, big numbers
     Barlow         = body copy
     Lora           = pull quotes, testimonials
     IBM Plex Mono  = small labels, tags, data (the "results board" layer)
     ============================================= */
  --font-display: 'Anton', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-serif:   'Lora', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* =============================================
     MOTION
     ============================================= */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-flip: cubic-bezier(.7, 0, .2, 1);
  --nav-h: 68px;
}

html { scroll-behavior: smooth; }
body { background: var(--white); font-family: var(--font-body); color: var(--black); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; }

/* =============================================
   NAV — same on every page
   Logo = animated CP mark (inline SVG) + typed wordmark (Counter / Point / Messaging)
   EDIT: .active class matches current page
   ============================================= */
nav { background: var(--black); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 40px; height: var(--nav-h); position: sticky; top: 0; z-index: 100; transition: background 0.3s; }
nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(23,22,22,0.9); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); opacity: 0; transition: opacity 0.3s; }
nav.is-scrolled { background: transparent; }
nav.is-scrolled::before { opacity: 1; }
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.nav-mark { height: 36px; width: auto; overflow: visible; display: block; }
.nav-mark .mk-c { fill: var(--teal); transition: transform 0.5s var(--ease-out); }
.nav-mark .mk-p { fill: var(--white); transition: transform 0.5s var(--ease-out); }
.nav-logo:hover .mk-c { transform: translateX(-40px); }
.nav-logo:hover .mk-p { transform: translateX(40px); }
.nav-word { font-family: var(--font-display); font-size: 20px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); display: flex; align-items: baseline; white-space: nowrap; }
.nw-point { color: var(--teal-light); }
.nw-msg { font-size: 13px; letter-spacing: 0.2em; color: rgba(255,255,255,0.55); margin-left: 8px; transition: letter-spacing 0.5s var(--ease-out), color 0.3s; }
.nav-logo:hover .nw-msg { letter-spacing: 0.3em; color: rgba(255,255,255,0.85); }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--teal-light); }
.nav-cta { background: transparent; border: 1.5px solid var(--teal-light); color: var(--teal-light); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 20px; cursor: pointer; text-decoration: none; transition: color 0.3s; position: relative; overflow: hidden; isolation: isolate; flex-shrink: 0; }
.nav-cta::before { content: ''; position: absolute; inset: 0; background: var(--teal-light); transform: translateY(101%); transition: transform 0.4s var(--ease-out); z-index: -1; }
.nav-cta:hover { color: var(--black); }
.nav-cta:hover::before { transform: none; }
.nav-toggle { display: none; }
.nav-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--teal-light); transform-origin: left; transform: scaleX(var(--progress, 0)); pointer-events: none; }

/* =============================================
   VALUES BAR — same on every page
   Scrolls as a ticker (motion.js). Hover pauses it.
   .current = the core value being filtered on Case Studies (set by its script)
   ============================================= */
.values-bar { background: var(--teal); padding: 13px 40px; display: flex; gap: 0; align-items: center; flex-wrap: wrap; }
.val { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); padding-right: 18px; text-decoration: none; transition: color 0.15s; white-space: nowrap; display: inline-flex; align-items: center; }
.val::after { content: ''; width: 11px; height: 11px; margin-left: 18px; flex-shrink: 0; opacity: 0.45; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 584 548'%3E%3Cpath fill='%23171616' d='M268,0H85A85,85 0 0 0 0,85V332A85,85 0 0 0 85,417H268V345H84A10,10 0 0 1 74,335V82A10,10 0 0 1 84,72H268Z'/%3E%3Cpath fill='%23171616' d='M317,0H499A85,85 0 0 1 584,85V332A85,85 0 0 1 499,417H393L318,548H317V345H502A10,10 0 0 0 512,335V82A10,10 0 0 0 502,72H317Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.val.current { color: var(--white); }
a.val:hover { color: var(--white); }

/* =============================================
   CTA STRIP — same on every page
   EDIT: headline and button text in each file
   ============================================= */
.cta-strip { background: var(--teal); padding: 56px 40px; display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; }
.cta-headline { font-family: var(--font-display); font-size: 52px; line-height: 0.9; text-transform: uppercase; color: var(--black); position: relative; z-index: 1; }
.cta-headline span { color: var(--white); display: block; }
.cta-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; position: relative; z-index: 1; }
.cta-body { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--black); max-width: 400px; text-align: right; }
.cta-btn { background: var(--black); color: var(--white); border: none; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 36px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; transition: background 0.2s, gap 0.3s var(--ease-out); white-space: nowrap; }
.cta-btn::after { content: '→'; font-family: var(--font-body); transition: transform 0.3s var(--ease-out); }
.cta-btn:hover { background: var(--near-black); gap: 18px; }

/* =============================================
   FOOTER — same on every page
   EDIT: year, phone, and social URLs in each file
   ============================================= */
footer { background: var(--near-black); border-top: 2px solid var(--teal); padding: 56px 40px 22px; position: relative; overflow: hidden; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 40px; }
.footer-contact { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; line-height: 2; color: rgba(255,255,255,0.65); text-transform: uppercase; }
.footer-contact a { color: var(--teal-light); text-decoration: none; }
.footer-contact a:hover { color: var(--white); }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; list-style: none; }
.footer-links a { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--teal-light); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); }
footer p { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.social { display: flex; gap: 18px; }
.social a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; }
.social a:hover { color: var(--teal-light); }

/* =============================================
   SHARED UTILITIES
   Eyebrow labels sit inside the logo's own brackets:
   a teal "C" bracket on the left and a "P" speech-bubble
   bracket (with its tail) on the right.
   ============================================= */
.section-eyebrow, .section-eyebrow-light { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-dim); margin-bottom: 14px; display: flex; align-items: flex-start; gap: 9px; --bracket-p: var(--black); }
.section-eyebrow-light { color: var(--teal-light); --bracket-p: var(--white); }
.section-eyebrow::before, .section-eyebrow-light::before,
.section-eyebrow::after, .section-eyebrow-light::after { content: ''; width: 9px; height: 20px; flex-shrink: 0; display: block; -webkit-mask: var(--m) top left / 9px 20px no-repeat; mask: var(--m) top left / 9px 20px no-repeat; }
.section-eyebrow::before, .section-eyebrow-light::before { background: var(--teal); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 20'%3E%3Cpath d='M9 0H4A4 4 0 0 0 0 4V11A4 4 0 0 0 4 15H9V12.6H4.3A1.6 1.6 0 0 1 2.7 11V4A1.6 1.6 0 0 1 4.3 2.4H9Z'/%3E%3C/svg%3E"); }
.section-eyebrow-light::before { background: var(--teal-light); }
.section-eyebrow::after, .section-eyebrow-light::after { background: var(--bracket-p); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 20'%3E%3Cpath d='M0 0H5A4 4 0 0 1 9 4V11A4 4 0 0 1 5 15H3.2L0 20V12.6H4.7A1.6 1.6 0 0 0 6.3 11V4A1.6 1.6 0 0 0 4.7 2.4H0Z'/%3E%3C/svg%3E"); }
.section-headline { font-family: var(--font-display); font-size: 64px; line-height: 0.88; text-transform: uppercase; color: var(--black); margin-bottom: 48px; }
.section-headline span { color: var(--teal-dim); }
.section-headline-light { font-family: var(--font-display); font-size: 64px; line-height: 0.88; text-transform: uppercase; color: var(--white); margin-bottom: 48px; }
.section-headline-light span { color: var(--teal-light); }
.hidden { display: none !important; }

/* =============================================
   POP-UP VIDEO PLAYER (video.js)
   ============================================= */
.vlb { position: fixed; inset: 0; z-index: 1000; background: rgba(23,22,22,0.94); display: none; align-items: center; justify-content: center; padding: 56px 24px; }
.vlb.open { display: flex; }
.vlb-frame { width: min(1100px, 100%, calc((100vh - 112px) * 16 / 9)); aspect-ratio: 16 / 9; background: var(--black); position: relative; border-bottom: 4px solid var(--teal); }
.vlb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vlb-close { position: absolute; top: 12px; right: 16px; background: none; border: 0; color: var(--white); font-size: 40px; line-height: 1; cursor: pointer; padding: 4px 10px; }
.vlb-close:hover, .vlb-close:focus-visible { color: var(--teal-light); }

/* Footer handle with Instagram + CP icons (brand colors) */
.footer-handle { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
a.footer-handle { color: inherit; text-decoration: none; transition: color 0.2s; }
a.footer-handle:hover span, a.footer-handle:focus-visible span { color: var(--teal-light); }
.footer-handle svg { height: 15px; width: auto; display: block; flex-shrink: 0; }
.footer-handle .fh-ig { width: 15px; color: var(--teal); }
.footer-handle .fh-cp .mk-c { fill: var(--teal); }
.footer-handle .fh-cp .mk-p { fill: var(--white); }
.footer-socials { display: inline-flex; gap: 10px; margin-left: 14px; vertical-align: middle; }
.footer-socials a { display: block; color: var(--teal); transition: color 0.2s; }
.footer-socials a:hover, .footer-socials a:focus-visible { color: var(--teal-light); }
.footer-socials svg { width: 16px; height: 16px; display: block; }