/*
Theme Name: Trending Kitchen Cabinets
Theme URI: https://spectronx.ca/
Author: SpectronX Technologies
Author URI: https://spectronx.ca/
Description: A bold black-and-gold seven-page WordPress theme for Trending Kitchen Cabinets, Mississauga. Oversized editorial typography, dark-first design system, full Customizer control, and one-click Elementor conversion.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tkc
Tags: business, one-column, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, blog, editor-style
*/

/* =========================================================================
   1. Tokens — black & gold, dark first
   ====================================================================== */
:root{
  /* Grounds, darkest to lightest */
  --void:#050506;
  --ink:#0A0A0C;
  --ink-2:#111114;
  --panel:#16161A;
  --panel-2:#1D1D22;

  /* Gold ramp */
  --gold:#D4AF5A;
  --gold-lt:#F5E0A0;
  --gold-br:#E8C86E;
  --gold-dk:#9A7B2E;

  /* Text on dark */
  --white:#FFFFFF;
  --bone:#F4F1EA;
  --mute:#A8A49B;
  --mute-2:#75726B;

  /* Light-ground pair, used sparingly */
  --cream:#F7F4ED;
  --cream-2:#FFFFFF;
  --ink-on-light:#141416;
  --mute-on-light:#5C5952;

  --line:rgba(212,175,90,.26);
  --line-2:rgba(212,175,90,.14);
  --line-w:rgba(255,255,255,.09);

  --r:4px;
  --r-lg:10px;
  --r-pill:999px;

  --display:"Bodoni Moda","Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1320px;
  --edge:56px;
  --gutter:24px;
  --sec:clamp(78px,9vw,150px);

  --sh-1:0 2px 10px rgba(0,0,0,.30);
  --sh-2:0 18px 50px rgba(0,0,0,.45);
  --sh-3:0 34px 90px rgba(0,0,0,.60);
  --glow:0 0 0 1px rgba(212,175,90,.30), 0 18px 50px rgba(212,175,90,.10);
}

/* =========================================================================
   2. Reset / base
   ====================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  color:var(--bone);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--gold-lt)}
button,input,select,textarea{font:inherit;color:inherit}
figure{margin:0}
hr{border:0;border-top:1px solid var(--line-2);margin:2rem 0}

/* --- The type scale. Big, bold, editorial. ------------------------------ */
h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.022em;
  margin:0 0 .4em;
  color:var(--white);
  text-wrap:balance;
}
h1{font-size:clamp(3.4rem,8.4vw,8rem)}
h2{font-size:clamp(2.6rem,6vw,5.2rem)}
h3{font-size:clamp(1.5rem,2.4vw,2.15rem);line-height:1.05}
h4{
  font-family:var(--body);font-size:.8rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1.1rem;
}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}

em{font-style:italic;color:var(--gold-lt)}
strong{color:var(--white);font-weight:700}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec);position:relative}
.center{text-align:center}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =========================================================================
   3. Type helpers
   ====================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--body);
  font-size:.73rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";width:34px;height:1px;background:var(--gold);opacity:.7;
}
.center .eyebrow::after{
  content:"";width:34px;height:1px;background:var(--gold);opacity:.7;
}
.center .eyebrow{justify-content:center}

.lede{
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  line-height:1.72;
  color:var(--mute);
  max-width:64ch;
  font-weight:300;
}
.center .lede{margin-inline:auto}

.sec-head{margin-bottom:clamp(46px,5.4vw,80px)}
.sec-head h2{margin-bottom:.3em}

/* Outlined display text — used once or twice for impact */
.outline{
  -webkit-text-stroke:1.5px var(--gold);
  color:transparent;
}

/* =========================================================================
   4. Buttons
   ====================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:19px 42px;
  border-radius:var(--r);
  border:1px solid transparent;
  font-family:var(--body);
  font-size:.79rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  color:var(--void);
  box-shadow:0 12px 34px rgba(212,175,90,.24);
}
.btn--gold:hover{color:var(--void);box-shadow:0 20px 46px rgba(212,175,90,.36)}
.btn--outline{border-color:var(--line);color:var(--gold);background:transparent}
.btn--outline:hover{border-color:var(--gold);background:rgba(212,175,90,.10);color:var(--gold-lt)}
.btn--white{border-color:rgba(255,255,255,.22);color:var(--white);background:transparent}
.btn--white:hover{border-color:var(--gold);color:var(--gold-lt);background:rgba(212,175,90,.08)}
.btn--dark{background:var(--ink);color:var(--gold-lt);border-color:var(--line)}
.btn--dark:hover{background:var(--void);color:var(--gold-lt)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px}
.center .btn-row{justify-content:center}

/* =========================================================================
   5. Header
   ====================================================================== */
