@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/fonts/eb-garamond.00875802ee94d240.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;src:url(/static/fonts/eb-garamond-italic.1e789e7bff368ac3.woff2) format("woff2")}
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/marcellus.34fcc32c40f3ec7f.woff2) format("woff2")}
:root{
  --paper:#FAF8F4;
  --ink:#181510;
  --ink-soft:#4E493F;
  --muted:#8B8477;
  --line:rgba(24,21,16,.16);
  --line-strong:rgba(24,21,16,.5);
  --display:"Marcellus","Times New Roman",serif;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --fade:.9s;
  --nav:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.66;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:14px;left:14px;z-index:200;
  background:var(--ink);color:var(--paper);
  font-family:var(--display);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  padding:11px 18px;transform:translateY(-300%);transition:transform .4s ease;
}
.skip:focus{transform:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:0;
}
.skip:focus-visible{outline-color:#fff}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav);
  background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 38px;
}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand-name{
  font-family:var(--display);font-size:21px;line-height:1;
  letter-spacing:.3em;margin-right:-.3em;color:var(--ink);
}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.nav a{
  position:relative;
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 2px;
  font-family:var(--display);font-size:14px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .35s ease;
}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}

#portfolio{
  position:relative;
  display:flex;flex-direction:column;
  height:100vh;height:100svh;
  padding-top:var(--nav);
  background:var(--paper);
  scroll-margin-top:0;
}
.stage{
  position:relative;flex:1 1 auto;min-height:0;
  overflow:hidden;
  touch-action:pan-y;
  background:var(--paper);
}
.slide{
  position:absolute;inset:0;left:0;width:100%;
  margin:0;
  opacity:0;z-index:1;
  transition:opacity var(--fade) ease;
  pointer-events:none;
}
.slide.is-active{opacity:1;z-index:2}
picture{display:contents}
.slide img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  background:transparent;
}

.deck{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;
  padding:10px 20px 14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
}
.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.ctl-group{
  display:flex;align-items:center;justify-content:center;
  width:100%;gap:10px;
}
.arrow{
  width:44px;height:44px;flex:0 0 auto;
  display:grid;place-items:center;
  background:none;border:0;padding:0;
  color:var(--ink);
  transition:opacity .3s ease;
}
.arrow:hover{opacity:.55}
.arrow svg{display:block;width:24px;height:24px}
.dots{display:flex;align-items:center;gap:5px;margin:0 4px}
.dot{
  position:relative;width:28px;height:44px;flex:0 0 auto;
  background:none;border:0;padding:0;
}
.dot::before{
  content:"";position:absolute;left:50%;top:50%;
  width:8px;height:8px;transform:translate(-50%,-50%);
  border-radius:50%;
  background:transparent;
  border:1px solid rgba(24,21,16,.55);
  transition:background-color .5s ease,border-color .5s ease;
}
.dot:hover::before{border-color:var(--ink)}
.dot[aria-current="true"]::before{background:var(--ink);border-color:var(--ink)}
.ctl-pause{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 14px;margin-top:6px;
  font-family:var(--serif);font-size:16px;line-height:1;
  color:var(--ink);
  background:transparent;
  border:1px solid rgba(24,21,16,.35);
  border-radius:0;
  transition:border-color .3s ease;
}
.ctl-pause:hover{border-color:var(--ink)}
.ctl-pause svg{display:block;flex:0 0 auto}
.ctl-pause svg[hidden]{display:none}
.caption{
  margin-top:2px;
  font-style:italic;font-size:16px;line-height:1.4;
  color:var(--ink-soft);text-align:center;
  transition:opacity .3s ease;
}
.caption.is-fading{opacity:0}
.no-js .controls{display:none}

.intro{
  padding:clamp(48px,7vh,72px) 24px clamp(40px,5vh,56px);
  text-align:center;
}
.eyebrow{
  font-family:var(--display);
  font-size:28px;
  color:var(--ink);
}
.statement{
  margin:16px auto 0;
  max-width:31ch;
  font-size:clamp(1.55rem,1.05rem + 2.3vw,2.7rem);
  line-height:1.5;letter-spacing:.005em;
  color:var(--ink);
}

