:root{
  --tf-ink:#080b12;
  --tf-ink-2:#0f1420;
  --tf-ink-3:#161d2c;
  --tf-line:#252e42;
  --tf-paper:#f2f4f8;
  --tf-white:#ffffff;
  --tf-accent:#c8f542;
  --tf-accent-2:#8fd400;
  --tf-teal:#38e0c8;
  --tf-blue:#3b6bff;
  --tf-text:#0b1018;
  --tf-text-2:#3c4657;
  --tf-text-3:#5c6678;
  --tf-invert:#f4f7fb;
  --tf-invert-2:#aab5c7;
  --tf-radius:18px;
  --tf-radius-sm:10px;
  --tf-shell:min(1240px,92vw);
  --tf-gap:clamp(18px,3vw,40px);
  --tf-display:"Archivo","Space Grotesk","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tf-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tf-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --tf-shadow:0 24px 60px -30px rgba(6,10,20,.45);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--tf-body);
  font-size:17px;
  line-height:1.65;
  color:var(--tf-text);
  background:var(--tf-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--tf-display);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-.02em;
  margin:0;
}

main p{margin:0 0 1.1em}
main p:last-child{margin-bottom:0}

.tf-shell{width:var(--tf-shell);margin-inline:auto}
.tf-shell--wide{width:min(1480px,95vw)}
.tf-shell--narrow{width:min(820px,90vw)}

.tf-section{position:relative;padding:clamp(64px,9vw,140px) 0}
.tf-section--tight{padding:clamp(48px,6vw,90px) 0}
.tf-section--ink{background:var(--tf-ink);color:var(--tf-invert)}
.tf-section--ink-2{background:var(--tf-ink-2);color:var(--tf-invert)}
.tf-section--paper{background:var(--tf-paper)}
.tf-section--white{background:var(--tf-white)}

.tf-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--tf-mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tf-text-3);
}
.tf-section--ink .tf-eyebrow,
.tf-section--ink-2 .tf-eyebrow{color:var(--tf-invert-2)}
.tf-eyebrow::before{
  content:"";
  width:26px;
  height:1px;
  background:currentColor;
  opacity:.6;
}

.tf-display{
  font-family:var(--tf-display);
  font-size:clamp(2.6rem,7.4vw,6.4rem);
  line-height:.96;
  letter-spacing:-.035em;
  font-weight:700;
}
.tf-display--xl{font-size:clamp(3.2rem,10vw,9rem)}
.tf-display--sm{font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.06}
.tf-title{font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.08}
.tf-lede{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:var(--tf-text-2);max-width:62ch}
.tf-section--ink .tf-lede,
.tf-section--ink-2 .tf-lede{color:var(--tf-invert-2)}

.tf-index{
  font-family:var(--tf-mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--tf-text-3);
  text-transform:uppercase;
}
.tf-section--ink .tf-index,
.tf-section--ink-2 .tf-index{color:var(--tf-invert-2)}

.tf-accent-line{color:var(--tf-accent-2)}
.tf-section--ink .tf-accent-line,
.tf-section--ink-2 .tf-accent-line{color:var(--tf-accent)}

.tf-rule{height:1px;background:var(--tf-line);border:0;margin:0}
.tf-section--white .tf-rule,
.tf-section--paper .tf-rule{background:rgba(11,16,24,.12)}

.tf-btn{
  --tf-btn-bg:var(--tf-accent);
  --tf-btn-fg:var(--tf-ink);
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:15px 28px;
  border:1px solid transparent;
  border-radius:100px;
  background:var(--tf-btn-bg);
  color:var(--tf-btn-fg);
  font-family:var(--tf-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease;
}
.tf-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -18px rgba(11,16,24,.5)}
.tf-btn--dark{--tf-btn-bg:var(--tf-ink);--tf-btn-fg:var(--tf-invert)}
.tf-btn--ghost{--tf-btn-bg:transparent;--tf-btn-fg:currentColor;border-color:currentColor}
.tf-btn--ghost:hover{--tf-btn-bg:var(--tf-accent);--tf-btn-fg:var(--tf-ink);border-color:var(--tf-accent)}
.tf-btn i{font-size:.9em}

.tf-link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--tf-display);
  font-weight:600;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}
.tf-link-arrow i{transition:transform .25s ease}
.tf-link-arrow:hover i{transform:translateX(5px)}

