/* ===========================================================================
   OPTSY — CORE
   Tokens, base rules, and the primitives every template uses.
   Load first. Nothing page-specific belongs in this file.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. TOKENS
   One place to change brand values. --navy is confirmed from the existing
   industries cta-section gradient. --accent is a placeholder: replace it with
   the real brand value from services.css and every template follows.
   --------------------------------------------------------------------------- */
:root{
  /* colour */
  --op-navy:        #152e52;
  --op-navy-deep:   #0d1f3a;
  --op-navy-soft:   #1e3f6d;
  --op-ink:         #12243c;
  --op-body:        #4f6178;
  --op-muted:       #7688a0;
  --op-line:        #dfe7f0;
  --op-line-soft:   #eef2f7;
  --op-tint:        #f4f7fb;
  --op-white:       #ffffff;
  --op-accent:      #1b5fd0;   /* TODO: confirm against live theme */
  --op-accent-dark: #164ba4;

  /* The yellow is a real brand colour: the current theme already ships
     .btn-yellow on the sticky demo button. Confirm the exact hex against
     services.css and change it here only. */
  --op-yellow:       #ffc42e;
  --op-yellow-dark:  #f2b414;
  --op-yellow-soft:  #fff4d6;

  /* on-dark text, used by the hero, cta band and demo */
  --op-on-dark:        #dce6f3;
  --op-on-dark-muted:  #b9cbe2;
  --op-on-dark-faint:  #8fa2bb;
  --op-on-dark-accent: #8fb4e8;

  /* layout */
  --op-wrap:        1200px;
  --op-gutter:      24px;
  --op-gutter-sm:   20px;
  --op-section-y:   88px;
  --op-section-y-md:72px;
  --op-section-y-sm:56px;

  /* radius */
  --op-r-sm: 6px;
  --op-r-md: 10px;
  --op-r-lg: 16px;

  /* elevation */
  --op-shadow-card: 0 1px 2px rgba(18,36,60,.05), 0 8px 24px -12px rgba(18,36,60,.18);
  --op-shadow-lift: 0 2px 4px rgba(18,36,60,.06), 0 18px 40px -18px rgba(18,36,60,.28);
  --op-shadow-hero: 0 28px 60px -28px rgba(0,0,0,.7);
  --op-shadow-btn:  0 1px 2px rgba(18,36,60,.14), 0 6px 16px -8px rgba(18,36,60,.4);
  --op-shadow-btn-h:0 2px 4px rgba(18,36,60,.16), 0 12px 26px -10px rgba(18,36,60,.5);
  --op-shadow-cta:  0 1px 2px rgba(120,82,0,.18), 0 8px 20px -8px rgba(120,82,0,.42);
  --op-shadow-cta-h:0 2px 5px rgba(120,82,0,.2), 0 14px 30px -10px rgba(120,82,0,.5);

  /* motion */
  --op-ease: .18s ease;

  /* type — in production the theme font wins; this is the fallback chain */
  --op-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}


/* ---------------------------------------------------------------------------
   2. BASE
   Scoped to .op-page so it can't reach the header, footer, or any legacy
   template still running the old CSS. Put class="op-page" on the <main>.
   --------------------------------------------------------------------------- */
/* Every root this design system owns, not just <main>.
   The header, footer and drawer sit OUTSIDE .op-page, so scoping the reset to
   .op-page alone left .site-container at width:100% PLUS 40px of padding —
   which pushed the whole header 40px wider than the viewport and slid the
   burger off the right edge of the screen. */
.op-page,
.op-site-header,
.op-site-footer,
.op-drawer,
.op-drawer-overlay,
.op-sticky-cta,
.op-nav-scrim,
.op-page *,
.op-site-header *,
.op-site-footer *,
.op-drawer *,
.op-page *::before,
.op-page *::after,
.op-site-header *::before,
.op-site-header *::after,
.op-site-footer *::before,
.op-site-footer *::after,
.op-drawer *::before,
.op-drawer *::after{box-sizing:border-box}

.op-page{
  font-family:var(--op-font);
  font-size:16px;
  line-height:1.7;
  color:var(--op-body);
  background:var(--op-white);
  -webkit-font-smoothing:antialiased;
}

/* Same scope problem as box-sizing above: the header, footer and drawer are
   outside .op-page, so without them listed here their links kept the browser
   default underline and their buttons the default system font. */
.op-page img,
.op-site-header img,
.op-site-footer img,
.op-drawer img{max-width:100%;height:auto;display:block}

.op-page a{color:var(--op-accent);text-decoration:none}
.op-page a:hover{text-decoration:underline}

.op-site-header a,
.op-site-footer a,
.op-drawer a{text-decoration:none}
.op-site-footer a:hover,
.op-drawer a:hover{text-decoration:underline}

.op-page button,
.op-site-header button,
.op-site-footer button,
.op-drawer button,
.op-sticky-cta{font-family:var(--op-font)}

.op-page :where(a,button,input,textarea,select,summary):focus-visible,
.op-site-header :where(a,button,input,textarea,select,summary):focus-visible,
.op-site-footer :where(a,button):focus-visible,
.op-drawer :where(a,button,input,textarea,select,summary):focus-visible,
.op-sticky-cta:focus-visible{
  outline:3px solid var(--op-accent);
  outline-offset:2px;
  border-radius:4px;
}
.op-site-header :where(a,button):focus-visible{outline-color:var(--op-yellow)}

