/* ---------- SHARED BUTTON ---------- */
.btn-block{display:inline-block;background:var(--stone);color:var(--white);font-family:var(--sans);font-size:13.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;padding:17px 44px;transition:background .35s}

@media(max-width:980px){
    .nav-links{display:none}
    .menu-btn{display:block}
    .nav-links.open{display:flex;position:absolute;top:82px;left:0;right:0;background:var(--ivory);flex-direction:column;padding:34px 6vw;border-bottom:1px solid var(--line);gap:22px}
    .foot-grid{grid-template-columns:1fr;gap:44px}
}

/* ---------- HERO ---------- */
/* Sized to match Chelly's original: the eyebrow and body copy read larger than the first
   pass had them, and the headline sits a little further in from the left. Weights stay on
   the site's own scale, Newsreader 300 and Libre Franklin 300, rather than the heavier
   faces the Showit version used. */
/* Sized to sit with the other page heroes. At 38vw with 9vw and 8vw of padding this
   section came out 570px tall against 702 to 792 everywhere else, which is why it
   read as cramped. */
/* The header is fixed and 83px tall, so it sits over the first 83px of this section.
   Even padding therefore is NOT equal padding: the top has to carry the header height
   on top of it for the visible space above and below to match. */
.re{position:relative;min-height:50vw;padding:calc(12vw + 83px) 6vw 12vw;
  overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.re__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 46%;z-index:0}
/* Flat again, not weighted to one side. The gradient existed to sit behind left aligned
   copy; with the block centred it would have thinned out under the right half of every
   line. Slightly heavier than the old flat .40 so the headline reads cleanly. */
.re__scrim{position:absolute;inset:0;z-index:1;background:rgba(16,16,16,.62)}
/* The headline is sized in vw, so the block that holds it has to be too. At a fixed
   42em the box froze at 756px while the H1 kept growing past 1500px wide, and the
   two lines broke into three and then four. 55vw tracks the type. */
.re__inner{position:relative;z-index:2;margin:0 auto;max-width:55vw;text-align:center}
.re .label{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.20em;
  text-transform:uppercase;line-height:1;color:var(--ivory);margin:0 0 26px;max-width:none}
.re h1{font-family:var(--serif);font-size:clamp(34px,4.10vw,72px);font-weight:300;
  line-height:1.12;letter-spacing:-.004em;margin:0;color:var(--ivory)}
.re p{margin:26px auto 0;max-width:30em;color:rgba(241,236,232,.90);font-size:18px;
  line-height:1.75}

/* ---------- WHAT WE OFFER ---------- */
/* Matched to Chelly's original: square image, wider columns, a much larger heading, and
   body copy at 16px rather than the 14px the first pass used. */
.ro{background:var(--white);padding:10.5vw 0}
.ro__grid{display:grid;grid-template-columns:28.6% 30.4%;column-gap:6.4%;
  justify-content:center;align-items:stretch}
/* The image fills the column rather than sitting at a fixed ratio. Once the offer copy
   expanded, a fixed frame left roughly 320px of dead space beneath it. */
.ro__grid img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  display:block}
.ro h2{font-family:var(--serif);font-size:clamp(30px,3.30vw,58px);font-weight:300;
  line-height:1.06;margin:0 0 2.2vw}
.ro h2 em{font-style:italic}
.ro__lede{margin:0 0 2.0vw;font-size:18px;line-height:1.75;color:var(--ink);
  max-width:30em}
.ro__list{margin:0;padding:0;list-style:none}
.ro__list li{padding:22px 0;border-bottom:1px solid var(--line);font-size:18px;
  line-height:1.75;color:var(--ink)}
.ro__list li:last-child{border-bottom:0}
.ro__list strong{font-weight:500}

/* ---------- WHY CHOOSE US ---------- */
/* The display word is deliberately larger than the image is wide, and the image rides up
   over its lower half. .rw h2.rw__word is qualified so it outranks any .rw h2 rule; without
   that the word renders at subhead size and the image paints over it. */
.rw{background:var(--white);padding:2.0vw 0 8.4vw;text-align:center}
.rw .label{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;line-height:1;color:var(--ink);margin:0;max-width:none}
.rw h2.rw__word{position:relative;z-index:1;font-family:var(--serif);font-weight:300;
  font-style:normal;font-size:clamp(52px,7.6vw,140px);line-height:1;letter-spacing:-.012em;
  margin:2.2vw auto 0;max-width:none}
