/* develprs.com, editorial monochrome. Light grey studio grounds, black type, black-and-white photography,
   one orange-red accent used sparingly (the square arrow, the selected plan). Montserrat throughout. */
:root{
  --bg:#E6E5E3;      /* hero / studio grey */
  --paper:#F3F2F0;   /* lighter sections */
  --photo:#C8C8C7;   /* matches the portrait backdrop */
  --ink:#0E0E0E;
  --grey:#5F5E5B;
  --line:#CBC9C5;
  --orange:#FF4A1C;
  --f:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1280px;
  --gut:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--f);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:#fff;padding:8px 12px}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;background:var(--ink);color:#fff;font:600 12px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:background .15s}
.btn:hover{background:#333}
.btn-sm{min-height:38px;padding:0 18px;font-size:11px}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--bg)}
.ul{font:600 12px var(--f);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding-bottom:4px;border-bottom:1.5px solid currentColor}
.ul:hover{color:var(--orange)}
.ul-light{color:#fff}

/* top strip + header */
.strip{background:var(--ink);color:#fff}
.strip-in{display:flex;justify-content:space-between;gap:16px;height:36px;align-items:center;font:500 11px var(--f);letter-spacing:.1em;text-transform:uppercase}
.strip a{text-decoration:none}
.strip-r{display:flex;gap:12px}
.strip-r span{opacity:.4}
.head{background:var(--bg);position:relative;z-index:5}
.head-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px}
.nav{display:flex;gap:32px}
.nav a{font:500 12px var(--f);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.nav a:hover{color:var(--orange)}
.word{font:700 30px/1 var(--f);letter-spacing:.06em;text-decoration:none}
.head-cta{justify-self:end}
.menu{display:none;justify-self:end;background:none;border:1.5px solid var(--ink);font:600 11px var(--f);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
.mnav{display:flex;flex-direction:column;padding:4px var(--gut) 16px;background:var(--bg);border-top:1px solid var(--line)}
.mnav a{font:600 13px var(--f);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line)}
.mnav[hidden]{display:none}

/* hero: giant wordmark with the walking figure in front of it */
.hero{background:var(--bg);overflow:hidden}
.hero-in{position:relative;height:clamp(560px,calc(100svh - 120px),860px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto}
.hero-tag{grid-column:1;grid-row:1;margin-top:clamp(24px,5vh,56px);font:500 12px/1.9 var(--f);letter-spacing:.24em;text-transform:uppercase;padding-bottom:12px;border-bottom:1.5px solid var(--ink);justify-self:start}
.giant{position:absolute;left:var(--gut);right:var(--gut);top:50%;transform:translateY(-46%);font:700 min(15.4vw,218px)/.8 var(--f);letter-spacing:-.04em;text-align:center;white-space:nowrap;z-index:1;user-select:none}
.walker{position:absolute;z-index:2;bottom:calc(var(--wb,0px) - var(--py,0px));left:50%;transform:translateX(-48%);height:94%;width:auto;filter:drop-shadow(0 22px 18px rgba(0,0,0,.18))}
.hero-cta{grid-column:1;grid-row:3;display:flex;gap:26px;align-items:center;margin-bottom:clamp(28px,6vh,64px);position:relative;z-index:3}
.hero-side{grid-column:2;grid-row:3;justify-self:end;align-self:end;margin-bottom:clamp(28px,6vh,64px);margin-right:72px;font:500 12px/1.9 var(--f);letter-spacing:.24em;text-transform:uppercase;padding-bottom:12px;border-bottom:1.5px solid var(--ink);position:relative;z-index:3}
.sq{position:absolute;right:var(--gut);bottom:clamp(28px,6vh,64px);z-index:3;width:52px;height:52px;display:grid;place-items:center;background:var(--orange);color:#fff}
.sq svg{width:22px;height:22px}
.sq:hover{background:var(--ink)}

/* black band with the three offers */
.band{background:var(--ink);color:#fff}
.band-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-block:64px}
.offer{display:flex;flex-direction:column;gap:22px}
.offer img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--photo);filter:grayscale(1)}
.offer h2{font:600 15px var(--f);letter-spacing:.14em;text-transform:uppercase}
.offer p{margin:8px 0 14px;font-size:14px;line-height:1.55;color:#CFCFCF}
.offer .ul{color:#fff;font-size:11px}

/* statement band on the portrait */
.feature{background:#D0D0CF url(assets/desk.jpg) 100% 50%/cover no-repeat}
.feature-in{min-height:clamp(460px,46vw,640px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-block:72px}
.label{font:500 12px var(--f);letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px}
.feature-h{font:700 clamp(44px,5.4vw,80px)/.95 var(--f);letter-spacing:-.03em;text-transform:uppercase}
.feature-p{margin:24px 0 32px;max-width:34ch;font-size:17px;line-height:1.55}

/* promise strip */
.promise{background:var(--bg)}
.promise-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-block:48px}
.pr{display:flex;gap:16px;align-items:center}
.pr svg{width:34px;height:34px;flex:none}
.pr h3{font:600 12px var(--f);letter-spacing:.14em;text-transform:uppercase}
.pr p{font-size:13px;color:var(--grey)}

/* footer */
.foot{background:var(--ink);color:#fff}
.foot-in{display:grid;grid-template-columns:1fr auto;gap:28px 40px;padding-block:72px 40px;align-items:end}
.foot-big{font:700 clamp(54px,9vw,132px)/.9 var(--f);letter-spacing:-.04em;text-transform:uppercase}
.foot-cta{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-self:end}
.foot-nav{display:flex;gap:28px;padding-top:28px;border-top:1px solid #2B2B2B;grid-column:1/-1}
.foot-nav a{font:500 11px var(--f);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#BDBDBD}
.foot-nav a:hover{color:#fff}
.foot-copy{grid-column:1/-1;font-size:12px;color:#8A8A8A;margin-top:-12px}

/* inner pages */
.page-head{background:var(--bg);padding-block:64px 56px}
.page-title{font:700 clamp(54px,10vw,150px)/.85 var(--f);letter-spacing:-.04em;text-transform:uppercase}
.page-intro{margin-top:24px;max-width:52ch;font-size:17px}
.sec{padding-block:72px}
.sec + .sec{border-top:1px solid var(--line)}
.sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:40px}
.sec-h h2{font:700 clamp(30px,4vw,52px)/1 var(--f);letter-spacing:-.025em;text-transform:uppercase}
.sec-h p{color:var(--grey);max-width:48ch}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink)}
.tiers-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tier{padding:28px 24px 32px;border-right:1px solid var(--line);position:relative}
.tier:last-child{border-right:0}
.tier h3{font:600 13px var(--f);letter-spacing:.16em;text-transform:uppercase}
.tier .price{margin-top:18px;font:700 46px/1 var(--f);letter-spacing:-.03em}
.tier .price small{font-size:14px;font-weight:500;letter-spacing:0;color:var(--grey)}
.tier .what{margin-top:12px;font-size:14px;color:var(--grey)}
.tier ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.tier li{padding-left:16px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1.5px;background:var(--ink)}
.tier.pick{background:var(--ink);color:#fff}
.tier.pick .what,.tier.pick .price small{color:#BDBDBD}
.tier.pick li::before{background:var(--orange)}
.tier .tag{position:absolute;top:0;right:0;background:var(--orange);color:#fff;font:600 10px var(--f);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px}
.fine{margin-top:20px;font-size:13px;color:var(--grey)}

/* contact form */
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.contact-info h2{font:600 13px var(--f);letter-spacing:.16em;text-transform:uppercase;margin-top:28px}
.contact-info h2:first-child{margin-top:0}
.contact-info p{margin-top:8px;color:var(--grey)}
.contact-info a{color:var(--ink)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.form label{display:block;font:600 11px var(--f);letter-spacing:.14em;text-transform:uppercase}
.form .full{grid-column:1/-1}
.opt{font-weight:500;color:var(--grey);letter-spacing:.06em;text-transform:none}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:10px;font:400 16px var(--f);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:8px 0 10px}
.form select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E0E0E' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center/12px 8px no-repeat}
.form textarea{resize:vertical;min-height:110px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--orange)}
.form-end{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.form-end .fine{margin:0}
.hp{position:absolute;left:-9999px}

/* responsive */
@media (max-width:980px){
  .band-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .promise-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers .tier:nth-child(2n){border-right:0}
  .tiers .tier:nth-child(n+3){border-top:1px solid var(--line)}
  .tiers-3{grid-template-columns:1fr}
  .tiers-3 .tier{border-right:0;border-top:1px solid var(--line)}
  .sec-h,.contact-grid{grid-template-columns:1fr;gap:24px}
  .foot-in{grid-template-columns:1fr}
  .foot-cta{justify-self:start}
}
@media (max-width:760px){
  .strip-in p:first-child{display:none}
  .strip-in{justify-content:center}
  .nav,.head-cta{display:none}
  .menu{display:block}
  .head-in{grid-template-columns:1fr auto;height:68px}
  .word{font-size:24px;grid-column:1;justify-self:start}
  .hero-in{height:auto;min-height:640px;grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .hero-tag{font-size:11px;margin-top:20px}
  .giant{top:42%;font-size:15vw}
  .walker{height:72%;--wb:96px;transform:translateX(-46%)}
  .hero-cta{grid-row:3;margin-bottom:28px;flex-wrap:wrap;gap:18px}
  .hero-side{display:none}
  .sq{display:none}
  .feature{background:var(--photo) url(assets/desk.jpg) 78% 100%/auto 300px no-repeat;padding-bottom:280px}
  .feature-in{min-height:0;padding-block:48px 32px;background:#D0D0CF}
  .feature-p{max-width:none}
  .promise-in{grid-template-columns:1fr;gap:22px}
  .tiers{grid-template-columns:1fr}
  .tiers .tier{border-right:0;border-top:1px solid var(--line)}
  .form{grid-template-columns:1fr}
}
.thanks{min-height:60vh}

@media (max-width:760px){.band-in{grid-template-columns:1fr;gap:40px}.offer{display:grid;grid-template-columns:120px 1fr;align-items:center}.offer img{aspect-ratio:4/5}}

.wide-photo{margin:0 0 40px}
.wide-photo img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;filter:grayscale(1)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.steps>div{padding:24px 24px 0 0}
.steps span{font:600 12px var(--f);letter-spacing:.16em;color:var(--orange)}
.steps h3{margin-top:10px;font:700 22px var(--f);letter-spacing:-.01em;text-transform:uppercase}
.steps p{margin-top:8px;font-size:14px;color:var(--grey);max-width:30ch}
@media (max-width:760px){.steps{grid-template-columns:1fr 1fr;gap:8px 16px}.wide-photo img{aspect-ratio:4/3}}

/* ---------- motion ---------- */
:root{--ease:cubic-bezier(.2,.7,.1,1)}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);z-index:-1}
.btn:hover{background:var(--ink)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn-light:hover{background:#fff;color:#fff}
.ul{background:linear-gradient(var(--orange),var(--orange)) left bottom/0 1.5px no-repeat;transition:background-size .4s var(--ease),color .2s}
.ul:hover{background-size:100% 1.5px}
.ph{display:block;overflow:hidden;background:var(--photo)}
.ph img{transition:transform 1.1s var(--ease)}
.offer:hover .ph img,.wide-photo:hover img{transform:scale(1.05)}
.wide-photo{overflow:hidden}
.sq svg{animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(5px)}}

/* load + scroll reveals (only when JS is running) */
.js .hero-tag,.js .hero-cta,.js .hero-side,.js .sq{opacity:0;translate:0 18px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.js .giant{clip-path:inset(0 0 100% 0);translate:0 .18em;transition:clip-path 1.2s var(--ease),translate 1.2s var(--ease)}
.js .walker{opacity:0;translate:4% 0;transition:opacity 1.2s var(--ease) .35s,translate 1.4s var(--ease) .35s}
.js .is-in .hero-tag{transition-delay:.15s}
.js .is-in .hero-cta{transition-delay:.75s}
.js .is-in .hero-side,.js .is-in .sq{transition-delay:.9s}
.js .is-in :is(.hero-tag,.hero-cta,.hero-side,.sq,.walker){opacity:1;translate:0 0}
.js .is-in .giant{clip-path:inset(-10% 0 -10% 0);translate:0 0}
.js [data-r]{opacity:0;translate:0 28px;transition:opacity .9s var(--ease),translate .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-r].in{opacity:1;translate:0 0}
.js .page-title[data-r]{clip-path:inset(0 0 100% 0);opacity:1;transition:clip-path 1.1s var(--ease),translate 1.1s var(--ease)}
.js .page-title[data-r].in{clip-path:inset(-10% 0 -10% 0)}
.walker-wrap{display:contents}

@media (prefers-reduced-motion:reduce){
  .js .hero-tag,.js .hero-cta,.js .hero-side,.js .sq,.js .giant,.js .walker,.js [data-r]{opacity:1!important;translate:none!important;clip-path:none!important;transition:none!important}
  .sq svg{animation:none}
  .ph img,.btn::before,.ul{transition:none}
}