.topline{
  background:var(--void);color:var(--mute-2);
  font-size:.76rem;letter-spacing:.08em;
  border-bottom:1px solid var(--line-2);
}
.topline__in{
  max-width:var(--wrap);margin-inline:auto;padding:10px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.topline a{color:var(--gold)}
.topline a:hover{color:var(--gold-lt)}
.topline__l,.topline__r{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.topline__r a{display:inline-flex;align-items:center;gap:8px}
.topline svg{width:14px;height:14px;flex:none}

.site-head{
  position:sticky;top:0;z-index:900;
  background:rgba(10,10,12,.88);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--line-2);
  transition:background .3s ease,border-color .3s ease;
}
.site-head.stuck{background:rgba(5,5,6,.97);border-bottom-color:var(--line)}
.site-head__in{
  max-width:var(--wrap);margin-inline:auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:54px;width:auto;transition:height .3s ease}
.site-head.stuck .brand img{height:44px}

.nav{display:flex;align-items:center}
.nav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:11px 16px;
  font-size:.79rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone);position:relative;
  transition:color .22s ease;
}
.nav a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .28s ease;
}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a{color:var(--gold-lt)}
.nav a:hover::after,.nav .current-menu-item>a::after,.nav .current_page_item>a::after{transform:scaleX(1)}

.head-cta{display:flex;align-items:center;gap:14px;flex:none}
.head-cta .btn{padding:14px 26px;font-size:.72rem}

.burger{
  display:none;width:48px;height:48px;border-radius:var(--r);
  border:1px solid var(--line-2);background:transparent;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:6px;
}
.burger span{display:block;width:22px;height:1.5px;background:var(--gold);transition:transform .28s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:1180px){
  .nav,.head-cta .btn--outline{display:none}
  .burger{display:flex}
  .site-head.open .nav{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--void);border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 24px;
  }
  .site-head.open .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .site-head.open .nav a{padding:15px 8px;border-bottom:1px solid var(--line-2);font-size:.86rem}
  .site-head.open .nav a::after{display:none}
}
@media(max-width:680px){
  .topline__l{display:none}
  .topline__in{justify-content:center}
  .site-head__in{gap:12px}
  .brand img{height:40px}
  /* Keep the quote CTA on phones — it is the main conversion path — but
     shrink it so the logo, button and burger fit inside 360px. */
  .head-cta{gap:8px}
  .head-cta .btn{padding:11px 14px;font-size:.64rem;letter-spacing:.08em}
  .burger{width:42px;height:42px}
}
@media(max-width:400px){
  .head-cta .btn--gold{display:none}
}

/* =========================================================================
   6. Hero — the big statement
   ====================================================================== */
.hero{position:relative;overflow:hidden;background:var(--void);isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.58}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% 44%,rgba(212,175,90,.14),transparent 62%),
    linear-gradient(94deg,rgba(5,5,6,.96) 4%,rgba(5,5,6,.80) 44%,rgba(5,5,6,.52) 100%);
}
.hero__in{
  position:relative;z-index:2;
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(110px,15vw,210px) var(--gutter);
}
.hero__inner{max-width:940px}
.hero h1{margin-bottom:.28em}
.hero h1 em{display:block}
.hero .lede{max-width:52ch;margin-bottom:2.6rem;font-size:clamp(1.08rem,1.5vw,1.32rem)}
.hero .btn-row{margin-bottom:3rem}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line-2);
}
.hero__meta li{
  display:flex;align-items:center;gap:12px;
  padding:20px 38px 0 0;margin-right:38px;
  color:var(--bone);font-size:.88rem;letter-spacing:.02em;
}
.hero__meta svg{width:16px;height:16px;color:var(--gold);flex:none}

