@font-face{font-family:"Besley";src:url(fonts/besley-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Besley";src:url(fonts/besley-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

/* Colour roles. The page is ink on paper on purpose: the sample designs carry the colour.
   paper  = page ground (neutral, not cream)
   ink    = text, primary button, the price band
   rule   = hairlines between rows
   muted  = captions and secondary text (6.4:1 on paper)
   chalk  = text on the ink band */
:root{
  --paper:#F3F3EF; --ink:#1A1B19; --rule:#CACAC2; --muted:#575953; --chalk:#E9E9E3; --chalk-muted:#B4B5AE;
  --serif:"Besley",Georgia,serif; --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,4.5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;transition:border-color .15s ease,color .15s ease}
a:hover{border-bottom-color:transparent}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}
p{margin:0}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--gut);top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:10}

/* header */
.top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px var(--gut)}
.mark{font:600 20px/1 var(--serif);border:0}
.top nav{display:flex;gap:28px;font-size:15px}
.top nav a{border-bottom-color:transparent}
.top nav a:hover{border-bottom-color:currentColor}

/* opening */
.open{padding:clamp(40px,8vw,112px) var(--gut) clamp(40px,6vw,80px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.open h1{grid-column:1 / span 10;font-size:clamp(40px,6.6vw,96px);line-height:1.02;letter-spacing:-.018em}
.open .act{grid-column:1 / span 12;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:clamp(28px,4vw,48px)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:0;padding:15px 22px;font-weight:500;font-size:16px;transition:background-color .15s ease}
.btn:hover{background:#3A3C37}
.btn:active{background:#000}
.act p{color:var(--muted);font-size:16px}

/* work */
.work{padding:0 var(--gut)}
.work h2{font-size:clamp(28px,3vw,40px);margin-bottom:28px}
.piece{padding:0 0 clamp(56px,8vw,112px)}
.shots{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;margin-bottom:16px}
.piece .desk{grid-column:1 / span 9;align-self:end}
.piece .mob{grid-column:10 / span 3;align-self:end}
.piece.flip .desk{grid-column:4 / span 9;grid-row:1}
.piece.flip .mob{grid-column:1 / span 3;grid-row:1}
.piece img{width:100%;background:#fff}
.cap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:baseline;padding-top:12px;border-top:1px solid var(--rule)}
.cap h3{grid-column:1 / span 6;font-size:22px;line-height:1.25}
.cap p{grid-column:7 / span 6;justify-self:end;text-align:right;color:var(--muted);font-size:15px}
.cap h3 a{border-bottom-width:1px}

/* price band */
.band{background:var(--ink);color:var(--chalk);padding:clamp(56px,8vw,104px) var(--gut)}
.band h2{font-size:clamp(28px,3vw,40px);margin-bottom:clamp(28px,4vw,48px)}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);max-width:1120px}
.amt{font:500 clamp(48px,6vw,80px)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.amt small{font:400 18px/1.3 var(--sans);letter-spacing:0;color:var(--chalk-muted);display:block;margin-top:10px}
.prices ul{list-style:none;margin:28px 0 0;padding:0}
.prices li{padding:12px 0;border-top:1px solid #3E403B}
.terms{margin-top:clamp(36px,5vw,56px);max-width:1120px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);color:var(--chalk-muted);font-size:16px}

/* steps */
.steps{padding:clamp(56px,8vw,104px) var(--gut) 0;max-width:1240px}
.steps h2,.faq h2{font-size:clamp(28px,3vw,40px);margin-bottom:24px}
.steps ol{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);column-gap:24px}
.steps li{counter-increment:s;border-top:1px solid var(--ink);padding-top:14px}
.steps li::before{content:counter(s);display:block;font:500 20px/1 var(--serif);margin-bottom:12px}

/* direct booking */
.direct{padding:clamp(56px,8vw,104px) var(--gut) 0;max-width:1240px}
.direct h2{font-size:clamp(28px,3vw,40px);margin-bottom:24px}
.direct-line{border-top:1px solid var(--ink);padding-top:18px;max-width:62ch;font:500 clamp(19px,1.6vw,22px)/1.4 var(--serif)}

/* about */
.about{padding:clamp(56px,8vw,104px) var(--gut) 0;max-width:860px}
.about h2{font-size:clamp(28px,3vw,40px);margin-bottom:24px}
.about-body{border-top:1px solid var(--ink);padding-top:18px;max-width:62ch}
.about-body p+p{margin-top:14px}
.about-body p:first-child{font:500 clamp(19px,1.6vw,22px)/1.4 var(--serif)}

/* faq */
.faq{padding:clamp(56px,8vw,104px) var(--gut) 0;max-width:860px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font:500 19px/1.35 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 22px/1 var(--sans)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 20px;max-width:60ch;color:#30322E}

/* contact */
.contact{padding:clamp(72px,10vw,136px) var(--gut) clamp(56px,7vw,96px)}
.contact h2{font-size:clamp(28px,3vw,40px);margin-bottom:20px}
.mail{display:inline-block;padding-bottom:4px;font:500 clamp(30px,5.4vw,76px)/1.05 var(--serif);letter-spacing:-.015em;overflow-wrap:anywhere;border-bottom-width:2px}
.contact p{margin-top:20px;color:var(--muted)}
.contact .contact-lede{margin-top:0}
.ask{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;max-width:760px;margin-top:32px}
.ask label{display:flex;flex-direction:column;gap:6px;font-size:15px}
.ask label em{font-style:normal;color:var(--muted)}
.ask input{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:8px 0}
.ask input:focus{outline:none;border-bottom-width:2px;padding-bottom:7px}
.ask input::placeholder{color:#9A9B94}
.ask .cf-turnstile{grid-column:1 / -1;min-height:65px}
.ask .btn{justify-self:start;cursor:pointer;font-family:inherit}
.ask .hp{position:absolute;left:-9999px}
@media (max-width:640px){.ask{grid-template-columns:1fr}}
footer{padding:20px var(--gut) 28px;border-top:1px solid var(--rule);font-size:14px;color:var(--muted)}
footer p{margin:0}footer p+p{margin-top:8px}

@media (max-width:900px){
  .open h1{grid-column:1 / span 12}
  .piece .desk,.piece.flip .desk{grid-column:1 / span 12;grid-row:auto}
  .piece .mob,.piece.flip .mob{display:none}
  .cap h3{grid-column:1 / span 12}
  .cap p{grid-column:1 / span 12;justify-self:start;text-align:left}
  .cap{row-gap:6px}
  .prices,.terms{grid-template-columns:1fr}
  .steps ol{grid-template-columns:1fr 1fr;row-gap:28px}
}
@media (max-width:560px){
  .top nav a:not(.nav-mail){display:none}
  .piece .desk,.piece.flip .desk{display:none}
  .piece .mob,.piece.flip .mob{display:block;grid-column:1 / span 10;grid-row:auto}
  .steps ol{grid-template-columns:1fr}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}