/* Abaya Mentor
   Colours: cream #F4F2EC, ink #1A1815, stone #E7E2D7,
   hairline #BFB8A8 (rules only, never type), body copy #4A4843
   Type: Jost 200/300/400 only. no bold anywhere. small caps carry
   wide tracking instead of weight, which is what reads as luxury. */

:root{
  --vph:100dvh;
  --burgundy:#1A1815; --burgundy-deep:#000000;
  --blush:#E7E2D7; --blush-soft:#EFECE4; --ivory:#F4F2EC;
  --taupe:#BFB8A8; --ink:#1A1815; --ink-2:#4A4843;
  --sand:#7E6224;
  --gold:#B08D3F;          /* fills and lines only, fails as text on cream */
  --gold-ink:#7E6224;      /* gold used as text */
  --pline:rgba(176,141,63,.55);
  --hair:rgba(26,24,21,.14); --hair-gold:rgba(176,141,63,.45);
  --on-dark:#F4F2EC; --on-dark-2:#B8B3A8;
  --display:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gut:24px; --sec:76px; --maxw:1200px;
  --head:70px;
}
@media(min-width:700px){:root{--gut:56px;--sec:112px}}
@media(min-width:1100px){:root{--gut:80px;--sec:140px}}
*{box-sizing:border-box}
@media(prefers-reduced-motion:reduce){}
img,video,table,pre{max-width:100%}
html{-webkit-text-size-adjust:100%}
/* only the home page becomes a snap scroller */

body{margin:0;overflow-x:hidden;
  background:var(--ivory);color:var(--ink);font-family:var(--body);
  font-weight:300;font-size:16.5px;line-height:1.75;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;font-synthesis:none}
@media(min-width:700px){body{font-size:17px}}
body.lock{overflow:hidden}
/* headings */
h1,h2{font-family:var(--display);font-weight:200;margin:0;color:var(--ink);
  line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:38px;line-height:1.14}
h2{font-size:29px}
h3{font-family:var(--display);font-weight:300;margin:0;color:var(--ink);
  font-size:20px;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
@media(min-width:700px){h1{font-size:58px;line-height:1.1}h2{font-size:42px}h3{font-size:25px}}
@media(min-width:1100px){h1{font-size:72px;line-height:1.06}h2{font-size:48px}}
p{margin:0 0 1.2em}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
section{padding:var(--sec) 0}
/* full screen sections set their own spacing, never the generic one */

/* one screen per swipe, switched on by app.js while the run is in view */

a{color:inherit}
:focus-visible{outline:1.5px solid var(--burgundy);outline-offset:4px}
/* section label */
.lab{font-family:var(--body);font-size:10px;font-weight:400;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 20px;
  display:flex;align-items:center;gap:14px}
.lab::after{content:"";flex:0 0 40px;height:1px;background:var(--hair-gold)}
.head{max-width:700px;margin-bottom:44px}
.head p{margin:18px 0 0}
@media(min-width:700px){.head{margin-bottom:64px}}
/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;
  padding:18px 34px;border-radius:0;text-decoration:none;cursor:pointer;font-family:var(--body);
  font-size:14px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid transparent;transition:background .45s ease,color .45s ease,border-color .45s ease}
@media(min-width:600px){.btn{width:auto;display:inline-flex}}

