/* ------------------------------------------------------------------
   J. Lamb Bodyworks
   Colours and type taken from the Wix original:
     page      #EDF7FF      bars/footer #000000
     orange    #FF4E01      logo orange #F86F00
     muted     #84888C      panels      #FFFFFF
   Original fonts were DIN Neuzeit Grotesk (headings) and Brandon
   Grotesque Light (body); both are paid Monotype/HVD faces. Barlow
   and Jost stand in for them here.
------------------------------------------------------------------ */

@font-face{font-family:Barlow;src:url(fonts/barlow-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(fonts/jost-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(fonts/jost-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(fonts/jost-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --page:#EDF7FF;
  --ink:#000;
  --orange:#FF4E01;
  --muted:#84888C;
  --white:#fff;
  --display:Barlow,"Helvetica Neue",Arial,sans-serif;
  --body:Jost,"Helvetica Neue",Arial,sans-serif;
  --wrap:980px;
  --gutter:clamp(20px,6vw,120px);
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:300 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2{font-family:var(--display);font-weight:300;margin:0;line-height:1.05;letter-spacing:0}

.skip{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  height:var(--header-h);
  background:var(--ink);
}
.site-header__inner{
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,2.5vw,32px);
}
.brand{
  font-family:var(--display);font-weight:400;
  font-size:clamp(17px,2.2vw,24px);
  text-transform:uppercase;
  color:#EDF7FF;text-decoration:none;
  white-space:nowrap;
}
.nav{display:flex;gap:34px}
.nav a{
  font-family:var(--display);font-weight:300;font-size:16px;
  color:var(--muted);text-decoration:none;
}
.nav a:hover{color:#fff}

.nav-toggle{display:none;background:none;border:0;padding:10px 4px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.5px;background:#EDF7FF;margin:5px 0}

@media (max-width:640px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;top:var(--header-h);left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--ink);
    padding:0 clamp(16px,2.5vw,32px);
    max-height:0;overflow:hidden;
  }
  .nav.is-open{max-height:200px;padding-bottom:16px}
  .nav a{padding:12px 0;font-size:17px}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  height:785px;
  overflow:hidden;
  background:#fafafa;
}
.hero__photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
.hero__inner{
  position:relative;
  width:min(100% - 2*var(--gutter),var(--wrap));
  margin:0 auto;
  height:100%;
  display:flex;flex-direction:column;align-items:flex-start;
  padding-top:118px;
}

.hero__mark{position:relative;margin-left:117px;width:150px}
.hero__mark img{width:150px;height:auto}
.hero__mark::before{                    /* orange plus, lower-left of the badge */
  content:"";position:absolute;left:-43px;top:120px;
  width:23px;height:23px;
  background:
    linear-gradient(var(--orange),var(--orange)) center/100% 1.7px no-repeat,
    linear-gradient(var(--orange),var(--orange)) center/1.7px 100% no-repeat;
}

.slab{
  position:relative;
  background:var(--white);
  margin:0;
  display:block;
  width:max-content;max-width:100%;
}
.wordmark{
  font-family:var(--display);font-weight:300;
  font-size:clamp(34px,7.2vw,73px);
  letter-spacing:.2em;
  line-height:1.18;
  color:var(--orange);
  text-transform:uppercase;
  display:block;
  margin-right:-.2em;   /* swallow the trailing letter-space */
}
.slab--a{margin:15px 0 0 105px;padding:2px 42px 2px 19px}
.slab--b{margin:6px 0 0 92px;padding:2px 24px 2px 37px}
.slab--c{
  margin:15px 0 0 105px;padding:9px 30px 9px 17px;
  font-family:var(--body);font-weight:300;
  font-size:18px;letter-spacing:.05em;color:var(--ink);
}
/* white ticks that sit beside the wordmark */
.slab--b::before{content:"";position:absolute;left:-21px;top:21px;width:14px;height:90px;background:var(--white)}
.slab--b::after{content:"";position:absolute;left:332px;top:calc(100% + 2px);width:8px;height:49px;background:var(--white)}

.btn{
  display:inline-block;
  background:var(--orange);color:#fff;text-decoration:none;
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1;
  padding:11px 18px;
  border:0;
}
.btn:hover{background:#e64600}
.hero .btn{margin:15px 0 0 117px}

@media (max-width:900px){
  .hero__mark::before,.slab--b::before,.slab--b::after{display:none}
  .hero__mark{margin-left:0}
  .slab--a,.slab--b,.slab--c{margin-left:0}
  .hero .btn{margin-left:0}
  .slab--a{padding:2px 22px 2px 14px}
  .slab--b{padding:2px 22px 2px 14px}
  .slab--c{padding:8px 22px 8px 14px}
}
@media (max-width:700px){
  .hero{height:auto;min-height:560px;padding-bottom:56px}
  .hero__inner{padding-top:64px}
  .hero__photo{object-position:28% 50%}
}

/* ---------- white panel ---------- */
.panel{
  position:relative;
  width:min(100% - 2*clamp(0px,2vw,24px),986px);
  margin:0 auto;
  background:var(--white);
  padding:100px clamp(20px,6.5vw,90px) 110px;
}
.rule{position:absolute;background:var(--white)}
.rule--left{left:-58px;top:165px;width:23px;height:224px}
.rule--right{right:-46px;top:619px;width:31px;height:171px}
@media (max-width:1120px){.rule{display:none}}

.plus{
  position:absolute;width:23px;height:23px;
  background:
    linear-gradient(var(--orange),var(--orange)) center/100% 1.7px no-repeat,
    linear-gradient(var(--orange),var(--orange)) center/1.7px 100% no-repeat;
}

/* about */
.about{
  display:grid;
  grid-template-columns:minmax(0,365px) minmax(0,1fr);
  gap:0 clamp(36px,5vw,60px);
  align-items:start;
}
.about__photo{position:relative}
.about__photo img{width:100%;aspect-ratio:405/485;object-fit:cover;object-position:50% 20%}
.plus--about{left:-38px;top:-41px}
.about__text{position:relative;padding-top:29px}
.about__text h2{font-size:clamp(32px,4.2vw,45px);text-transform:uppercase;white-space:nowrap}
.about__text p{margin:56px 0 0}
.plus--bio{left:6px;top:510px}

@media (max-width:820px){
  .about{grid-template-columns:1fr;gap:36px}
  .about__photo{max-width:380px}
  .about__text{padding-top:0}
  .about__text h2{white-space:normal}
  .about__text p{margin:24px 0 0;max-width:none}
  .plus--about{left:auto;right:0;top:-38px}
  .plus--bio{display:none}
}

/* where to find me */
.find{margin-top:117px}
.find h2{font-size:clamp(32px,4.6vw,45px);text-transform:uppercase}
.find__grid{
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:0 clamp(36px,5vw,60px);
  margin-top:56px;
  align-items:start;
}
.place{margin:0 0 34px;padding-left:24px}
.place a{font-size:21px;text-decoration:none}
.place a:hover{text-decoration:underline}
.place span{font-size:12px;display:inline-block;margin-top:6px}

.map{position:relative;width:100%;aspect-ratio:412/470;background:#e6e6e6}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.find__status{position:relative;padding-top:120px}
.status{background:var(--white);padding:0 0 0 42px}
.status__head{margin:0;font-family:var(--body);font-weight:500;font-size:19px;letter-spacing:.05em;line-height:1.32}
.status__hours{margin:22px 0 0;font-size:21px;letter-spacing:.05em;line-height:1.2}
.find__status .btn{margin:37px 0 0 42px}
.plus--status{right:-24px;top:266px}

@media (max-width:820px){
  .find{margin-top:70px}
  .find__grid{grid-template-columns:1fr;gap:40px;margin-top:36px}
  .find__place{max-width:420px}
  .place{padding-left:0}
  .find__status{padding-top:0}
  .status{padding-left:0}
  .find__status .btn{margin-left:0}
  .plus--status{display:none}
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink);
  color:var(--muted);
  margin-top:62px;
  padding:88px 0 70px;
}
.site-footer__inner{
  width:min(100% - 2*clamp(20px,6vw,40px),986px);
  margin:0 auto;
  padding:0 clamp(20px,6.5vw,90px);
}
.site-footer h2{color:#fff;font-size:31px;text-transform:uppercase}
.site-footer p{margin:64px 0 0;font-size:17px;line-height:1.6}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:#fff}

@media (max-width:820px){
  .site-footer{padding:56px 0 48px}
  .site-footer p{margin-top:32px}
}