/* portrait mockup, so the frame is narrower than the landscape shot it replaced,
   set to the file's own ratio so nothing is cropped */
.rw__shot{position:relative;z-index:0;display:block;width:min(560px,35vw);
  margin:-3.2vw auto 0;aspect-ratio:2/3;object-fit:cover}
.rw h3{font-family:var(--serif);font-weight:300;font-style:normal;
  font-size:clamp(22px,2.10vw,36px);line-height:1.2;margin:3.0vw auto 0;max-width:24em}
.rw p{margin:20px auto 0;max-width:32em;font-size:18px;line-height:1.75}
.rw a{display:inline-block;margin-top:2.8vw;font-family:var(--sans);font-size:15px;
  letter-spacing:.02em;color:var(--ink);border:1px solid var(--line);padding:20px 38px;
  transition:background .3s ease,border-color .3s ease}
.rw a:hover{background:var(--stone);border-color:var(--stone)}

/* ---------- BY THE NUMBERS ---------- */
.rn{background:var(--white);padding:0 0 8.4vw}
.rn__inner{width:70%;margin:0 auto}
.rn .label{font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;color:var(--ink);margin:0 0 2.8vw;max-width:none}
.rn__grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:4.4%}
.rn__item{border-left:1px solid var(--line);padding-left:6%}
.rn__fig{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.0vw,72px);
  line-height:1;display:block;letter-spacing:-.01em}
.rn__lab{display:block;margin-top:16px;font-size:15px;line-height:1.5;color:var(--ink)}

/* ---------- THE AGENCY DIFFERENCE ---------- */
/* Matched to Chelly's original: text column centred in the left half rather than pushed to
   the edge, a much larger headline, body copy at 16px with open leading, and an outlined
   button rather than a text link. The image is a tall portrait crop with generous black
   around it, so the band reads as a full-bleed dark field with the photo inset. */
.rd{background:var(--ink);padding:8.4vw 0}
.rd__grid{display:grid;grid-template-columns:36% 32%;column-gap:6%;
  justify-content:center;align-items:center}
.rd__copy{text-align:center;max-width:30em;margin:0 auto}
.rd__grid img{width:100%;aspect-ratio:1148/1370;object-fit:cover;display:block}
.rd .label{font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;color:var(--ivory);margin:0 0 30px;max-width:none}
.rd h2{font-family:var(--serif);font-size:clamp(30px,3.60vw,64px);font-weight:300;
  line-height:1.10;letter-spacing:-.006em;margin:0;color:var(--ivory)}
.rd p{margin:30px auto 0;color:rgba(241,236,232,.88);max-width:28em;font-size:18px;
  line-height:1.85}
.rd a{display:inline-block;margin-top:2.8vw;font-family:var(--sans);font-size:15px;
  letter-spacing:.02em;color:var(--ivory);border:1px solid rgba(241,236,232,.55);
  padding:20px 38px;transition:background .3s ease,color .3s ease,border-color .3s ease}
.rd a:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}

/* ---------- KIND WORDS ---------- */
/* Matched to Chelly's original. The differences from the first pass, all deliberate:
   the KIND WORDS lettering is far larger and sits BEHIND the photograph, overlapping its
   left edge; the photo is a tall portrait, not a small square; the quotes are much larger
   and set on the site's serif; and the second row mirrors the first, quote left and photo
   right, with everything right-aligned. */
.rk{background:var(--white);padding:7.0vw 0 8.4vw}
/* The block is deliberately NOT centred. It sits to the right of centre so the KIND WORDS
   lettering has room to run out into the left margin. Measured off Chelly's reference. */
.rk__inner{width:56.7%;margin:0 17.7% 0 25.6%}

.rk__row{display:grid;grid-template-columns:33.1% 58.0%;column-gap:8.9%;
  align-items:center;margin-bottom:5.5vw}
.rk__row:last-child{margin-bottom:0}

.rk__figure{position:relative}
/* Anchored from the RIGHT, not the left. Anchoring left pushed the lettering off the
   left edge of the viewport once the block moved right.
   right:100% sets the lettering flush to the photograph rather than over it. The
   overlap only works while the photograph is light down its left edge; against the
   black blazer the last letter of each line disappeared. */
