/* 'Name', 'Email', & Phone' fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	font-size: 16px; }

/* 'Submit Message' button */
.wpcf7 input[type="submit"] {
	font-size: 16px;
  font-weight: bold; }

/* Labels (e.g. 'Requested Service', 'Additional Message') */
.wpcf7-form label {
	font-size: 16px; }

/* Line spacing */
.wpcf7-form p {
	font-size: 12px; }

/* 'Requested Service' field */
.wpcf7-form select {
	font-size: 16px; }

/* 'Additional Message' field */
.wpcf7-form textarea {
	font-size: 16px;
	max-height: 75px; }

/* 'Let's Start ... ' text (span class) */
.intro1 {
	font-size: 20px;
  font-weight: bold; }

/* 'Call us at ... ' text (span class) */
.intro2 {
	font-size: 16px; }


/* ==========================================================================
   INA — SITE-WIDE CUSTOM CSS (Light Mode)
   Paste this into: Appearance > Customize > Additional CSS
   (or Elementor Pro > Site Settings > Custom Code > Custom CSS if preferred)
 
   This file ONLY contains things Elementor's native panels can't do:
   color/font tokens, the eyebrow label style, mono "file number" labels,
   button hover states, card hover states, nav blur, and focus rings.
   Everything else (padding, columns, alignment) should be set directly
   in Elementor using these same color/font names as your Global Colors
   and Global Fonts — see the build guide for the exact hex values.
   ========================================================================== */
 
:root{
  --ina-ink:#FAF8F4;          /* page background */
  --ina-ink-panel:#F1EEE6;    /* card / hover panel background */
  --ina-ink-panel-2:#EBE6DA;  /* CTA band background */
  --ina-line:#E0DACB;         /* hairline borders */
  --ina-text:#141F2E;         /* body/heading text */
  --ina-text-muted:#666F7D;   /* secondary text */
  --ina-brass:#A9793F;        /* primary accent (buttons, links, icons) */
  --ina-brass-dim:#8A6E45;    /* borders on brass elements */
  --ina-signal:#2F7A5C;       /* status/data green (blips, small dots) */
  --ina-on-accent:#14202E;    /* dark text used ON TOP of brass backgrounds */
}
 
/* Reduced-motion handling lives inside hero-background-widget.html itself,
   scoped to .ina-hero-bg — no global rule needed here, so nothing in this
   file touches elements outside the INA components. */
 
/* Consistent keyboard focus ring — scoped to the new INA components only,
   not every link/button on the existing site. */
.ina-btn-primary:focus-visible,
.ina-btn-secondary:focus-visible,
.ina-btn-pay:focus-visible,
.ina-resource-link:focus-visible,
.ina-breadcrumb a:focus-visible,
.ina-social a:focus-visible{
  outline:2px solid var(--ina-brass);
  outline-offset:3px;
}
 
/* ---------- "Eyebrow" label (small caps mono label above headings) ----------
   Usage: add class "ina-eyebrow" to a Text Editor widget, e.g.
   <div class="ina-eyebrow">01 — Who We Are</div>                            */
.ina-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ina-brass);
  display:flex;
  align-items:center;
  gap:10px;
}
.ina-eyebrow::before{
  content:"";
  width:16px;
  height:1px;
  background:var(--ina-brass);
  display:inline-block;
}
.ina-eyebrow.center{ justify-content:center; }
 
/* ---------- Mono utility text (coordinates, file numbers, fine print) ---------- */
.ina-mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.04em;
  color:var(--ina-text-muted);
}
 
/* ---------- Sticky header: translucent + blur ----------
   Apply "ina-header" as a CSS Class on the Theme Builder header Container. */
.ina-header{
  background:rgba(250,248,244,0.82) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ina-line);
}
 
/* ---------- Primary button (brass fill) ----------
   Apply "ina-btn-primary" as a CSS Class on an Elementor Button widget. */
.ina-btn-primary.elementor-button{
  background:var(--ina-brass) !important;
  color:var(--ina-on-accent) !important;
  font-weight:600;
  border-radius:2px;
  transition:background 0.2s ease;
}
.ina-btn-primary.elementor-button:hover{
  background:#93672E !important;
  color:var(--ina-on-accent) !important;
}
 
/* ---------- Secondary / outline button ----------
   Apply "ina-btn-secondary" as a CSS Class on an Elementor Button widget. */
.ina-btn-secondary.elementor-button{
  background:transparent !important;
  border:1px solid var(--ina-line) !important;
  color:var(--ina-text) !important;
  border-radius:2px;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.ina-btn-secondary.elementor-button:hover{
  border-color:var(--ina-brass-dim) !important;
  background:var(--ina-ink-panel) !important;
}
 
/* ---------- Nav "Make a Payment" pill (outline that fills brass on hover) ----------
   Apply "ina-btn-pay" as a CSS Class on the header Button widget. */
.ina-btn-pay.elementor-button{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px !important;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:transparent !important;
  border:1px solid var(--ina-brass-dim) !important;
  color:var(--ina-brass) !important;
  border-radius:2px;
  padding:10px 18px !important;
}
.ina-btn-pay.elementor-button:hover{
  background:var(--ina-brass) !important;
  color:var(--ina-on-accent) !important;
  border-color:var(--ina-brass) !important;
}
 
/* ---------- Stat strip (hero bottom row) ----------
   Wrap 4 Elementor columns in a Container with class "ina-stat-strip". */
.ina-stat-strip{
  border-top:1px solid var(--ina-line);
}
.ina-stat-strip > .elementor-column{
  border-right:1px solid var(--ina-line);
}
.ina-stat-strip > .elementor-column:last-child{
  border-right:none;
}
.ina-stat-num{
  font-family:'Fraunces', serif;
  font-size:30px;
  color:var(--ina-brass);
}
.ina-stat-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ina-text-muted);
  margin-top:6px;
}
 
