/* Thistle & Oak | Small, self-contained, responsive static website.
   No web fonts, external CSS, cookies or paid dependencies. */
:root {
  color-scheme: light;
  --navy: #102631;
  --navy-dark: #0a1d27;
  --navy-light: #24414b;
  --gold: #d4ac7d;
  --gold-light: #ebc99b;
  --cream: #f8f4ee;
  --paper: #fffdfa;
  --ink: #162b33;
  --muted: #53616a;
  --line: #e7dfd4;
  --shadow: 0 12px 40px rgba(29,37,38,.08);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #8b6132; outline-offset: 4px; }
button, input, textarea { font: inherit; }
button, .button { cursor: pointer; }
::selection { background: #ead5b9; color: #071923; }
.container { width: min(100% - 48px, 1180px); margin-inline: auto; }
.visually-hidden { position: absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
.skip-link { position: fixed; z-index: 100; top: -200px; left: 15px; background: #fff; padding: 12px 20px; border-radius: 5px; }
.skip-link:focus { top: 12px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.034em; line-height: 1.12; }
h1 { font-size: clamp(2.7rem, 5.7vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 3.2vw, 3.35rem); }
h3 { font-size: 1.35rem; line-height: 1.25; }
p { margin-bottom: 1.2em; }
.eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: .18em; color: var(--gold-light); font-size: .72rem; font-weight: 750; margin-bottom: 17px; }
.eyebrow-dark { color: #926a3c; }

/* Header / navigation */
.site-header { position: relative; background: var(--navy-dark); color: #f9f1e7; z-index: 10; border-bottom: 1px solid rgba(255,255,255,.085); }
.header-inner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand-mark { width: 54px; height: 54px; object-fit: contain; filter: brightness(0) saturate(100%) invert(88%) sepia(12%) saturate(568%) hue-rotate(335deg) brightness(103%); }
.brand-wordmark { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font: 400 clamp(1.36rem, 2.2vw, 2rem)/1.13 var(--serif); white-space: nowrap; letter-spacing: -.025em; }
.brand-name .amp { color: var(--gold-light); }
.brand-descriptor { margin-top: 6px; text-transform: uppercase; font-size: .62rem; letter-spacing: .255em; color: var(--gold-light); font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.7vw, 38px); }
.site-nav a { text-decoration: none; color: #e9e7e4; font-size: .91rem; font-weight: 600; padding: 12px 1px; position: relative; }
.site-nav a:not(.nav-cta)::after { content: ''; position: absolute; height: 2px; bottom: 6px; left: 0; width: 0; background: var(--gold); transition: width .2s; }
.site-nav a:is(:hover,.active):not(.nav-cta)::after { width: 100%; }
.site-nav a.nav-cta { color: #0b1e25; background: var(--gold-light); padding: 10px 16px; border-radius: 5px; }
.site-nav a.nav-cta:hover { background: #f4d8ad; }
.site-nav .nav-cta span { margin-left: 8px; }
.menu-toggle { display:none; border: 1px solid rgba(255,255,255,.28); background:transparent; width:44px; height:44px; border-radius:5px; padding:11px; flex-direction:column; justify-content:space-between; }
.menu-toggle span { display:block; height:2px; width:100%; background:#f2e4d0; border-radius:2px; }

/* Hero */
.hero { color: white; background: var(--navy); }
.hero-art {
  aspect-ratio: 1794 / 582;
  height: auto;
  background-image:
    linear-gradient(
      180deg,
      rgba(10,29,39,.02) 40%,
      rgba(10,29,39,.32) 100%
    ),
    url('../images/linkedin-banner.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-content { background: linear-gradient(160deg, #102631, #132e39 58%, #0b202a); border-top: 1px solid #203843; text-align: center; }
.hero-copy { padding-top: 55px; padding-bottom: 70px; }
.hero h1 { margin: 0 auto 21px; max-width: 960px; color: #f9f2e9; }
.hero-lead { max-width: 770px; margin: 0 auto 31px; color: #dfded9; font-size: clamp(1.04rem, 1.65vw, 1.25rem); line-height: 1.65; }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap: 12px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap: 25px; padding: 13px 25px; border-radius: 7px; text-decoration: none; font-size: .97rem; font-weight: 750; border: 1px solid transparent; min-height: 51px; transition: background .18s, transform .18s, box-shadow .18s; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-gold { color: #0b2029; background: linear-gradient(180deg, #efc997, #cf9e65); border-color: #d9aa73; box-shadow: 0 3px 0 rgba(0,0,0,.05); }
.button-gold:hover { background: linear-gradient(180deg, #f6dab3, #e3b982); }
.button-outline { border: 1px solid rgba(242,225,197,.58); background: transparent; color: #f8f1e7; }
.button-outline:hover { background: rgba(255,255,255,.09); }
.hero-note { font-size: .82rem; color: #bfcbd0; margin: 23px 0 0; }

/* General sections */
.section { padding: clamp(65px, 8vw, 112px) 0; }
.section-heading { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.section-heading h2 { margin-bottom: 15px; }
.section-heading > p:last-child { color: var(--muted); margin-bottom: 0; }
.section-benefits { background: var(--cream); padding-bottom: 80px; }
.benefits-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:20px; }
.benefit-card { background: #fffcf7; border:1px solid #e6dbce; border-radius: 13px; padding: 29px 24px 27px; text-align:center; box-shadow: 0 5px 22px rgba(30,44,47,.045); }
.benefit-icon { display:flex; margin:0 auto 18px; justify-content:center; align-items:center; height:62px; width:62px; border-radius:50%; background:#f5eadd; color:#233944; }
.benefit-icon svg { height:36px; width:36px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.benefit-card h3 { font-family:var(--serif); font-size:1.52rem; font-weight:600; margin-bottom: 12px; }
.benefit-card p { color: var(--muted); font-size:.98rem; margin:0; }
.section-process { background: #eee7dd; border-block: 1px solid #e7ddd0; }
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: 37px; }
.steps li { display:flex; align-items:flex-start; gap:17px; }
.step-number { flex:none; font: 500 1rem/1 var(--serif); display:grid; place-items:center; height:46px; width:46px; border-radius:50%; background:var(--navy); color:#f2dfc3; }
.steps h3 { font: 600 1.37rem/1.25 var(--serif); margin-bottom: 12px; }
.steps p { font-size:.96rem; color:var(--muted); margin:0; }
.section-about { background: #fffcf7; }
.about-grid { display:grid; grid-template-columns: 310px 1fr; gap: clamp(45px, 7vw, 100px); align-items:center; max-width:1000px; }
.portrait-frame { border-radius:50%; aspect-ratio:1/1; border:10px solid #ede4d6; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,.1); }
.portrait-frame img { width:100%; height:100%; object-fit:cover; }
.about-copy h2 { margin-bottom:21px; }
.about-copy p:not(.eyebrow) { color:#4f5b60; max-width:650px; margin-bottom: 1em; }
.text-link { color:#183440; font-weight:700; text-underline-offset:5px; text-decoration-color:#be8f5b; }
.text-link span { text-decoration:none; margin-left:7px; }
.closing-cta { background: #18333d; color:#f9efe1; padding:68px 0; }
.closing-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.closing-inner h2 { font-size: clamp(2rem, 3.5vw, 3.4rem); max-width:700px; margin-bottom:15px; }
.closing-inner p:last-child { color:#d7d9d5; margin-bottom:0; }
.closing-inner > .button { flex:none; }

/* Balanced coaching and regulated-advice comparison. Cards are 48% / 52%. */
.section-comparison { background: #102631; color: #f7f2e9; }
.section-comparison .section-heading { max-width: 890px; }
.section-comparison .section-heading h2 { color: #f8efe4; }
.section-comparison .section-heading > p:last-child { color: #d4dedf; }
.comparison-frame { border: 1px solid #51636a; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.14); }
.comparison-cards { display: grid; grid-template-columns: 48fr 52fr; }
.comparison-card { padding: clamp(28px,3.2vw,48px); background: #243b45; min-width: 0; }
.comparison-advice { border-right: 1px solid rgba(249,242,231,.22); }
.comparison-coaching { background: #2c434d; }
.comparison-card h3 { font: 500 clamp(1.8rem,2.6vw,2.45rem)/1.16 var(--serif); margin-bottom: 23px; color: #fcf6ec; }
.comparison-card p { font-size: 1.01rem; line-height: 1.7; color: #e7e9e6; margin: 0 0 17px; }
.comparison-card p:last-child { margin-bottom: 0; }
.comparison-card .comparison-highlight { color: #f0d0a5; margin-top: 28px; font-weight: 600; }
.comparison-card .comparison-emphasis { color: #f8d7ad; font-weight: 700; }
.comparison-answer { background: #f6f0e7; color: var(--ink); border-top: 1px solid #c9b8a1; padding: clamp(26px,3.2vw,45px) clamp(28px,4.4vw,65px); }
.comparison-answer h3 { font: 500 clamp(1.8rem,2.6vw,2.4rem)/1.2 var(--serif); margin-bottom: 16px; }
.comparison-answer p { max-width: 1000px; color: #42535a; margin-bottom: 12px; font-size: .99rem; }
.comparison-answer p:last-child { margin-bottom: 0; }
.comparison-answer strong { color: var(--ink); }

/* Internal-page banner and contact form */
.page-hero { background:var(--navy); color:#fff; }
.page-art { height: 165px; background: url('../images/linkedin-banner.jpg') center 39% / cover no-repeat; }
.page-heading { text-align:center; padding:38px 0 55px; }
.page-heading h1 { font-size: clamp(2.75rem,4.5vw,4.3rem); margin-bottom:18px; }
.page-heading > p:last-child { color:#e0e4e3; font-size:1.1rem; max-width:710px; margin:0 auto; }
.contact-section { background:#f5f0e8; }
.contact-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr); gap:30px; align-items:start; }
.contact-form-card, .whatsapp-card, .aside-note { border:1px solid #e8ded2; border-radius:14px; background:#fffcf8; box-shadow:var(--shadow); }
.contact-form-card { padding:clamp(24px,4vw,52px); }
.contact-form-card h2 { margin-bottom:13px; font-size:clamp(2rem,3vw,3rem); }
.contact-intro { color:var(--muted); margin-bottom:30px; }
.form-field { margin-bottom:19px; }
.form-field label { display:block; margin-bottom:7px; font-size:.9rem; font-weight:750; color:#263840; }
.form-field label span { color:#986c3b; }
.form-field :is(input,textarea) { display:block; width:100%; border:1px solid #c7c3bd; border-radius:7px; background:#fff; color:#112a35; padding:12px 15px; min-height:49px; line-height:1.45; font-size:1rem; }
.form-field textarea { resize:vertical; min-height:139px; }
.form-field :is(input,textarea)::placeholder { color:#717a7d; }
.form-field :is(input,textarea):focus { border-color:#93683d; }
.form-submit { width:100%; margin-top:3px; }
.form-submit:disabled { cursor:wait; opacity:.65; }
.form-response { margin-top:17px; border:1px solid #aac9ba; background:#edf8f2; color:#173d2c; padding:13px 15px; border-radius:7px; font-size:.93rem; }
.form-response[data-kind="error"] { border-color:#e1b2a4; background:#fff1ed; color:#703b2e; }
.form-smallprint { display:flex; align-items:flex-start; gap:10px; color:#5f6260; font-size:.79rem; line-height:1.6; margin-top:23px; margin-bottom:0; }
.form-smallprint svg { flex:none; margin-top:2px; }
.form-smallprint a { font-weight:650; text-underline-offset:2px; }
.contact-aside { display:flex; flex-direction:column; gap:23px; }
.whatsapp-card { text-align:center; background:#edf1e7; border-color:#dce5d8; padding:35px 30px 29px; }
.whatsapp-icon { display:flex; justify-content:center; color:#1a6d3e; margin-bottom:10px; }
.whatsapp-card h2 { font-size:2.1rem; margin-bottom:11px; }
.whatsapp-card p { color:#4f5b54; font-size:.94rem; }
.button-whatsapp { background:#196b43; border-color:#196b43; color:#fff; width:100%; }
.button-whatsapp:hover { background:#125936; }
.whatsapp-subline { font-size:.79rem !important; margin:12px 0 0; }
.aside-note { padding:28px 32px; box-shadow:none; }
.aside-decoration { color:#9f7953; font-size:1.3rem; }
.aside-note h3 { font:600 1.45rem/1.3 var(--serif); margin:11px 0; }
.aside-note p { margin:0; color:var(--muted); font-size:.95rem; }
.small-landscape { min-height:180px; background:url('../images/linkedin-banner.jpg') center center / cover; border-radius:12px; }

.thanks-content { text-align: center; }

/* Privacy page */
.prose-section { background: var(--paper); }
.prose { max-width:780px; margin:0 auto; }
.prose h2 { margin:37px 0 15px; font-size:1.9rem; }
.prose p, .prose li { color:#46535a; }
.prose ul { padding-left:23px; }
.prose li { margin-bottom:7px; }
.prose a { color:#15536a; text-underline-offset:3px; }
.notice-note { background:#f7eddf; border-left:4px solid #bb9166; padding:17px 21px; font-size:.9rem; }

/* Footer */
.site-footer { background:#081b25; color:#f2e9dd; padding:35px 0 23px; }
.footer-main { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:25px; padding-bottom:31px; }
.footer-brand { display:flex; align-items:center; gap:11px; }
.footer-brand img { width:45px; height:44px; object-fit:contain; filter: brightness(0) invert(92%) sepia(14%) saturate(439%) hue-rotate(335deg); }
.footer-brand div { display:flex; flex-direction:column; }
.footer-brand div > span { font: 400 1.47rem/1.15 var(--serif); }
.footer-brand small { color:var(--gold-light); letter-spacing:.14em; text-transform:uppercase; font-size:.58rem; margin-top:4px; }
.footer-links { display:flex; align-items:center; flex-wrap:wrap; gap:23px; }
.footer-links a { color:#e4e5df; font-size:.88rem; text-underline-offset:4px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.13); display:flex; align-items:flex-start; justify-content:space-between; gap:45px; padding-top:21px; }
.footer-bottom p { color:#bfc9cb; font-size:.78rem; margin:0; }
.footer-bottom p:first-child { max-width:650px; }
.footer-bottom p:last-child { white-space:nowrap; }

@media (max-width: 900px) {
  .comparison-card { padding: 29px 24px; }
  .header-inner { min-height:82px; }
  .site-nav { gap:15px; }
  .brand-name { font-size:1.6rem; }
  .brand-descriptor { font-size:.56rem; }
  .benefit-card { padding:29px 20px; }
  .contact-grid { grid-template-columns:1fr; max-width:740px; }
  .contact-aside { flex-direction:row; align-items:stretch; flex-wrap:wrap; }
  .contact-aside > * { flex:1 1 280px; }
  .small-landscape { display:none; }
}
@media (max-width: 720px) {
  .comparison-cards { grid-template-columns: 1fr; }
  .comparison-coaching { order: -1; border-bottom: 1px solid rgba(249,242,231,.24); }
  .comparison-advice { border-right: 0; }
  .comparison-card { padding: 30px 26px; }
  .comparison-answer { padding: 30px 26px; }
  .contact-aside { display: contents; }
  .whatsapp-card { order: -1; }
  .contact-form-card { order: 0; }
  .aside-note { order: 1; }
  .section-benefits { padding-bottom: 60px; }
  .container { width:min(100% - 34px, 1180px); }
  .header-inner { min-height:72px; }
  .brand { gap:7px; }
  .brand-mark { height:43px; width:43px; }
  .brand-name { font-size:1.4rem; }
  .brand-descriptor { font-size:.47rem; letter-spacing:.19em; }
  .menu-toggle { display:flex; }
  .site-nav { display:none; position:absolute; top:100%; left:0; right:0; background:#0a1d27; padding:13px 17px 23px; flex-direction:column; align-items:stretch; gap:2px; box-shadow:0 14px 22px rgba(0,0,0,.17); }
  .site-nav.is-open { display:flex; }
  .site-nav a { padding:11px 13px; }
  .site-nav a:not(.nav-cta)::after { display:none; }
  .site-nav a.nav-cta { text-align:center; margin-top:8px; }

.hero-art {
  height: auto;
  aspect-ratio: 1794 / 582;
  background-position: center;
  background-size: cover;
}
  

  .hero-copy { padding-top:46px; padding-bottom:55px; }
  .hero h1 { font-size:clamp(2.65rem,9.5vw,4rem); }
  .hero-lead { font-size:1.02rem; }
  .hero-actions { flex-direction:column; align-items:stretch; max-width:370px; margin:0 auto; }
  .desktop-break { display:none; }
  .benefits-grid, .steps { grid-template-columns:1fr; gap:15px; }
  .benefit-card { padding:30px 27px; }
  .steps { gap:27px; max-width:480px; margin:auto; }
  .section-heading { margin-bottom:30px; }
  .section { padding:61px 0; }
  .about-grid { grid-template-columns:1fr; gap:35px; text-align:center; }
  .portrait-frame { width:min(58vw,235px); margin-inline:auto; border-width:8px; }
  .about-copy p:not(.eyebrow) { margin-inline:auto; }
  .closing-inner { flex-direction:column; text-align:center; gap:27px; }
  .page-art { height:130px; background-position: 35% 40%; }
  .page-heading { padding:32px 0 43px; }
  .page-heading h1 { font-size:2.7rem; }
  .contact-form-card { padding:27px 22px; }
  .contact-aside { flex-direction:column; }
  .contact-aside > * { flex:auto; }
  .footer-main, .footer-bottom { flex-direction:column; gap:20px; }
  .footer-bottom p:last-child { margin-top:3px; }
}
@media (max-width: 420px) {
 
  .hero h1 { font-size:2.6rem; }
  .brand-name { font-size:1.24rem; }
  .brand-descriptor { font-size:.44rem; }
  .brand-mark { width:39px; }
  .section-heading h2 { font-size:2.17rem; }
  .page-heading h1 { font-size:2.38rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }
/* Ensure configuration-dependent links really disappear until enabled. */
[hidden] { display: none !important; }



/* Hide the large landscape on all screen sizes */
.hero-art {
  display: none;
}