/* ImagenLocal theme styles */
:root{
/* palette (ImagenLocal brand board) */
--green: #16A34A; /* verde principal: buttons, accents */
--green-700: #15803D; /* accent text on white (5:1), hovers */
--green-500: #22C55E; /* verde claro */
--green-300: #86EFAC; /* accents on dark backgrounds */
--green-50: #F0FDF4; /* tinted panels */
--blue: #2563EB; /* azul secundario */
--blue-500: #3B82F6;
--ink: #111827; /* carbón: text, dark bands */
--ink-2: #374151;
--ink-deep: #030712;
--gray: #6B7280;
--line: #E5E7EB;
--bg: #FFFFFF;
--bg-soft: #F9FAFB; /* alternate sections */
--bg-gray: #F3F4F6; /* gris claro */
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 1px 2px rgba(17,24,39,.06), 0 12px 32px -16px rgba(17,24,39,.18);
--shadow-lg: 0 2px 4px rgba(17,24,39,.06), 0 28px 60px -28px rgba(17,24,39,.32);
/* type: Poppins everywhere (css/fonts.css) */
--f-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
--f-editorial: "Poppins", ui-sans-serif, system-ui, sans-serif;
--f-body: "Poppins", ui-sans-serif, system-ui, sans-serif;
--f-mono: "Poppins", ui-sans-serif, system-ui, sans-serif;
}
body{padding-top:0}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:clip}
::selection{background:var(--green); color:var(--bg)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
/* Let the browser skip layout and paint for page sections until they are
about to scroll into view (they stay in the page for search, find-in-page
and screen readers). This roughly halves the first layout on phones.
Dark-background bands are left out: while skipped, accessibility checkers
can't see their background and misreport their light text as low contrast. */
main > section:not(.marquee):not(.transform):not(.who--dark):not(.inner-cta){
content-visibility:auto;
contain-intrinsic-size:auto 900px;
}
/* Inline SVG icons (inc/icons.php). Sized and aligned like the Font Awesome
glyphs they replace: one em tall, sitting .125em below the baseline. */
.il-i{display:inline-block; font-style:normal; line-height:1}
.il-i svg{display:inline-block; height:1em; vertical-align:-.125em; fill:currentColor; overflow:visible}
/* Reusable ImagenLocal "iL" monogram mark. The mask lets each placement inherit text color. */
.il-mark{
display:inline-block; width:.66em; height:1em; flex:0 0 auto;
background:currentColor;
-webkit-mask:url("../assets/imagenlocal-icon.svg") center / contain no-repeat;
mask:url("../assets/imagenlocal-icon.svg") center / contain no-repeat;
vertical-align:-.14em;
}
/* ─── layout helpers ────────────────────────────────────── */
.wrap{max-width:1440px; margin:0 auto; padding:0 48px}
.rule{height:1px; background:var(--ink); opacity:.15}
.mono{font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.italic{font-family:var(--f-editorial); font-style:normal;}
.custom-logo-link img {
height: auto;
max-width: 300px;
}
/* ─── NAV ───────────────────────────────────────────────── */
nav.top{
position:sticky; top:0; z-index:1030;
background:rgba(255,255,255,.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom:1px solid rgba(17,24,39,.08);
}
nav.top .il-nav-row{
display:flex; align-items:center; justify-content:space-between;
padding:15px 48px; width:100%; margin:0 auto;
}
.brandmark{
font-family:var(--f-display); font-size:28px; line-height:1;
letter-spacing:-.02em; color:var(--ink);
display:flex; align-items:baseline; gap:2px;
; font-weight:700}
.brandmark .flower{
color:var(--green); width:.56em; height:.9em; transform:translateY(.08em);
}
.brandmark .small{ font-family:var(--f-editorial); font-style:normal; font-size:18px; color:var(--green-700); }
nav.top ul{display:flex; gap:36px; list-style:none; font-size:14px; font-weight:500}
nav.top ul a{opacity:.75; transition:opacity .2s}
nav.top ul a:hover{opacity:1; color:var(--green-700)}
.nav-cta{
background:var(--ink); color:var(--bg);
padding:12px 22px; border-radius:999px; font-size:14px; font-weight:500;
display:inline-flex; align-items:center; gap:8px;
transition:transform .2s, background .2s;
}
.nav-cta:hover{background:var(--green-700); transform:translateY(-1px)}
.nav-cta .dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.3)}
/* ─── HERO ──────────────────────────────────────────────── */
.hero{
position:relative;
padding:64px 0 120px;
background:
radial-gradient(ellipse 80% 60% at 50% 90%, rgba(22,163,74,.22), transparent 70%),
radial-gradient(ellipse 60% 50% at 20% 10%, rgba(220,252,231,.6), transparent 60%),
linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
overflow:hidden;
}
.hero .wrap{position:relative}
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
padding:8px 16px; border:1px solid rgba(17,24,39,.2);
border-radius:999px; font-family:var(--f-mono);
font-size:11px; text-transform:uppercase; letter-spacing:.06em;
background:rgba(255,255,255,.6);
; font-weight:600}
/* The ripple is a pseudo-element animated with transform/opacity, which the
GPU composites — animating box-shadow repainted the dot every frame. */
.eyebrow .pulse{position:relative; width:8px; height:8px; border-radius:50%; background:var(--green)}
.eyebrow .pulse::after{
content:""; position:absolute; inset:0; border-radius:50%;
background:rgba(22,163,74,.5);
animation:pulse 2s infinite;
}
@keyframes pulse{
0%{transform:scale(1); opacity:1}
70%{transform:scale(4); opacity:0}
100%{transform:scale(1); opacity:0}
}
.hero-seo-title{
max-width:680px;
margin:28px 0 0;
font-family:var(--f-body);
font-size:clamp(17px, 1.55vw, 22px);
line-height:1.35;
letter-spacing:-.015em;
font-weight:600;
color:var(--green-700);
}
.hero-title{
font-family:var(--f-display);
font-size:clamp(64px, 10.5vw, 168px);
line-height:.92;
letter-spacing:-.025em;
color:var(--ink);
margin:28px 0 8px;
; font-weight:700}
.hero-title .it{
font-family:var(--f-editorial); font-style:normal;
color:var(--green-700);
}
.hero-sub{
max-width:520px; font-size:19px; line-height:1.5;
color:var(--ink-2); opacity:.8; margin-top:20px;
}
.hero-ctas{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap}
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:16px 28px; border-radius:999px; font-size:15px; font-weight:500;
border:1px solid transparent; cursor:pointer;
transition:all .25s cubic-bezier(.2,.8,.2,1);
}
.btn.primary{ background:var(--green); color:#fff; }
.btn.primary:hover{ background:var(--green-700); color:var(--bg); transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(22,163,74,.55)}
.btn.ghost{ background:transparent; color:var(--ink); border-color:rgba(17,24,39,.25) }
.btn.ghost:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btn .arrow{ display:inline-block; transition:transform .25s }
.btn:hover .arrow{ transform:translateX(3px) }
/* hero grid */
.hero-grid{
display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center;
padding-top:32px;
}
/* hero meta strip */
.meta-strip{
display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
margin-top:72px; padding-top:32px;
border-top:1px solid rgba(17,24,39,.15);
}
.meta-item .n{font-family:var(--f-display); font-size:44px; color:var(--green-700); line-height:1; letter-spacing:-.02em; font-weight:700}
.meta-item .n .it{font-family:var(--f-editorial); font-style:normal; color:var(--green)}
.meta-item .l{font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.7; margin-top:10px; font-weight:600}
/* ─── MARQUEE ───────────────────────────────────────────── */
.marquee{
background:var(--ink); color:var(--bg);
padding:32px 0; overflow:hidden;
border-top:1px solid var(--ink-deep); border-bottom:1px solid var(--ink-deep);
}
.marquee-track{
display:flex; gap:56px; width:max-content;
animation:scroll 40s linear infinite;
}
.marquee span{
font-family:var(--f-display); font-size:56px; line-height:1;
letter-spacing:-.02em; white-space:nowrap;
display:inline-flex; align-items:center; gap:56px;
; font-weight:700}
.marquee .it{font-family:var(--f-editorial); font-style:normal; color:var(--green-300)}
.marquee .dot{width:12px; height:12px; border-radius:50%; background:var(--green); display:inline-block}
@keyframes scroll{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
/* ─── SECTIONS common ───────────────────────────────────── */
section.block{ padding:120px 0 }
.section-head{margin-bottom:64px}
.section-head .num{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.64; font-weight:600}
.section-context{font-family:var(--f-mono); font-size:11px; line-height:1.5; letter-spacing:.06em; text-transform:uppercase; color:var(--green-700); margin-bottom:18px; font-weight:600}
.section-head h2{
font-family:var(--f-display); font-size:clamp(48px, 6vw, 88px);
line-height:.98; letter-spacing:-.025em;
color:var(--ink);
; font-weight:700}
.section-head h2 .it{ font-family:var(--f-editorial); font-style:normal; color:var(--green-700)}
.section-head .lede{font-size:17px; line-height:1.55; opacity:.75; max-width:480px}
/* ─── SERVICES ──────────────────────────────────────────── */
.services-art-column{display:flex; flex-direction:column; align-items:flex-start}
.services-feature-art{width:min(100%,390px); margin:28px auto -18px 0}
.services-feature-art img{
display:block; width:100%; height:auto;
filter:drop-shadow(10px 14px 14px rgba(17,24,39,.14));
transform:rotate(0deg); transition:transform .35s ease;
}
.services-feature-art:hover img{transform:translateY(-5px) rotate(0deg)}
.services{border-top:1px solid rgba(17,24,39,.15); border-bottom:1px solid rgba(17,24,39,.15)}
.service{
background:var(--bg); padding:36px 28px 32px;
display:flex; flex-direction:column; min-height:420px;
position:relative; transition:background .3s;
}
.service:hover{ background:var(--green-50)}
.service .glyph{
width:64px; height:64px; margin:0 auto 24px; font-size:48px;
display:flex; align-items:center; justify-content:center;
color:var(--green-700);
}
.service h3, .service p{text-align:center}
.service h3{
font-family:var(--f-display); font-size:28px; line-height:1.05;
letter-spacing:-.01em; margin-bottom:14px;
; font-weight:700}
.service h3 .it{font-family:var(--f-editorial); font-style:normal; color:var(--green-700)}
.service p{font-size:14.5px; line-height:1.55; opacity:.78; flex:1}
.service .tag{
text-align:left; justify-content:flex-start;
margin-top:20px; font-family:var(--f-mono); font-size:10.5px;
letter-spacing:.06em; text-transform:uppercase;
color:var(--green-700); display:flex; align-items:center; gap:8px
; font-weight:600}
.service .tag::before{ content:""; width:16px; height:1px; background:currentColor}
@media (max-width:991px){
.services-feature-art{width:min(78vw,360px); margin:28px auto 0}
}
@media (max-width:575px){
.services-feature-art{width:min(82vw,300px); margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
.services-feature-art img,.transform-feature-art img{transition:none}
}
/* ─── BEFORE / AFTER ───────────────────────────────────── */
.transform{
background:var(--ink); color:var(--bg);
padding:120px 0; position:relative;
}
.transform .section-head h2{color:var(--bg)}
.transform .section-head h2 .it{color:var(--green-300)}
.transform .section-head .num{color:var(--green-300); opacity:.9}
.transform .section-head .lede{opacity:.75}
.transform-art-column{display:flex; flex-direction:column; align-items:flex-start}
.transform-feature-art{width:min(100%,360px); margin:30px auto -30px 0}
.transform-feature-art img{
display:block; width:100%; height:auto;
filter:drop-shadow(12px 16px 16px rgba(0,0,0,.28));
transform:rotate(0deg); transition:transform .35s ease;
}
.transform-feature-art:hover img{transform:translateY(-5px) rotate(0deg)}
/* Keep artwork visible without JavaScript, then animate it only after JS opts in. */
.js-motion [data-pop-illustration]{opacity:0; transform:translateY(54px) scale(.72)}
.js-motion [data-pop-illustration].is-visible{
animation:illustration-pop-bounce .9s cubic-bezier(.2,.82,.25,1) both;
}
@keyframes illustration-pop-bounce{
0%{opacity:0; transform:translateY(16px)}
100%{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
.js-motion [data-pop-illustration],
.js-motion [data-pop-illustration].is-visible{opacity:1; transform:none; animation:none}
}
@media (max-width:991px){
.transform-feature-art{width:min(78vw,360px); margin:28px auto 0}
}
@media (max-width:575px){
.transform-feature-art{width:min(82vw,300px); margin-top:20px}
}
.comparison-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px}
.comparison-card{min-width:0}
.comparison-media{
--position:50%;
position:relative; aspect-ratio:3/2; overflow:hidden;
border:1px solid rgba(255,255,255,.3); border-radius:10px;
background:var(--bg-gray); box-shadow:var(--shadow);
}
.comparison-image{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.comparison-image--after{filter:none}
.comparison-site{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; color:var(--bg); pointer-events:none}
.comparison-site__bar{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; background:rgba(17,24,39,.88); font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.comparison-site__bar strong{font-family:var(--f-display); font-size:18px; letter-spacing:0; text-transform:none; font-weight:700}
.comparison-site__hero{display:flex; flex:1; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:28px; background:linear-gradient(180deg,transparent 10%,rgba(17,24,39,.72) 100%)}
.comparison-site__hero small{font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.comparison-site__hero strong{margin:8px 0 18px; font-family:var(--f-display); font-size:clamp(32px,4.2vw,58px); line-height:.86; font-weight:700}
.comparison-site__hero em{color:var(--green-300); font-family:var(--f-editorial);}
.comparison-site__hero > span{padding:9px 14px; border-radius:999px; background:var(--green); font-size:10px; font-weight:700}
.comparison-site--boutique .comparison-site__bar{background:rgba(17,24,39,.9)}
.comparison-site--boutique .comparison-site__hero em{color:var(--green-300)}
.comparison-before{position:absolute; inset:0; z-index:2; clip-path:inset(0 calc(100% - var(--position)) 0 0)}
.comparison-label{
position:absolute; top:18px; z-index:4; padding:8px 14px; border-radius:999px;
font-family:var(--f-mono); font-size:10px; line-height:1; letter-spacing:.06em; text-transform:uppercase;
box-shadow:0 4px 14px rgba(0,0,0,.15); pointer-events:none;
; font-weight:600}
.comparison-label--before{left:18px; color:var(--ink); background:var(--bg)}
.comparison-label--after{right:18px; color:var(--ink); background:var(--green)}
.comparison-handle{
position:absolute; top:0; bottom:0; left:var(--position); z-index:3; width:3px;
background:var(--bg); transform:translateX(-50%); pointer-events:none;
box-shadow:0 0 0 1px rgba(17,24,39,.12);
}
.comparison-handle span{
position:absolute; top:50%; left:50%; display:grid; place-items:center;
width:48px; height:48px; border:2px solid var(--bg); border-radius:50%;
color:var(--ink); background:var(--bg); font-size:22px; font-weight:700;
transform:translate(-50%,-50%); box-shadow:0 5px 18px rgba(0,0,0,.28);
}
.comparison-range{
position:absolute; inset:0; z-index:5; width:100%; height:100%; margin:0;
cursor:ew-resize; opacity:0;
}
.comparison-media:focus-within{outline:3px solid var(--green-300); outline-offset:5px}
.comparison-caption{padding:25px 2px 0}
.comparison-caption > span,.comparison-note{
font-family:var(--f-mono); font-size:10px; line-height:1.5; letter-spacing:.06em; text-transform:uppercase;
color:var(--green-300);
; font-weight:600}
.comparison-caption h3{margin:9px 0 0; font-family:var(--f-display); font-size:clamp(28px,3vw,40px); line-height:1.02; font-weight:700}
.comparison-note{margin:34px 0 0; color:rgba(255,255,255,.55)}
/* ─── WHO IT'S FOR ─────────────────────────────────────── */
.who{position:relative}
.who--dark{background:var(--ink); color:var(--bg)}
.who--dark .section-head h2{color:var(--bg)}
.who--dark .section-head h2 .it{color:var(--green-300)}
.who--dark .section-head .num{color:var(--green-300); opacity:.9}
.who--dark .section-head .lede{color:rgba(255,255,255,.76)}
.who--dark .audience-help{border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.035)}
.who--dark .audience-help__item + .audience-help__item{border-color:rgba(255,255,255,.24)}
.who--dark .audience-help__number{color:var(--green-300)}
.who--dark .audience-help__item p{color:rgba(255,255,255,.76); opacity:1}
.who--dark .who-collage-band{
background:var(--ink);
}
.who--dark .biz-card{color:var(--ink)}
.who-community-column{display:flex; flex-direction:column; align-items:flex-start}
.who-community-art{width:min(100%,420px); margin:28px auto -30px 0}
.who-community-art img{
display:block; width:100%; height:auto;
filter:drop-shadow(12px 16px 18px rgba(0,0,0,.3));
transform:rotate(0deg); transition:transform .35s ease;
}
.who-community-art:hover img{transform:translateY(-5px) rotate(0deg)}
.audience-help{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
margin-bottom:64px; border:1px solid rgba(17,24,39,.18); border-radius:10px;
overflow:hidden; background:rgba(255,255,255,.25);
}
.audience-help__item{position:relative; padding:36px 32px; min-width:0}
.audience-help__item + .audience-help__item{border-left:1px solid rgba(17,24,39,.18)}
.audience-help__number{font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; color:var(--green-700); font-weight:600}
.audience-help__item h3{margin:18px 0 10px; font-family:var(--f-display); font-size:clamp(28px,3vw,40px); line-height:1; font-weight:700}
.audience-help__item p{margin:0; font-size:15px; line-height:1.65; opacity:.72}
.who-collage-band{
width:100%;
background:
radial-gradient(circle at 20% 30%, rgba(220,252,231,.5), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(134,239,172,.35), transparent 40%);
}
.who-collage{
position:relative; height:640px;
overflow:visible;
}
.biz-card{
position:absolute;
background:var(--bg); border:1px solid var(--ink);
box-shadow:var(--shadow);
padding:14px; width:220px;
transition:transform .3s; transform:rotate(var(--card-rotate,0deg));
}
.biz-card:hover{transform:translateY(-6px) rotate(0deg) !important}
.biz-card img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; margin-bottom:10px}
.biz-card .name{font-family:var(--f-editorial); font-style:normal; font-size:20px}
.biz-card .type{font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; opacity:.75; margin-top:2px; font-weight:600}
.biz-card.b1{--card-rotate:-4deg; top:6%; left:6%}
.biz-card.b2{--card-rotate:3deg; top:14%; left:34%}
.biz-card.b3{--card-rotate:-2deg; top:8%; right:8%}
.biz-card.b4{--card-rotate:2deg; bottom:8%; left:14%}
.biz-card.b5{--card-rotate:-3deg; bottom:6%; right:24%}
.biz-tag{
position:absolute; padding:12px 22px; border-radius:999px;
font-family:var(--f-editorial); font-style:normal; font-size:22px;
background:var(--green-700); color:var(--bg);
border:1px solid var(--ink);
box-shadow:var(--shadow);
}
.biz-tag.t1{top:44%; left:52%; transform:rotate(0deg)}
.biz-tag.t2{bottom:24%; left:38%; background:var(--green); color:var(--ink); transform:rotate(0deg)}
.biz-tag.t3{top:28%; right:32%; background:var(--green-50); color:var(--ink); transform:rotate(0deg)}
.js-motion .who-collage[data-drop-on-scroll] .biz-card{opacity:0}
.js-motion .who-collage[data-drop-on-scroll].is-dropped .biz-card{
opacity:1; animation:photo-drop-bounce .9s cubic-bezier(.2,.8,.25,1) backwards;
}
.js-motion .who-collage[data-drop-on-scroll].is-dropped .biz-card:nth-child(2){animation-delay:.09s}
.js-motion .who-collage[data-drop-on-scroll].is-dropped .biz-card:nth-child(3){animation-delay:.18s}
.js-motion .who-collage[data-drop-on-scroll].is-dropped .biz-card:nth-child(4){animation-delay:.27s}
.js-motion .who-collage[data-drop-on-scroll].is-dropped .biz-card:nth-child(5){animation-delay:.36s}
@keyframes photo-drop-bounce{
0%{opacity:0; transform:translateY(16px)}
100%{opacity:1; transform:none}
}
@media (max-width:991px){
.who-community-art{width:min(82vw,420px); margin:28px auto 0}
.audience-help{grid-template-columns:1fr; margin-bottom:48px}
.audience-help__item + .audience-help__item{border-left:0; border-top:1px solid rgba(17,24,39,.18)}
.who--dark .audience-help__item + .audience-help__item{border-top-color:rgba(255,255,255,.24)}
.comparison-grid{grid-template-columns:1fr; gap:48px}
.who-collage{height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; padding:30px; overflow:visible}
.biz-card{position:relative; inset:auto !important; width:auto; align-self:start}
.biz-card img{aspect-ratio:4/3}
.biz-tag{position:static; justify-self:start; align-self:center}
}
@media (max-width:575px){
.who-community-art{width:min(84vw,310px); margin-top:20px}
.who-collage{grid-template-columns:1fr; gap:24px; padding:24px 18px}
.biz-card{padding:11px}
.biz-card img{aspect-ratio:4/3}
.biz-tag{font-size:18px; padding:10px 17px}
.comparison-media{aspect-ratio:4/3; box-shadow:var(--shadow)}
.comparison-label{top:12px; padding:7px 10px; font-size:9px}
.comparison-label--before{left:12px}
.comparison-label--after{right:12px}
.comparison-handle span{width:42px; height:42px; font-size:19px}
.comparison-site__bar{padding:13px 14px}
.comparison-site__bar span{display:none}
.comparison-site__hero{padding:18px}
.comparison-site__hero strong{font-size:clamp(30px,9vw,44px)}
.comparison-caption{padding-top:20px}
}
@media (prefers-reduced-motion:reduce){
.who-community-art img{transition:none}
.js-motion .who-collage[data-drop-on-scroll] .biz-card,
.js-motion .who-collage[data-drop-on-scroll].is-dropped .biz-card{opacity:1; animation:none}
}
/* ─── SERVICES PRICING CTA ─────────────────────────────── */
.services-pricing-cta{padding:0 0 120px; background:var(--bg)}
.services-plan-cta{
display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,1.5fr); gap:64px;
padding:72px; border-radius:20px; color:var(--bg); background:var(--ink);
box-shadow:var(--shadow);
}
.services-plan-cta__eyebrow,.services-plan-cta__kicker{
font-family:var(--f-mono); font-size:10px; line-height:1.5; letter-spacing:.06em; text-transform:uppercase;
; font-weight:600}
.services-plan-cta__eyebrow{color:var(--green-300)}
.services-plan-cta__kicker{margin:0 0 18px; color:var(--green-300)}
.services-plan-cta h2{margin:0; color:var(--bg); font-family:var(--f-display); font-size:clamp(48px,6vw,82px); line-height:.92; letter-spacing:-.025em; font-weight:700}
.services-plan-cta h2 .it{color:var(--green-300)}
.services-plan-cta__copy > p:not(.services-plan-cta__kicker){max-width:650px; margin:24px 0 30px; color:rgba(255,255,255,.74); font-size:17px; line-height:1.65}
.services-plan-cta .btn{width:max-content; max-width:100%; text-align:center}
.services-plan-cta__link{display:inline-block; margin:18px 0 0 22px; color:var(--green-300); font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:3px}
.services-plan-cta__link:hover{color:var(--bg)}
@media (max-width:991px){
.services-plan-cta{grid-template-columns:1fr; gap:28px; padding:56px 44px}
}
@media (max-width:575px){
.services-pricing-cta{padding-bottom:80px}
.services-plan-cta{gap:24px; padding:40px 24px; border-radius:16px; box-shadow:var(--shadow)}
.services-plan-cta__link{display:block; margin:16px 0 0}
.services-plan-cta h2{font-size:clamp(42px,13vw,58px)}
.services-plan-cta__copy > p:not(.services-plan-cta__kicker){font-size:16px}
.services-plan-cta .btn{width:100%; white-space:normal}
}
/* ─── PRICING ──────────────────────────────────────────── */
.pricing{
background:
radial-gradient(ellipse 60% 50% at 90% 10%, rgba(22,163,74,.18), transparent 60%),
var(--bg-soft);
padding:120px 0;
}
.price-grid{
display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; align-items:stretch;
}
@media (min-width:992px){
.price-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px}
}
.price-card{
background:var(--bg); border-radius:20px; padding:44px 40px 40px;
border:1px solid rgba(17,24,39,.12);
display:flex; flex-direction:column; min-height:520px;
position:relative; overflow:hidden;
}
.price-card.featured{
background:var(--ink); color:var(--bg); border-color:var(--ink);
}
.price-card .badge{
display:inline-flex; align-items:center; gap:8px;
padding:6px 14px; border-radius:999px;
font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
background:var(--green-50); color:var(--green-700); align-self:flex-start; /* 6.1:1 on blush */
; font-weight:600}
.price-card.featured .badge{ background:var(--green); color:var(--ink)} /* 5.6:1 */
.price-card h3{
font-family:var(--f-display); font-size:36px; line-height:1;
letter-spacing:-.02em; margin-top:20px;
; font-weight:700}
.price-card h3 .it{font-family:var(--f-editorial); font-style:normal; color:var(--green-700)}
.price-card.featured h3 .it{color:var(--green-300)}
.price-card .sub{font-size:15px; opacity:.7; margin-top:8px}
.price-card .amount{
display:flex; align-items:baseline; gap:6px; margin:36px 0 4px;
}
.price-card .amount .dollar{font-family:var(--f-editorial); font-style:normal; font-size:36px; opacity:.7}
.price-card .amount .num{
font-family:var(--f-display); font-size:112px; line-height:.9;
letter-spacing:-.025em;
; font-weight:700}
.price-card .amount .per{font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; opacity:.72; margin-left:8px; font-weight:600}
.price-card ul{list-style:none; margin:32px 0 24px; padding-top:24px; border-top:1px solid rgba(17,24,39,.15); flex:1}
.price-card.featured ul{border-color:rgba(255,255,255,.15)}
.price-card li{padding:10px 0; display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.4}
.price-card li::before{
content:""; width:11px; height:17px; flex:0 0 11px; margin-top:1px;
color:var(--green-700); background:currentColor;
-webkit-mask:url("../assets/imagenlocal-icon.svg") center / contain no-repeat;
mask:url("../assets/imagenlocal-icon.svg") center / contain no-repeat
}
.price-card.featured li::before{color:var(--green-300)}
.price-card .btn{align-self:stretch; justify-content:center; margin-top:auto}
.price-card.featured .btn.primary{background:var(--green)}
.price-card.featured .btn.primary:hover{background:var(--green-700); color:var(--bg)}
/* Shared Blossom + Flourish package cards */
.package-card{min-height:0; isolation:isolate}
.package-card h3{font-size:clamp(48px, 5vw, 72px); margin-top:22px}
.package-card .sub{min-height:44px; max-width:52ch}
.package-details{
border-top:1px solid rgba(17,24,39,.15);
margin-top:28px; padding-top:26px; flex:1;
}
.package-card.featured .package-details{border-color:rgba(255,255,255,.15)}
.package-group + .package-group{margin-top:24px}
.package-group h4{
font-family:var(--f-mono); font-size:12px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; margin:0 0 8px;
color:var(--green-700);
}
.package-card.featured .package-group h4{color:var(--green-300)}
.package-card .package-group ul{
border:0; margin:0; padding:0; display:grid; gap:0; flex:none;
}
.package-card .package-group li{padding:5px 0; font-size:14px; line-height:1.35}
.package-plus{
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
border-radius:14px; padding:18px 20px;
}
.package-card .package-amount{margin:32px 0 0}
.package-card .package-amount .num{font-size:clamp(80px, 8vw, 108px)}
.package-card .onboarding{font-weight:700; font-size:15px; margin:8px 0 0}
.package-card .package-commitment{font-size:13px; margin:6px 0 0; opacity:.8}
.package-card .package-commitment a{text-decoration:underline; text-underline-offset:2px}
.package-card .package-note{font-size:11px; line-height:1.5; opacity:.68; margin:14px 0 26px}
.package-card sup{font-size:.7em; top:-.3em; position:relative}
.package-terms{
max-width:920px; margin:34px auto 0; padding:22px 26px;
border:1px solid rgba(17,24,39,.14); border-radius:16px;
background:rgba(255,255,255,.66); text-align:center;
}
.package-terms p{font-size:13px; line-height:1.6; opacity:.76; margin:0}
.package-terms a{display:inline-flex; margin-top:10px; color:var(--green-700); font-weight:700; font-size:13px}
.package-terms a:hover{color:var(--green-700)}
.js-motion .package-card[data-pop-on-scroll]{opacity:0; transform:translateY(42px) scale(.92)}
.js-motion .package-card[data-pop-on-scroll].is-visible{
animation:package-pop-bounce .82s cubic-bezier(.2,.82,.25,1) both;
}
.js-motion .package-card[data-pop-on-scroll]:nth-child(2).is-visible{animation-delay:.12s}
@keyframes package-pop-bounce{
0%{opacity:0; transform:translateY(16px)}
100%{opacity:1; transform:none}
}
/* No pop-in with reduced motion, or on phones: there the cards sit in a
sideways swipe row, so the second one starts off-screen and would stay
invisible until swiped to. */
@media (prefers-reduced-motion:reduce), (max-width:767px){
.js-motion .package-card[data-pop-on-scroll],
.js-motion .package-card[data-pop-on-scroll].is-visible{
opacity:1; transform:none; animation:none;
}
}
@media (max-width:767px){
.package-pricing{padding:76px 0}
.package-card{padding:32px 22px 28px}
.package-card h3{font-size:46px}
.package-card .sub{min-height:0}
.package-card .amount{flex-wrap:wrap}
.package-card .package-amount .num{font-size:82px}
.package-card .package-amount .per{margin-left:2px}
.package-plus{padding:16px}
.package-card .btn{white-space:normal; text-align:center}
.package-terms{padding:20px; text-align:left}
}
/* ─── HOW IT WORKS ─────────────────────────────────────── */
.steps{border-top:1px solid rgba(17,24,39,.15); border-bottom:1px solid rgba(17,24,39,.15)}
.step{background:var(--bg); padding:44px 32px}
.step .n{
font-family:var(--f-display); font-size:96px; line-height:.9;
letter-spacing:-.025em; color:var(--green-700);
; font-weight:700}
.step .n .it{font-family:var(--f-editorial); font-style:normal; color:var(--green-700)}
.step h3{
font-family:var(--f-display); font-size:28px; line-height:1.05;
letter-spacing:-.01em; margin:20px 0 12px;
; font-weight:700}
.step p{font-size:15px; line-height:1.55; opacity:.8}
.step .time{
display:inline-block; margin-top:20px; padding:6px 14px;
border-radius:999px; background:var(--green-50);
font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
color:var(--green-700);
; font-weight:600}
/* ─── TESTIMONIAL ──────────────────────────────────────── */
.testimonial{
background:var(--green-50);
padding:clamp(72px, 8vw, 120px) 0;
}
.quote-copy{min-width:0}
.quote-mark{
font-family:var(--f-editorial); font-style:normal; font-size:220px;
color:var(--green-700); line-height:.6; opacity:.4;
margin-bottom:-40px;
}
blockquote.pull{
font-family:var(--f-display); font-size:clamp(42px, 4vw, 52px); line-height:1.05;
letter-spacing:-.02em; color:var(--ink); font-weight:700}
blockquote.pull .it{font-family:var(--f-editorial); font-style:normal; color:var(--green-700)}
.attribution{
display:flex; align-items:center; gap:16px; margin-top:36px;
padding-top:28px; border-top:1px solid rgba(17,24,39,.2);
}
.att-img{
width:64px; height:64px; border-radius:50%; overflow:hidden;
border:2px solid var(--ink);
}
.att-img img{width:100%; height:100%; object-fit:cover}
.att-name{font-family:var(--f-editorial); font-style:normal; font-size:22px}
.att-role{font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.7; margin-top:2px; font-weight:600}
.quote-media{display:flex; align-items:center}
.quote-img{width:100%; aspect-ratio:4/5; border-radius:6px; overflow:hidden; position:relative; min-height:0}
.quote-img img{width:100%; height:100%; object-fit:cover}
.quote-img .badge-abs{
position:absolute; bottom:20px; left:20px;
background:var(--bg); border:1px solid var(--ink);
box-shadow:var(--shadow);
padding:10px 16px; border-radius:999px;
}
.badge-abs .num{font-family:var(--f-display); font-size:20px; color:var(--green-700); display:block; line-height:1; font-weight:700}
.badge-abs .lbl{font-family:var(--f-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; opacity:.7; font-weight:600}
@media (max-width:991px){
.quote-grid{--bs-gutter-y:48px}
.quote-img{max-width:640px; aspect-ratio:4/3; margin-inline:auto}
}
@media (max-width:767px){
.testimonial{padding:64px 0}
.testimonial .wrap{padding-inline:20px}
.quote-grid{--bs-gutter-y:36px}
.quote-mark{font-size:160px; margin-bottom:-28px}
blockquote.pull{font-size:clamp(32px, 9.2vw, 42px); line-height:1.08}
.attribution{gap:12px; margin-top:28px; padding-top:22px}
.att-img{width:56px; height:56px; flex:0 0 56px}
.att-name{font-size:20px}
.att-role{font-size:10px; line-height:1.5}
.quote-img{aspect-ratio:1/1}
.quote-img .badge-abs{right:14px; bottom:14px; left:14px; padding:10px 14px}
}
/* ─── FAQ ──────────────────────────────────────────────── */
.faq-list{display:flex; flex-direction:column}
details.faq{
border-top:1px solid rgba(17,24,39,.2);
padding:24px 0; cursor:pointer;
}
details.faq:last-of-type{border-bottom:1px solid rgba(17,24,39,.2)}
details.faq summary{
list-style:none; display:flex; justify-content:space-between; align-items:center;
font-family:var(--f-display); font-size:26px; line-height:1.15;
letter-spacing:-.01em;
; font-weight:700}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .plus{
width:36px; height:36px; border-radius:50%;
background:var(--ink); color:var(--bg);
display:flex; align-items:center; justify-content:center;
flex-shrink:0; margin-left:24px;
transition:transform .3s, background .3s;
font-size:20px; line-height:1;
}
details.faq[open] summary .plus{ transform:rotate(45deg); background:var(--green-700)}
details.faq p{
margin-top:16px; font-size:16px; line-height:1.6; opacity:.75; max-width:640px;
}
/* ─── FOOTER CTA ───────────────────────────────────────── */
.footer-cta{
background:var(--ink); color:var(--bg);
padding:140px 0 40px; position:relative; overflow:hidden;
}
.footer-cta--compact{padding:72px 0 40px}
.footer-cta--compact .footer-meta{margin-top:0}
.footer-cta--inner{
padding:0 0 40px;
background:var(--ink);
}
.footer-cta.footer-cta--inner::before{
inset:0; width:auto; height:auto;
background:radial-gradient(ellipse at 72% 38%, rgba(22,163,74,.35), transparent 65%);
}
.footer-cta--inner .inner-cta--footer{padding:110px 0 120px; background:transparent; overflow:visible}
.footer-cta--inner .footer-meta{margin-top:0}
.footer-cta::before{
content:""; position:absolute; inset:0;
background:radial-gradient(ellipse at 72% 38%, rgba(22,163,74,.35), transparent 65%);
pointer-events:none;
}
.footer-cta .wrap{position:relative}
.cta-headline{
font-family:var(--f-display); font-size:clamp(60px, 9vw, 152px);
line-height:.9; letter-spacing:-.025em;
max-width:1200px;
; font-weight:700}
.cta-headline .it{font-family:var(--f-editorial); font-style:normal; color:var(--green-300)}
.cta-headline .flower{color:var(--green); width:.58em; height:.88em; transform:translateY(-.04em) rotate(0deg)}
.cta-form{
display:flex; gap:12px; margin-top:56px; max-width:640px;
background:rgba(255,255,255,.08); backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.15);
padding:8px; border-radius:999px;
}
.cta-form input{
flex:1; background:transparent; border:none; outline:none;
color:var(--bg); font-family:var(--f-body); font-size:16px;
padding:14px 22px;
}
.cta-form input::placeholder{color:rgba(255,255,255,.5)}
.cta-form button{
background:var(--green); color:#fff; border:none; cursor:pointer;
padding:14px 26px; border-radius:999px; font-family:var(--f-body);
font-size:15px; font-weight:500;
transition:background .2s, transform .2s;
display:inline-flex; align-items:center; gap:8px;
}
.cta-form button:hover{background:var(--green-700); color:var(--bg); transform:translateY(-1px)}
.cta-form--booking-link{display:block; width:max-content; max-width:100%; padding:0; border:0; background:transparent; backdrop-filter:none}
.cta-form--booking-link .btn{min-width:min(100%,290px); justify-content:center}
.footer-meta{
/* columns via Bootstrap grid */
margin-top:120px; padding-top:40px;
border-top:1px solid rgba(255,255,255,.15);
}
.footer-meta h3{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.6; margin-bottom:16px; font-weight:600}
.footer-meta ul{list-style:none; display:flex; flex-direction:column; gap:8px; font-size:14.5px}
.footer-meta ul a{opacity:.8; transition:opacity .2s}
.footer-meta ul a:hover{opacity:1; color:var(--green-300)}
.footer-brand .brandmark{color:var(--bg); font-size:36px; margin-bottom:16px}
.footer-logo{display:inline-flex; align-items:center; width:min(100%, 330px); margin-bottom:18px}
.footer-logo img{display:block; width:100%; height:auto; object-fit:contain}
.footer-brand p{font-size:14.5px; line-height:1.5; opacity:.6; max-width:280px}
.footer-bottom{
display:flex; justify-content:space-between; align-items:center;
margin-top:60px; padding-top:24px;
border-top:1px solid rgba(255,255,255,.1);
font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.5;
; font-weight:600}
.footer-legal{display:flex; align-items:center; gap:24px}
.footer-legal a{transition:color .2s, opacity .2s}
.footer-legal a:hover{color:var(--green-300); opacity:1}
/* Keep the compact hero below 1280px; larger screens use the original composition. */
@media (width < 1280px){
.hero-title{font-size:clamp(64px, 7.5vw, 108px)}
.hero-grid{grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:48px; align-items:center}
}
/* small screens compromise (keep it readable if user opens narrow) */
@media (max-width:1100px){
.wrap{padding:0 32px}
nav.top .il-nav-row{padding:16px 32px}
.hero-grid{gap:32px}
.hero-title{font-size:clamp(56px, 7.2vw, 80px)}
.hero-sub{font-size:17px}
.services{border-top:1px solid rgba(17,24,39,.15); border-bottom:1px solid rgba(17,24,39,.15)}
.steps{border-top:1px solid rgba(17,24,39,.15); border-bottom:1px solid rgba(17,24,39,.15)}
.meta-strip{grid-template-columns:repeat(2,1fr)}
.footer-meta{grid-template-columns:1fr 1fr}
.section-head{margin-bottom:64px}
}
@media (max-width:767px){
.hero{padding:64px 0}
.hero .wrap{padding-inline:20px}
.hero-grid{grid-template-columns:minmax(0, 1fr); gap:24px; padding-top:16px}
.hero-seo-title{margin-top:24px; font-size:17px}
.hero-title{font-size:clamp(54px, 13vw, 80px); margin-top:18px}
.hero-sub{margin-top:24px; max-width:540px}
.hero-ctas{margin-top:24px; gap:12px}
.hero-ctas .btn{padding:14px 20px}
.hero .meta-strip{margin-top:32px; gap:24px 16px; padding-top:24px}
.hero .meta-item .n{font-size:36px}
.hero .meta-item .l{font-size:10px; line-height:1.5}
}
/* ── Stripe-ready purchase page ── */
.purchase-page{background:linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%)}
.purchase-layout{display:grid; grid-template-columns:minmax(0, .9fr) minmax(420px, .7fr); gap:clamp(48px, 7vw, 108px); align-items:start}
.purchase-options h2{margin:26px 0 20px; font-family:var(--f-display); font-size:clamp(54px, 5.4vw, 82px); line-height:.92; letter-spacing:-.025em; font-weight:700}
.purchase-options .lede{max-width:620px}
.purchase-plan-list{display:grid; gap:14px; margin-top:38px}
.purchase-plan{
display:flex; align-items:center; justify-content:space-between; gap:24px;
padding:22px 24px; border:1px solid rgba(17,24,39,.18); border-radius:20px;
background:rgba(255,255,255,.28); color:var(--ink);
transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.purchase-plan:hover{transform:translateY(-2px); color:var(--ink); border-color:rgba(17,24,39,.42); box-shadow:0 14px 30px -24px rgba(17,24,39,.5)}
.purchase-plan.is-selected{background:var(--ink); color:var(--bg); border-color:var(--ink); box-shadow:0 20px 45px -30px rgba(17,24,39,.65)}
.purchase-plan small{display:block; margin-bottom:5px; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; opacity:.65; font-weight:600}
.purchase-plan strong{font-family:var(--f-display); font-size:30px; font-weight:700}
.purchase-plan__price{white-space:nowrap; font-size:14px; opacity:.8}
.purchase-plan__price b{font-family:var(--f-display); font-size:38px; opacity:1; font-weight:700}
.purchase-reassurance{display:flex; gap:16px; margin-top:26px; padding:20px 22px; border-radius:18px; background:rgba(255,255,255,.4)}
.purchase-reassurance i{margin-top:3px; color:var(--green)}
.purchase-reassurance p{margin:0; line-height:1.55; opacity:.78}
.purchase-reassurance a{color:var(--green-700); text-decoration:underline; text-underline-offset:3px}
.purchase-checkout{position:sticky; top:116px; padding:34px; border-radius:26px; background:var(--ink); color:var(--bg); box-shadow:0 32px 70px -45px rgba(17,24,39,.78)}
.purchase-checkout__head{display:flex; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.14); font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; opacity:.72; font-weight:600}
.purchase-secure i{margin-right:6px; color:var(--green-300)}
.purchase-checkout h2{margin:28px 0 8px; font-family:var(--f-display); font-size:50px; line-height:1; font-weight:700}
.purchase-checkout h2 .it{color:var(--green-300)}
.purchase-checkout>p{margin:0; opacity:.66; line-height:1.55}
.purchase-features{display:grid; gap:12px; margin:28px 0; padding:24px 0; border-block:1px solid rgba(255,255,255,.14); list-style:none}
.purchase-features li{display:flex; align-items:center; gap:11px; font-size:14px; opacity:.9}
.purchase-features .il-mark{width:13px; height:13px; color:var(--green)}
.purchase-totals{display:grid; gap:13px}
.purchase-totals>div{display:flex; justify-content:space-between; gap:20px; font-size:14px; opacity:.75}
.purchase-totals strong{font-weight:600; color:var(--bg)}
.purchase-totals__due{margin-top:6px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); align-items:end; opacity:1!important}
.purchase-totals__due span{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.purchase-totals__due strong{font-family:var(--f-display); font-size:38px; font-weight:700}
.purchase-totals__then{font-size:13px!important}
.purchase-checkout>.purchase-commitment{margin:16px 0 0; opacity:1; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.8)}
.purchase-commitment a{color:var(--green-300); text-decoration:underline; text-underline-offset:2px}
.purchase-start{margin-top:24px; text-align:center}
.purchase-start .btn{width:100%; justify-content:center; border:0}
.purchase-start p{margin:13px auto 0; max-width:360px; font-size:12px; line-height:1.5; opacity:.7}
.purchase-next{margin-top:clamp(80px, 10vw, 150px); padding-top:40px; border-top:1px solid rgba(17,24,39,.16)}
.purchase-next__steps{display:grid; grid-template-columns:repeat(3,1fr); margin-top:26px; border:1px solid rgba(17,24,39,.16); border-radius:22px; overflow:hidden}
.purchase-next__steps article{padding:34px; min-height:240px}
.purchase-next__steps article+article{border-left:1px solid rgba(17,24,39,.16)}
.purchase-next__steps article>span{font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; color:var(--green-700); font-weight:600}
.purchase-next__steps h3{margin:26px 0 10px; font-family:var(--f-display); font-size:30px; font-weight:700}
.purchase-next__steps p{margin:0; line-height:1.55; opacity:.65}
@media (max-width:991px){
.purchase-layout{grid-template-columns:1fr}
.purchase-checkout{position:static}
}
@media (max-width:767px){
.purchase-page{padding-top:64px}
.purchase-plan{padding:18px}
.purchase-plan strong{font-size:26px}
.purchase-plan__price b{font-size:32px}
.purchase-checkout{padding:24px 20px; border-radius:22px}
.purchase-next__steps{grid-template-columns:1fr}
.purchase-next__steps article{min-height:0; padding:26px}
.purchase-next__steps article+article{border-left:0; border-top:1px solid rgba(17,24,39,.16)}
}
/* ── utilities (replacing former inline styles) ── */
.u-mt24{margin-top:24px}
.u-mt32{margin-top:32px}
.u-peach{color:var(--green-300)}
.u-dim{opacity:.65}
.u-faq-num{margin-bottom:16px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.64; font-weight:600}
.u-faq-h2{font-family:var(--f-display); font-size:64px; line-height:.98; letter-spacing:-.025em; font-weight:700}
.u-coral-deep{color:var(--green-700)}
.u-page-pad{padding:80px 0}
.eyebrow--dark{border-color:rgba(255,255,255,.25); color:var(--bg); background:rgba(255,255,255,.05)}
.footer-meta ul a i{margin-right:8px; width:14px; text-align:center}
.sr-only,
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* WordPress editor classes, for content typed into pages, FAQs and posts. */
.alignleft{float:left; margin:.3em 1.5em 1em 0}
.alignright{float:right; margin:.3em 0 1em 1.5em}
.aligncenter{display:block; margin-left:auto; margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text, .gallery-caption{margin-top:.5em; font-size:13px; line-height:1.5; opacity:.75}
/* Skip link: .sr-only hides it, but without this rule it stayed a 1x1px
clipped element even when focused — a keyboard user pressing Tab saw focus
vanish with no visual cue. Reveal it on keyboard focus (the :focus-visible
pair keeps it hidden from mouse clicks). */
a.sr-only:focus,
a.sr-only:focus-visible{
position:fixed;
top:12px;
left:12px;
z-index:10000;
width:auto;
height:auto;
margin:0;
padding:14px 24px;
overflow:visible;
clip:auto;
clip-path:none;
background:var(--ink);
color:var(--bg);
border:2px solid var(--green);
border-radius:999px;
font-family:var(--f-body);
font-size:15px;
font-weight:500;
text-decoration:none;
white-space:nowrap;
box-shadow:0 8px 28px rgba(3,7,18,.35);
}
/* Visible focus ring for keyboard users across all interactive elements.
Bootstrap's default can be suppressed by the theme's resets. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline:3px solid var(--green);
outline-offset:2px;
}
/* Bootstrap's .btn:focus-visible removes the outline and draws a shadow from
--bs-btn-focus-shadow-rgb, which this theme never sets, so focused buttons
showed nothing at all. */
.btn:focus-visible{outline:3px solid var(--green); outline-offset:3px; box-shadow:none}
/* #il-main receives focus programmatically after the skip link is used;
it should not draw a focus ring as if it were interactive. */
#il-main:focus{outline:none}
#il-main:focus-visible{outline:none}
/* ── inner pages ── */
.inner-hero{padding:130px 0 80px; border-bottom:1px solid rgba(17,24,39,.12); position:relative; overflow:hidden}
.inner-hero--alt{background:var(--bg-soft)}
.inner-hero h1{font-family:var(--f-display); font-size:clamp(48px,7vw,88px); line-height:.95; letter-spacing:-.025em; margin:24px 0 20px; font-weight:700}
.inner-hero h1 .it{font-family:var(--f-editorial); font-style:normal; color:var(--green-700)}
.inner-hero .lede{font-size:19px; line-height:1.6; opacity:.8; max-width:620px}
.crumbs{font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.7; display:flex; align-items:center; gap:10px; font-weight:600}
.crumbs a{opacity:.9; transition:opacity .2s}
.crumbs a:hover{opacity:1; color:var(--green-700)}
.crumbs .sep{
display:inline-block; width:8px; height:13px; flex:0 0 auto; font-size:0; opacity:.5;
background:currentColor;
-webkit-mask:url("../assets/imagenlocal-icon.svg") center / contain no-repeat;
mask:url("../assets/imagenlocal-icon.svg") center / contain no-repeat;
}
.inner-hero .icon-chip{width:52px; height:52px; border-radius:16px; background:var(--green-50); color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:26px; transform:rotate(0deg)}
.inner-hero__layout--with-media{display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr); gap:clamp(44px, 6vw, 96px); align-items:center}
.inner-hero__copy{min-width:0}
.inner-hero__media{min-width:0; margin:0; display:flex; align-items:center; justify-content:flex-end}
.inner-hero__media img{width:min(100%, 560px); height:auto; object-fit:contain; filter:drop-shadow(0 24px 34px rgba(17,24,39,.14))}
.process-num{font-family:var(--f-display); font-size:64px; line-height:1; color:var(--green-700); font-weight:700}
.inner-cta{background:var(--ink); color:var(--bg); padding:110px 0; text-align:center; position:relative; overflow:hidden}
.inner-cta h2{font-family:var(--f-display); font-size:clamp(40px,5.5vw,64px); line-height:1; letter-spacing:-.02em; margin-bottom:20px; font-weight:700}
.inner-cta h2 .it{font-family:var(--f-editorial); font-style:normal; color:var(--green-300)}
.inner-cta p{font-size:17px; opacity:.75; max-width:520px; margin:0 auto 36px}
.inner-cta .btn.primary{background:var(--green)}
.inner-cta .btn.primary:hover{background:var(--green-700); color:var(--bg)}
.team-card{background:var(--bg); border:1px solid rgba(17,24,39,.12); border-radius:20px; padding:40px 32px; height:100%; transition:transform .3s, box-shadow .3s}
.team-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.team-card h3{font-family:var(--f-display); font-size:26px; margin:18px 0 6px; font-weight:700}
.team-card .role{font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--green-700); margin-bottom:14px; font-weight:600}
.team-card p{font-size:15px; line-height:1.6; opacity:.8}
.avatar{width:88px; height:88px; border-radius:50%; background:var(--green); color:var(--bg); font-family:var(--f-display); font-size:32px; display:flex; align-items:center; justify-content:center; border:2px solid var(--ink); font-weight:700}
.avatar.a2{background:var(--green-700)}
.avatar.a3{background:var(--green-300); color:var(--ink)}
.team-section .team-card{display:flex; flex-direction:column; align-items:center; text-align:center}
.team-section .team-card p{max-width:340px}
.team-section .avatar--portrait{
width:104px; height:104px;
overflow:hidden; background:linear-gradient(145deg,var(--green-50),#FFFFFF);
box-shadow:0 8px 18px rgba(17,24,39,.12);
}
.team-section .avatar--portrait img{display:block; width:100%; height:100%; object-fit:cover; object-position:center}
.team-section .avatar--portrait--contain img{width:92%; height:92%; margin:4%; object-fit:contain}
/* About-page cards fall into place once as they enter the viewport. */
.js-motion [data-drop-box]{opacity:0; transform:translateY(-84px)}
.js-motion [data-drop-box].is-visible{animation:about-box-drop .82s cubic-bezier(.2,.8,.25,1) both}
.js-motion .row > [data-drop-box]:nth-child(2).is-visible{animation-delay:.1s}
.js-motion .row > [data-drop-box]:nth-child(3).is-visible{animation-delay:.2s}
@keyframes about-box-drop{
0%{opacity:0; transform:translateY(16px)}
100%{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
.js-motion [data-drop-box],.js-motion [data-drop-box].is-visible{opacity:1; transform:none; animation:none}
}
.contact-card{background:var(--bg); border:1px solid rgba(17,24,39,.12); border-radius:20px; padding:32px 28px; height:100%; display:flex; flex-direction:column; gap:10px; transition:transform .3s, box-shadow .3s}
.contact-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.contact-card .icon{width:48px; height:48px; border-radius:14px; background:var(--green-50); color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:8px}
.contact-card h2{font-family:var(--f-display); font-size:23px; font-weight:700}
.contact-card p{font-size:14.5px; line-height:1.55; opacity:.75; margin:0}
.contact-card .val{font-family:var(--f-editorial); font-style:normal; font-size:19px; color:var(--green-700); margin-top:auto; padding-top:10px}
.contact-card .val a:hover{color:var(--green-700)}
.form-panel{background:#fff; border:1px solid rgba(17,24,39,.14); border-radius:24px; padding:44px 40px; box-shadow:var(--shadow)}
.form-panel label{font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--green-700); display:block; margin-bottom:8px; font-weight:600}
.form-panel .form-control, .form-panel .form-select{
background:var(--bg); border:1px solid rgba(17,24,39,.18); border-radius:12px;
font-family:var(--f-body); font-size:15px; color:var(--ink); padding:13px 16px;
}
.form-panel .form-control:focus, .form-panel .form-select:focus{
background:var(--bg); border-color:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.18); color:var(--ink)
}
.form-note{font-size:13px; opacity:.65; margin-top:16px; display:flex; align-items:center; gap:8px}
/* Contact Form 7 adds
s around the icon when the form markup spans lines. */
.form-note br{display:none}
.form-note .il-i{flex:0 0 auto}
.stat-row{display:flex; gap:48px; flex-wrap:wrap; margin-top:44px}
.stat-row .n{font-family:var(--f-display); font-size:54px; line-height:1; color:var(--green-700); font-weight:700}
.stat-row .l{font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; opacity:.7; margin-top:6px; font-weight:600}
.team-section .stat-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,48px); width:100%}
.team-section .stat-row > div{text-align:center; min-width:0}
/* ─── FREE MOCKUP OFFER BAND ───────────────────────────── */
.mockup-offer{padding:clamp(64px,8vw,104px) 0}
.mockup-offer + section.block{padding-top:0}
.mockup-offer__card{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,64px); align-items:center; padding:clamp(28px,4.5vw,56px); border:1px solid rgba(17,24,39,.12); border-radius:24px; background:#FFFFFF; box-shadow:var(--shadow)}
.mockup-offer__kicker{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--green-700); font-weight:600}
.mockup-offer h2{margin:14px 0 16px; font-family:var(--f-display); font-size:clamp(34px,4vw,52px); line-height:.98; font-weight:700}
.mockup-offer h2 .it{font-family:var(--f-editorial); font-style:normal; color:var(--green-700)}
.mockup-offer p{margin:0 0 26px; max-width:460px; font-size:16px; line-height:1.65; opacity:.78}
.mockup-offer__art{margin:0}
.mockup-offer__art img{display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 18px 40px -22px rgba(17,24,39,.45)}
@media (max-width:767px){
.mockup-offer__card{grid-template-columns:1fr; box-shadow:var(--shadow)}
.mockup-offer__art{order:-1}
}
/* ─── DISCOVERY CALL ───────────────────────────────────── */
.discovery-booking{background:linear-gradient(180deg,var(--bg-soft) 0%,#FFFFFF 100%)}
.discovery-booking__grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr); gap:clamp(48px,7vw,100px); align-items:start}
.discovery-booking__intro h2{margin:28px 0 22px; font-family:var(--f-display); font-size:clamp(44px,5vw,72px); line-height:.94; font-weight:700}
.discovery-booking__intro h2 .it{font-family:var(--f-editorial); font-style:normal; color:var(--green-700)}
.discovery-booking__intro .lede{font-size:17px; line-height:1.7; opacity:.78}
.discovery-details{display:grid; gap:18px; margin:34px 0 0; padding:0; list-style:none}
.discovery-details li{display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:center}
.discovery-details i{display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:var(--green-700); background:var(--green-50); font-size:17px}
.discovery-details span{font-size:14px; line-height:1.5; opacity:.78}
.discovery-details strong{display:block; color:var(--ink); font-size:15px; opacity:1}
.booking-calendar{padding:clamp(24px,4vw,42px); border:1px solid rgba(17,24,39,.15); border-radius:24px; background:var(--bg); box-shadow:var(--shadow)}
.booking-calendar__top{display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:24px; border-bottom:1px solid rgba(17,24,39,.12)}
.booking-calendar__top > div{display:flex; flex-direction:column; gap:3px}
.booking-calendar__top span:first-child{font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--green-700); font-weight:600}
.booking-calendar__top strong{font-family:var(--f-display); font-size:27px; font-weight:700}
.booking-calendar__duration{white-space:nowrap; padding:9px 13px; border-radius:999px; background:var(--green-50); font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; font-weight:600}
.booking-calendar__frame{display:block; width:100%; height:720px; margin-top:24px; border:0; border-radius:14px; background:#fff}
.booking-calendar__cal{min-height:560px; margin-top:24px; border-radius:14px; overflow:hidden; background:#FFFFFF}
.booking-calendar > p{margin:18px 0 0; text-align:center; font-size:12px; opacity:.85}
.booking-calendar > p a{color:var(--green-700); font-weight:600}
@media (max-width:991px){
.discovery-booking__grid{grid-template-columns:1fr; gap:46px}
.booking-calendar{max-width:680px; width:100%; margin-inline:auto}
}
@media (max-width:575px){
.booking-calendar{padding:24px 18px; border-radius:18px; box-shadow:var(--shadow)}
.booking-calendar__top{align-items:flex-start; flex-direction:column}
.booking-calendar__duration{align-self:flex-start}
.booking-calendar__frame{height:1240px}
}
/* ─── POSTCARD (/hello/) ───────────────────────────────── */
/* The bonus is a torn-off coupon: dashed terracotta edge, mono labels, a big price. */
.postcard-bonus{margin-top:6px; padding:22px 24px 20px; border:1.5px dashed var(--green-700); border-radius:18px; background:#FFFFFF}
.postcard-bonus__top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--green-700); font-weight:600}
.postcard-bonus__price{margin:12px 0 10px; font-family:var(--f-display); font-size:clamp(44px,5vw,60px); line-height:1; color:var(--ink); font-weight:700}
.postcard-bonus__price s{font-size:.5em; color:var(--ink-2); opacity:.6; text-decoration-thickness:2px; margin-right:6px}
.postcard-bonus__price small{font-family:var(--f-editorial); font-style:normal; font-size:.42em; color:var(--green-700)}
.postcard-bonus p:last-child{margin:0; font-size:15px; line-height:1.6; opacity:.82}
.postcard-call{margin:22px 0 0; text-align:center; font-size:15px}
.postcard-call a{color:var(--green-700); font-weight:600}
.postcard-terms{margin:22px 0 0; max-width:820px; font-size:12.5px; line-height:1.6; opacity:.78}
.postcard-terms a{color:var(--green-700)}
.booking-calendar > p.booking-calendar__code{margin:20px 0 0; padding:12px 16px; border-radius:12px; background:var(--green-50); text-align:left; font-size:14px; opacity:1}
@media (max-width: 768px){
.inner-hero{padding:90px 0 56px}
.form-panel{padding:32px 24px}
}
/* ── Bootstrap grid integration: hairline separators for border-gap grids ── */
.service{border-bottom:1px solid rgba(17,24,39,.15)}
.step{border-bottom:1px solid rgba(17,24,39,.15)}
.services .service:last-child, .steps .step:last-child{border-bottom:none}
.ba-card{height:100%}
@media (min-width:768px){
.services .service:nth-child(3), .services .service:nth-child(4){border-bottom:none}
}
@media (min-width:992px){
.service{border-bottom:none; border-right:1px solid rgba(17,24,39,.15)}
.services .service:last-child{border-right:none}
.step{border-bottom:none; border-right:1px solid rgba(17,24,39,.15)}
.steps .step:last-child{border-right:none}
}
/* ── header: logo · menu · CTA inline (Bootstrap navbar-proofed) ── */
nav.top .il-nav-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:15px 48px; max-width:1900px; margin:0 auto}
/* ── sticky header: shrink by 30px on scroll (padding 20px → 5px top & bottom = −30px total) ── */
nav.top{box-shadow:0 1px 0 rgba(17,24,39,0)}
nav.top .brandmark{transition:font-size .35s cubic-bezier(.4,0,.2,1)}
nav.top .il-nav-row{transition:padding .35s cubic-bezier(.4,0,.2,1)}
nav.top.is-shrunk .il-nav-row{padding-top:5px; padding-bottom:5px}
nav.top.is-shrunk .brandmark{font-size:24px}
nav.top.is-shrunk{box-shadow:0 12px 32px -18px rgba(17,24,39,.35)}
nav.top .navbar-nav{flex-direction:row; align-items:center; gap:36px; margin:0; padding:0; list-style:none}
nav.top .navbar-nav .nav-link{padding:0; color:inherit; opacity:.75; font-size:14px; font-weight:500; transition:opacity .2s}
nav.top .navbar-nav .nav-link:hover, nav.top .navbar-nav .nav-link:focus{opacity:1; color:var(--green-700)}
.nav-links{margin-left:auto}
.nav-links__foot{display:none}
.nav-links__cta{display:none}
.nav-toggle{display:none}
nav.top .nav-cta{flex-shrink:0; white-space:nowrap}
@media (width < 1280px){
nav.top .il-nav-row{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:16px; padding:14px 24px}
nav.top .custom-logo-link{min-width:0; width:100%; max-width:260px}
nav.top .custom-logo-link img{width:100%; max-width:100%; height:auto}
nav.top .brandmark{font-size:24px; flex-wrap:wrap}
nav.top .nav-cta{grid-column:2; grid-row:1}
.nav-toggle{grid-column:3; grid-row:1; width:44px; height:44px; padding:11px; border:1px solid rgba(17,24,39,.25); border-radius:12px; background:var(--bg); color:var(--ink); cursor:pointer; flex-direction:column; justify-content:center; gap:5px}
.nav-toggle span{display:block; width:20px; height:2px; background:currentColor; transition:transform .2s, opacity .2s}
/* "js" is set on by an inline script (il_js_classes()), so the
collapsed menu renders in its final state on the first paint. */
.js .nav-toggle{display:flex}
/* Without JS the links simply sit in a row under the header. */
.nav-links{grid-column:1 / -1; width:100%; margin:0; padding-top:14px; border-top:1px solid rgba(17,24,39,.15)}
nav.top .navbar-nav{flex-direction:column; align-items:stretch; gap:0}
nav.top .navbar-nav a{display:block; padding:12px 8px; min-height:44px}
nav.top .navbar-nav .nav-link{padding:12px 8px}
.is-menu-open .nav-toggle{color:var(--bg); background:var(--ink); border-color:var(--ink)}
.is-menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.is-menu-open .nav-toggle span:nth-child(2){opacity:0}
.is-menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* With JS: a full-screen panel under the header bar, which stays in place
(logo, "book a discovery call", close). --il-nav-h is the header's
height, set by js/main.js on open. The header's blur is switched off
while open: backdrop-filter would make the header the containing block
of the fixed panel. */
.js nav.top.is-menu-open{background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none}
.js .nav-links{position:fixed; inset:var(--il-nav-h, 136px) 0 0; z-index:1; display:flex; flex-direction:column; width:auto; padding:clamp(24px, 5vh, 52px) 28px 28px; border-top:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; color:var(--bg); background:radial-gradient(130% 70% at 100% 0%, #1F2937 0%, var(--ink) 52%, var(--ink-deep) 100%); opacity:0; visibility:hidden; transition:opacity .28s ease, visibility 0s linear .28s}
.js .is-menu-open .nav-links{opacity:1; visibility:visible; transition:opacity .28s ease}
.js .nav-links::before{content:""; position:absolute; right:-64px; bottom:-48px; width:280px; height:400px; background:url(../assets/imagenlocal-icon.svg) no-repeat center / contain; opacity:.1; transform:rotate(0deg); pointer-events:none}
.js nav.top .navbar-nav{position:relative; width:100%; counter-reset:il-menu}
.js nav.top .navbar-nav li{border-bottom:1px solid rgba(255,255,255,.12)}
.js nav.top .navbar-nav a{display:flex; align-items:center; gap:18px; min-height:0; padding:16px 2px; color:var(--bg); opacity:1; font-family:var(--f-display); font-size:clamp(36px, 10.5vw, 54px); line-height:1.05; letter-spacing:-.015em; text-transform:lowercase; font-weight:700}
.js nav.top .navbar-nav a::before{counter-increment:il-menu; content:counter(il-menu, decimal-leading-zero); align-self:flex-start; margin-top:.5em; font-family:var(--f-mono); font-size:11px; font-style:normal; letter-spacing:.06em; color:var(--green-300); font-weight:600}
.js nav.top .navbar-nav a::after{content:"→"; margin-left:auto; font-family:var(--f-body); font-size:22px; font-style:normal; color:var(--green-300); opacity:0; transform:translateX(-10px); transition:opacity .2s, transform .2s}
.js nav.top .navbar-nav a:hover,
.js nav.top .navbar-nav a:focus-visible{color:var(--green-300)}
.js nav.top .navbar-nav a:focus-visible{outline:2px solid var(--green-300); outline-offset:4px; border-radius:6px}
.js nav.top .navbar-nav a:hover::after,
.js nav.top .navbar-nav a:focus-visible::after,
.js nav.top .navbar-nav a[aria-current="page"]::after{opacity:1; transform:none}
.js nav.top .navbar-nav a[aria-current="page"]{color:var(--green-300); font-family:var(--f-editorial); font-style:normal}
.js .nav-links__foot{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; margin-top:auto; padding-top:32px; font-size:14px}
.js .nav-links__foot span{flex-basis:100%; padding-top:20px; border-top:1px solid rgba(255,255,255,.15); font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--green-300); font-weight:600}
.js .nav-links__foot a{display:inline-flex; align-items:center; gap:8px; min-height:44px; color:rgba(255,255,255,.85)}
.js .nav-links__foot a:hover, .js .nav-links__foot a:focus-visible{color:var(--bg)}
/* Links rise into place one after another. */
.js-motion .is-menu-open .navbar-nav li,
.js-motion .is-menu-open .nav-links__foot{animation:il-menu-in .5s cubic-bezier(.2,.75,.25,1) both}
.js-motion .is-menu-open .navbar-nav li:nth-child(2){animation-delay:.05s}
.js-motion .is-menu-open .navbar-nav li:nth-child(3){animation-delay:.1s}
.js-motion .is-menu-open .navbar-nav li:nth-child(4){animation-delay:.15s}
.js-motion .is-menu-open .navbar-nav li:nth-child(5){animation-delay:.2s}
.js-motion .is-menu-open .navbar-nav li:nth-child(n+6){animation-delay:.25s}
.js-motion .is-menu-open .nav-links__foot{animation-delay:.3s}
}
@keyframes il-menu-in{from{opacity:0; transform:translateY(18px)}}
@media (prefers-reduced-motion: reduce){
.js-motion .is-menu-open .navbar-nav li,
.js-motion .is-menu-open .nav-links__foot{animation:none}
.js .nav-links, .js .is-menu-open .nav-links{transition:none}
}
/* The page behind the open menu doesn't scroll. */
html.il-menu-open{overflow:hidden}
/* Phones: one slim row (logo + menu). "book a free call" lives in the
sticky bottom bar (.sticky-cta) and inside the open menu instead. */
@media (width < 650px){
nav.top .il-nav-row{grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:12px 16px}
nav.top.is-shrunk .il-nav-row{padding-top:8px; padding-bottom:8px}
nav.top .custom-logo-link, nav.top .brandmark{grid-column:1; grid-row:1; justify-self:start; max-width:210px}
nav.top .nav-cta{display:none}
nav.top .nav-toggle{grid-column:2; grid-row:1}
nav.top .nav-links{grid-row:2}
.js .nav-links__cta{display:flex; position:relative; justify-content:center; margin-top:28px}
}
/* ── testimonial cards (CPT grid) ── */
.quote-card{background:var(--bg); border:1px solid rgba(17,24,39,.14); border-radius:20px; padding:36px 30px; height:100%; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s}
.quote-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.quote-card .q{font-family:var(--f-editorial); font-style:normal; font-size:21px; line-height:1.45; flex:1}
.quote-card .q .it{color:var(--green-700)}
.quote-card .who{margin-top:22px; padding-top:18px; border-top:1px solid rgba(17,24,39,.15)}
.quote-card .att-name{font-size:19px}
/* fallback for any section-head not yet on the Bootstrap grid */
.section-head:not(.row){display:grid; grid-template-columns:1fr 1.4fr; gap:60px; margin-bottom:64px; align-items:end}
@media (max-width:991px){ .section-head:not(.row){grid-template-columns:1fr} }
/* ═══════════════ CONTACT FORM 7 ═══════════════
CF7 wraps every field in , which
breaks layouts that target direct input/button children. These rules make
the wrapper transparent and restyle CF7's messages to match the theme. */
/* Neutralise CF7's wrapper so existing layout rules still apply. */
.wpcf7-form-control-wrap { display: block; }
.cta-form .wpcf7-form-control-wrap { flex: 1; display: block; }
/* CF7 injects a around fields in some configurations. */
.wpcf7-form p { margin: 0; }
/* --- Footer CTA: keep the pill shape now that inputs are wrapped ---
CF7 emits the controls inside a single
, so the flex container has to be
that
(flexing the