/* ---------- Service card (docket-style hover) ----------
   Apply "ina-service-card" as a CSS Class on each Icon Box widget's
   parent Container (or the Icon Box itself if using Container-per-card). */
.ina-service-card{
  background:var(--ina-ink);
  border:1px solid var(--ina-line);
  transition:background 0.25s ease;
}
.ina-service-card:hover{
  background:var(--ina-ink-panel);
}
.ina-service-filenum{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ina-brass-dim);
  letter-spacing:0.08em;
}
 
/* ---------- CTA band background glow ----------
   Apply "ina-cta-band" as a CSS Class on the CTA section Container. */
.ina-cta-band{
  background:linear-gradient(120deg, var(--ina-ink-panel-2), var(--ina-ink-panel));
  position:relative;
  overflow:hidden;
}
.ina-cta-band::before{
  content:"";
  position:absolute;
  top:-40%; left:50%;
  width:900px; height:900px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(169,121,63,0.10), transparent 60%);
  pointer-events:none;
}
 
/* ---------- Footer socials (circular icon links) ----------
   Apply "ina-social" as a CSS Class on the Social Icons widget wrapper. */
.ina-social a{
  border:1px solid var(--ina-line) !important;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.ina-social a:hover{
  border-color:var(--ina-brass) !important;
  color:var(--ina-brass) !important;
}

/* ==========================================================================
   INA — ADDITIONAL CUSTOM CSS FOR LONG-FORM SERVICE PAGES
   (Security Services, and any future detail page with the same pattern)
 
   Where this goes: Appearance > Customize > Additional CSS
   — APPEND this to the end of the file where you already pasted
   site-custom-css.css from the homepage package. Don't replace that file,
   add to it. These are new classes; nothing here conflicts with what's
   already there.
   ========================================================================== */
 
/* ---------- Page header (photo-free "sub-hero" for interior pages) ----------
   Apply "ina-page-header" as a CSS Class on the section Container at the
   top of any interior page (breadcrumb + eyebrow + heading + intro). */
.ina-page-header{
  border-bottom:1px solid var(--ina-line);
}
.ina-breadcrumb{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--ina-text-muted);
  letter-spacing:0.04em;
}
.ina-breadcrumb a{ color:var(--ina-text-muted); }
.ina-breadcrumb a:hover{ color:var(--ina-brass); }
.ina-breadcrumb .current{ color:var(--ina-text); }
 
/* ---------- Video frame ----------
   Apply "ina-video-frame" as a CSS Class on the Container that holds
   Elementor's native Video widget. */
.ina-video-frame{
  border:1px solid var(--ina-line);
  padding:10px;
  background:var(--ina-ink-panel);
  max-width:820px;
}
.ina-video-caption{
  margin-top:14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ina-text-muted);
  letter-spacing:0.02em;
}
.ina-video-caption strong{ color:var(--ina-text); font-weight:500; }
 
/* ---------- Docket list (long-form entries: icon/number + heading + body) ----------
   Apply "ina-docket-item" as a CSS Class on EACH entry's Container.
   Each Container should have two columns inside it: a narrow left column
   (file number + icon) and a wide right column (heading + paragraphs). */
.ina-docket-item{
  border-top:1px solid var(--ina-line);
  padding:56px 0 !important;
}
.ina-docket-filenum{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ina-brass-dim);
  letter-spacing:0.08em;
}
.ina-docket-icon{
  color:var(--ina-brass);
  width:30px;
  height:30px;
}
.ina-docket-item h3{
  font-family:'Fraunces', serif;
  font-size:24px;
  font-weight:500;
  color:var(--ina-text);
  margin-bottom:16px;
}
.ina-docket-item p{
  color:var(--ina-text-muted);
  font-size:15.5px;
  max-width:680px;
}
.ina-docket-item p + p{ margin-top:14px; }
 
/* ---------- Resource/whitepaper link (small brass link with underline) ----------
   Apply "ina-resource-link" as a CSS Class on a Text Editor or Button
   widget used as an inline link beneath a docket entry's copy. */
.ina-resource-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--ina-brass) !important;
  border-bottom:1px solid var(--ina-brass-dim);
  padding-bottom:2px;
}
.ina-resource-link:hover{
  color:var(--ina-on-accent) !important;
  border-color:var(--ina-on-accent);
}

/* ---------- Quick-jump nav (tag-style links to each docket entry) ----------
   Apply "ina-quicknav" as a CSS Class on the Container that wraps the
   jump links. Apply "ina-quicknav-item" to each individual Button widget
   inside it (one per docket entry, href="#file-01" etc.). Each docket
   item's Container needs a matching CSS ID (file-01, file-02, ...) set
   in its Advanced tab — see the guide for exact steps. */
.ina-quicknav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:36px 0;
  border-top:1px solid var(--ina-line);
  border-bottom:1px solid var(--ina-line);
}
.ina-quicknav-label{
  width:100%;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ina-text-muted);
  margin-bottom:6px;
}
.ina-quicknav-item.elementor-button{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  background:transparent !important;
  border:1px solid var(--ina-line) !important;
  border-radius:2px;
  padding:9px 14px !important;
  font-family:'Inter', sans-serif !important;
  font-size:13px !important;
  font-weight:400 !important;
  color:var(--ina-text) !important;
  transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ina-quicknav-item.elementor-button:hover{
  border-color:var(--ina-brass) !important;
  background:var(--ina-ink-panel) !important;
  color:var(--ina-brass) !important;
}
.ina-quicknav-item .ina-quicknav-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ina-brass-dim);
}