.site-head{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1030;
  padding:16px 0;
  color:var(--tf-invert);
  transition:background .3s ease,padding .3s ease,color .3s ease,box-shadow .3s ease;
}
.site-head.is-stuck{
  background:rgba(8,11,18,.92);
  backdrop-filter:blur(14px);
  padding:9px 0;
  box-shadow:0 1px 0 var(--tf-line);
}
.site-head__bar{
  display:flex;
  align-items:center;
  gap:28px;
}
.site-head__brand{display:flex;align-items:center;gap:12px;font-family:var(--tf-display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.site-head__brand img{border-radius:8px}
.site-head__nav{display:flex;gap:26px;margin-inline:auto;font-size:15px}
.site-head__nav a{position:relative;color:var(--tf-invert-2);transition:color .2s ease}
.site-head__nav a::after{
  content:"";
  position:absolute;
  left:0;right:100%;
  bottom:-6px;
  height:1px;
  background:var(--tf-accent);
  transition:right .3s ease;
}
.site-head__nav a:hover,
.site-head__nav a.is-current{color:var(--tf-invert)}
.site-head__nav a:hover::after,
.site-head__nav a.is-current::after{right:0}
.site-head__meta{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.35;color:var(--tf-invert-2);font-family:var(--tf-mono)}
.site-head__meta i{color:var(--tf-accent);margin-right:6px}
.site-head__toggle{
  display:none;
  width:46px;height:46px;
  align-items:center;justify-content:center;
  border:1px solid var(--tf-line);
  border-radius:12px;
  background:transparent;color:var(--tf-invert);
  cursor:pointer;
}
.site-head__meta a{color:inherit}

.nav-drawer{
  position:fixed;
  inset:0;
  z-index:1040;
  background:var(--tf-ink);
  color:var(--tf-invert);
  padding:96px 24px 40px;
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.nav-drawer.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drawer__close{
  position:absolute;top:20px;right:20px;
  width:46px;height:46px;border-radius:12px;
  border:1px solid var(--tf-line);background:transparent;color:inherit;cursor:pointer;
}
.nav-drawer a{
  font-family:var(--tf-display);
  font-size:1.5rem;
  padding:14px 0;
  border-bottom:1px solid var(--tf-line);
  color:var(--tf-invert);
}
.nav-drawer__foot{margin-top:auto;font-family:var(--tf-mono);font-size:13px;color:var(--tf-invert-2);display:grid;gap:6px}

.tf-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding:160px 0 70px;
  background-color:var(--tf-ink);
  background-size:cover;
  background-position:center;
  color:var(--tf-invert);
  overflow:hidden;
}
.tf-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:var(--tf-gap);
  align-items:end;
  width:var(--tf-shell);
  margin-inline:auto;
}
.tf-hero__tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--tf-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 16px;border:1px solid var(--tf-line);border-radius:100px;color:var(--tf-invert-2);
}
.tf-hero__title{margin:22px 0 26px;font-size:clamp(3rem,9vw,8.4rem)}
.tf-hero__title span{display:block}
.tf-hero__title em{font-style:normal;color:var(--tf-accent)}
.tf-hero__aside{
  border-left:1px solid var(--tf-line);
  padding-left:clamp(16px,3vw,32px);
}
.tf-hero__aside p{color:var(--tf-invert-2);margin-bottom:22px}
.tf-hero__facts{display:grid;gap:14px;margin-top:26px}
.tf-hero__fact{display:flex;justify-content:space-between;gap:14px;font-family:var(--tf-mono);font-size:13px;padding-bottom:10px;border-bottom:1px solid var(--tf-line);color:var(--tf-invert-2)}
.tf-hero__fact b{color:var(--tf-invert);font-weight:600}
.tf-hero__scroll{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  font-family:var(--tf-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tf-invert-2);
}
.tf-hero__gridline{
  position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.06);pointer-events:none;
}

.tf-marquee{overflow:hidden;border-top:1px solid var(--tf-line);border-bottom:1px solid var(--tf-line);padding:22px 0}
.tf-marquee__track{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:tfMarquee 32s linear infinite}
.tf-marquee:hover .tf-marquee__track{animation-play-state:paused}
.tf-marquee__item{font-family:var(--tf-display);font-size:clamp(1.1rem,2.6vw,2rem);font-weight:700;letter-spacing:-.02em;color:var(--tf-invert-2);display:flex;align-items:center;gap:56px}
.tf-marquee__item::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--tf-accent)}
@keyframes tfMarquee{to{transform:translateX(-50%)}}

