/* Playfair Display stands in for IvyPresto Headline in this preview only.
   Production swaps in the Adobe Fonts web kit. Copy is verbatim from the Canva file. */
: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}


/* ---------- frame ---------- */
.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} }

/* ---------- type ---------- */
.eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin:0}
.pill{display:inline-block; background:var(--chartreuse); color:var(--ink); padding:8px 16px 7px; border-radius:999px}
h1,h2,h3{margin:0; font-weight:300; text-wrap:balance}
p{margin:0}
.tm{font-size:.5em; vertical-align:.62em; letter-spacing:.04em}

.btn{
  display:inline-block; text-decoration:none; font-family:var(--sans); text-align:center;
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; line-height:1.7;
  padding:15px 30px; border:1px solid var(--chartreuse); background:var(--chartreuse); color:var(--ink); transition:.16s;
}
.btn:hover{background:transparent; color:var(--chartreuse)}
.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-family:var(--sans); 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(530px,64cqw,730px);
  display:flex; flex-direction:column;
  background:#1A1B1D url("../img/ourwork/hero.jpg") center 54%/cover no-repeat;
}
/* scrim weighted to the left so the render stays readable on the right */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(16,17,18,.58) 0%, rgba(16,17,18,0) 24%),
    linear-gradient(96deg, rgba(13,14,16,.92) 0%, rgba(13,14,16,.82) 28%, rgba(13,14,16,.46) 58%, rgba(13,14,16,.08) 100%);
}
.hero__nav{padding-block:18px}
.hero__body{flex:1; display:flex; align-items:flex-end; padding-block:clamp(48px,7cqw,80px) clamp(18px,2.4cqw,28px)}
.hero__copy{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(14px,1.8cqw,20px); color:var(--on-dark);
}
.hero__lede{
  font-family:var(--display); font-size:clamp(15.5px,1.85cqw,20px);
  line-height:1.4; color:rgba(255,255,255,.74);
}
.hero__q{
  font-family:var(--display); font-size:clamp(35.4px,6.1cqw,72.9px);
  line-height:1.04; letter-spacing:-0.0143em; color:#fff; max-width:18.5ch;
}
.hero__sub{
  font-family:var(--sans); font-size:clamp(14.5px,1.55cqw,17px); font-weight:300;
  line-height:1.68; color:rgba(255,255,255,.78); max-width:50ch;
  padding-top:clamp(4px,1cqw,8px);
}
.hero__foot{padding-bottom:clamp(20px,2.6cqw,30px); display:flex; justify-content:flex-end}
.hero__cap{
  font-size:10px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.52); text-align:right;
}

/* ---------- portfolio carousel ---------- */
.portfolio{padding-block:clamp(48px,7cqw,92px); background:var(--bone)}
.portfolio h2{
  font-family:var(--display); text-align:center;
  font-size:clamp(29.7px,4.7cqw,48.8px); line-height:1.08; letter-spacing:-0.0117em;
}
.carousel{position:relative; margin-top:clamp(28px,4cqw,46px)}
.viewport{
  --gap:clamp(16px,2.2cqw,26px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.viewport::-webkit-scrollbar{display:none}
.track{display:flex; gap:var(--gap); align-items:stretch}
.pcard{
  flex:0 0 100%; scroll-snap-align:start;
  display:flex; flex-direction:column;
  border:1px solid var(--bone-line); background:#fff;
}
@container (min-width:640px){ .pcard{flex-basis:calc((100% - var(--gap)) / 2)} }
@container (min-width:1000px){ .pcard{flex-basis:calc((100% - 2 * var(--gap)) / 3)} }

.pcard__media{position:relative; isolation:isolate; aspect-ratio:16/10; overflow:hidden; background:var(--ink)}
.pcard__media > img{width:100%; height:100%; max-width:100%; object-fit:cover; display:block}
.pcard__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,15,16,.34) 0%, rgba(14,15,16,.62) 50%, rgba(14,15,16,.38) 100%);
}
.pcard__logo{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; padding:clamp(18px,3cqw,28px);
}
.pcard__logo img{
  width:auto; max-width:76%; display:block; object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.lg--xwide{height:clamp(15px,1.8cqw,21px)}
.lg--wide {height:clamp(21px,2.5cqw,29px)}
.lg--mid  {height:clamp(28px,3.2cqw,37px)}
.lg--stack{height:clamp(34px,4cqw,46px)}
.lg--block{height:clamp(50px,5.8cqw,68px)}

.pcard__body{display:flex; flex-direction:column; gap:14px; padding:clamp(20px,2.6cqw,26px); flex:1}
.pcard__client{font-family:var(--display); font-style:italic; font-size:14px; line-height:1.3; color:var(--ink)}
.pcard__loc{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px}
.pcard__name{font-family:var(--display); font-size:clamp(22.3px,2.7cqw,27.6px); line-height:1.1; letter-spacing:-0.0078em; margin-top:2px}
.pcard__group{display:flex; flex-direction:column; gap:8px}
.pcard__group .eyebrow{color:var(--ink-faint)}
.pcard ul,.lcard ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.pcard li,.lcard li{
  font-size:13px; font-weight:300; line-height:1.5; color:var(--ink-soft);
  padding-left:15px; position:relative;
}
.pcard li::before,.lcard li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:1px; background:var(--ink-faint);
}
.pcard__rule{height:1px; background:var(--bone-line)}

