/*
 * Site chrome for the two static pages (/services -> services.html,
 * /hr-services -> hr-services.html): the footer, the mobile-menu buttons and
 * the floating WhatsApp button and sales bar.
 *
 * These are the rules of app/styles/home-v2.css that style FooterV2,
 * NavigationV2's mobile menu and FloatersV2, with the .hv2-root scope replaced by the
 * footer's own class (tn-ft) and the v2 colour tokens written out, so the
 * static pages render the same footer as every other page without loading
 * the v2 stylesheet. If FooterV2 or those rules change, change this too.
 *
 * The footer markup in both HTML files is FooterV2's; public/tools/cms-fill.js
 * fills its contact details, social links and bottom line from Site Settings.
 */

/* v2 base, applied to the footer only (home-v2.css applies it to .hv2-root) */
footer.tn-ft, footer.tn-ft *, footer.tn-ft *::before, footer.tn-ft *::after { box-sizing:border-box;margin:0;padding:0 }
footer.tn-ft { font-family:'Jost',sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-align:left }
footer.tn-ft a { color:inherit;text-decoration:none }

footer.tn-ft { background:#0d1b35;color:rgba(255,255,255,.6);padding:4rem 2rem 0;border-top:none }
.tn-ft .ft-inner { max-width:1200px;margin:0 auto }
.tn-ft .ft-top { display:grid;grid-template-columns:1.4fr 1fr 1.9fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.08) }
.tn-ft .ft-brand-name { font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;color:#ffffff;margin-bottom:.2rem }
.tn-ft .ft-brand-name span { color:#d4aa45 }
.tn-ft .ft-brand-tag { font-size:.72rem;color:rgba(255,255,255,.3);letter-spacing:.1em;margin-bottom:1rem }
.tn-ft .ft-desc { font-size:.8rem;color:rgba(255,255,255,.4);line-height:1.72;margin-bottom:1.25rem }
.tn-ft .ft-cl { list-style:none;display:flex;flex-direction:column;gap:.6rem }
.tn-ft .ft-cl li { display:flex;align-items:flex-start;gap:.6rem;font-size:.78rem;color:rgba(255,255,255,.45) }
.tn-ft .ft-cl li svg { width:13px;height:13px;stroke:#d4aa45;fill:none;stroke-width:2;flex-shrink:0;margin-top:.2rem }
.tn-ft .ft-cl li a { color:rgba(255,255,255,.6);transition:color .25s ease }
.tn-ft .ft-cl li a:hover { color:#d4aa45 }
.tn-ft .ft-social { list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem }
.tn-ft .ft-social[hidden] { display:none }
.tn-ft .ft-social a { width:32px;height:32px;border-radius:4px;border:1px solid rgba(184,146,42,.3);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);transition:color .25s ease,border-color .25s ease,background .25s ease }
.tn-ft .ft-social a:hover { color:#d4aa45;border-color:#d4aa45;background:rgba(184,146,42,.08) }
.tn-ft .ft-social svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
.tn-ft .ft-col h5 { font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#d4aa45;margin-bottom:1rem;font-weight:700;font-family:'Jost',sans-serif }
.tn-ft .ft-links { list-style:none;display:flex;flex-direction:column;gap:.5rem }
.tn-ft .ft-links li a { font-size:.79rem;color:rgba(255,255,255,.4);transition:color .25s ease;display:inline-flex;align-items:center;gap:.35rem }
.tn-ft .ft-links li a:hover { color:#ffffff }
.tn-ft .ft-links li a::before { content:'›';color:#d4aa45 }
.tn-ft .ft-mid { padding:1.5rem 0;border-bottom:1px solid rgba(255,255,255,.06);display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center }
.tn-ft .ft-badge { display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:rgba(255,255,255,.35) }
.tn-ft .ft-badge svg { width:13px;height:13px;stroke:#d4aa45;fill:none;stroke-width:2 }
.tn-ft .ft-bot { padding:1.5rem 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem }
.tn-ft .ft-bot p { font-size:.74rem;color:rgba(255,255,255,.25) }
.tn-ft .ft-legal { display:flex;gap:1.25rem;flex-wrap:wrap }
.tn-ft .ft-legal a { font-size:.73rem;color:rgba(255,255,255,.35);transition:color .25s ease }
.tn-ft .ft-legal a:hover { color:#d4aa45 }
/* All 14 practice areas in two columns, as on every other page. */
.tn-ft .ft-links--pa { display:grid;grid-template-columns:1fr 1fr;column-gap:1.25rem }
.tn-ft .ft-count { font-weight:400;opacity:.6 }
@media (max-width:1100px) {
  .tn-ft .ft-top { grid-template-columns:1fr 1fr;gap:2rem }
  .tn-ft .ft-col--pa { grid-column:span 2 }
}
@media (max-width:600px) {
  .tn-ft .ft-top { grid-template-columns:1fr }
  .tn-ft .ft-col--pa { grid-column:auto }
  footer.tn-ft { padding:3rem 1.25rem 0 }
}
@media (max-width:360px) { .tn-ft .ft-links--pa { grid-template-columns:1fr } }

/* Mobile menu: the rows themselves (.mob-link, .mob-sub-toggle, .mob-sub)
   are styled by each page's copy of the nav CSS; these are the pieces that
   depended on the v2 base (.hv2-root and globals.css on the React pages:
   Jost at line-height 1.65, buttons inheriting it, links inheriting their
   colour), so the rows and buttons come out the same height. The :where()
   keeps the link rule weaker than .mob-link's own colour. */
#tn-mob-menu { font-family:'Jost',sans-serif;line-height:1.65 }
#tn-mob-menu button { font-family:'Jost',sans-serif;line-height:inherit }
:where(#tn-mob-menu) a { color:inherit }
.mob-menu a { text-decoration:none }
.mob-menu .btn-gold { background:#b8922a;color:#ffffff;border:none;padding:.82rem 2rem;font-family:'Jost',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;border-radius:4px;transition:all .25s ease;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;line-height:1.65 }
.mob-menu .btn-gold:hover { background:#d4aa45 }
.mob-menu .btn-nav-wa { font-family:'Jost',sans-serif }

/* The published SEO OS block (filled by cms-fill.js; hidden until then). */
.tn-seo { background:#faf7f2;padding:4rem 1.5rem;font-family:'Jost',sans-serif }
.tn-seo[hidden] { display:none }
.tn-seo-inner { max-width:860px;margin:0 auto }
.tn-seo-tag { font-size:.69rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#b8922a;margin-bottom:.8rem }
.tn-seo h2 { font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;color:#0d1b35;line-height:1.2;margin:0 0 .8rem }
.tn-seo-divider { width:44px;height:2px;background:#b8922a;opacity:.85;margin:.8rem 0 1.5rem }
.tn-seo-body { color:#3d4a63;font-size:.95rem;line-height:1.85;font-weight:300 }
.tn-seo-body p, .tn-seo-body ul, .tn-seo-body ol, .tn-seo-body blockquote, .tn-seo-body table { margin:0 0 1rem }
.tn-seo-body h2, .tn-seo-body h3, .tn-seo-body h4 { font-family:'Playfair Display',serif;color:#0d1b35;margin:1.5rem 0 .6rem;line-height:1.3 }
.tn-seo-body h2 { font-size:1.4rem } .tn-seo-body h3 { font-size:1.2rem } .tn-seo-body h4 { font-size:1.05rem }
.tn-seo-body ul, .tn-seo-body ol { padding-left:1.4rem }
.tn-seo-body ul { list-style:disc } .tn-seo-body ol { list-style:decimal }
.tn-seo-body li { margin-bottom:.35rem }
.tn-seo-body strong, .tn-seo-body b { font-weight:600;color:#0d1b35 }
.tn-seo-body a[href] { color:#b8922a;text-decoration:underline }
.tn-seo-body blockquote { padding-left:1rem;font-style:italic;color:#6b7c99 }
.tn-seo-body table { border-collapse:collapse;width:100%;display:block;overflow-x:auto }
.tn-seo-body th, .tn-seo-body td { border:1px solid #e8e2d6;padding:.5rem .75rem;text-align:left }

/* Floating WhatsApp button and sales bar: FloatersV2's rules from
   app/styles/home-v2.css, without the .hv2-root scope and with the v2
   tokens written out. Behaviour (show after 420px, lift the button above
   the bar) is in site-chrome.js. If FloatersV2 or those rules change,
   change this too. */
#wa-float { position:fixed;bottom:24px;right:24px;z-index:400;width:52px;height:52px;padding:0;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.35);cursor:pointer;transition:transform .25s ease,bottom .35s ease;text-decoration:none }
#wa-float:hover { transform:scale(1.1) }
#wa-float.lift { bottom:calc(var(--sticky-h, 64px) + 14px) }
/* Admin -> Site Settings -> "Show floating WhatsApp button" off: cms-fill
   sets the hidden attribute, which the display:flex above would override. */
[data-setting-float][hidden] { display:none !important }
#sticky-cta { position:fixed;bottom:0;left:0;right:0;z-index:390;box-sizing:border-box;background:#0d1b35;border-top:2px solid #b8922a;padding:.8rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;transform:translateY(100%);transition:transform .35s ease;flex-wrap:wrap;font-family:'Jost',sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-align:left }
#sticky-cta.show { transform:translateY(0) }
#sticky-cta * { box-sizing:border-box;margin:0 }
#sticky-cta a { text-decoration:none;color:inherit }
#sticky-cta .sc-text { font-size:.83rem;color:rgba(255,255,255,.7) }
#sticky-cta .sc-text strong { color:#ffffff;font-weight:700 }
#sticky-cta .sc-btns { display:flex;gap:.6rem;flex-wrap:wrap }
#sticky-cta .sc-wa { display:inline-flex;align-items:center;gap:.4rem;background:#25D366;color:#fff;border:none;padding:.56rem 1.1rem;font-family:'Jost',sans-serif;font-size:.76rem;font-weight:600;line-height:1.65;letter-spacing:normal;text-transform:none;border-radius:4px;cursor:pointer }
#sticky-cta .sc-book { background:transparent;color:#d4aa45;border:1px solid #b8922a;padding:.56rem 1.1rem;font-family:'Jost',sans-serif;font-size:.76rem;font-weight:500;line-height:1.65;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;transition:all .25s ease;cursor:pointer }
#sticky-cta .sc-book:hover { background:#b8922a;color:#ffffff }
@media print { #wa-float, #sticky-cta { display:none !important } }