.tf-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--tf-gap)}
.tf-bento__cell{position:relative;border-radius:var(--tf-radius);overflow:hidden}
.tf-card{
  background:var(--tf-white);
  border:1px solid rgba(11,16,24,.08);
  border-radius:var(--tf-radius);
  padding:clamp(24px,3vw,38px);
  color:var(--tf-text);
  position:relative;
  transition:transform .35s ease,box-shadow .35s ease;
}
.tf-card:hover{transform:translateY(-4px);box-shadow:var(--tf-shadow)}
.tf-card--ink{background:var(--tf-ink-2);border-color:var(--tf-line);color:var(--tf-invert)}
.tf-card--accent{background:var(--tf-accent);border-color:transparent;color:var(--tf-ink)}
.tf-card__num{font-family:var(--tf-mono);font-size:12px;letter-spacing:.2em;color:var(--tf-text-3);text-transform:uppercase}
.tf-card--ink .tf-card__num{color:var(--tf-invert-2)}
.tf-card--accent .tf-card__num{color:rgba(8,11,18,.6)}
.tf-card__title{font-family:var(--tf-display);font-size:clamp(1.25rem,2vw,1.6rem);margin:14px 0 12px}
.tf-card p{color:var(--tf-text-2);margin:0}
.tf-card--ink p{color:var(--tf-invert-2)}
.tf-card--accent p{color:#1a2205}
.tf-card__icon{
  width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--tf-ink);color:var(--tf-accent);font-size:20px;
  margin-bottom:18px;
}
.tf-card--ink .tf-card__icon{background:var(--tf-ink-3)}
.tf-card--accent .tf-card__icon{background:var(--tf-ink);color:var(--tf-accent)}

.tf-stack{display:grid;gap:var(--tf-gap)}

.tf-stat{display:grid;gap:6px}
.tf-stat__value{font-family:var(--tf-display);font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;letter-spacing:-.04em}
.tf-stat__value span{font-size:.42em;vertical-align:super;color:var(--tf-accent-2);margin-left:4px}
.tf-stat__label{font-family:var(--tf-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tf-text-3)}
.tf-section--ink .tf-stat__label{color:var(--tf-invert-2)}

.tf-price{
  display:grid;
  border:1px solid rgba(11,16,24,.1);
  border-radius:var(--tf-radius);
  overflow:hidden;
  background:var(--tf-white);
}
.tf-price__head{padding:clamp(22px,2.6vw,34px);border-bottom:1px solid rgba(11,16,24,.08)}
.tf-price__tier{font-family:var(--tf-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tf-text-3)}
.tf-price__figure{font-family:var(--tf-display);font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.035em;margin-top:10px}
.tf-price__figure small{font-size:.34em;font-weight:500;color:var(--tf-text-2);display:block;letter-spacing:0;font-family:var(--tf-body)}
.tf-price__body{padding:clamp(22px,2.6vw,34px);display:grid;gap:12px}
.tf-price__row{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--tf-text-2)}
.tf-price__row i{color:var(--tf-accent-2);margin-top:5px}
.tf-price--feature{border-color:var(--tf-accent);box-shadow:var(--tf-shadow)}
.tf-price--feature .tf-price__head{background:var(--tf-ink);color:var(--tf-invert)}
.tf-price--feature .tf-price__tier{color:var(--tf-invert-2)}
.tf-price--feature .tf-price__figure small{color:var(--tf-invert-2)}
.tf-price--feature .tf-price__body{background:var(--tf-ink-2)}
.tf-price--feature .tf-price__row{color:var(--tf-invert-2)}
.tf-price--feature .tf-price__row i{color:var(--tf-accent)}

.tf-gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:var(--tf-gap)}
.tf-gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--tf-radius);background:var(--tf-ink-3)}
.tf-gallery figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tf-gallery figure:hover img{transform:scale(1.05)}
.tf-gallery figcaption{
  position:absolute;left:16px;right:16px;bottom:14px;
  font-family:var(--tf-mono);font-size:12px;letter-spacing:.06em;
  color:var(--tf-invert);
  background:rgba(8,11,18,.72);
  padding:8px 12px;border-radius:8px;
}
.tf-gallery__a{grid-column:span 3;grid-row:span 2}
.tf-gallery__b{grid-column:span 3;grid-row:span 1}
.tf-gallery__c{grid-column:span 2}
.tf-gallery__d{grid-column:span 2}
.tf-gallery__e{grid-column:span 2}
.tf-gallery__wide{grid-column:span 6}

