/* Playfair Display stands in for IvyPresto Headline in this preview only. */
:root{
  --bone:#F4F1ED; --bone-deep:#E8E3DA; --bone-line:#D8D2C7;
  --ink:#222326; --ink-soft:#5C5D5F; --ink-faint:#8A8A87;
  --chartreuse:#E6FF06; --on-dark:#EFEDE8; --on-dark-soft:rgba(239,237,232,.70);
  --on-dark-line:rgba(239,237,232,.16);
  --display:"ivypresto-headline","IvyPresto Headline","Playfair Display","Iowan Old Style",Georgia,serif;
  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box}
body{margin:0; background:#1A1B1D; font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased}


.es-frame{container-type:inline-size; width:100%; margin:0 auto; background:var(--bone); overflow:hidden}
.frame[data-w="narrow"]{box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 24px 70px rgba(0,0,0,.5)}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:22px}
@container (min-width:700px){ .wrap{padding-inline:44px} }
@container (min-width:1100px){ .wrap{padding-inline:64px} }

.eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin:0}
h1,h2,h3{margin:0; font-weight:300; text-wrap:balance}
p{margin:0}
.btn{display:inline-block; text-decoration:none; font-family:var(--sans);
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:15px 32px; border:1px solid var(--bone); background:var(--bone); color:var(--ink); transition:.16s}
.btn:hover{background:transparent; color:var(--bone)}
.btn:focus-visible{outline:2px solid var(--chartreuse); outline-offset:3px}

/* masthead over photo */
/* the masthead runs wider than the content measure so the logo and nav anchor to the edges */
.wrap.masthead__in{max-width:1720px; padding-inline:clamp(22px,3.2cqw,58px)}
/* hero copy shares the masthead measure so headlines start on the same left edge as the logo */
.wrap.hero__body,.wrap.hero__foot,.wrap.top__in,.principal>.wrap{max-width:1720px; padding-inline:clamp(22px,3.2cqw,58px)}