/* Inner page banner */
.page-hero{position:relative;background:var(--void);overflow:hidden}
.page-hero__bg{position:absolute;inset:0}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,6,.74),rgba(5,5,6,.94));
}
.page-hero__in{
  position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(86px,10vw,150px) var(--gutter);text-align:center;
}
.page-hero h1{font-size:clamp(2.8rem,6.4vw,5.6rem)}
.page-hero .lede{margin-inline:auto}
.crumbs{
  margin-top:1.6rem;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute-2);
}
.crumbs a{color:var(--gold)}
.crumbs span{margin-inline:10px;opacity:.55}

/* =========================================================================
   7. Layout blocks
   ====================================================================== */
.grid{display:grid;gap:28px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1020px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
@media(max-width:940px){.split{grid-template-columns:1fr}}

.sec--ink{background:var(--ink)}
.sec--ink2{background:var(--ink-2)}
.sec--void{background:var(--void)}
.sec--panel{background:var(--panel)}
.sec--light{background:var(--cream);color:var(--ink-on-light)}
.sec--light h1,.sec--light h2,.sec--light h3{color:var(--ink-on-light)}
.sec--light .lede,.sec--light p{color:var(--mute-on-light)}
.sec--light .eyebrow{color:var(--gold-dk)}
.sec--light .eyebrow::before,.sec--light .eyebrow::after{background:var(--gold-dk)}

/* A hairline gold divider that runs the section width */
.sec--rule{border-top:1px solid var(--line-2)}

/* =========================================================================
   8. Cards
   ====================================================================== */
.card{
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  padding:38px 34px;
  height:100%;
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.card:hover{transform:translateY(-6px);border-color:var(--line);background:var(--panel-2)}
.card h3{margin-bottom:.45em;font-size:clamp(1.32rem,1.8vw,1.6rem)}
.card p{color:var(--mute);font-size:.97rem;margin-bottom:0}
.card__ico{
  width:58px;height:58px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  background:rgba(212,175,90,.10);
  border:1px solid var(--line);
  margin-bottom:24px;
}
.card__ico svg{width:26px;height:26px;color:var(--gold)}

/* Service tile: big image, text below, number in the corner */
.svc{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--line-2);
  height:100%;display:flex;flex-direction:column;
  transition:transform .35s ease,border-color .35s ease;
}
.svc:hover{transform:translateY(-8px);border-color:var(--line)}
.svc__img{aspect-ratio:4/3;overflow:hidden;background:var(--ink-2);position:relative}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.svc:hover .svc__img img{transform:scale(1.07)}
.svc__n{
  position:absolute;top:16px;right:18px;z-index:2;
  font-family:var(--display);font-size:1.5rem;font-weight:700;
  color:var(--gold);opacity:.9;
}
.svc__body{padding:32px 30px 34px;flex:1;display:flex;flex-direction:column}
.svc__body h3{margin-bottom:.42em}
.svc__body p{color:var(--mute);font-size:.95rem;flex:1}
.svc__more{
  margin-top:22px;display:inline-flex;align-items:center;gap:10px;
  font-size:.73rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.svc__more svg{width:15px;height:15px;transition:transform .28s ease}
.svc:hover .svc__more svg{transform:translateX(6px)}

/* Numbered process step */
.step{position:relative;padding-top:30px;border-top:1px solid var(--line-2)}
.step__n{
  font-family:var(--display);font-size:clamp(2.6rem,4.2vw,3.6rem);
  font-weight:700;line-height:1;color:var(--gold);opacity:.34;
  display:block;margin-bottom:.28em;
}
.step h3{margin-bottom:.4em;font-size:clamp(1.24rem,1.7vw,1.5rem)}
.step p{color:var(--mute);font-size:.95rem;margin:0}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-2)}
@media(max-width:760px){.stats{grid-template-columns:1fr}}
.stat{
  text-align:center;padding:46px 20px;
  border-right:1px solid var(--line-2);
}
.stat:last-child{border-right:0}
@media(max-width:760px){.stat{border-right:0;border-bottom:1px solid var(--line-2)}.stat:last-child{border-bottom:0}}
.stat b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(3rem,5.4vw,4.6rem);line-height:1;color:var(--gold);margin-bottom:.2em;
}
.stat span{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute-2);font-weight:600;
}

/* Gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal{grid-template-columns:1fr}}
.gal figure{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  aspect-ratio:4/3;background:var(--ink-2);border:1px solid var(--line-2);
}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.gal figure:hover img{transform:scale(1.08)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:46px 22px 20px;
  background:linear-gradient(180deg,transparent,rgba(5,5,6,.92));
  color:var(--white);font-size:.82rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
}

/* Swatches for the Selection page */
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:1020px){.swatches{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.swatches{grid-template-columns:repeat(2,1fr)}}
.swatch{text-align:center}
.swatch i{
  display:block;aspect-ratio:1;border-radius:var(--r-lg);
  border:1px solid var(--line-2);margin-bottom:12px;
  transition:transform .28s ease,border-color .28s ease;
}
.swatch:hover i{transform:translateY(-4px);border-color:var(--gold)}
.swatch span{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);font-weight:600;
}

/* Reviews */
.quote{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:38px 34px;height:100%;display:flex;flex-direction:column;
  transition:border-color .3s ease;
}
.quote:hover{border-color:var(--line)}
.quote__stars{color:var(--gold);letter-spacing:4px;margin-bottom:18px;font-size:1.05rem}
.quote p{font-size:1.02rem;color:var(--bone);flex:1;line-height:1.72;font-weight:300}
.quote footer{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-2)}
.quote b{display:block;font-size:.95rem;color:var(--white)}
.quote small{color:var(--mute-2);font-size:.8rem;letter-spacing:.06em}

/* Big pull quote */
.pull{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.05;
  letter-spacing:-.02em;color:var(--white);text-align:center;
  max-width:22ch;margin-inline:auto;
}
.pull em{color:var(--gold)}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:var(--void)}
.cta-band__bg{position:absolute;inset:0}
.cta-band__bg img{width:100%;height:100%;object-fit:cover;opacity:.26}
.cta-band::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 50% 50%,rgba(212,175,90,.14),transparent 66%),
    linear-gradient(180deg,rgba(5,5,6,.86),rgba(5,5,6,.94));
}
.cta-band>.wrap{position:relative;z-index:2;padding-block:clamp(76px,8.5vw,128px);text-align:center}
.cta-band h2{margin-bottom:.3em}

/* =========================================================================
   9. Blog
   ====================================================================== */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:1020px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.posts{grid-template-columns:1fr}}
.post-card{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;height:100%;display:flex;flex-direction:column;
  transition:transform .3s ease,border-color .3s ease;
}
.post-card:hover{transform:translateY(-6px);border-color:var(--line)}
.post-card__img{aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.post-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.post-card:hover .post-card__img img{transform:scale(1.06)}
.post-card__body{padding:28px 28px 32px;flex:1;display:flex;flex-direction:column}
.post-card__meta{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:14px;
}
.post-card h3{font-size:1.34rem;margin-bottom:.45em}
.post-card h3 a{color:var(--white)}
.post-card h3 a:hover{color:var(--gold-lt)}
.post-card p{color:var(--mute);font-size:.94rem;flex:1}

.entry{max-width:74ch;margin-inline:auto;font-size:1.06rem;color:var(--bone)}
.entry h2{margin-top:1.6em;font-size:clamp(1.9rem,3.2vw,2.6rem)}
.entry h3{margin-top:1.5em}
.entry p{color:var(--mute);font-weight:300}
.entry img{border-radius:var(--r-lg);margin-block:1.8em}
.entry blockquote{
  margin:2em 0;padding:26px 32px;border-left:2px solid var(--gold);
  background:var(--panel);font-family:var(--display);
  font-size:1.4rem;line-height:1.35;color:var(--white);
}
.entry blockquote p{color:var(--white)}
.entry ul,.entry ol{padding-left:1.3em;color:var(--mute)}
.entry li{margin-bottom:.6em}
.entry a{text-decoration:underline;text-underline-offset:3px}

.pagination{display:flex;justify-content:center;gap:10px;margin-top:60px;flex-wrap:wrap}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;height:48px;padding:0 14px;border-radius:var(--r);
  border:1px solid var(--line-2);font-size:.85rem;font-weight:700;
  letter-spacing:.1em;color:var(--bone);
}
.pagination .page-numbers:hover{border-color:var(--gold);color:var(--gold-lt)}
.pagination .current{background:var(--gold);border-color:var(--gold);color:var(--void)}