.tf-steps{display:grid;gap:0;border-top:1px solid var(--tf-line)}
.tf-step{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(16px,3vw,40px);
  padding:clamp(22px,3vw,34px) 0;
  border-bottom:1px solid var(--tf-line);
  align-items:start;
}
.tf-step__num{font-family:var(--tf-mono);font-size:13px;color:var(--tf-accent)}
.tf-step__title{font-family:var(--tf-display);font-size:clamp(1.2rem,2.2vw,1.7rem)}
.tf-step__body{color:var(--tf-invert-2)}
.tf-steps--light{border-color:rgba(11,16,24,.12)}
.tf-steps--light .tf-step{border-color:rgba(11,16,24,.12)}
.tf-steps--light .tf-step__num{color:var(--tf-accent-2)}
.tf-steps--light .tf-step__body{color:var(--tf-text-2)}

.tf-faq{border-top:1px solid rgba(11,16,24,.14)}
.tf-faq__item{border-bottom:1px solid rgba(11,16,24,.14)}
.tf-faq__q{
  width:100%;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;text-align:left;
  font-family:var(--tf-display);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.35rem);
  color:var(--tf-text);
}
.tf-faq__q i{transition:transform .3s ease;color:var(--tf-accent-2)}
.tf-faq__item.is-open .tf-faq__q i{transform:rotate(45deg)}
.tf-faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.tf-faq__a p{padding:0 0 24px;color:var(--tf-text-2);max-width:72ch}
.tf-faq--invert{border-color:var(--tf-line)}
.tf-faq--invert .tf-faq__item{border-color:var(--tf-line)}
.tf-faq--invert .tf-faq__q{color:var(--tf-invert)}
.tf-faq--invert .tf-faq__a p{color:var(--tf-invert-2)}

.tf-form{display:grid;gap:18px}
.tf-form__row{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.tf-field{display:grid;gap:8px}
.tf-field label{font-family:var(--tf-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tf-text-3)}
.tf-field input,
.tf-field select,
.tf-field textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(11,16,24,.16);
  border-radius:12px;
  background:var(--tf-white);
  color:var(--tf-text);
  font-size:15.5px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.tf-field input:focus,
.tf-field select:focus,
.tf-field textarea:focus{
  outline:0;
  border-color:var(--tf-accent-2);
  box-shadow:0 0 0 4px rgba(143,212,0,.18);
}
.tf-field--invert input,
.tf-field--invert select,
.tf-field--invert textarea{background:var(--tf-ink-3);border-color:var(--tf-line);color:var(--tf-invert)}
.tf-field--invert label{color:var(--tf-invert-2)}
.tf-check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--tf-text-2)}
.tf-field--invert .tf-check{color:var(--tf-invert-2)}
.tf-check input{margin-top:5px}

.tf-cta{
  position:relative;
  border-radius:var(--tf-radius);
  padding:clamp(34px,5vw,72px);
  background-color:var(--tf-ink);
  background-size:cover;
  background-position:center;
  color:var(--tf-invert);
  overflow:hidden;
}

.tf-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--tf-gap);align-items:center}
.tf-media{
  position:relative;
  border-radius:var(--tf-radius);
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--tf-ink-3);
}
.tf-media img{width:100%;height:100%;object-fit:cover}
.tf-media--tall{aspect-ratio:3/4}
.tf-media--wide{aspect-ratio:16/10}
.tf-badge{
  position:absolute;
  right:-14px;bottom:24px;
  background:var(--tf-accent);color:var(--tf-ink);
  border-radius:14px;
  padding:16px 20px;
  font-family:var(--tf-mono);font-size:12px;letter-spacing:.08em;
  max-width:220px;
  box-shadow:var(--tf-shadow);
}
.tf-badge b{display:block;font-family:var(--tf-display);font-size:1.5rem;letter-spacing:-.02em}