.btn-d{border-color:var(--ink);color:var(--ink)}
.btn-d:hover{background:var(--ink);color:var(--ivory)}
.btn-a{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.btn-a:hover{background:transparent;color:var(--ink)}

/* photos */
.ph{position:relative;background:var(--blush);overflow:hidden}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.ph:hover>img{transform:scale(1.04)}
.ph>svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42%;height:auto}
.ph>svg path{fill:none;stroke:var(--taupe);stroke-width:1.6;stroke-linejoin:round}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;background:var(--burgundy)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:16px;padding-bottom:16px;min-width:0}
.mark{font-family:var(--display);font-weight:400;font-size:clamp(19px,4.8vw,23px);
  letter-spacing:.01em;color:var(--ivory);text-decoration:none;line-height:1.2;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.mark__n span{display:block;margin-top:6px;font-family:var(--body);font-size:9px;font-weight:400;
  letter-spacing:.28em;text-transform:uppercase;color:var(--on-dark-2);white-space:nowrap}

/* while the menu is open the header carries her positioning line instead */
.mark__t{display:none;font-family:var(--display);font-weight:300;font-size:13.5px;
  line-height:1.3;letter-spacing:.005em;color:var(--on-dark);max-width:none;
  padding-right:8px;text-transform:none;white-space:normal}
body.open .mark__n{display:none}
body.open .mark__t{display:block}
body.open .mark{pointer-events:none}
@media(min-width:960px){body.open .mark__n{display:block}body.open .mark__t{display:none}}
.nav__links{display:none}
@media(min-width:960px){
  .nav__links{display:flex;align-items:center;gap:38px;font-size:10.5px;font-weight:400;
    letter-spacing:.24em;text-transform:uppercase}
  .nav__links a{color:var(--on-dark);text-decoration:none;transition:color .35s}
  .nav__links a:hover{color:#fff}
  .nav__links .pill{border:0;border-bottom:1px solid rgba(244,242,236,.6);padding:0 0 5px}
  .burger{display:none}
}
.burger{background:none;border:0;padding:14px 12px;margin-right:-12px;cursor:pointer;
  flex:0 0 auto;min-width:44px;min-height:44px}
.burger i{display:block;width:26px;height:1px;background:var(--on-dark);margin:6px 0;transition:.4s}
body.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.open .burger i:nth-child(2){opacity:0}
body.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:var(--head) 0 0;background:var(--burgundy-deep);z-index:70;
  padding:20px var(--gut);overflow-y:auto;transform:translateY(-105%);visibility:hidden;
  transition:transform .55s cubic-bezier(.6,0,.2,1)}
body.open .drawer{transform:none;visibility:visible}
.drawer a{display:block;font-family:var(--display);font-weight:300;font-size:27px;color:var(--ivory);
  text-decoration:none;padding:20px 0;border-bottom:1px solid rgba(244,242,236,.18)}
/* offer rows */

/* comparison */

th,td{text-align:left;padding:19px 20px;border-bottom:1px solid var(--hair);font-size:17px;vertical-align:top}

/* cost sheet */

/* faq */
footer{background:var(--burgundy);color:var(--on-dark-2);font-size:15px;padding-bottom:30px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;
  padding-top:34px}
.foot a{color:var(--on-dark);text-decoration:none;margin-right:26px;line-height:2.4;
  font-size:12.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.foot__m{font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-2);line-height:2}
/* scroll reveal */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}.rv{opacity:1;transform:none}}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ivory);
  color:var(--ink);padding:14px 20px;font-weight:400;border:1px solid var(--ink)}
.skip:focus{left:12px;top:12px}
/* announcement bar */
/* full screen intro */
.intro{position:fixed;inset:0;z-index:200;background:#100E0C center/cover no-repeat;
  background-image:url(assets/journey-poster.jpg);overflow:hidden;
  height:100dvh;transition:opacity .8s ease,visibility .8s}
@supports not (height:100dvh){.intro{height:100vh}}
.intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:1;pointer-events:none}
.intro video::-webkit-media-controls,
.intro video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.intro::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,8,7,.34) 0%,rgba(10,8,7,.16) 34%,rgba(10,8,7,.52) 100%)}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
body.intro-open{overflow:hidden}
.intro__mark{position:absolute;top:0;left:0;right:0;z-index:4;
  padding:32px var(--gut);text-align:center;margin:0;
  font-family:var(--display);font-weight:300;font-size:18px;color:rgba(255,255,255,.9);
  letter-spacing:.04em;text-shadow:0 1px 24px rgba(0,0,0,.5)}
.intro__mark span{display:block;margin-top:8px;font-size:8.5px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap}
.intro__play{position:absolute;left:var(--gut);bottom:40px;z-index:6;
  display:flex;align-items:center;gap:14px;background:none;border:0;padding:8px 0;
  cursor:pointer;transition:opacity .6s ease,visibility .6s}
