/* Shared styles for TKBG AI-visibility / SEO guide pages.
   Tokens and type match index.html (Solina, HelveticaCond, gold/cream). */

@font-face{
  font-family:'Solina';
  src:url('/project/assets/fonts/Solina-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Solina';
  src:url('/project/assets/fonts/Solina-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'HelveticaCond';
  src:url('/project/assets/fonts/HelveticaLTPro-BoldCond.otf') format('opentype');
  font-weight:700; font-stretch:condensed; font-style:normal; font-display:swap;
}

:root{
  --black:#000000;
  --ink:#0B0B0B;
  --gold:#957B60;
  --gold-soft:#B89B7C;
  --gold-deep:#7A6449;
  --cream:#F5F1EB;
  --paper:#FBF9F5;
  --line:rgba(149,123,96,.28);
  --line-strong:rgba(149,123,96,.55);
  --muted:rgba(11,11,11,.62);
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Solina','Jost',system-ui,serif;
  font-weight:400;
  letter-spacing:.004em;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}

.eyebrow{
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold);
}
.eyebrow .bar{
  display:inline-block; width:40px; height:1px;
  background:var(--gold); vertical-align:middle;
  margin-right:14px;
}

.wrap{max-width:1320px;margin:0 auto;padding:0 40px;}
@media (max-width:720px){.wrap{padding:0 22px;}}

/* ── Nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  padding:20px 40px;
  display:flex; justify-content:space-between; align-items:center;
  color:#0B0B0B;
  background:rgba(251,249,245,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .logo{height:26px;width:auto;display:block;}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; opacity:.8; transition:opacity .2s,color .2s;
}
.nav-links a:hover,
.nav-links a.is-current{opacity:1;color:var(--gold);}
.nav-cta{
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
  padding:12px 20px;
  background:#000; color:#F5F1EB; border:1px solid #000;
  transition:background .25s,color .25s,border-color .25s;
}
.nav-cta:hover{background:var(--gold);border-color:var(--gold);}
@media (max-width:980px){
  .nav{padding:16px 22px;}
  .nav-links{display:none;}
}

.nav-ham{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:8px;
  background:none; border:0; cursor:pointer;
}
.nav-ham span{
  display:block; height:1px;
  background:currentColor;
  transition:transform .3s ease, opacity .3s ease, width .3s ease;
  transform-origin:center;
}
.nav-ham span:nth-child(1){ width:100%; }
.nav-ham span:nth-child(2){ width:70%; }
.nav-ham span:nth-child(3){ width:100%; }
.nav-ham.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); width:100%; }
.nav-ham.open span:nth-child(2){ opacity:0; }
.nav-ham.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:980px){
  .nav-ham{ display:flex; }
  .nav-cta{ display:none; }
}

.mob-nav{
  display:none;
  position:fixed; inset:0; z-index:39;
  background:rgba(0,0,0,.96);
  color:#F5F1EB;
  flex-direction:column; justify-content:center; align-items:center;
  gap:8px;
  padding:100px 40px 60px;
  overflow-y:auto;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.mob-nav.open{
  display:flex; opacity:1; pointer-events:auto;
}
.mob-link{
  font-family:'Solina','Jost',serif;
  font-weight:400; font-size:clamp(28px,7vw,48px);
  line-height:1.15; letter-spacing:-.02em;
  color:#F5F1EB;
  opacity:.55;
  transition:opacity .2s, color .2s;
  text-align:center;
}
.mob-link:hover,
.mob-link.is-current{ opacity:1; color:var(--gold); }
.mob-nav .mob-cta{
  margin-top:32px;
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 28px;
  background:var(--gold); color:#000;
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase;
  border:1px solid var(--gold);
}

/* ── Intro (H1 + short answer first) ─────────────────────── */
.guide-intro{
  position:relative;
  background:var(--black);
  color:#F5F1EB;
  padding:140px 0 80px;
  overflow:hidden;
}
.guide-intro::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 72% 38%, rgba(149,123,96,.32), transparent 62%),
    radial-gradient(40% 40% at 10% 90%, rgba(149,123,96,.14), transparent 60%),
    linear-gradient(180deg,#000 0%,#0A0805 100%);
}
.guide-intro::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(237,231,221,.04) 1px, transparent 1px);
  background-size:3px 3px; mix-blend-mode:overlay;
}
.guide-intro .wrap{position:relative;z-index:1;}
.crumbs{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-bottom:36px;
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(245,241,235,.55);
}
.crumbs a{color:rgba(245,241,235,.7); transition:color .2s;}
.crumbs a:hover{color:var(--gold);}
.crumbs .sep{opacity:.4;}
.guide-intro h1{
  font-family:'Solina','Jost',serif;
  font-weight:400;
  font-size:clamp(34px, 5.4vw, 72px);
  line-height:.98; letter-spacing:-.025em;
  margin:18px 0 36px;
  color:#F5F1EB;
  text-wrap:balance;
  max-width:18ch;
}
.guide-intro h1.wide{max-width:24ch;}
.guide-intro h1 em{
  font-style:italic; color:var(--gold); font-weight:500;
}