.tf-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:rgba(11,16,24,.1);border:1px solid rgba(11,16,24,.1);border-radius:var(--tf-radius);overflow:hidden}
.tf-logos__cell{background:var(--tf-white);padding:28px 20px;text-align:center;font-family:var(--tf-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tf-text-3)}
.tf-section--ink .tf-logos,.tf-section--ink-2 .tf-logos{background:var(--tf-line);border-color:var(--tf-line)}
.tf-section--ink .tf-logos__cell,.tf-section--ink-2 .tf-logos__cell{background:var(--tf-ink-2);color:var(--tf-invert-2)}

.tf-post{display:grid;gap:16px;border-top:1px solid rgba(11,16,24,.12);padding-top:26px}
.tf-post__media{aspect-ratio:16/9;border-radius:var(--tf-radius);overflow:hidden;background:var(--tf-ink-3)}
.tf-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tf-post:hover .tf-post__media img{transform:scale(1.04)}
.tf-post__meta{font-family:var(--tf-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tf-text-3)}
.tf-post__title{font-family:var(--tf-display);font-size:clamp(1.3rem,2.4vw,1.9rem)}
.tf-post p{color:var(--tf-text-2)}

.tf-article{width:min(760px,90vw);margin-inline:auto}
.tf-article h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.2em 0 .6em}
.tf-article h3{font-size:clamp(1.2rem,2.2vw,1.5rem);margin:1.8em 0 .5em}
.tf-article ul,.tf-article ol{padding-left:1.3em;color:var(--tf-text-2)}
.tf-article li{margin-bottom:.5em}
.tf-article blockquote{
  margin:1.8em 0;padding:22px 26px;
  border-left:3px solid var(--tf-accent);
  background:var(--tf-white);
  border-radius:0 var(--tf-radius-sm) var(--tf-radius-sm) 0;
  font-family:var(--tf-display);
  font-size:1.15rem;
}
.tf-article figure{margin:2em 0}
.tf-article figcaption{font-family:var(--tf-mono);font-size:12px;color:var(--tf-text-3);margin-top:10px}

.tf-article-hero{
  padding:170px 0 70px;
  background-color:var(--tf-ink);
  background-size:cover;
  background-position:center;
  color:var(--tf-invert);
}
.tf-breadcrumb{font-family:var(--tf-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tf-invert-2);display:flex;gap:10px;flex-wrap:wrap}
.tf-breadcrumb a{color:var(--tf-invert-2)}
.tf-breadcrumb a:hover{color:var(--tf-accent)}

.tf-contact-card{display:grid;gap:22px}
.tf-contact-card__row{display:flex;gap:16px;align-items:flex-start}
.tf-contact-card__row i{
  width:44px;height:44px;flex:0 0 44px;
  display:grid;place-items:center;
  border-radius:12px;
  background:var(--tf-ink);color:var(--tf-accent);
}
.tf-contact-card__row span{font-family:var(--tf-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tf-text-3);display:block}
.tf-contact-card__row p{margin:2px 0 0;color:var(--tf-text)}
.tf-map{border-radius:var(--tf-radius);overflow:hidden;border:1px solid rgba(11,16,24,.1);min-height:380px}
.tf-map iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:grayscale(.2) contrast(1.05)}

.tf-toc{border:1px solid rgba(11,16,24,.1);border-radius:var(--tf-radius);padding:22px;background:var(--tf-white)}
.tf-toc ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.tf-toc a{color:var(--tf-text-2);font-size:15px}
.tf-toc a:hover{color:var(--tf-accent-2)}

.site-foot{background:var(--tf-ink);color:var(--tf-invert);padding:clamp(56px,7vw,96px) 0 30px;border-top:1px solid var(--tf-line)}
.site-foot__top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:var(--tf-gap);padding-bottom:clamp(40px,5vw,70px);border-bottom:1px solid var(--tf-line)}
.site-foot__brand{display:grid;gap:16px;max-width:36ch}
.site-foot__brand img{border-radius:8px}
.site-foot__brand p{color:var(--tf-invert-2);font-size:15px;margin:0}
.site-foot h4{font-family:var(--tf-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tf-invert-2);margin-bottom:18px;font-weight:500}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.site-foot a{color:var(--tf-invert-2);font-size:15px;transition:color .2s ease}
.site-foot a:hover{color:var(--tf-accent)}
.site-foot .tf-invert-line{color:var(--tf-invert);font-size:15px}
.site-foot__bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:26px;font-size:13.5px;color:var(--tf-invert-2);font-family:var(--tf-mono)}
.site-foot__legal{display:flex;flex-wrap:wrap;gap:18px}