.rk__head{position:absolute;z-index:3;top:12.0%;right:100%;left:auto;margin:0;
  font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.05vw,76px);
  line-height:1.02;text-transform:uppercase;letter-spacing:.005em;text-align:right;
  white-space:nowrap}
.rk__shot{position:relative;z-index:2;width:100%;aspect-ratio:2/3;object-fit:cover;
  display:block}

.rk blockquote{font-family:var(--serif);font-weight:300;
  font-size:clamp(24px,2.60vw,46px);line-height:1.14;margin:0;color:var(--ink)}
.rk__sub{margin:26px 0 0;font-size:18px;line-height:1.75;color:var(--ink);max-width:24em}
.rk__by{margin:30px 0 0;font-family:var(--sans);font-size:18px;letter-spacing:.02em;
  color:var(--ink)}

/* second row mirrored: quote on the left, photograph on the right */
.rk__row--alt{grid-template-columns:53.5% 37.4%;column-gap:9.1%}
/* back to a portrait frame now the tablet mockup is replaced by Trevor's portrait.
   2/3 rather than the 33/40 of the first pass, because the file is 0.684 and 2/3 crops
   almost nothing off it. */
.rk__row--alt .rk__shot{aspect-ratio:2/3;object-position:center 22%}
.rk__row--alt .rk__copy{order:1;text-align:right}
.rk__row--alt .rk__figure{order:2}
.rk__row--alt .rk__sub,.rk__row--alt .rk__by{margin-left:auto}

/* ---------- INQUIRE, matching the Begin Your Inquiry page ---------- */
/* Chelly's call: the dark form card and the Ready To Transform band both come out, replaced
   by the same hero and ivory card used on Begin Your Inquiry, so the two read as one
   experience and the fields match. */
/* ---------- INQUIRE HERO ---------- */
.iq{position:relative;min-height:34vw;padding:7.4vw 6vw 0;
  display:flex;flex-direction:column;align-items:center;overflow:hidden}
.iq__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 46%;z-index:0}
.iq__scrim{position:absolute;inset:0;background:rgba(16,16,16,.46);z-index:1}
.iq__word{position:relative;z-index:2;font-family:var(--serif);font-weight:300;
  font-size:clamp(58px,9.6vw,172px);line-height:.92;letter-spacing:-.012em;
  color:var(--ivory);margin:0;text-align:center}

/* ---------- FORM CARD ---------- */
/* The reference uses a black slab. Ink that heavy appears nowhere else on this site, so the
   card is --ivory with ink type and the standard hairline. It still reads as a distinct
   object because it sits over a scrimmed photograph.
   The card is a sibling of the hero, pulled up so its top edge lands just under the display
   word. At 1778: word bottom ~306px, hero bottom 729px, card top 729 - 20vw = 373px. */
/* On Begin Your Inquiry this card is followed by two more sections, so it never touches the
   Instagram strip. Here it is the last thing on the page, so it needs its own closing space
   or the card butts straight into the strip. */
.fc{position:relative;z-index:2;background:var(--ivory);width:min(760px,80vw);
  margin:-16vw auto 9.5vw;padding:4.4vw 4.2vw 3.6vw}
.fc__intro{margin:0 auto;max-width:32em;text-align:center;
  color:rgba(16,16,16,.76);font-size:17px;line-height:1.72}
.fc__intro a{color:var(--ink);font-family:var(--serif);font-style:italic;
  border-bottom:1px solid var(--stone);padding-bottom:2px;
  transition:border-color .3s ease}
.fc__intro a:hover{border-color:var(--gold)}
.fc__fields{margin-top:3.2vw}
.fc__row{display:grid;grid-template-columns:1fr 1fr}
.fc__cell{border-bottom:1px solid var(--line)}
.fc__row .fc__cell:first-child{border-right:1px solid var(--line);padding-right:26px}
.fc__row .fc__cell:last-child{padding-left:26px}
.fc__cell--full{border-bottom:1px solid var(--line)}
.fc input,.fc select,.fc textarea{width:100%;box-sizing:border-box;
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;
  color:var(--ink);background:none;border:0;border-radius:0;padding:18px 0}
.fc textarea{min-height:132px;resize:vertical}
.fc select{appearance:none;cursor:pointer}
.fc input:focus,.fc select:focus,.fc textarea:focus{outline:none}
.fc__cell:focus-within,.fc__cell--full:focus-within{border-bottom-color:var(--gold)}
.fc ::placeholder{color:rgba(16,16,16,.46);opacity:1}
.fc__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fc__foot{display:flex;justify-content:space-between;align-items:center;
  margin-top:2.9vw;gap:24px}