/* =========================================================================
   10. Forms
   ====================================================================== */
.form{display:grid;gap:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}
.field label{
  display:block;font-size:.71rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--ink);
  color:var(--bone);font-size:.97rem;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--mute-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--gold);background:var(--ink-2);
  box-shadow:0 0 0 3px rgba(212,175,90,.14);
}
.form-note{font-size:.83rem;color:var(--mute-2)}
.form-msg{padding:16px 20px;border-radius:var(--r);font-size:.94rem;margin-bottom:20px}
.form-msg.ok{background:rgba(90,170,110,.10);border:1px solid rgba(90,170,110,.36);color:#8FD6A4}
.form-msg.err{background:rgba(200,80,70,.10);border:1px solid rgba(200,80,70,.36);color:#E89A92}
.hp{position:absolute;left:-9999px}

.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,80px);align-items:start}
@media(max-width:960px){.contact-grid{grid-template-columns:1fr}}
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.info-list li{
  display:flex;gap:20px;align-items:flex-start;
  padding:26px 0;border-bottom:1px solid var(--line-2);
}
.info-list li:first-child{padding-top:0}
.info-list .ico{
  width:48px;height:48px;border-radius:var(--r);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(212,175,90,.10);border:1px solid var(--line);
}
.info-list .ico svg{width:20px;height:20px;color:var(--gold)}
.info-list b{
  display:block;font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px;font-weight:700;
}
.info-list span,.info-list a{font-size:1.02rem;color:var(--bone)}
.info-list a:hover{color:var(--gold-lt)}
.map-embed{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);line-height:0;
}
.map-embed iframe{width:100%;height:420px;border:0;display:block;filter:grayscale(1) invert(.92) contrast(.85)}

/* =========================================================================
   11. Footer
   ====================================================================== */
.site-foot{
  background:var(--void);color:var(--mute);
  padding-top:84px;border-top:1px solid var(--line-2);
}
.site-foot a{color:var(--mute)}
.site-foot a:hover{color:var(--gold-lt)}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  gap:clamp(32px,4.5vw,64px);padding-bottom:62px;
}
@media(max-width:1020px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.foot-grid{grid-template-columns:1fr}}
.foot-brand img{width:210px;margin-bottom:24px}
.foot-brand p{font-size:.94rem;color:var(--mute-2);max-width:38ch;font-weight:300}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:13px;font-size:.94rem}
.socials{display:flex;gap:12px;margin-top:26px}
.socials a{
  width:42px;height:42px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);color:var(--gold);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.socials a:hover{background:rgba(212,175,90,.12);border-color:var(--gold);transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.foot-bar{
  border-top:1px solid var(--line-2);
  padding-block:26px;font-size:.82rem;color:var(--mute-2);
}
.foot-bar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
}

/* =========================================================================
   12. Reveal
   ====================================================================== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* =========================================================================
   13. WordPress core
   ====================================================================== */
.alignleft{float:left;margin:.4em 1.8em 1em 0}
.alignright{float:right;margin:.4em 0 1em 1.8em}
.aligncenter{margin-inline:auto}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-block-image figcaption{font-size:.84rem;color:var(--mute-2);text-align:center}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* =========================================================================
   14. Elementor mapping
   -------------------------------------------------------------------------
   The converted pages are built from Elementor's free core widgets. This maps
   that DOM onto the same tokens the PHP templates use so both renders match.

   Two things to know if you edit this:
   - Elementor writes per-element CSS at high specificity, and its image-box
     ships a 30% default image width. Sizing here needs !important to win.
   - Elementor's CSS-class control is _css_classes, with the underscore.
   ====================================================================== */
.tkc-canvas .elementor-section{padding-block:0}
.tkc-canvas .elementor-container{max-width:var(--wrap);padding-inline:var(--gutter)}
.tkc-canvas .elementor-widget:not(:last-child){margin-bottom:16px}
.tkc-canvas .tkc-eyebrow{margin-bottom:2px!important}
.tkc-canvas .tkc-title{margin-bottom:8px!important}
.tkc-canvas .elementor-widget-image-box,
.tkc-canvas .elementor-widget-icon-box,
.tkc-canvas .tkc-card,
.tkc-canvas .tkc-s--stats .elementor-widget{margin-bottom:0!important}
.tkc-canvas .elementor-column-gap-extended>.elementor-column>.elementor-element-populated{padding:14px}