.about{padding:clamp(16px,3vh,32px) 24px 0}
#about,#pricing,#contact{scroll-margin-top:var(--nav)}
.about-inner{
  max-width:1180px;margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,min(40vw,620px));
  grid-template-areas:"head media" "body media";
  grid-template-rows:auto 1fr;
  column-gap:clamp(48px,6vw,96px);
  align-items:start;
}
.about-head{grid-area:head}
.about-media{
  grid-area:media;width:100%;
  justify-self:start;
  margin-top:clamp(0px,2vw,36px);
}
.about-media img{
  width:100%;height:auto;
  aspect-ratio:2/3;object-fit:cover;
}
.about-body{grid-area:body;padding-top:32px}
.about-body p{
  max-width:48ch;
  color:var(--ink);
  font-size:1.125rem;line-height:1.72;
}
.about-body p + p{margin-top:1.4em}
.about-sig{
  font-style:italic;font-size:2rem;line-height:1;
  color:var(--ink);margin-top:2.2em;
  transform:rotate(-3deg);transform-origin:left center;
}
.about h2,.pricing h2,.contact h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,1rem + 4.3vw,3.25rem);
  line-height:1.14;letter-spacing:.005em;
  color:var(--ink);
}
.about h2{max-width:18ch}

.pricing{padding:clamp(64px,8vh,88px) 24px 0}
.pricing-inner{max-width:640px;margin:0 auto;text-align:center}
.pricing h2{line-height:1.2}
.pricing-intro{margin-top:22px;color:var(--ink);font-size:1.05rem}
.plan{
  margin-top:clamp(44px,7vh,64px);
  padding-top:46px;
  border-top:1px solid var(--line-strong);
}
.plan-name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(24px,4vw,32px);letter-spacing:.08em;
  line-height:1.2;color:var(--ink);
}
.plan-price{
  font-family:var(--display);font-weight:400;
  font-size:clamp(52px,8vw,64px);line-height:1;
  margin-top:16px;color:var(--ink);
}
.plan-list{margin-top:28px}
.plan-list li{
  font-size:18px;line-height:1.8;
  color:var(--ink);
}
.plan-alt{
  margin-top:46px;padding-top:38px;
  border-top:1px solid var(--line);
  font-size:18px;line-height:1.7;
  color:var(--ink);
}
.plan-alt a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:opacity .3s ease;
}
.plan-alt a:hover{opacity:.6}

.interlude{padding-top:clamp(56px,8vh,88px)}
.interlude img{
  display:block;height:auto;
  width:min(100%, calc(100svh * 1.5));
  margin-inline:auto;
  aspect-ratio:3/2;
}
.interlude-cap{
  margin-top:14px;
  text-align:center;
  font-style:italic;font-size:1rem;line-height:1.5;
  color:var(--muted);
  padding:0 24px;
}

.contact{padding:clamp(56px,8vh,88px) 24px 30px}
.contact-inner{max-width:440px;margin:0 auto;text-align:center}
.contact h2{line-height:1.22}
.contact-intro{
  margin:24px auto 50px;
  color:var(--ink);font-size:18px;line-height:1.7;
  max-width:34ch;
}
.enquiry{max-width:100%;text-align:left}
.field{margin-bottom:28px}
.field label{
  display:block;margin-bottom:9px;
  font-size:1rem;color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--serif);font-size:1.05rem;color:var(--ink);
  background:transparent;border:0;border-radius:0;
  border-bottom:1px solid #CFC8BB;
  padding:10px 2px 9px;
  min-height:44px;
}
.field select{
  appearance:none;-webkit-appearance:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238B8477' stroke-width='1.3'/></svg>") right 4px center/11px 7px no-repeat;
  padding-right:28px;
}
.field textarea{min-height:112px;resize:vertical;line-height:1.6}
.field-error{margin-top:8px;font-size:15px;color:var(--ink)}
.field ::placeholder{color:#A39B8C}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.submit{
  margin-top:10px;width:100%;
  padding:17px 20px;
  font-family:var(--display);font-size:.78rem;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);background:transparent;
  border:1px solid var(--ink);border-radius:0;
  transition:background .4s ease,color .4s ease;
}
.submit:hover{background:var(--ink);color:var(--paper)}
.form-status{
  margin-top:20px;
  font-style:italic;font-size:1rem;line-height:1.5;
  color:var(--ink-soft);
  opacity:0;transition:opacity .5s ease;
}
.form-status.is-visible{opacity:1}