.fc__msg{font-family:var(--sans);font-size:15px;line-height:1.6;margin:0;
  color:rgba(16,16,16,.70);min-height:1.6em}
.fc__msg.ok{color:#4A6A4F}
.fc__msg.err{color:#B04A2F}
.fc__msg a{color:var(--ink);border-bottom:1px solid var(--stone)}
.fc__btn{flex:none;font-family:var(--sans);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);background:var(--stone);border:none;
  border-radius:0;padding:22px 34px;cursor:pointer;
  transition:background .3s ease,color .3s ease}
.fc__btn:hover{background:var(--gold);color:var(--white)}
.fc__btn[disabled]{opacity:.55;cursor:default}

a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media(max-width:980px){
  /* the header is 83px and fixed, so 140px leaves 57px of visible space above the
     eyebrow, which reads even against the 56px underneath the button */
  .re{min-height:0;padding:140px 6vw 56px}
  .re__inner{margin:0 auto;max-width:none}
  .re .label{font-size:12px;margin-bottom:20px}
  .re p{font-size:16px}
  .ro,.rw,.rn,.rd,.rk{padding:56px 0}
  .ro__grid,.rd__grid{grid-template-columns:1fr;margin:0 6vw;row-gap:32px}
  /* single column on a phone, so the image needs its own frame again. 2/3 rather than
     the desktop 3/5, because at 768 a 3/5 frame ran 1,127px tall, taller than any image
     anywhere else on the site */
  .ro__grid img{height:auto;aspect-ratio:2/3;object-position:center 90%}
  .rd__copy{text-align:left;margin:0}
  .rd p{margin-left:0}
  .rd a{padding:18px 30px;font-size:14px}
  .rw__shot{width:82vw;margin-top:-14px}
  .rw h2.rw__word{font-size:clamp(40px,12vw,72px)}
  .rw a{padding:18px 30px;font-size:14px}
  .rn__inner{width:auto;margin:0 6vw}
  .rn__grid{grid-template-columns:1fr 1fr;row-gap:28px}
  .rk__inner{width:auto;margin:0 6vw}
  .rk__row,.rk__row--alt{grid-template-columns:1fr;row-gap:26px;margin-bottom:56px}
  .rk__figure{width:64%}
  .rk__head{position:static;text-align:left;white-space:normal;margin:0 0 14px;
    font-size:clamp(28px,9vw,44px)}
  .rk__row--alt .rk__copy{order:0;text-align:left}
  .rk__row--alt .rk__figure{order:1;margin-left:auto}
  .rk__row--alt .rk__sub,.rk__row--alt .rk__by{margin-left:0}
  .rq__card{width:88vw;padding:30px 24px 26px}
  .rq__row{grid-template-columns:1fr;row-gap:26px}
  .rq__foot{flex-direction:column;align-items:stretch}
  .rq__btn{width:100%}
}

/* ---------- WHO WE WORK WITH ---------- */
.rz{background:var(--near);padding:9vw 0}
.rz__inner{width:78%;margin:0 auto}
.rz .label{text-align:center}
.rz h2{margin:14px 0 0;text-align:center;font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,3.4vw,58px);line-height:1.1;color:var(--ink)}
.rz h2 em{font-style:italic}
.rz__lede{margin:24px auto 0;max-width:34em;text-align:center;font-size:18px;
  line-height:1.75;color:var(--ink)}
.rz__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.2vw 4vw;margin:5vw 0 0}
.rz__item h3{margin:0;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(20px,1.75vw,30px);line-height:1.2;color:var(--ink)}
.rz__item p{margin:12px 0 0;font-size:18px;line-height:1.75;color:var(--ink)}