.intro__play svg{width:9px;height:11px;fill:#fff;margin-left:1px;position:relative;z-index:2}
.intro__play span{font-size:9.5px;font-weight:400;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .3s}
.intro__play::before{content:"";position:absolute;left:-11px;top:50%;
  transform:translateY(-50%);width:32px;height:32px;border:1px solid rgba(255,255,255,.45);
  border-radius:50%;transition:border-color .3s,transform .5s}
.intro__play:hover::before{border-color:#fff;transform:translateY(-50%) scale(1.1)}
.intro.playing .intro__play{opacity:0;visibility:hidden;pointer-events:none}
/* the browser refused to autoplay, so make the cue impossible to miss */
.intro.blocked .intro__play{left:50%;bottom:auto;top:50%;
  transform:translate(-50%,calc(-50% + 148px));flex-direction:column;gap:16px}
.intro.blocked .intro__play svg{width:14px;height:17px}
.intro.blocked .intro__play span{font-size:10.5px;color:#fff}
.intro.blocked .intro__play::before{left:50%;top:4px;width:56px;height:56px;
  transform:translateX(-50%);border-color:rgba(255,255,255,.75)}
.intro.blocked .intro__play:hover::before{transform:translateX(-50%) scale(1.07)}
@media(max-width:520px){
  .intro.blocked .intro__play{transform:translate(-50%,calc(-50% + 128px))}
}
.intro__play:hover span{color:#fff}
.intro__mid{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:5;padding:0 26px;text-align:center}
.intro__enter{display:inline-block;width:auto;max-width:100%;background:none;border:0;
  padding:14px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:center}
.intro__enter span{display:inline-block;margin-top:40px;font-size:10.5px;font-weight:400;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(255,255,255,.4);padding:0 2px 10px;
  transition:border-color .35s,letter-spacing .5s,color .35s}
.intro__enter:active span,.intro__enter:hover span{border-bottom-color:#fff;color:#fff;letter-spacing:.34em}
/* services: her card layout, on cream */
#packages{padding:clamp(52px,8vw,104px) 0;background:var(--blush-soft);position:relative}
@media(max-width:619px){#packages .wrap{padding-left:14px;padding-right:14px}}

#packages .wrap{position:relative;z-index:1}

#packages .head{max-width:none;text-align:center;margin:0 auto clamp(14px,2.6vh,36px)}
.kicker{margin:0 0 16px;font-size:10px;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-2)}
#packages h2{font-family:var(--display);font-weight:200;color:var(--ink);
  font-size:clamp(28px,4.8vw,54px);letter-spacing:-.025em;line-height:1.05;margin:0}

.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:stretch;
  max-width:1080px;margin:16px auto 0}
@media(min-width:620px){.packs{gap:16px}}
@media(min-width:900px){.packs{gap:26px}}

.pack{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:2px;
  padding:13px 6px 11px;
  background:#FBFAF7;border:1px solid var(--hair);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.pack::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
@media(hover:hover){
  .pack:hover{transform:translateY(-6px);border-color:var(--pline);
    box-shadow:0 14px 40px rgba(26,24,21,.07)}
}
.pack--featured{border-color:var(--pline);background:#FCFAF4}
.pack--featured::before{opacity:1}
.pack--featured::after{content:"Launch Ready";position:absolute;top:0;left:50%;
  transform:translate(-50%,-50%);background:var(--gold);color:#1A1815;
  font-size:9px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  padding:4px 11px;border-radius:2px;white-space:nowrap}
@media(min-width:700px){.pack--featured::after{font-size:11px;padding:5px 14px}}

.pack__head{flex:0 0 auto}

.pack__k{margin:0 0 14px;font-size:9.5px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-2);line-height:1.4}
.pack h3 a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.pack h3 a:hover{border-bottom-color:var(--gold,#B08D3F)}
.pack h3{font-family:var(--display);font-weight:400;
  font-size:14.5px;color:var(--ink);margin:0 0 4px;line-height:1.15}
.pack__p{font-family:var(--display);font-weight:200;
  font-size:24px;letter-spacing:-.03em;color:var(--ink);margin:0 0 2px;line-height:1}
.pack__m{font-size:9.5px;color:var(--ink-2);
  margin:0 0 8px;line-height:1.35;min-height:2.7em}

.pack ul{list-style:none;margin:0 0 10px;padding:0;flex:0 0 auto}
.pack li{display:flex;gap:6px;font-size:10.5px;color:var(--ink-2);
  padding:3.5px 0;overflow-wrap:break-word;min-width:0;border-top:1px solid var(--hair);
  line-height:1.4;overflow-wrap:break-word;hyphens:manual}
.pack li:first-child{border-top:0}
.pack li::before{content:"";flex-shrink:0;width:9px;height:1px;background:var(--gold);
  margin-top:.62em}

.pack__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair)}
.pack .btn{all:unset;display:flex;align-items:center;justify-content:center;
  min-height:44px;text-align:center;cursor:pointer;border-radius:2px;
  padding:6px 2px;font-size:9px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--hair);
  transition:border-color .25s ease,background .25s ease,color .25s ease}
.pack .btn:hover{border-color:var(--gold)}
.pack .btn--gold{background:var(--gold);color:#1A1815;border-color:var(--gold)}
.pack .btn--gold:hover{background:#C6A052;border-color:#C6A052}

/* the splash line is no longer a heading */
.intro__line{margin:0 auto;color:#fff;font-family:var(--display);font-weight:200;
  font-size:4.4vw;line-height:1.14;letter-spacing:.005em;
  white-space:nowrap;max-width:none;text-shadow:0 2px 40px rgba(0,0,0,.5)}
@media(min-width:1500px){.intro__line{font-size:66px}}

/* product panels */
#work{padding:clamp(52px,8vw,104px) 0}

@media(prefers-reduced-motion:reduce){
  html.js }

/* client gallery */
#clients.page h1{font-family:var(--display);font-weight:200;color:var(--ink);
  font-size:clamp(28px,4.8vw,54px);letter-spacing:-.025em;line-height:1.05;margin:0}
#clients.page{padding:calc(var(--head) + clamp(34px,6vw,72px)) 0 clamp(48px,8vw,96px)}
#clients.page .back{display:inline-block;margin:0 0 18px}
#clients .head{margin-left:auto;margin-right:auto}
#clients .lab{justify-content:center}
#clients .gal__grid{max-width:760px;margin:0 auto}
.gal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
@media(min-width:700px){.gal__grid{gap:8px}}
.gal__grid .ph{aspect-ratio:1/1}
.gal__grid .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal__grid a{display:block;position:relative;overflow:hidden}
.gal__grid img{transition:transform 1s cubic-bezier(.2,.6,.2,1)}
@media(hover:hover){.gal__grid a:hover img{transform:scale(1.05)}}
.gal__tag{display:flex;align-items:center;justify-content:center;gap:8px;margin:22px 0 0;
  font-size:13px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.gal__tag i{display:block;flex:1;height:1px;background:var(--hair)}
.gal__tag a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair-gold);padding-bottom:3px}
.gal__tag a:hover{border-bottom-color:var(--sand)}
/* photographer */
.shot{border-top:1px solid var(--hair);padding:clamp(48px,7vw,88px) 0}

/* the final screen: photography fills a viewport so the last snap point is
   always reachable, otherwise the browser springs back to the last panel */

.shot__in{display:grid;gap:18px}
@media(min-width:760px){.shot__in{grid-template-columns:1fr auto;align-items:end;gap:40px}}
.shot h3{font-family:var(--display);font-size:clamp(21px,2.6vw,28px);margin:0 0 10px;
  font-weight:300;letter-spacing:-.015em}
.shot p{margin:0;color:var(--ink-2);font-size:16px;max-width:52ch}
.shot__cta{display:inline-block;font-size:11px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;padding-bottom:5px;
  border-bottom:1px solid var(--ink);white-space:nowrap}

/* service pages, deliberately plain */
.svc{padding:calc(var(--head) + clamp(40px,7vw,84px)) 0 clamp(56px,9vw,110px)}
.svc .back{margin:0 0 clamp(26px,4vw,44px)}
.svc .kicker{margin:0 0 10px;color:var(--gold-ink,#7E6224)}
.svc h1{font-family:var(--display);font-weight:200;color:var(--ink);
  font-size:clamp(32px,5.4vw,60px);line-height:1.04;letter-spacing:-.025em;margin:0}
.svc__p{font-family:var(--display);font-weight:200;letter-spacing:-.03em;font-size:clamp(40px,7vw,78px);
  color:var(--ink);line-height:1;margin:clamp(12px,2vw,20px) 0 4px}
.svc__m{margin:0 0 clamp(28px,4.5vw,48px);font-size:15px;color:var(--ink-2)}
.svc__list{list-style:none;margin:0 0 clamp(30px,5vw,52px);padding:0;max-width:44ch;
  border-top:1px solid var(--hair)}
.svc__list li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair);
  font-size:16.5px;color:var(--ink-2);line-height:1.5}
.svc__list li::before{content:"";flex-shrink:0;width:10px;height:1px;
  background:var(--gold,#B08D3F);margin-top:.72em}
.svc__cta{display:inline-block;background:var(--ink);color:var(--ivory);text-decoration:none;
  padding:17px 34px;border-radius:2px;font-size:13px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--ink);
  transition:background .25s,color .25s}
.svc__cta:hover{background:transparent;color:var(--ink)}
.svc__more{display:grid;gap:0;margin:clamp(48px,8vw,88px) 0 0;border-top:1px solid var(--hair)}
.svc__more a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink);
  transition:padding-left .3s}
.svc__more a:hover{padding-left:8px}
.svc__more span{font-family:var(--display);font-size:19px;font-weight:300}
.svc__more b{font-family:var(--display);font-size:19px;font-weight:200;color:var(--ink-2)}

/* trust stats */
main{padding-top:var(--head)}
/* anything the menu jumps to must clear the fixed header */
[id]{scroll-margin-top:calc(var(--head) + 12px)}
.stats{padding:clamp(34px,5vw,58px) 0;border-bottom:1px solid var(--hair)}
.stats__in{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
@media(min-width:700px){.stats__in{gap:30px}}
.stat b{display:block;font-family:var(--display);font-weight:200;color:var(--ink);
  font-size:clamp(30px,5.6vw,54px);line-height:1;letter-spacing:-.025em}
.stat span{display:block;margin-top:10px;font-size:clamp(9px,1.3vw,10.5px);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);line-height:1.6}

/* manufacturer network */
.net{padding:clamp(48px,7vw,92px) 0;text-align:center}
.net h2{max-width:20ch;margin:0 auto 14px}
.net p{max-width:52ch;margin:0 auto;color:var(--ink-2);font-size:17px;line-height:1.65}

/* how it works */
.how{padding:clamp(48px,7vw,92px) 0;background:var(--blush-soft)}
.how__row{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:1fr;counter-reset:s}
@media(min-width:760px){
  .how__row{grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0}
  .how__row .how__step+.how__step{margin-left:0}
  .how__row::before{content:none}
}
.how__step{background:#FBFAF7;border:1px solid var(--hair);border-radius:2px;
  padding:clamp(22px,3vw,34px) clamp(16px,2.4vw,28px);text-align:center}
.how__i{display:block;font-size:30px;line-height:1;margin:0 0 14px}
.how__step b{display:block;font-size:9.5px;font-weight:400;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.how__step h3{font-family:var(--display);font-weight:300;font-size:clamp(19px,2.4vw,24px);
  margin:0 0 8px;color:var(--ink)}
.how__step p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.how__arrow{display:none}
@media(min-width:760px){
  .how__arrow{display:flex;align-items:center;justify-content:center;width:56px}
  .how__arrow svg{width:20px;height:12px;fill:var(--gold,#B08D3F)}
}

@media(min-width:620px){
  .pack{padding:clamp(22px,2.8vw,34px) clamp(16px,2vw,30px) clamp(18px,2.4vw,28px)}
  .pack__k{font-size:10.5px}
  .pack h3{font-size:clamp(20px,2.4vw,26px)}
  .pack__p{font-size:clamp(32px,4.4vw,44px)}
  .pack__m{font-size:12.5px;margin-bottom:20px}
  .pack ul{margin-bottom:24px}
  .pack li{gap:9px;font-size:14px;padding:8px 0}
  .pack .btn{padding:12px 0;font-size:12.5px}
}

/* our work, side by side swipes */
.wk{position:relative;margin-top:clamp(22px,3vw,34px)}
.wk__track{list-style:none;display:flex;gap:10px;margin:0;padding:0 var(--gut);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.wk__track::-webkit-scrollbar{width:0;height:0}
.wk__slide{flex:0 0 74%;max-width:340px;scroll-snap-align:center}
@media(min-width:700px){.wk__track{gap:16px}.wk__slide{flex:0 0 30%;max-width:360px}}
@media(min-width:1100px){.wk__slide{flex:0 0 23%}}
.wk__slide .ph{aspect-ratio:3/4;border-radius:2px}
.wk__slide .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wk__slide p{margin:12px 2px 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.wk__dots{display:flex;justify-content:center;gap:0;margin:8px 0 0}
.wk__dots button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.wk__dots button::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--taupe);opacity:.45;transition:opacity .3s,transform .3s}
.wk__dots button[aria-current="true"]::before{opacity:1;background:var(--ink);transform:scale(1.35)}

/* drawer lead line */