.tfconsent{
  position:fixed;
  left:clamp(14px,3vw,32px);
  right:clamp(14px,3vw,32px);
  bottom:clamp(14px,3vw,32px);
  z-index:1055;
  background:var(--tf-ink-2);
  color:var(--tf-invert);
  border:1px solid var(--tf-line);
  border-radius:20px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85);
  padding:clamp(20px,2.6vw,30px);
  animation:tfconsent-in .5s cubic-bezier(.2,.8,.25,1) both;
  max-width:1080px;
  margin-inline:auto;
}
.tfconsent--closing{animation:tfconsent-out .3s ease both}
.tfconsent__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,36px);align-items:center}
.tfconsent__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tfconsent__mark{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--tf-accent);color:var(--tf-ink);font-size:15px;
}
.tfconsent__label{font-family:var(--tf-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tf-accent)}
.tfconsent__text{margin:0;color:var(--tf-invert-2);font-size:15px;max-width:70ch}
.tfconsent__text a{color:var(--tf-invert);text-decoration:underline;text-underline-offset:3px}
.tfconsent__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tfconsent__btn{
  padding:13px 24px;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  font-family:var(--tf-display);
  font-weight:600;
  font-size:14.5px;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.tfconsent__btn:hover{transform:translateY(-2px)}
.tfconsent__btn--solid{background:var(--tf-accent);color:var(--tf-ink)}
.tfconsent__btn--ghost{background:transparent;border-color:var(--tf-line);color:var(--tf-invert)}
.tfconsent__btn--ghost:hover{border-color:var(--tf-accent);color:var(--tf-accent)}

@keyframes tfconsent-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes tfconsent-out{to{opacity:0;transform:translateY(18px)}}

.tf-top{
  position:fixed;right:24px;bottom:24px;z-index:1020;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--tf-accent);color:var(--tf-ink);
  border:0;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.tf-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}

[data-aos]{pointer-events:none}
[data-aos].aos-animate{pointer-events:auto}