/* ---------- PROCESS ---------- */
.rp{background:var(--white);padding:9vw 0}
.rp__inner{width:78%;margin:0 auto}
.rp .label{text-align:center}
.rp h2{margin:14px 0 0;text-align:center;font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,3.4vw,58px);line-height:1.1;color:var(--ink)}
.rp h2 em{font-style:italic}
.rp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3.4vw;margin:5vw 0 0}
.rp__step{border-top:1px solid var(--line);padding-top:22px}
.rp__num{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.14em;
  color:#8a827b}
.rp__step h3{margin:14px 0 0;font-family:var(--serif);font-weight:300;
  font-size:clamp(20px,1.75vw,30px);line-height:1.2;color:var(--ink)}
.rp__step p{margin:12px 0 0;font-size:18px;line-height:1.75;color:var(--ink)}

@media(max-width:980px){
  .rz,.rp{padding:56px 0}
  .rz__inner,.rp__inner{width:auto;margin:0 6vw}
  .rz__grid{grid-template-columns:1fr;gap:32px;margin-top:36px}
  .rp__grid{grid-template-columns:1fr;gap:28px;margin-top:36px}
}

/* ---------- CASE STUDY LINKS ---------- */
.rl{background:var(--white);padding:0 0 8vw;text-align:center}
.rl__lab{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:#8a827b;margin:0}
.rl__row{margin:18px 0 0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 2.4vw}
/* padded to a 44px tap target; the link was 36px tall, under the accessible minimum */
.rl__row a{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(19px,1.7vw,28px);line-height:1.3;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line);padding:5px 0 8px;display:inline-block;
  transition:border-color .3s ease}
.rl__row a:hover{border-color:var(--ink)}

/* ---------- FAQ ---------- */
.rf{background:var(--near);padding:9vw 0}
.rf__inner{width:78%;margin:0 auto}
.rf .label{text-align:center}
.rf h2{margin:14px 0 0;text-align:center;font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,3.4vw,58px);line-height:1.1;color:var(--ink)}
.rf h2 em{font-style:italic}
.rf__list{margin:5vw auto 0;max-width:46em}
.rf__item{border-top:1px solid var(--line);padding:30px 0}
.rf__item:last-child{border-bottom:1px solid var(--line)}
.rf__item h3{margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(21px,1.9vw,32px);line-height:1.25;color:var(--ink)}
.rf__item p{margin:14px 0 0;font-size:18px;line-height:1.8;color:var(--ink)}

@media(max-width:980px){
  .rl{padding-bottom:56px}
  .rl__row{gap:12px 20px}
  .rf{padding:56px 0}
  .rf__inner{width:auto;margin:0 6vw}
  .rf__list{margin-top:36px}
  .rf__item{padding:24px 0}
}
.foot-adr{margin:0 0 14px;font-style:normal;line-height:1.7}.fc__steps{list-style:none;margin:26px auto 34px;padding:0;max-width:44em;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;text-align:left}.fc__steps li{border-top:1px solid var(--line);padding-top:14px;font-size:16px;line-height:1.6;color:var(--ink)}.fc__steps span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.14em;color:#8a827b;margin-bottom:8px}.fc__note{margin:22px auto 0;max-width:44em;font-size:15px;line-height:1.7;color:#6a635d;text-align:center}@media(max-width:980px){.fc__steps{grid-template-columns:1fr;gap:18px;margin:22px 0 26px}}

/* POSITION: pin the chat launcher to the lower right, above page content, clear of the
   iPhone home indicator. Inset only, so the widget's own sizing is untouched.
   The vendor dashboard setting takes precedence; this is the fallback. Safe to delete. */
[id*="webchat" i],[class*="webchat" i],
[id*="apigateway" i],[class*="apigateway" i]{
  left:auto !important;
  right:calc(18px + env(safe-area-inset-right, 0px)) !important;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  z-index:55 !important;
}
/* hero CTA + work cards + proof + trust line */
.re__cta{display:inline-block;margin-top:30px;padding:15px 34px;background:#E9E4DB;color:#141412;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.re__cta:hover{background:#DED7CB}
.rl__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,460px));gap:3vw;justify-content:center;max-width:1100px;margin:2.6vw auto 0;padding:0 6vw}
.rl__card{display:block;text-decoration:none;color:inherit}
.rl__card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.rl__name{display:block;margin-top:16px;font-size:15px;letter-spacing:.04em}
.rl__line{display:block;margin-top:6px;font-size:13.5px;color:#6B655C;line-height:1.55}
.rk__result{max-width:760px;margin:3.4vw auto 0;text-align:center;font-size:14.5px;color:#6B655C;line-height:1.7}
.fc__trust{max-width:640px;margin:10px auto 26px;text-align:center;font-size:13.5px;color:#6B655C;font-style:italic}
@media(max-width:980px){.rl__cards{grid-template-columns:1fr;gap:28px}}