/* --- Typography --------------------------------------------------------- */
.tkc-canvas .elementor-heading-title{
  font-family:var(--display);font-weight:700;line-height:.95;
  letter-spacing:-.022em;color:var(--white);margin:0 0 .4em;
}
.tkc-canvas h1.elementor-heading-title{font-size:clamp(3.4rem,8.4vw,8rem)}
.tkc-canvas h2.elementor-heading-title{font-size:clamp(2.6rem,6vw,5.2rem)}
.tkc-canvas h3.elementor-heading-title{font-size:clamp(1.5rem,2.4vw,2.15rem);line-height:1.05}

/* Titles built as text-editor so inline markup survives */
.tkc-canvas .tkc-title,
.tkc-canvas .tkc-title h1,
.tkc-canvas .tkc-title h2,
.tkc-canvas .tkc-title h3{
  font-family:var(--display);font-weight:700;line-height:.95;
  letter-spacing:-.022em;color:var(--white);
}
.tkc-canvas .tkc-title h1,
.tkc-canvas .tkc-title h2,
.tkc-canvas .tkc-title h3{margin:0 0 .28em}
.tkc-canvas .tkc-title h1{font-size:clamp(3.4rem,8.4vw,8rem)}
.tkc-canvas .tkc-title h2{font-size:clamp(2.6rem,6vw,5.2rem)}
.tkc-canvas .tkc-title h3{font-size:clamp(1.5rem,2.4vw,2.15rem)}
.tkc-canvas .tkc-title em{font-style:italic;color:var(--gold-lt)}

.tkc-canvas .elementor-widget-text-editor{
  font-family:var(--body);font-size:clamp(1.05rem,1.4vw,1.25rem);
  line-height:1.72;color:var(--mute);font-weight:300;
}
.tkc-canvas .elementor-widget-text-editor p{margin:0 0 1.2em}
.tkc-canvas .elementor-widget-text-editor p:last-child{margin-bottom:0}
.tkc-canvas .elementor-widget-text-editor.elementor-align-center{max-width:64ch;margin-inline:auto}

.tkc-canvas .tkc-eyebrow .elementor-heading-title{
  font-family:var(--body);font-size:.73rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;
}

/* --- Buttons ------------------------------------------------------------ */
.tkc-canvas .elementor-button,
.tkc-canvas .elementor-widget-button .elementor-button,
.tkc-canvas .elementor-button-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:19px 42px;border-radius:var(--r);border:1px solid transparent;
  font-family:var(--body);font-size:.79rem!important;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  color:var(--void);
  box-shadow:0 12px 34px rgba(212,175,90,.24);
  transition:transform .25s ease,box-shadow .25s ease,color .25s ease,border-color .25s ease;
}
.tkc-canvas .elementor-button:hover{transform:translateY(-2px);color:var(--void);box-shadow:0 20px 46px rgba(212,175,90,.36)}
.tkc-canvas .tkc-btn--outline .elementor-button{
  background:transparent;border-color:var(--line);color:var(--gold);box-shadow:none;
}
.tkc-canvas .tkc-btn--outline .elementor-button:hover{
  border-color:var(--gold);background:rgba(212,175,90,.10);color:var(--gold-lt);box-shadow:none;
}

/* --- Icon lists --------------------------------------------------------- */
.tkc-canvas .elementor-icon-list-items{display:grid;gap:12px}
.tkc-canvas .elementor-icon-list-item{
  display:flex;align-items:flex-start;gap:13px;
  font-family:var(--body);font-size:.98rem;line-height:1.6;color:var(--bone);
}
.tkc-canvas .elementor-icon-list-icon{color:var(--gold);flex:none;margin-top:.32em}
.tkc-canvas .elementor-icon-list-icon svg,
.tkc-canvas .elementor-icon-list-icon i{width:15px;height:15px;font-size:15px}

