/* ===== Instagram theme — black / white / muted gold, all-caps heavy headlines, gold highlight bars ===== */
:root{--ig-gold:#D4B26A;--ig-gold-2:#C9A45C;--ig-gold-ink:#7E5E20;--ig-black:#0D0D0D;--ig-char:#161616;--ig-off:#F6F3EE;
  --navy:#111111;--navy-deep:#0D0D0D;--blue:#7E5E20;--teal:#D4B26A;--green:#D4B26A;--green-btn:#D4B26A;--paper:#F6F3EE}
::selection{background:var(--ig-gold);color:#0D0D0D}

/* headlines: heavy, all caps, tight */
h1,h2,.h2,.final h2,.doc-head h1,.res h1{text-transform:uppercase;font-weight:900;letter-spacing:-.015em;line-height:1.02}
.h2{font-size:clamp(30px,3.6vw,48px)}
.hero h1{font-size:clamp(44px,5.4vw,78px);line-height:1.06}

/* the signature gold highlight bar */
.hl{background:var(--ig-gold);color:#0D0D0D;padding:.02em .16em .04em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;-webkit-text-fill-color:#0D0D0D}
.shine{animation:none!important}

/* eyebrows / badges: letter-spaced caps with a gold rule, no pills */
.eyebrow,.dark .eyebrow,.deep .eyebrow,.badge,.hero-light .badge{background:none!important;box-shadow:none!important;border:0!important;color:var(--ig-gold-ink)!important;padding:0 0 10px!important;border-radius:0!important;letter-spacing:.32em!important;font-weight:700!important;font-size:12px!important;position:relative}
.eyebrow::after,.badge::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:2px;background:var(--ig-gold)}
.dark .eyebrow,.deep .eyebrow,.hero-wrap .badge{color:var(--ig-gold)!important}
.badge .dot{display:none}
.spots,.dark .spots,.final .spots{background:transparent!important;border:1px solid var(--ig-gold)!important;color:var(--ig-gold)!important;box-shadow:none!important;border-radius:2px!important;letter-spacing:.08em}
.spots .dot{background:var(--ig-gold)!important}
.tag-g,.tag-t,.card-navy .klabel{background:var(--ig-gold)!important;color:#0D0D0D!important;border-radius:2px}

/* buttons: square-ish, uppercase, gold or black */
.btn{border-radius:3px!important;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.btn-green,.btn-green:hover{background:var(--ig-gold)!important;color:#0D0D0D!important;box-shadow:0 10px 24px rgba(212,178,106,.28)!important}
.btn-green:hover{background:#DDBE7C!important;transform:translateY(-2px)}
.btn .arr,.sticky-bar .btn .arr{color:#0D0D0D}
.btn-ghost{border-radius:3px}

/* announcement + nav */
.announce{background:#0D0D0D;border-image:linear-gradient(90deg,transparent,var(--ig-gold),transparent) 1;letter-spacing:.06em}
.announce a{color:var(--ig-gold)}
.nav-wrap.light{background:rgba(255,255,255,.92)}
.nav-links a{text-transform:uppercase;letter-spacing:.14em;font-size:12px!important;font-weight:700}
.nav-links a::after{background:var(--ig-gold)!important}
.nav.light .nav-links a:hover,.nav.light .nav-links a.on{color:#0D0D0D}

/* hero: dark, warm photo glow — like the dark posts */
.hero-light{background:radial-gradient(70% 90% at 85% 40%,rgba(212,178,106,.16),transparent 60%),linear-gradient(180deg,#141414 0%,#0D0D0D 100%)!important;color:#fff}
.hero-light::before,.hero-light::after{display:none}
.hero-light .hero h1{color:#fff}
.hero-light .hero p{color:rgba(255,255,255,.78)}
.hero-light .trust{color:rgba(255,255,255,.75)}.hero-light .trust .ck{color:var(--ig-gold)}
.hero-light .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}.hero-light .btn-ghost:hover{background:#fff;color:#0D0D0D;border-color:#fff}
.hero-media{border-radius:6px!important;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(212,178,106,.35)!important}

/* sections */
.paper,.paper.section{background:var(--ig-off)}
.dark.section,.final,.rbox.dark,.blog-cta,.art-cta,.abox.dark{background:radial-gradient(60% 50% at 90% 0%,rgba(212,178,106,.10),transparent 60%),#0D0D0D!important}
.section h2:not(.final h2)::after{content:"";display:block;width:64px;height:2px;background:var(--ig-gold);margin-top:22px}
.final h2::after,.cta-bar h2::after{display:none}

/* cards: crisp, thin gold edge on dark (like the comparison post) */
.card,.ecard,.rbox,.post,.vcard,.scard,.fit{border-radius:6px!important}
.ecard.dark,.card-navy{background:#0D0D0D!important;border:1px solid rgba(212,178,106,.55)!important}
.card:hover,.ecard:hover,.post:hover,.vcard:hover,.scard:hover{border-color:var(--ig-gold)!important;box-shadow:0 22px 50px rgba(0,0,0,.12),0 0 0 2px rgba(212,178,106,.25)!important}
.ecard .n{color:var(--ig-gold)!important;-webkit-text-stroke:0!important}
.ecard.dark .n{color:var(--ig-gold)!important}
.stat .n{background:none!important;-webkit-text-fill-color:var(--ig-gold)!important;color:var(--ig-gold)!important}
.stat .k,.fh{color:var(--ig-gold)!important;letter-spacing:.24em}
.step .b{background:var(--ig-gold)!important;color:#0D0D0D!important;border-radius:2px!important}
.list .ck,.checks span{color:var(--ig-gold-ink)!important}
.dark .list .ck{color:var(--ig-gold)!important}
.table{border-color:rgba(212,178,106,.35)!important}
.table .g,.table .th .g{color:var(--ig-gold)!important}

/* sticky bar: black with gold CTA */
.sticky-bar{background:#0D0D0D!important;color:#fff!important;border:1px solid rgba(212,178,106,.5)!important}
.sticky-bar .dot{background:var(--ig-gold)!important;box-shadow:0 0 0 4px rgba(212,178,106,.25)!important}
.sticky-bar .btn-green{background:var(--ig-gold)!important;color:#0D0D0D!important}
.sticky-bar .x{color:rgba(255,255,255,.7)!important}

/* footer */
.footer{background:#0D0D0D;border-image:linear-gradient(90deg,transparent,var(--ig-gold),transparent) 1}
.flinks a:hover{color:var(--ig-gold)}

/* links + focus */
.doc a:not(.btn){color:var(--ig-gold-ink)}
.fields input:focus,.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--ig-gold)!important;box-shadow:0 0 0 4px rgba(212,178,106,.2)!important}
.qbar i{background:var(--ig-gold)!important}
.opt.sel{border-color:var(--ig-gold)!important}


/* motion: highlight bars sweep in as headings reveal (keeps the site's interactive feel) */
.hl{background:linear-gradient(var(--ig-gold),var(--ig-gold)) no-repeat 0 0/100% 100%;transition:background-size .9s cubic-bezier(.2,.7,.2,1) .15s}
.reveal .hl{background-size:0% 100%}
.reveal.in .hl{background-size:100% 100%}
.hero h1 .hl{animation:igSweep 1.1s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes igSweep{from{background-size:0% 100%}to{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){.hl,.reveal .hl{transition:none;animation:none;background-size:100% 100%}}
/* Codex fix: before the bar sweeps in, the phrase keeps the heading's own colour (never black-on-black) */
.reveal .hl{color:inherit;-webkit-text-fill-color:currentColor;transition:background-size .9s cubic-bezier(.2,.7,.2,1) .15s,color .25s .45s,-webkit-text-fill-color .25s .45s}
.reveal.in .hl{color:#0D0D0D;-webkit-text-fill-color:#0D0D0D}
@media (prefers-reduced-motion:reduce){.reveal .hl{color:#0D0D0D;-webkit-text-fill-color:#0D0D0D}}

/* ===== accent colour: emerald — same spots the teal occupies on the live homepage ===== */
:root{--ig-accent:#1F7A5C;--ig-accent-lt:#2FA37E}
/* pills: hero badge + section eyebrows */
.eyebrow,.dark .eyebrow,.deep .eyebrow,.badge,.hero-light .badge,.hero-wrap .badge{background:var(--ig-accent)!important;color:#fff!important;padding:6px 12px!important;border-radius:2px!important;letter-spacing:.24em!important;box-shadow:0 8px 22px rgba(31,122,92,.28)!important}
.eyebrow::after,.badge::after{display:none}
.badge .dot{display:inline-block!important;background:#fff!important}
/* tags + labels */
.tag-t,.card-navy .klabel{background:var(--ig-accent)!important;color:#fff!important}
/* qualifier result checkmarks */
.checks span{color:var(--ig-accent)!important}
/* sticky bar: emerald CTA + dot, as on the live site */
.sticky-bar .btn-green{background:var(--ig-accent)!important;color:#fff!important;box-shadow:0 6px 18px rgba(31,122,92,.35)!important}
.sticky-bar .btn-green:hover{background:#196649!important}
.sticky-bar .btn .arr{color:#fff}
.sticky-bar .dot{background:var(--ig-accent-lt)!important;box-shadow:0 0 0 4px rgba(47,163,126,.25)!important}
/* hairlines: gold → emerald, like the live gold → teal */
.nav-links a::after{background:linear-gradient(90deg,var(--ig-gold),var(--ig-accent-lt))!important}
.footer{border-image:linear-gradient(90deg,transparent,var(--ig-gold) 30%,var(--ig-accent-lt) 70%,transparent) 1}
/* focus rings */
.fields input:focus,.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--ig-accent)!important;box-shadow:0 0 0 4px rgba(31,122,92,.18)!important}
/* subtle emerald glow in the hero corner (the live site has a faint teal one) */
.hero-light{background:radial-gradient(40% 50% at 8% 12%,rgba(47,163,126,.14),transparent 70%),radial-gradient(70% 90% at 85% 40%,rgba(212,178,106,.16),transparent 60%),linear-gradient(180deg,#141414 0%,#0D0D0D 100%)!important}

/* ===== lighter darks: warm charcoal instead of near-black ===== */
:root{--ig-dark:#2B2C30;--ig-dark-2:#34353A;--ig-dark-deep:#232428;--navy-deep:#232428}
.announce{background:var(--ig-dark-deep)}
.hero-light{background:radial-gradient(40% 50% at 8% 12%,rgba(47,163,126,.16),transparent 70%),radial-gradient(70% 90% at 85% 40%,rgba(212,178,106,.18),transparent 60%),linear-gradient(180deg,#36373C 0%,#2B2C30 100%)!important}
.dark,.dark.section,.final,.rbox.dark,.blog-cta,.art-cta,.abox.dark{background:radial-gradient(60% 50% at 90% 0%,rgba(212,178,106,.12),transparent 60%),var(--ig-dark)!important}
.ecard.dark,.card-navy{background:var(--ig-dark)!important}
.dark .stat,.stat{background:rgba(255,255,255,.06)!important}
.tr.th{background:var(--ig-dark-2)!important}
.sticky-bar{background:var(--ig-dark)!important}
.footer{background:var(--ig-dark-deep)}
.hero-media{box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 0 1px rgba(212,178,106,.35)!important}

/* ===== premium layer ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* scroll progress hairline */
.ig-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--ig-gold),#E6CC92 60%,var(--ig-accent-lt));box-shadow:0 0 12px rgba(212,178,106,.55);pointer-events:none}
/* header condenses on scroll */
.nav-wrap .nav{transition:padding .35s cubic-bezier(.2,.7,.2,1)}
.nav-wrap .nav img{transition:height .35s cubic-bezier(.2,.7,.2,1)}
.nav-wrap{transition:box-shadow .35s,background .35s}
.nav-wrap.is-scrolled .nav{padding:12px 0}
.nav-wrap.is-scrolled .nav img{height:32px}
.nav-wrap.is-scrolled{box-shadow:0 10px 30px rgba(35,36,40,.10)}
/* spotlight + film grain on dark surfaces */
.ig-spot{position:relative;isolation:isolate}
.ig-spot>*{position:relative;z-index:1}
.ig-spot::before,.hero-light.ig-spot::before{content:"";display:block;position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ig-spot::after,.hero-light.ig-spot::after{content:"";display:block;position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .5s;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,0%),rgba(212,178,106,.13),transparent 45%)}
.ig-spot:hover::after{opacity:1}
/* primary buttons: shimmer sweep + magnetic */
.btn{position:relative;overflow:hidden}
.btn-green::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.btn-green:hover::before{left:130%}
.ig-mag{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s!important;will-change:transform}
/* cards: 3D tilt + gold sheen */
.ig-tilt{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s!important;transform-style:preserve-3d;will-change:transform;position:relative}
.ig-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--sx,50%) var(--sy,0%),rgba(212,178,106,.16),transparent 50%)}
.ig-tilt:hover::after{opacity:1}
/* hero image: slow zoom-in on load, parallax handled in JS */
.hero-media{will-change:transform}
.hero-media img,.hero-media video{animation:igKen 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes igKen{from{transform:scale(1.08);filter:saturate(.85)}to{transform:scale(1);filter:none}}
/* gold divider under section titles draws in */
.section h2.reveal::after{transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.2,.7,.2,1) .35s}
.section h2.reveal.in::after{transform:scaleX(1)}
/* marquee pauses on hover */
.marquee-track:hover{animation-play-state:paused}
/* refined focus ring */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--ig-gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hero-media img,.hero-media video{animation:none}.btn-green::before{display:none}.section h2.reveal::after{transform:none}}
/* fix: buttons never shrink or clip their label; shimmer moved to a background layer (no overflow clipping needed) */
.btn{overflow:visible;flex-shrink:0}
.btn-green::before{display:none}
.btn-green{background:linear-gradient(100deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 65%) no-repeat,var(--ig-gold)!important;background-size:250% 100%,100% 100%!important;background-position:160% 0,0 0!important;transition:background-position .8s cubic-bezier(.2,.7,.2,1),transform .25s,box-shadow .25s!important}
.btn-green:hover{background-position:-60% 0,0 0!important}
.sticky-bar .btn-green{background:linear-gradient(100deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 65%) no-repeat,var(--ig-accent)!important;background-size:250% 100%,100% 100%!important;background-position:160% 0,0 0!important}
.sticky-bar .btn-green:hover{background-position:-60% 0,0 0!important}
@media (prefers-reduced-motion:reduce){.btn-green{transition:none!important}}

/* small phones: long all-caps buttons wrap instead of overflowing */
@media (max-width:480px){.btn{white-space:normal;text-align:center;max-width:100%;line-height:1.25}}
@media (max-width:480px){.stat .k{white-space:normal;letter-spacing:.14em!important}}
/* gold highlight: breathing room above so it never clips the line above */
h1:has(.hl),h2:has(.hl),.h2:has(.hl),h3:has(.hl){line-height:1.2}
.hl{padding-top:0;background-position:0 100%;background-size:100% 92%}
.reveal .hl{background-size:0% 92%}
.reveal.in .hl{background-size:100% 92%}
@keyframes igSweep{from{background-size:0% 92%}to{background-size:100% 92%}}
@media (prefers-reduced-motion:reduce){.hl,.reveal .hl{background-size:100% 92%}}
/* CTA bar is a white card even inside dark sections: dark text so the heading is readable */
.cta-bar h2,.cta-bar .h2,.cta-bar .t{color:#111111;-webkit-text-fill-color:#111111}
.cta-bar .hl{color:#0D0D0D;-webkit-text-fill-color:#0D0D0D}