.answer{
  max-width:68ch;
  padding:32px 34px;
  border:1px solid rgba(149,123,96,.5);
  background:rgba(149,123,96,.08);
}
.answer .kicker{
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold);
  margin:0 0 16px;
}
.answer p{
  margin:0 0 16px;
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.55;
  color:#EDE7DD;
}
.answer p:last-child{margin-bottom:0;}
@media (max-width:720px){
  .guide-intro{padding:120px 0 56px;}
  .answer{padding:24px 22px;}
}

/* ── FAQ ─────────────────────────────────────────────────── */
.guide-faq{
  background:var(--paper);
  padding:100px 0 80px;
}
@media (max-width:720px){.guide-faq{padding:72px 0 56px;}}
.guide-faq .sec-head{max-width:52ch;margin-bottom:48px;}
.guide-faq h2{
  font-family:'Solina','Jost',serif; font-weight:400;
  font-size:clamp(32px,4.4vw,64px);
  line-height:.98; letter-spacing:-.022em;
  margin:14px 0 0;
}
.faq-list{border-top:1px solid var(--line);}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:flex-start; gap:20px;
  padding:26px 0;
  font-family:'Solina','Jost',serif;
  font-size:clamp(20px,2vw,26px);
  line-height:1.2; letter-spacing:-.015em;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .idx{
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold);
  padding-top:8px; flex:0 0 auto;
}
.faq-item .q{flex:1;}
.faq-item .chev{
  flex:0 0 auto;
  width:18px; height:18px; margin-top:8px;
  border-right:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
  transform:rotate(45deg);
  transition:transform .25s;
  opacity:.7;
}
.faq-item[open] .chev{transform:rotate(-135deg); margin-top:12px;}
.faq-item .a{
  padding:0 0 28px 52px;
  margin:0;
  max-width:68ch;
  font-size:16px; line-height:1.65; color:var(--muted);
}
.answer a, .faq-item .a a{
  color:var(--gold-soft);
  text-decoration:underline;
  text-underline-offset:3px;
}
.answer a:hover, .faq-item .a a:hover{color:var(--gold);}
.cta-note{
  margin:22px 0 0;
  font-size:16px; line-height:1.55; color:#CFC6B5;
}
.cta-note a{color:var(--gold); text-decoration:underline; text-underline-offset:3px;}
.cta-note a:hover{color:var(--gold-soft);}
@media (max-width:540px){
  .faq-item .a{padding-left:0;}
}

/* ── Related ─────────────────────────────────────────────── */
.guide-related{
  background:var(--cream);
  padding:80px 0;
}
.guide-related h2{
  font-family:'Solina','Jost',serif; font-weight:400;
  font-size:clamp(28px,3.6vw,48px);
  line-height:1.05; letter-spacing:-.02em;
  margin:14px 0 40px;
}
.related-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--line);
}
.related-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.related-card{
  padding:36px 32px 40px;
  display:flex; flex-direction:column; gap:16px;
  min-height:220px;
  background:var(--paper);
  transition:background .35s;
}
.related-card + .related-card{border-left:1px solid var(--line);}
.related-card:hover{background:rgba(149,123,96,.05);}
.related-card .tag{
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
}
.related-card h3{
  font-family:'Solina','Jost',serif;
  font-weight:400; font-size:26px; line-height:1.12;
  letter-spacing:-.018em; margin:auto 0 0;
}
.related-card p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:40ch;}
.related-card .more{
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-deep);
}
@media (max-width:980px){
  .related-grid.cols-3{grid-template-columns:1fr 1fr;}
  .related-grid.cols-3 .related-card:nth-child(3){border-left:0;border-top:1px solid var(--line);grid-column:1 / -1;}
}
@media (min-width:721px){
  .related-grid:not(.cols-3) .related-card:nth-child(2n+1){border-left:0;}
  .related-grid:not(.cols-3) .related-card:nth-child(n+3){border-top:1px solid var(--line);}
}
@media (max-width:720px){
  .related-grid, .related-grid.cols-3{grid-template-columns:1fr;}
  .related-card + .related-card{border-left:0;border-top:1px solid var(--line);}
  .related-grid.cols-3 .related-card:nth-child(3){border-top:1px solid var(--line);}
}

.legal-note{
  margin-top:56px;
  padding:28px 32px;
  border:1px solid var(--line);
  background:rgba(149,123,96,.05);
  max-width:72ch;
  font-size:14px;
  line-height:1.65;
  color:var(--muted);
}
.legal-note strong{
  display:block;
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:10px;
}
.legal-note a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px;}
.guide-body .legal-note{margin:28px 0 8px;}