@media (max-width:1080px){
  .site-head__nav{display:none}
  .site-head__meta{display:none}
  .site-head__toggle{display:inline-flex;margin-left:auto}
  .tf-hero__grid{grid-template-columns:1fr;gap:32px}
  .tf-hero__aside{border-left:0;border-top:1px solid var(--tf-line);padding-left:0;padding-top:24px}
  .tf-split{grid-template-columns:1fr}
  .site-foot__top{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  body{font-size:16px}
  .tf-bento{grid-template-columns:1fr}
  .tf-bento__cell{grid-column:1/-1 !important}
  .tf-gallery{grid-template-columns:1fr 1fr}
  .tf-gallery__a,.tf-gallery__wide{grid-column:span 2}
  .tf-gallery__b,.tf-gallery__c,.tf-gallery__d,.tf-gallery__e{grid-column:span 2}
  .tf-step{grid-template-columns:auto minmax(0,1fr);gap:8px 18px}
  .tf-step__body{grid-column:2/-1}
  .tf-form__row{grid-template-columns:1fr}
  .tfconsent__inner{grid-template-columns:1fr}
  .tfconsent__actions{width:100%}
  .tfconsent__btn{flex:1 1 auto;text-align:center}
  .site-foot__top{grid-template-columns:1fr}
  .tf-media{aspect-ratio:4/5}
  .tf-badge{right:10px}
}

/* QA_STEP_CARD_GRID_FIX .tf-steps:has(> .tf-step) */
@media(min-width:992px){.tf-steps:has(> .tf-step){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.tf-steps:has(> .tf-step)>:not(.tf-step){grid-column:1/-1}}

/* QA_CONTRAST_HEADER: fixed header sits over the dark hero, so give it a dark bar
   and keep the meta / eyebrow text light for contrast. */
.site-head{background-color:var(--tf-ink)}
.site-head .tf-eyebrow{color:var(--tf-invert-2)}
.site-head__meta span{color:var(--tf-invert-2)}

/* QA_CONTRAST_HERO: eyebrow + stat labels on the dark hero photo. */
.tf-hero .tf-eyebrow{color:var(--tf-invert-2)}
.tf-hero .tf-stat__label{color:var(--tf-invert-2)}

/* QA_CONTRAST_STEPS_LIGHT: the base .tf-steps palette is built for dark sections.
   Inside light sections, switch to the dark-on-light palette. */
.tf-section--white .tf-steps .tf-step__num,
.tf-section--paper .tf-steps .tf-step__num{color:var(--tf-text-3)}
.tf-section--white .tf-steps .tf-step__title,
.tf-section--paper .tf-steps .tf-step__title{color:var(--tf-text)}
.tf-section--white .tf-steps .tf-step__body,
.tf-section--paper .tf-steps .tf-step__body{color:var(--tf-text-2)}
.tf-section--white .tf-steps .tf-step__body .tf-link-arrow,
.tf-section--paper .tf-steps .tf-step__body .tf-link-arrow{color:var(--tf-text)}

/* QA_CONTRAST_FOOTER: footer is dark; lift the muted copy to a legible tone. */
.site-foot .tf-lede{color:var(--tf-invert-2)}
.site-foot .tf-eyebrow{color:var(--tf-invert-2)}
.site-foot .tf-contact-card__row span{color:var(--tf-invert-2)}

/* QA_HEADER_OVERLAP_MOBILE: keep hero content clear of the fixed header. */
@media (max-width:1080px){
  .tf-hero{padding-top:200px}
}

/* ===== QA FIXES: header/hero overlap + contrast ===== */

/* Keep a solid dark backdrop behind the fixed header so header text stays legible */
.site-head{background:rgba(8,11,18,.94)}
.site-head .tf-eyebrow,
.site-head .tf-contact-card__row span{color:var(--tf-invert-2)}

/* Dark hero (not a .tf-section--ink): improve eyebrow and stat-label contrast */
.tf-hero .tf-eyebrow,
.tf-hero .tf-stat__label{color:var(--tf-invert-2)}

/* Steps placed on a white section need dark, readable text */
.tf-section--white .tf-steps .tf-step__body{color:var(--tf-text-2)}
.tf-section--white .tf-steps .tf-step__num{color:#41610a}

/* Step layout: number + one content column (no unused tiny grid track) */
.tf-steps .tf-step{grid-template-columns:auto minmax(0,1fr)}

/* Footer on the dark ink background */
.site-foot .tf-eyebrow,
.site-foot .tf-lede,
.site-foot .tf-contact-card__row span{color:var(--tf-invert-2)}

/* Mobile: offset the page so the fixed header no longer overlaps the hero */
@media (max-width:1080px){
  body{padding-top:180px;background:var(--tf-ink)}
}

/* QA_CONTRAST_BRAND: Bootstrap .navbar-brand forces a dark colour; make the
   header brand text light so it stays legible on the dark header bar. */
.site-head__brand,
.site-head__brand .tf-title{color:var(--tf-invert)}

/* QA_HEADER_OVERLAP_MOBILE_2: the fixed header is out of normal flow, so adding
   padding to the hero alone cannot move its top edge. Offset the page body by the
   header height on small screens so the hero clears the fixed header. */
@media (max-width:1080px){
  body{padding-top:170px}
  .tf-hero{padding-top:0}
}

/* QA_FIX_H100PAGE: contact-card key labels keep the contact rows readable and
   keep the phone / e-mail values as separate text nodes. */
.tf-contact-card__key{color:var(--tf-invert-2);white-space:nowrap}
.tf-section--white .tf-contact-card__key,
.tf-section--paper .tf-contact-card__key{color:var(--tf-text-3)}

/* QA_FIX_H100PAGE: inline confirmation note for the request form. */
.tf-form__note{margin:0;color:var(--tf-invert-2)}
.tf-form__note[hidden]{display:none}

/* QA_FIX_H100PAGE: 6 step cards -> two readable columns on desktop, one on mobile. */
@media (min-width:992px){
  .tf-steps:has(> .tf-step) > .tf-step{
    border:1px solid var(--tf-line);
    border-radius:var(--tf-radius);
    padding:clamp(22px,3vw,34px);
  }
  .tf-section--white .tf-steps:has(> .tf-step) > .tf-step,
  .tf-section--paper .tf-steps:has(> .tf-step) > .tf-step{
    border-color:rgba(11,16,24,.12);
    background:var(--tf-white);
  }
}

/* QA_THANKYOU_CONTRAST: contact-card labels inside dark ink / cta sections must
   use a light tone (the base palette targets light backgrounds). */
.tf-section--ink .tf-contact-card__row span,
.tf-section--ink-2 .tf-contact-card__row span,
.tf-cta .tf-contact-card__row span,
.tf-cta .tf-contact-card__row{color:var(--tf-invert-2)}

/* QA_THANKYOU_HEADER_OVERLAP: the fixed header is out of flow, so offset the
   page on small screens by the header height to keep the hero clear of it. */
@media (max-width:1080px){
  body{padding-top:172px}
  .tf-hero{padding-top:24px}
}

/* QA_HEADER_OVERLAP_MOBILE_3: the fixed header is out of normal flow. Padding on
   <body> does not move the hero's border box (it stays at the top of the page),
   so offset the first in-flow block on small screens with a real element
   before the hero, sized to the measured mobile header height (169px). */
@media (max-width:1080px){
  body{padding-top:0;background:var(--tf-paper)}
  main::before{
    content:"";
    display:block;
    width:100%;
    height:170px;
    background:var(--tf-ink);
  }
  .tf-hero{padding-top:40px}
}

/* QA_PRICE_CONTRAST: the "Au mois" section is dark (.tf-section--ink) while the
   non-featured .tf-price cards keep a white background, so the inherited light
   text colour was invisible. Force the dark body colour on those cards only. */
.tf-section--ink .tf-price:not(.tf-price--feature),
.tf-section--ink .tf-price:not(.tf-price--feature) .tf-price__figure,
.tf-section--ink .tf-price:not(.tf-price--feature) .tf-price__body p{color:var(--tf-text)}

/* QA_PRICE_CONTRAST: stat labels inside the darker ink-2 section need the light
   muted tone instead of the default dark --tf-text-3. */
.tf-section--ink-2 .tf-stat__label{color:var(--tf-invert-2)}

/* QA_HEADER_OVERLAP_MOBILE_FINAL: on small screens the fixed header was sitting
   on top of the hero. Put the header back in normal flow on mobile so it takes
   its own space and never overlaps the hero, and reset the body offset. */
@media (max-width:1080px){
  .site-head{position:static;top:auto;right:auto;bottom:auto;left:auto}
  body{padding-top:0}
  .tf-hero{padding-top:0}
}

/* QA_FIX_BENTO_NARROW_TEXT: .tf-bento is a 12-column grid, but .tf-bento__cell
   items declared no grid-column span, so each card collapsed into a single
   1/12 track (~90px) and the text wrapped a word or two per line. Give the two
   offer cards real half-width tracks on desktop and stack them on mobile. */
.tf-bento > .tf-bento__cell{grid-column:span 6}
@media (max-width:760px){
  .tf-bento > .tf-bento__cell{grid-column:1 / -1}
}

/* QA_HERO_MUTED_CONTRAST: the dark hero (photo + ink overlay) only overrode
   .tf-eyebrow and .tf-stat__label to a light tone. Every other muted text node
   inside the hero (contact-card row spans such as the e-mail, fact spans,
   card numbers, post meta) kept the light-section grey --tf-text-3 (#5c6678),
   which measured ~2.5:1 against the hero backdrop. Scope the light muted tone
   to the hero component only; the rest of the palette is untouched. */
.tf-hero .tf-contact-card__row span,
.tf-hero .tf-contact-card__row p,
.tf-hero .tf-card__num,
.tf-hero .tf-post__meta,
.tf-hero .tf-price__tier,
.tf-hero .tf-stat__label,
.tf-hero .tf-hero__aside span,
.tf-hero .tf-hero__facts span{color:var(--tf-invert-2)}

/* Numeric values inside the hero keep the bright invert tone. */
.tf-hero .tf-stat__value,
.tf-hero .tf-hero__facts .tf-stat__value,
.tf-hero .tf-contact-card__row strong{color:var(--tf-invert)}

/* QA_CONTRAST_MARQUEE: the marquee band has no background of its own, so it fell
   through to the light <body> paper colour while .tf-marquee__item keeps the
   light muted tone (--tf-invert-2) meant for a dark strip. The item text then
   measured ~1.9:1 on the paper backdrop. Give this one band the dark backdrop it
   was designed against (matching its .tf-line borders and neighbouring ink
   sections) and use the bright invert tone for the item text. Scoped to
   .tf-marquee only; the rest of the palette is untouched. */
.tf-marquee{background:var(--tf-ink)}
.tf-marquee__item{color:var(--tf-invert)}