/* --- Section grounds ---------------------------------------------------- */
.tkc-canvas .tkc-s--ink{background:var(--ink)}
.tkc-canvas .tkc-s--ink2{background:var(--ink-2)}
.tkc-canvas .tkc-s--void{background:var(--void)}
.tkc-canvas .tkc-s--panel{background:var(--panel)}
.tkc-canvas .tkc-s--hero,
.tkc-canvas .tkc-s--banner{background-color:var(--void)}
.tkc-canvas .tkc-s--light{background:var(--cream)}

/* Light ground: flip every text colour, targeting inner nodes so the
   base .tkc-title rule cannot win on specificity. */
.tkc-canvas .tkc-s--light .elementor-heading-title,
.tkc-canvas .tkc-s--light .tkc-title,
.tkc-canvas .tkc-s--light .tkc-title h1,
.tkc-canvas .tkc-s--light .tkc-title h2,
.tkc-canvas .tkc-s--light .tkc-title h3{color:var(--ink-on-light)}
.tkc-canvas .tkc-s--light .elementor-widget-text-editor,
.tkc-canvas .tkc-s--light .elementor-widget-text-editor p{color:var(--mute-on-light)}
.tkc-canvas .tkc-s--light .tkc-eyebrow .elementor-heading-title{color:var(--gold-dk)}
.tkc-canvas .tkc-s--light .elementor-icon-list-item,
.tkc-canvas .tkc-s--light .elementor-icon-list-text{color:var(--ink-on-light)}
.tkc-canvas .tkc-s--light .elementor-icon-list-icon{color:var(--gold-dk)}

/* --- Cards -------------------------------------------------------------- */
.tkc-canvas .elementor-widget-image-box,
.tkc-canvas .elementor-widget-icon-box,
.tkc-canvas .tkc-card{height:100%}
.tkc-canvas .tkc-card .elementor-widget-container{height:100%}

.tkc-canvas .elementor-image-box-wrapper,
.tkc-canvas .elementor-icon-box-wrapper{
  display:flex!important;flex-direction:column!important;
  align-items:flex-start;text-align:left;
  height:100%;overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.tkc-canvas .elementor-widget-image-box:hover .elementor-image-box-wrapper,
.tkc-canvas .elementor-widget-icon-box:hover .elementor-icon-box-wrapper{
  transform:translateY(-6px);border-color:var(--line);background:var(--panel-2);
}

/* Beat Elementor's per-element 30% default image width. */
.tkc-canvas .elementor-image-box-img{
  width:100%!important;max-width:none!important;margin:0!important;
  flex:none;display:block!important;
  aspect-ratio:4/3;overflow:hidden;background:var(--ink-2);
}
.tkc-canvas .elementor-image-box-img img{
  width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover;border-radius:0;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.tkc-canvas .elementor-widget-image-box:hover .elementor-image-box-img img{transform:scale(1.07)}
.tkc-canvas .elementor-image-box-content{padding:32px 30px 34px;text-align:left;width:100%}

.tkc-canvas .elementor-icon-box-icon{margin:38px 34px 0}
.tkc-canvas .elementor-icon-box-icon .elementor-icon{
  width:58px;height:58px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  background:rgba(212,175,90,.10);border:1px solid var(--line);
  color:var(--gold);font-size:24px;
}
.tkc-canvas .elementor-icon-box-icon .elementor-icon svg{width:26px;height:26px;fill:currentColor}
.tkc-canvas .elementor-icon-box-content{padding:24px 34px 38px;text-align:left;width:100%}

.tkc-canvas .elementor-image-box-title,
.tkc-canvas .elementor-icon-box-title{
  font-family:var(--display);font-weight:700;line-height:1.05;
  font-size:clamp(1.32rem,1.9vw,1.6rem);color:var(--white);margin:0 0 .42em;
}
.tkc-canvas .elementor-image-box-description,
.tkc-canvas .elementor-icon-box-description{
  font-family:var(--body);font-size:.96rem;line-height:1.68;
  color:var(--mute);margin:0;font-weight:300;
}

/* Cards on the light ground */
.tkc-canvas .tkc-s--light .elementor-image-box-wrapper,
.tkc-canvas .tkc-s--light .elementor-icon-box-wrapper{
  background:var(--cream-2);border-color:rgba(20,20,22,.10);
}
.tkc-canvas .tkc-s--light .elementor-image-box-title,
.tkc-canvas .tkc-s--light .elementor-icon-box-title{color:var(--ink-on-light)}
.tkc-canvas .tkc-s--light .elementor-image-box-description,
.tkc-canvas .tkc-s--light .elementor-icon-box-description{color:var(--mute-on-light)}

/* Gallery tiles: caption over the image */
.tkc-canvas .tkc-s--gal .elementor-image-box-wrapper{position:relative}
.tkc-canvas .tkc-s--gal .elementor-image-box-content{
  position:absolute!important;left:0;right:0;bottom:0;padding:50px 22px 20px;
  background:linear-gradient(180deg,transparent,rgba(5,5,6,.92));
}
.tkc-canvas .tkc-s--gal .elementor-image-box-title{
  font-family:var(--body);font-size:.82rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--white);margin:0;
}
.tkc-canvas .tkc-s--gal .elementor-image-box-description{display:none}

/* Reviews: quote above the attribution */
.tkc-canvas .tkc-s--rev .elementor-icon-box-icon .elementor-icon{
  background:none;border:0;color:var(--gold);width:auto;height:auto;
}
.tkc-canvas .tkc-s--rev .elementor-icon-box-content{display:flex;flex-direction:column}
.tkc-canvas .tkc-s--rev .elementor-icon-box-title{
  order:2;font-family:var(--body);font-size:.92rem;font-weight:700;
  color:var(--white);margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line-2);
}
.tkc-canvas .tkc-s--rev .elementor-icon-box-description{
  order:1;font-size:1.02rem;color:var(--bone);line-height:1.72;
}