/* ── Long-form body (Melbourne and similar) ──────────────── */
.guide-body{
  background:var(--paper);
  padding:72px 0 0;
}
.guide-body + .guide-body{padding-top:56px;}
.guide-body .wrap{max-width:880px;}
.guide-body h2{
  font-family:'Solina','Jost',serif; font-weight:400;
  font-size:clamp(28px,3.8vw,48px);
  line-height:1.05; letter-spacing:-.02em;
  margin:14px 0 22px;
}
.guide-body h3{
  font-family:'Solina','Jost',serif; font-weight:500;
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.2; letter-spacing:-.015em;
  margin:28px 0 14px;
  color:var(--ink);
}
.guide-body p{
  margin:0 0 16px;
  font-size:17px; line-height:1.65; color:var(--muted);
}
.guide-body p:last-child{margin-bottom:0;}
.guide-body a{
  color:var(--gold-deep);
  text-decoration:underline;
  text-underline-offset:3px;
}
.guide-body a:hover{color:var(--gold);}
.guide-steps, .guide-points{
  margin:8px 0 20px;
  padding:0;
  display:flex; flex-direction:column; gap:16px;
}
.guide-steps{list-style:decimal; padding-left:22px;}
.guide-points{list-style:none;}
.guide-steps li, .guide-points li{
  font-size:17px; line-height:1.65; color:var(--muted);
}
.guide-points li{padding-left:18px; position:relative;}
.guide-points li::before{
  content:"";
  position:absolute; left:0; top:.72em;
  width:8px; height:1px; background:var(--gold);
}
.guide-steps strong, .guide-points strong{color:var(--ink); font-weight:500;}
.table-wrap{overflow-x:auto; margin:24px 0 20px; border:1px solid var(--line);}
.guide-table{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
  background:var(--cream);
}
.guide-table th, .guide-table td{
  text-align:left; vertical-align:top;
  padding:14px 16px;
  font-size:15px; line-height:1.5;
  border-bottom:1px solid var(--line);
}
.guide-table th{
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
  background:rgba(149,123,96,.08);
}
.guide-table tr:last-child td{border-bottom:0;}
.cta-buttons{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.guide-cta h2.wide{max-width:22ch;}

/* ── CTA ─────────────────────────────────────────────────── */
.guide-cta{
  background:var(--black);
  color:#F5F1EB;
  padding:88px 0;
  position:relative;
  overflow:hidden;
}
.guide-cta::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 70% at 80% 20%, rgba(149,123,96,.28), transparent 62%);
}
.guide-cta .wrap{position:relative;z-index:1;}
.guide-cta h2{
  font-family:'Solina','Jost',serif; font-weight:400;
  font-size:clamp(32px,4.8vw,68px);
  line-height:.98; letter-spacing:-.022em;
  margin:16px 0 20px;
  max-width:16ch;
}
.guide-cta h2 em{font-style:italic;color:var(--gold);font-weight:500;}
.guide-cta p{
  font-size:18px; line-height:1.55; color:#CFC6B5;
  max-width:48ch; margin:0 0 36px;
}
.btn-primary{
  display:inline-flex; align-items:center; gap:14px;
  padding:20px 30px;
  background:#F5F1EB; color:#000;
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase;
  border:1px solid #F5F1EB;
  transition:background .3s ease, color .3s ease, border-color .3s ease, padding .3s ease;
}
.btn-primary:hover{background:var(--gold);color:#F5F1EB;border-color:var(--gold);padding-right:38px;}
.btn-primary .arrow{display:inline-block;width:22px;height:1px;background:var(--gold);transition:width .3s,background .3s;}
.btn-primary:hover .arrow{background:#F5F1EB;width:30px;}

/* ── Footer ──────────────────────────────────────────────── */
.footer-socials{
  display:flex; gap:16px; margin-top:14px; flex-wrap:wrap;
}
.footer-socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid rgba(237,231,221,.2);
  color:rgba(237,231,221,.75); transition:all .25s;
}
.footer-socials a:hover{border-color:var(--gold);color:var(--gold);background:rgba(149,123,96,.08);}
.footer-socials a svg{width:14px;height:14px;fill:currentColor;}
footer{
  background:var(--black); color:rgba(237,231,221,.55);
  padding:80px 0 48px;
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px;
  margin-bottom:56px;
}
footer .brand-mark img{height:46px;width:auto;}
footer p{font-size:14px;line-height:1.65;max-width:34ch;margin:24px 0 0;}
footer h5{
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
  margin:0 0 18px;
}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
footer ul a{font-size:14px;color:rgba(237,231,221,.75);transition:color .2s;}
footer ul a:hover{color:var(--gold);}
.footer-bottom{
  border-top:1px solid rgba(237,231,221,.12);
  padding-top:32px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  font-family:'HelveticaCond','Jost',sans-serif;
  font-weight:700; font-size:10px; letter-spacing:.24em;
  color:rgba(237,231,221,.5); text-transform:uppercase;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px;}}