/* screen-reader-only, for labels Gravity Forms needs but the design hides */
.op-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ---------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
.site-container{
  max-width:var(--op-wrap);
  margin:0 auto;
  padding:0 var(--op-gutter);
  width:100%;
}

.op-page section{padding:var(--op-section-y) 0}
.op-page section.alt{background:var(--op-tint)}

.center{text-align:center}


/* ---------------------------------------------------------------------------
   4. TYPE
   --------------------------------------------------------------------------- */
.op-page h1,
.op-page h2,
.op-page h3,
.op-page h4,
.op-page .h2{color:var(--op-ink);font-weight:700;margin:0 0 .5em}

.op-page h1{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.08;letter-spacing:-.022em}
.op-page .h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.18;letter-spacing:-.018em;margin:0 0 16px}
.op-page h3{font-size:1.1875rem;line-height:1.35;letter-spacing:-.01em;margin:0 0 10px}
.op-page h4{font-size:1.0625rem;line-height:1.4;margin:0 0 8px}
.op-page p{margin:0 0 1.1em}
.op-page p:last-child{margin-bottom:0}

/* section eyebrow. Sentence case — no text-transform. */
.kicker{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--op-accent);
  margin-bottom:12px;
}

/* standfirst under an .h2 */
.section-intro{
  max-width:62ch;
  margin:0 auto;
  color:var(--op-body);
  font-size:1.0625rem;
}
.section-intro p{margin:0}

/* heading block above a grid or carousel */
.op-section-head{margin-bottom:52px}


/* ---------------------------------------------------------------------------
   5. BUTTONS

   Shape is shared; only colour changes between variants. Every button lifts
   1px on hover and settles back on press, which is what makes them feel
   clickable rather than painted on.

   .btn-cta is the demo button. Yellow at rest, white on hover, per brand.
   --------------------------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;
  border:1px solid transparent;
  border-radius:8px;
  font-weight:600;font-size:.9375rem;line-height:1;letter-spacing:-.005em;
  white-space:nowrap;
  cursor:pointer;text-decoration:none;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .22s ease,
    transform .12s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* trailing chevron, drawn rather than typed, so it can move on hover */
.btn::after{
  content:"";
  width:7px;height:7px;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.75;
  transition:transform .18s ease,opacity .18s ease;
  margin-left:-1px;
}
.btn:hover::after{transform:rotate(45deg) translate(2px,-2px);opacity:1}
.btn--plain::after{display:none}

/* primary — navy */
.btn-primary{
  background:var(--op-navy);color:var(--op-white);
  box-shadow:var(--op-shadow-btn);
}
.btn-primary:hover{background:var(--op-navy-soft);color:var(--op-white);box-shadow:var(--op-shadow-btn-h)}

/* cta — the demo button. Yellow, then white on hover. */
.btn-cta{
  background:var(--op-yellow);
  color:var(--op-navy-deep);
  box-shadow:var(--op-shadow-cta);
}
.btn-cta:hover{
  background:var(--op-white);
  color:var(--op-navy-deep);
  box-shadow:var(--op-shadow-cta-h);
}
.btn-cta:active{background:var(--op-yellow-dark)}

/* light — white on a dark section */
.btn-light{
  background:var(--op-white);color:var(--op-navy);
  box-shadow:0 1px 2px rgba(0,0,0,.16), 0 8px 20px -10px rgba(0,0,0,.5);
}
.btn-light:hover{background:#eef3fa;color:var(--op-navy)}

/* ghost — outline on a dark section */
.btn-ghost{
  background:rgba(255,255,255,.06);
  color:var(--op-white);
  border-color:rgba(255,255,255,.32);
  backdrop-filter:blur(2px);
}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:var(--op-white);border-color:rgba(255,255,255,.5)}

/* outline — quiet secondary on a light section */
.btn-outline{
  background:var(--op-white);
  color:var(--op-navy);
  border-color:var(--op-line);
}
.btn-outline:hover{border-color:var(--op-navy);color:var(--op-navy);box-shadow:var(--op-shadow-card)}

/* sizes */
.btn-lg{padding:17px 32px;font-size:1rem;border-radius:9px}
.btn-sm{padding:11px 20px;font-size:.875rem}

.btn[disabled]{opacity:.5;pointer-events:none;box-shadow:none}


/* ---------------------------------------------------------------------------
   6. CARD SHELL
   The one card surface. Every card component extends this rather than
   inventing its own border, radius and shadow.
   --------------------------------------------------------------------------- */
.op-card{
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  transition:border-color var(--op-ease),box-shadow var(--op-ease);
}
.op-card--hover:hover{border-color:#c8d8ea;box-shadow:var(--op-shadow-card)}

/* square icon tile used inside cards */
.op-card .icon,
.icon--tile{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  border-radius:var(--op-r-sm);
  background:var(--op-tint);
}
.op-card .icon img,
.icon--tile img{width:22px;height:22px}


/* ---------------------------------------------------------------------------
   7. RESPONSIVE BASE
   Component breakpoints live with their components. Only global steps here.
   --------------------------------------------------------------------------- */
@media (max-width:1024px){
  .op-page section{padding:var(--op-section-y-md) 0}
}

@media (max-width:680px){
  .op-page section{padding:var(--op-section-y-sm) 0}
  .site-container{padding:0 var(--op-gutter-sm)}
  .op-section-head{margin-bottom:32px}
}

@media (prefers-reduced-motion:reduce){
  .op-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}