.masthead__in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:18px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{height:40px; width:auto; display:block}
.brand span{font-weight:700; font-size:18px; letter-spacing:.2em; color:#fff}
.brand span em{font-style:normal; font-weight:300}
.nav{display:none; gap:21px}
.nav a{font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.82); text-decoration:none; padding-block:4px; border-bottom:1px solid transparent; transition:.15s}
.nav a:hover{color:#fff}
.nav a[aria-current]{color:#fff; border-bottom-color:#fff}
.burger{display:block; width:30px; height:30px; border:0; background:none; cursor:pointer; padding:0; position:relative}
.burger i{position:absolute; left:3px; right:3px; height:1.5px; background:#fff}
.burger i:nth-child(1){top:10px}
.burger i:nth-child(2){top:18px}
@container (min-width:1000px){ .nav{display:flex} .burger{display:none} }
@container (min-width:1150px){ .nav{gap:27px} }

/* ---------- hero ---------- */
.hero{position:relative; isolation:isolate; min-height:clamp(480px,58cqw,660px);
  display:flex; flex-direction:column; background:#1A1B1D url("../img/insights/hero.jpg") center 58%/cover no-repeat}
/* subtle: one even tint over the whole frame, then just enough gradient under the copy */
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(14,16,20,.32) 0%, rgba(14,16,20,0) 19%),
    radial-gradient(115% 82% at 6% 104%, rgba(9,11,14,.80) 0%, rgba(9,11,14,.52) 34%, rgba(9,11,14,.18) 60%, rgba(9,11,14,0) 78%),
    linear-gradient(rgba(13,15,18,.14), rgba(13,15,18,.14))}
.hero__nav{padding-block:18px}
.hero__body{flex:1; display:flex; align-items:flex-end; padding-block:clamp(56px,8cqw,96px) clamp(32px,4.2cqw,50px)}
.hero__copy{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px,2cqw,22px)}
.hero h1{font-family:var(--display); font-size:clamp(52.5px,10.2cqw,118.5px); line-height:.96; letter-spacing:-0.0169em; color:#fff}
.hero__intro{font-size:clamp(14.5px,1.55cqw,17px); font-weight:300; line-height:1.7;
  color:rgba(255,255,255,.82); max-width:58ch;
  padding-top:clamp(10px,1.6cqw,16px); border-top:1px solid rgba(255,255,255,.22)}

/* ---------- in the press ---------- */
.press{padding-block:clamp(50px,7.5cqw,96px); background:var(--bone)}
.press__head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:15px}
.press__head h2{font-family:var(--display); font-size:clamp(29.7px,4.7cqw,48.8px); line-height:1.06; letter-spacing:-0.0117em}
.press__head p{font-size:clamp(14px,1.6cqw,16.5px); font-weight:400; line-height:1.66; color:var(--ink-soft); max-width:64ch}

.cols{display:grid; gap:clamp(22px,3cqw,30px); margin-top:clamp(30px,4.4cqw,50px); align-items:start}
@container (min-width:700px){ .cols{grid-template-columns:1fr 1fr} }

.col{display:flex; flex-direction:column; border:1px solid var(--bone-line); background:#fff}
.col > img{width:100%; max-width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:var(--bone-deep)}
.col__body{display:flex; flex-direction:column; gap:4px; padding:clamp(20px,2.6cqw,26px); flex:1}
.col__name{font-family:var(--display); font-size:clamp(22.3px,2.5cqw,27.6px); line-height:1.1; letter-spacing:-0.0078em}
.col__rule{height:1px; background:var(--bone-line); margin-block:16px}

/* article links */
.art{
  display:grid; grid-template-columns:1fr auto; align-items:start; column-gap:12px;
  text-decoration:none; color:inherit; padding-block:13px;
  border-top:1px solid var(--bone-line); transition:.16s;
}
.art:first-of-type{border-top:0; padding-top:0}
.art__outlet{
  grid-column:1; font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:5px; transition:.16s;
}
.art__title{
  grid-column:1; font-family:var(--display); font-size:15.5px; line-height:1.28;
  letter-spacing:-0.0052em; color:var(--ink); display:block;
}
.art__go{
  grid-column:2; grid-row:1 / -1; align-self:center;
  width:15px; height:15px; flex:none; fill:none; stroke:var(--ink-faint);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:.16s;
}
.art:hover .art__title{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.art:hover .art__outlet{color:var(--ink)}
.art:hover .art__go{stroke:var(--ink); transform:translateX(3px)}
.art:focus-visible{outline:2px solid var(--ink); outline-offset:4px}

/* data, not links: no arrow, no hover, figure carries it */
.col--data .col__body{background:var(--bone)}
.stat{padding-block:15px; border-top:1px solid var(--bone-line)}
.stat:first-of-type{border-top:0; padding-top:0}
.stat__fig{
  font-family:var(--display); font-size:clamp(31.8px,3.8cqw,40.3px); line-height:1;
  letter-spacing:-0.0182em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.stat__lbl{margin-top:8px; font-size:12.5px; font-weight:300; line-height:1.55; color:var(--ink-soft)}
.pending{
  display:inline-block; background:var(--chartreuse); color:var(--ink);
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px 4px; margin-bottom:14px; align-self:flex-start;
}
.col--data .stat__fig{color:var(--ink-faint)}


/* ---------- consumer trends: data, not links ---------- */
.tband{
  position:relative; isolation:isolate; min-height:clamp(200px,26cqw,330px);
  display:flex; align-items:flex-end;
  background:#1A1B1D url("../img/insights/trends.jpg") center 48%/cover no-repeat;
}
.tband::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(12,14,17,.30) 0%, rgba(12,14,17,.52) 58%, rgba(12,14,17,.86) 100%)}
.tband__in{padding-block:clamp(26px,3.6cqw,40px); display:flex; flex-direction:column; align-items:flex-start; gap:11px}
.tband .eyebrow{color:var(--chartreuse)}
.tband h2{font-family:var(--display); font-size:clamp(31.8px,5.3cqw,57.2px); line-height:1.02; letter-spacing:-0.0143em; color:#fff}

.trends{background:var(--ink); color:var(--on-dark); padding-block:clamp(44px,6.5cqw,84px) clamp(18px,2.4cqw,30px)}
.tgrid{display:grid; gap:clamp(26px,3.4cqw,40px); align-items:start}
@container (min-width:700px){ .tgrid{grid-template-columns:1fr 1fr} }
@container (min-width:1000px){ .tgrid{grid-template-columns:repeat(3,1fr)} }
.tgroup{display:flex; flex-direction:column; gap:16px}
.tgroup h3{
  font-family:var(--display); font-style:italic; font-size:clamp(21.2px,2.5cqw,26.5px);
  line-height:1.14; letter-spacing:-0.0078em; color:var(--chartreuse);
  padding-bottom:14px; border-bottom:1px solid var(--on-dark-line);
}
.tgroup ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:15px}
.tgroup li{font-size:13.5px; font-weight:300; line-height:1.64; color:var(--on-dark-soft)}
/* the figures are the scannable part, so they get the display face */
.fig{
  font-family:var(--display); font-size:1.5em; line-height:1;
  letter-spacing:-0.013em; color:var(--on-dark); font-variant-numeric:tabular-nums;
}
.tnote{
  margin-top:clamp(30px,4cqw,44px); padding-top:clamp(20px,2.6cqw,26px);
  border-top:1px solid var(--on-dark-line);
  font-size:12px; font-weight:300; line-height:1.6; color:var(--ink-faint); max-width:72ch;
}

/* ---------- footer (shared across all pages) ---------- */
.foot{background:var(--ink); color:var(--on-dark); padding-block:clamp(44px,6cqw,72px)}
.foot__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:20px; padding-bottom:clamp(26px,3.6cqw,38px); border-bottom:1px solid var(--on-dark-line);
}
.foot__mark{display:flex; align-items:center; gap:11px; text-decoration:none}
.foot__mark img{height:30px; width:auto; display:block}
.foot__mark span{font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.2em; color:var(--on-dark)}
.foot__mark span em{font-style:normal; font-weight:300}
.foot__tag{font-family:var(--display); font-size:clamp(15px,1.8cqw,19px); line-height:1.45; color:var(--on-dark-soft); max-width:42ch}
.foot__grid{display:grid; gap:clamp(16px,2.2cqw,22px); margin-top:clamp(26px,3.6cqw,38px)}
@container (min-width:760px){ .foot__grid{grid-template-columns:repeat(3,1fr)} }
.fcard{
  border:1px solid var(--chartreuse); padding:clamp(22px,3cqw,30px);
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
}
.fcard h3{font-family:var(--display); font-size:clamp(19px,2.3cqw,23px); line-height:1.1; color:var(--on-dark)}
.flist{display:flex; flex-direction:column; align-items:flex-start; gap:11px; width:100%}
.flist a,.flist span,.flist p{
  font-family:var(--sans); font-size:13.5px; font-weight:300; line-height:1.5;
  color:var(--on-dark-soft); text-decoration:none;
}
.flist > a{border-bottom:1px solid transparent; transition:.15s}
.flist > a:hover{color:var(--chartreuse); border-bottom-color:var(--chartreuse)}
.frow{display:flex; align-items:flex-start; gap:11px}
.frow svg{
  flex:none; width:15px; height:15px; margin-top:2px;
  fill:none; stroke:var(--chartreuse); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.frow a{transition:.15s}
.frow a:hover{color:var(--chartreuse)}
.flist a:focus-visible,.fpill:focus-visible,.foot__mark:focus-visible{outline:2px solid var(--chartreuse); outline-offset:3px}
.fpill{
  margin-top:auto; display:block; width:100%; text-align:center; text-decoration:none;
  border:1px solid var(--on-dark-line); border-radius:999px; padding:13px 20px;
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark); transition:.16s;
}
.fpill:hover{background:var(--chartreuse); border-color:var(--chartreuse); color:var(--ink)}
.foot__bar{
  margin-top:clamp(28px,3.6cqw,42px); border-top:1px solid var(--on-dark-line); padding-top:22px;
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
}
.foot__bar p{font-size:11.5px; font-weight:300; color:var(--ink-faint); line-height:1.6}
.foot__bar .legalmark{letter-spacing:.1em; text-transform:uppercase; font-weight:600; font-size:10.5px}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }

/* ---------- mobile menu ---------- */
.mob{position:fixed; inset:0; z-index:300; display:none; background:#1A1B1D; padding:22px;
  flex-direction:column; font-family:var(--sans)}
.mob[data-on="1"]{display:flex}
.mob__top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.mob__eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--chartreuse); margin:0}
.mob__x{width:38px; height:38px; border:1px solid rgba(255,255,255,.22); background:none;
  cursor:pointer; position:relative; border-radius:2px}
.mob__x::before,.mob__x::after{content:""; position:absolute; left:10px; right:10px; top:18px;
  height:1.5px; background:#fff}
.mob__x::before{transform:rotate(45deg)}
.mob__x::after{transform:rotate(-45deg)}
.mob nav{display:flex; flex-direction:column; margin-top:26px; border-top:1px solid var(--on-dark-line)}
.mob nav a{font-family:var(--display); font-weight:300; font-size:27px; line-height:1.1;
  letter-spacing:-.012em; color:var(--on-dark); text-decoration:none; padding-block:17px;
  border-bottom:1px solid var(--on-dark-line)}
.mob nav a:focus-visible{outline:2px solid var(--chartreuse); outline-offset:3px}
body.es-page{margin:0; padding:0; background:var(--bone)}

/* the form is a grid, so WordPress's hidden inputs would otherwise each take a
   row and add a gap; they are taken out of flow instead */
#inq > input[type="hidden"]{display:none}

/* spam honeypot: never shown, never announced */
.es-hp{position:absolute !important; left:-9999px !important; top:auto;
  width:1px; height:1px; overflow:hidden}