/* --- Stats -------------------------------------------------------------- */
.tkc-canvas .tkc-s--stats .elementor-element-populated{
  border-right:1px solid var(--line-2);padding:46px 20px;
}
.tkc-canvas .tkc-s--stats .elementor-column:last-child .elementor-element-populated{border-right:0}
.tkc-canvas .tkc-stat-n .elementor-heading-title{
  font-family:var(--display);font-weight:700;line-height:1;
  font-size:clamp(3rem,5.4vw,4.6rem);color:var(--gold);margin-bottom:.2em;
}
.tkc-canvas .tkc-stat-l .elementor-heading-title{
  font-family:var(--body);font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2);margin:0;
}

/* --- Hero / banner ------------------------------------------------------ */
.tkc-canvas .tkc-s--hero>.elementor-container>.elementor-column>.elementor-widget-wrap{max-width:940px}
.tkc-canvas .tkc-s--hero .elementor-widget-text-editor{max-width:52ch}
.tkc-canvas .tkc-s--hero .tkc-title{max-width:none}
.tkc-canvas .tkc-s--hero .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:14px 38px}
.tkc-canvas .tkc-s--banner .elementor-widget-text-editor{max-width:64ch;margin-inline:auto}

/* --- Plain images ------------------------------------------------------- */
.tkc-canvas .elementor-widget-image img{border-radius:var(--r-lg)}

/* --- Detail rows -------------------------------------------------------- */
.tkc-canvas .tkc-s--row .elementor-column{align-items:center}
.tkc-canvas .tkc-s--row h3.elementor-heading-title{font-size:clamp(1.9rem,3.2vw,2.8rem)}

/* --- Shortcodes inside Elementor ---------------------------------------- */
.tkc-canvas .elementor-widget-shortcode .posts{margin:0}
.tkc-canvas .map-embed iframe{height:420px}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:1024px){
  .tkc-canvas .elementor-container{flex-wrap:wrap}
  .tkc-canvas .tkc-s--cards .elementor-column{width:50%}
  .tkc-canvas .tkc-s--stats .elementor-column{width:100%}
  .tkc-canvas .tkc-s--stats .elementor-element-populated{
    border-right:0;border-bottom:1px solid var(--line-2);
  }
}
@media(max-width:720px){
  .tkc-canvas .tkc-s--cards .elementor-column,
  .tkc-canvas .elementor-column{width:100%}
  .tkc-canvas .tkc-s--hero .elementor-icon-list-items{display:grid;gap:12px}
}