/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/* =========================================================
   HERO H1 — responsive scaling
   ========================================================= */
@media (max-width: 1199px) {
  div[style*="max-width: 880px"] > h1 { font-size: 72px !important; }
}
@media (max-width: 767px) {
  div[style*="max-width: 880px"] > h1 { font-size: 48px !important; }
  div[style*="max-width: 880px"] > p { font-size: 20px !important; }
}
/* Vertical column rule between columns — Edge #C4BCA8 0.5pt */
.position-grid > div + div { border-left: 0.5px solid #C4BCA8; }
@media (max-width: 767px) {
  .position-grid > div + div { border-left: none; border-top: 0.5px solid #C4BCA8; padding-top: 32px; margin-top: 32px; }
}
/* Tablet and mobile: vertical column rules become horizontal Edge hairlines between stacked blocks */
@media (max-width: 1199px) {
  /* Remove the vertical rules on Column 2 */
  .position-col-middle { border-left: none !important; border-right: none !important; padding: 0 !important; }
  /* Add horizontal Edge hairline above Columns 2 and 3 (Column 1 carries the section opening) */
  .position-col-middle, .position-col-third { border-top: 0.5px solid #C4BCA8; padding-top: 32px !important; margin-top: 32px; }
  /* Restore standard side padding for stacked blocks */
  .position-col-first, .position-col-third { padding-left: 0 !important; padding-right: 0 !important; }
}
/* =========================================================
   TEEL & COMPANY — LINK UNDERLINE DISCIPLINE OVERRIDE
   Open Items Log: TC-005 (April 28, 2026)
   Visual Style Guide / The Counsel
   ========================================================= 

Discipline:
  Links render WITHOUT underlines in their default state.
  Underline appears on hover only.
  Buttons never carry underlines (use background fill or border).
  The wordmark in navigation is identity, never carries underline.

Where to install (in priority order):
  1. HubSpot theme custom-CSS panel (canonical; travels with theme).
  2. Settings → Website → Pages → System Templates → Head HTML
     (interim; wrap in <style> tags before pasting).
  3. Page-level Custom HTML module (least durable; per-page).

References:
  Open Items Log TC-005 (governance trail)
  Open Items Log TC-003 (HubSpot Theme Configuration; will absorb this CSS)
  Visual Style Guide / The Counsel — Part XI Visual Language
========================================================= */


/* ---------------------------------------------------------
   1. GLOBAL LINK RESET — remove default underline
   --------------------------------------------------------- */

a,
a:link,
a:visited {
  text-decoration: none;
}


/* ---------------------------------------------------------
   2. HOVER + FOCUS — restore underline as interaction signal
      Focus retained for keyboard accessibility (WCAG 2.1)
   --------------------------------------------------------- */

a:hover,
a:focus {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}


/* ---------------------------------------------------------
   3. BUTTONS — never carry underline (background/border affordance)
   --------------------------------------------------------- */

a.button,
a.cta-button,
a[class*="button"],
.hs-button,
.hs-cta-wrapper a,
button,
button:hover,
button:focus {
  text-decoration: none !important;
}


/* ---------------------------------------------------------
   4. WORDMARK / NAVIGATION IDENTITY — wordmark is identity, not link
   --------------------------------------------------------- */

.nav-wordmark,
.nav-wordmark:hover,
.nav-wordmark:focus,
header a[href="/"],
header a[href="/"]:hover,
header a[href="/"]:focus {
  text-decoration: none !important;
}


/* ---------------------------------------------------------
   5. INLINE BODY LINKS — Sealwax accent on light fields
      Affordance carried by color before hover; border on hover
   --------------------------------------------------------- */

.hs-richtext a,
.rich-text a,
article a,
main p a {
  color: #6B1F1B; /* Sealwax — light-field accent */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.hs-richtext a:hover,
.rich-text a:hover,
article a:hover,
main p a:hover {
  text-decoration: none;
  border-bottom: 1px solid #6B1F1B;
}


/* ---------------------------------------------------------
   6. DARK-FIELD LINKS — inherit color from inline element styles
      Surfaces: Hero (Oakgall), Inquiry (Oakgall), 
                Operating Relationships (Sepia), Footer (Inkwell)
   --------------------------------------------------------- */

.hero a,
.inquiry a,
.or a,
.footer a {
  color: inherit;
}


/* =========================================================
   END — TC-005 LINK UNDERLINE DISCIPLINE OVERRIDE
   ========================================================= */
/* =========================================================
   HERO PADDING OVERRIDE — force section padding values
   Change the two custom properties below to set any value you want
   ========================================================= */

:root {
  --hero-padding-top: 500px;
  --hero-padding-bottom: 50px;
}

/* Apply to any section with the hero class — use the most specific
   selectors and !important to defeat Brightlane's hard-coded values */

section.hero,
.hero-section,
section[class*="hero"],
.hs-section--hero,
body .hero,
body .dnd-section.hero,
body .dnd-section[class*="hero"] {
  padding-top: var(--hero-padding-top) !important;
  padding-bottom: var(--hero-padding-bottom) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Also defeat any inner-row padding the theme may add */
section.hero > .row-fluid-wrapper,
.hero-section > .row-fluid-wrapper,
section[class*="hero"] > .row-fluid-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Responsive — preserve your values at all breakpoints
   Comment out the @media blocks if you want mobile to auto-scale */
@media (max-width: 1199px) {
  section.hero,
  .hero-section,
  section[class*="hero"] {
    padding-top: var(--hero-padding-top) !important;
    padding-bottom: var(--hero-padding-bottom) !important;
  }
}

@media (max-width: 767px) {
  section.hero,
  .hero-section,
  section[class*="hero"] {
    padding-top: var(--hero-padding-top) !important;
    padding-bottom: var(--hero-padding-bottom) !important;
  }
}
/* =========================================================
   HERO H1—responsive scaling
   ========================================================= */
@media (max-width: 1199px) {
  div[style*="max-width: 760px"] > h1 { font-size: 56px !important; }
}
@media (max-width: 767px) {
  div[style*="max-width: 760px"] > h1 { font-size: 44px !important; }
}
/* =========================================================
   CARDS-tablet and mobile responsive scaling
   ========================================================= */
/* Tablet and mobile: cards stack vertically with 24px vertical gap */
@media (max-width: 1199px) {
  /* Card grid collapse handled by parent flex/grid container */
  /* H2 scales per Counsel typography */
}
@media (max-width: 767px) {
  div[style*="max-width: 1080px"] h2 { font-size: 32px !important; }
  div[style*="max-width: 1080px"] p[style*="font-size: 19px"] { font-size: 17px !important; }
}
/* =========================================================
   COMPARISON TABLE—mobile responsive (Section 03 — CPA Firms)
   At <960px, each row stacks as a labeled card-set.
   Selector pattern for ::before labels uses compound
   nth-child(N):nth-last-child(M) to match ONLY 4-column tables
   (Dimension + 3 content columns). This prevents collision with
   Section 04's 3-column Fractional table — HubSpot consolidates
   Custom HTML module <style> blocks into global page CSS, so
   selectors must be mutually exclusive between the two tables.
   ========================================================= */
@media (max-width: 959px) {
  div[style*="max-width: 1080px"] table thead { display: none; }
  div[style*="max-width: 1080px"] table tbody,
  div[style*="max-width: 1080px"] table tr,
  div[style*="max-width: 1080px"] table td { display: block; width: 100%; }
  div[style*="max-width: 1080px"] table tr { background: #FFFCF6; margin-bottom: 24px; padding: 16px; border: 0.5px solid #C7C0AF; }
  div[style*="max-width: 1080px"] table tbody td { border-bottom: none; padding: 8px 0; }
  /* 4-column-only ::before labels: nth-child(N):nth-last-child(M) compound selectors */
  div[style*="max-width: 1080px"] table tbody td:nth-child(2):nth-last-child(3)::before { content: 'Conventional CPA Firms'; display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #807468; margin-bottom: 4px; }
  div[style*="max-width: 1080px"] table tbody td:nth-child(3):nth-last-child(2)::before { content: 'Client Advisory Services Practices'; display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #807468; margin-bottom: 4px; }
  div[style*="max-width: 1080px"] table tbody td:nth-child(4):last-child::before { content: 'Teel & Company'; display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #1B1612; margin-bottom: 4px; }
}
//* =========================================================
   FRACTIONALS COMPARISON TABLE—mobile responsive (Section 04)
   At <960px, each row stacks as a labeled card-set.
   Selector pattern for ::before labels uses compound
   nth-child(N):nth-last-child(M) to match ONLY 3-column tables
   (Dimension + 2 content columns). This prevents collision with
   Section 03's 4-column CPA Firms table — HubSpot consolidates
   Custom HTML module <style> blocks into global page CSS, so
   selectors must be mutually exclusive between the two tables.
   The generic stacking rules below are identical to Section 03's
   block; redeclaration is idempotent (same property values, same
   selectors) and ensures Section 04's module is self-sufficient
   at deployment regardless of module load order.
   ========================================================= */
@media (max-width: 959px) {
  div[style*="max-width: 1080px"] table thead { display: none; }
  div[style*="max-width: 1080px"] table tbody,
  div[style*="max-width: 1080px"] table tr,
  div[style*="max-width: 1080px"] table td { display: block; width: 100%; }
  div[style*="max-width: 1080px"] table tr { background: #FFFCF6; margin-bottom: 24px; padding: 16px; border: 0.5px solid #C7C0AF; }
  div[style*="max-width: 1080px"] table tbody td { border-bottom: none; padding: 8px 0; }
  /* 3-column-only ::before labels: nth-child(N):nth-last-child(M) compound selectors */
  div[style*="max-width: 1080px"] table tbody td:nth-child(2):nth-last-child(2)::before { content: 'Fractional Executives'; display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #807468; margin-bottom: 4px; }
  div[style*="max-width: 1080px"] table tbody td:nth-child(3):last-child::before { content: 'Teel & Company'; display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #1B1612; margin-bottom: 4px; }
}
/* =========================================================
   ARCHITECTURE GRID—mobile responsive
   Desktop 4-col / tablet 2x2 / mobile 1x4 stack
   ========================================================= */
@media (max-width: 1199px) {
  /* Tablet: 2x2 grid; handled by parent grid container */
}
@media (max-width: 767px) {
  /* Mobile: 1x4 stack; handled by parent grid container */
  div[style*="max-width: 1080px"] h2 { font-size: 32px !important; }
}
/* =========================================================
   TAX + TECHNICAL ACCOUNTING GRID—mobile responsive
   Desktop 4-col / tablet 2x2 / mobile 1x4 stack
   ========================================================= */
@media (max-width: 1199px) {
  /* Tablet: 2x2 grid; handled by parent grid container */
}
@media (max-width: 767px) {
  /* Mobile: 1x4 stack; handled by parent grid container */
}
/* =========================================================
   WHO TEEL & COMPANY SERVES GRID—mobile responsive
   ========================================================= */
@media (max-width: 1199px) {
  /* Cards stack via parent grid container */
}
@media (max-width: 767px) {
  div[style*="max-width: 1080px"] h2 { font-size: 32px !important; }
}
@media (max-width: 1199px) {
  div[style*="max-width: 760px"] > h1 { font-size: 40px !important; }
}
@media (max-width: 767px) {
  div[style*="max-width: 760px"] > h1 { font-size: 32px !important; }
  div[style*="max-width: 760px"] > p { font-size: 19px !important; }
}