/* arrows */
.cbtn{
  position:absolute; top:210px; transform:translateY(-50%); z-index:6;
  width:clamp(42px,4.6cqw,52px); height:clamp(42px,4.6cqw,52px);
  border-radius:50%; border:0; cursor:pointer;
  background:var(--ink); color:var(--bone);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.28); transition:.18s;
}
.cbtn:hover:not(:disabled){background:var(--chartreuse); color:var(--ink)}
.cbtn:disabled{opacity:0; pointer-events:none}
.cbtn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.cbtn--prev{left:10px}
.cbtn--next{right:10px}
.cbtn:focus-visible{outline:2px solid var(--chartreuse); outline-offset:3px}

.progress{margin-top:clamp(20px,2.6cqw,28px); height:2px; background:var(--bone-line); position:relative; overflow:hidden}
.progress span{
  position:absolute; inset:0; background:var(--ink);
  transform-origin:left center; transform:scaleX(.5); transition:transform .3s ease;
}

/* ---------- leasing ---------- */
.leasing{background:#fff; padding-block:clamp(48px,7cqw,92px); border-top:1px solid var(--bone-line)}
.leasing__head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px}
.leasing h2{font-family:var(--display); font-size:clamp(29.7px,4.7cqw,48.8px); line-height:1.08; letter-spacing:-0.0117em}
.leasing__head p{font-size:clamp(14px,1.6cqw,16px); font-weight:400; line-height:1.66; color:var(--ink-soft); max-width:66ch}
.leasing__grid{display:grid; gap:clamp(22px,3cqw,32px); margin-top:clamp(30px,4cqw,48px)}
@container (min-width:820px){ .leasing__grid{grid-template-columns:1fr 1fr} }
.lcard{border:1px solid var(--bone-line); display:flex; flex-direction:column; position:relative; transition:.16s}
.lcard:hover{border-color:var(--ink)}
/* the package link covers the whole card, so anywhere on it is clickable */
.lcard__pkg::after{content:""; position:absolute; inset:0}
.lcard:focus-within{outline:2px solid var(--ink); outline-offset:3px}
.lcard img{width:100%; max-width:100%; aspect-ratio:2.185; object-fit:cover; display:block; background:var(--bone-deep)}
.lcard__body{display:flex; flex-direction:column; gap:13px; padding:clamp(20px,2.6cqw,28px); flex:1}
/* pinned to the foot of the card so both links sit on the same line */
.lcard__pkg{
  margin-top:auto; padding-top:clamp(14px,2cqw,18px); align-self:flex-start;
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--bone-line); padding-bottom:4px; transition:.16s;
}
.lcard__pkg:hover{border-color:var(--ink)}
.lcard__pkg:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* ---------- cta ---------- */
.cta{background:var(--bone-deep); padding-block:clamp(44px,6cqw,76px); display:flex; justify-content:center}
.cta .btn{padding-inline:clamp(30px,5cqw,54px)}

/* ---------- footer ---------- */
/* ---------- 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}
  .viewport{scroll-behavior:auto}
}

/* ---------- 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}