@media (min-width:768px){
  .controls{flex-wrap:nowrap}
  .ctl-group{width:auto}
  .ctl-pause{margin-top:0;margin-left:20px}
  .contact-inner{max-width:640px}
  .enquiry{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:32px;
  }
  .enquiry .field--full,.enquiry .submit,.enquiry .form-status{
    grid-column:1 / -1;
  }
}

.footer{
  border-top:1px solid var(--line);
  margin-top:clamp(48px,6vh,64px);
  padding:38px 24px 46px;
  text-align:center;
}
.foot-desc{font-style:italic;font-size:1rem;color:var(--muted)}
.foot-line{margin-top:10px;font-size:1rem;color:var(--muted)}
.foot-line a{border-bottom:1px solid transparent;transition:border-color .4s ease}
.foot-line a:hover{border-color:var(--muted)}

.js .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .95s ease var(--d,0s),transform .95s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}
.js .reveal.in{opacity:1;transform:none}
.delay-08{--d:.08s}
.delay-14{--d:.14s}
.delay-16{--d:.16s}
.delay-22{--d:.22s}

@media (max-width:767px) and (orientation:portrait){
  :root{--nav:96px}
  .topbar{
    flex-direction:column;justify-content:center;gap:0;
    padding:10px 16px 6px;
  }
  .brand{min-height:38px}
  .nav{width:100%;justify-content:space-between;gap:0}
  .nav a{font-size:12px;letter-spacing:.16em;padding:0 6px}
  .nav a::after{bottom:6px}
  #portfolio{height:auto}
  .stage{
    flex:none;
    width:100%;
    aspect-ratio:3/2;
  }
  .deck{padding:8px 12px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  .ctl-group{gap:6px}
  .dot{width:24px}
  .dots{gap:2px;margin:0 2px}
  .caption{font-size:15px;margin-top:0}
  .about-inner{
    grid-template-columns:1fr;
    grid-template-areas:"head" "media" "body";
    row-gap:28px;
  }
  .about-media{justify-self:center;margin-top:0;width:min(100%,420px)}
  .about h2{max-width:none}
  .about-body{padding-top:.9em}
  .footer{padding:32px 24px 40px}
}

@media (max-width:1099px) and (orientation:portrait){
  #portfolio{height:auto;min-height:0}
  .stage{position:relative;width:100%;aspect-ratio:3/2;flex:none}
}

@media (min-width:768px){
  .eyebrow{font-size:34px}
}

@media (max-width:950px) and (orientation:landscape){
  :root{--nav:54px}
  .topbar{padding:0 20px}
  .brand{min-height:40px}
  .brand-name{font-size:17px}
  .nav{gap:14px}
  .nav a{font-size:11px;letter-spacing:.14em;min-height:40px}
  .nav a::after{bottom:7px}
  .deck{padding:6px 12px 8px;padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px))}
  .ctl-group{gap:6px}
  .dot{width:24px}
  .dots{gap:2px;margin:0 2px}
  .caption{font-size:13px;margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slide{transition-duration:.45s}
  #pause-btn{display:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .caption,.nav a,.nav a::after,.arrow,.dot::before,.ctl-pause,.submit,.skip{transition:none}
}