/* Roja Digital. The black version of the Roja family: the logo's own gold on the logo's own black,
   one classical roman throughout. The example homepages and the example app inside the phone frames
   each have their own colours and type, to show range. */

@font-face {
  font-family: "Roja Pagella";
  src: local("Palatino Linotype"), local("Palatino-Roman"), local("Palatino"), local("TeX Gyre Pagella"),
       url("/assets/fonts/pagella-regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roja Pagella";
  src: local("Palatino Linotype Italic"), local("Palatino-Italic"), local("Palatino Italic"), local("TeX Gyre Pagella Italic"),
       url("/assets/fonts/pagella-italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #000000;              /* the logo's own black: the animation sits on the page with no box */
  --text: #ece6da;
  --muted: #a59d90;
  --gold: #dbb567;
  --gold-bright: #f6d88c;
  --link-hover: #fff3cf;
  --hover-tint: rgba(219, 181, 103, 0.12);
  --rule: rgba(219, 181, 103, 0.36);
  --rule-soft: rgba(219, 181, 103, 0.16);
  --panel: #0e0c07;
  --bezel: #2a2722;           /* the phone frames: graphite, so they stand off the black */
  --problem: #f08a80;
  --gutter: clamp(16px, 4.5vw, 44px);
  --max: 1200px;
  --s14: 0.875rem; --s16: 1rem; --s18: 1.125rem; --s21: 1.3125rem; --s24: 1.5rem; --s36: 2.25rem; --s48: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Roja Pagella", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-size: var(--s18); line-height: 1.65; font-kerning: normal; font-variant-numeric: lining-nums;
  overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 400; line-height: 1.2; margin: 0; letter-spacing: 0.005em; }
p, ul, ol, dl, figure, fieldset { margin: 0; }
a { color: var(--gold-bright); text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--rule); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--gold); color: #000; padding: 8px 14px; z-index: 10; text-decoration: none; }
.skip:focus { top: 12px; }
.quiet { color: var(--muted); font-size: var(--s14); }

/* Preview builds only: the site isn't live until the company is registered */
.preview-bar { margin: 0; padding: 8px var(--gutter); background: var(--gold); color: #000; font-size: var(--s14); text-align: center; line-height: 1.4; }

/* Buttons: gilt for the main action, outline for the second */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0.5em 1.25em; border: 1px solid var(--gold); border-radius: 2px;
  font: inherit; font-size: 1.0625rem; line-height: 1.2; color: var(--gold-bright); background: transparent;
  text-decoration: none; cursor: pointer; transition: background-color 0.15s, color 0.15s; text-align: center;
}
.button:hover { background: var(--hover-tint); color: var(--link-hover); }
.button--gold { color: #000; border-color: #c39447; background: #d6ad5c linear-gradient(180deg, #f3d488 0%, #d6ad5c 55%, #c69a50 100%); }
.button--gold:hover { color: #000; background: #dfb866 linear-gradient(180deg, #f8e0a0 0%, #dfb866 60%, #cfa458 100%); }

/* Form controls */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: var(--s14); color: var(--muted); }
.field select, .field input, .field textarea {
  font: inherit; font-size: var(--s16); color: var(--text); background-color: var(--bg);
  border: 1px solid var(--rule); border-radius: 2px; min-height: 46px; padding: 0 12px; width: 100%;
}
.field select {
  padding-right: 34px; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23dbb567' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.field select:hover, .field input:hover, .field textarea:hover { border-color: var(--gold); }
.field textarea { padding: 10px 12px; line-height: 1.5; resize: vertical; min-height: 140px; }
/* The spam trap: never shown to people */
.trap { display: none; }
/* Sending, sent and problem messages after a form */
.enquiry-status:empty { display: none; }
.enquiry-status { margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--gold); background: var(--hover-tint); font-size: var(--s16); }
.enquiry-status[data-kind="problem"] { border-left-color: var(--problem); }
.enquiry-status:focus { outline: none; }
.enquiry { margin-top: 28px; }
.enquiry__form { display: grid; gap: 16px; }
@media (min-width: 640px) { .enquiry__form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .enquiry__form .field--wide, .enquiry__form .enquiry__send { grid-column: 1 / -1; } }
.enquiry__send { margin-top: 4px; }
.contact-page .quiet { margin-top: 18px; }

/* Masthead */
.masthead { border-bottom: 1px solid var(--rule-soft); padding-inline: var(--gutter); }
.masthead__inner { max-width: var(--max); margin: 0 auto; padding: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-height: 66px; }
.masthead__brand { display: block; margin-right: auto; }
/* The header logo: the small animation on every page but home, the still logo where motion is turned off */
.masthead__brand img, .masthead__film { width: auto; height: 50px; aspect-ratio: 158 / 66; }
.masthead__film { object-fit: contain; pointer-events: none; }
.masthead__film + .masthead__still { display: none; }
.is-home .masthead__brand { visibility: hidden; }
.masthead__nav { display: flex; gap: clamp(14px, 3vw, 32px); }
.masthead__nav a { color: var(--text); text-decoration: none; font-size: var(--s16); white-space: nowrap; }
.masthead__nav a:hover { color: var(--gold-bright); text-decoration: underline; text-decoration-color: var(--rule); }
@media (min-width: 760px) { .masthead__nav a { font-size: var(--s18); } }
/* Small phones: the menu gets its own row under the logo */
@media (max-width: 459px) {
  .masthead__inner { padding-block: 6px 8px; }
  .masthead__nav { width: 100%; justify-content: space-between; }
  .is-home .masthead__brand { display: none; }
}

/* Hero: the logo animation, then what we do */
.hero { padding: 0 var(--gutter) clamp(48px, 7vw, 76px); text-align: center; }
.hero__stage { position: relative; max-width: 680px; margin: 0 auto; aspect-ratio: 5 / 2; }
.hero__film, .hero__still {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
}
.hero__still { display: none; }
.film-toggle {
  position: absolute; right: 4px; bottom: 4px; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%;
  background: var(--bg); color: var(--gold); cursor: pointer;
}
.film-toggle:hover { border-color: var(--gold); }
.film-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.film-toggle__play, .film-toggle[data-paused="true"] .film-toggle__pause { display: none; }
.film-toggle[data-paused="true"] .film-toggle__play { display: block; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__film, .masthead__film, .film-toggle, .colophon__motion { display: none; }
  .hero__still { display: block; }
  .masthead__film + .masthead__still { display: inline; }
  .button { transition: none; }
}
.hero__title { font-size: clamp(1.75rem, 1.15rem + 2.6vw, var(--s48)); max-width: 26ch; margin: 4px auto 0; text-wrap: balance; }
.hero__lede { color: var(--muted); margin: 14px auto 0; font-size: var(--s21); max-width: 46ch; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* Sections */
.band { padding: clamp(48px, 7vw, 88px) var(--gutter); }
.band--panel { background: var(--panel); }
.band + .band { border-top: 1px solid var(--rule-soft); }
.band__inner { max-width: var(--max); margin: 0 auto; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, var(--s36)); color: var(--gold); text-wrap: balance; }
.band__intro { margin-top: 14px; max-width: 58ch; font-size: var(--s21); line-height: 1.55; text-wrap: pretty; }

/* Example homepages: the one bold thing on the page */
.examples__note { margin-top: 10px; color: var(--muted); font-size: var(--s16); max-width: 58ch; text-wrap: pretty; }
.examples__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 22px;
  margin: 32px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
}
.examples__row:focus-visible { outline-offset: -2px; }
@media (min-width: 980px) {
  .examples__row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.example { display: grid; gap: 16px; justify-items: center; align-content: start; scroll-snap-align: start; }
.example__caption { max-width: 30ch; text-align: center; font-size: var(--s16); line-height: 1.5; color: var(--text); }
.example__kind { display: block; color: var(--gold); font-size: var(--s21); }

.phone {
  position: relative; width: 100%; max-width: 290px; aspect-ratio: 9 / 18.6;
  border: 9px solid var(--bezel); border-radius: 38px; background: var(--bezel);
  outline: 1px solid var(--rule); outline-offset: 6px; overflow: hidden;
}
.phone::before { content: ""; position: absolute; z-index: 1; top: 7px; left: 50%; width: 62px; height: 17px; margin-left: -31px; border-radius: 10px; background: var(--bezel); }
.mock { height: 100%; border-radius: 29px; overflow: hidden; font-size: 12.5px; line-height: 1.45; display: flex; flex-direction: column; }
.mock__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 34px 16px 10px; }
.mock__name { font-size: 15px; }
.mock__menu { font-size: 11.5px; }
.mock__art { display: block; width: 100%; height: 118px; flex: none; }
.mock__body { padding: 16px 16px 20px; display: grid; gap: 9px; align-content: start; }
.mock__title { font-size: 19px; line-height: 1.22; }
.mock__button { justify-self: start; padding: 7px 14px; font-size: 12px; line-height: 1.3; }
.mock__h { margin-top: 10px; font-size: 13px; }
.mock__list { list-style: none; margin: 0; padding: 0; }
.mock__row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 18%, transparent); }

/* A salon: berry and blush, italic serif */
.mock--salon { background: #fbf3f1; color: #3b1f33; }
.mock--salon .mock__name, .mock--salon .mock__title { font-style: italic; }
.mock--salon .mock__menu { padding: 4px 10px; border: 1px solid #8c3b63; border-radius: 999px; color: #8c3b63; }
.mock--salon .mock__lede { color: #6b4a5e; }
.mock--salon .mock__button { background: #8c3b63; color: #fff; border-radius: 999px; }
.mock--salon .mock__h { color: #8c3b63; }
/* A café: forest green and cream, upright serif */
.mock--cafe { background: #f5f1e8; color: #24382b; }
.mock--cafe .mock__name { letter-spacing: 0.02em; }
.mock--cafe .mock__lede { color: #4d5b4f; }
.mock--cafe .mock__button { background: #2f5d3f; color: #fff; border-radius: 4px; }
.mock--cafe .mock__h { color: #2f5d3f; }
/* A barber's: navy and brass, bold sans */
.mock--barber { background: #16202c; color: #f2ece0; font-family: "Helvetica Neue", Arial, "Liberation Sans", system-ui, sans-serif; }
.mock--barber .mock__name { font-weight: 700; letter-spacing: 0.04em; }
.mock--barber .mock__title { font-weight: 700; font-size: 18px; }
.mock--barber .mock__lede { color: #c9c2b4; }
.mock--barber .mock__button { background: #c9a45c; color: #16202c; font-weight: 700; }
.mock--barber .mock__h { color: #c9a45c; font-weight: 700; }
.mock--barber .mock__stripes { height: 118px; flex: none; background: repeating-linear-gradient(135deg, #c9a45c 0 14px, #16202c 14px 26px, #f2ece0 26px 40px, #16202c 40px 52px); }

/* An app: clean sans, teal and white, with a tab bar along the bottom like a real app */
.mock--app { background: #f2f5f6; color: #14222b; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; position: relative; }
.mock--app .mock__bar { background: #fff; border-bottom: 1px solid #dfe5e8; padding-bottom: 9px; }
.mock--app .mock__name { font-weight: 650; font-size: 14px; }
.mock--app .mock__menu { color: #0f6461; font-weight: 600; }
.app__body { flex: 1; min-height: 0; overflow: hidden; padding: 14px 14px 10px; display: grid; gap: 8px; align-content: start; }
.app__title { font-size: 17px; font-weight: 700; line-height: 1.2; }
.app__service { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 10px; background: #fff; border: 1px solid #dfe5e8; border-radius: 10px; font-weight: 600; }
.app__sub { color: #45555f; font-weight: 400; font-size: 11.5px; }
.app__label { margin-top: 2px; color: #45555f; font-size: 11px; font-weight: 600; }
.app__days, .app__times { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.app__days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app__times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app__chip { padding: 6px 0; text-align: center; background: #fff; border: 1px solid #cdd6db; border-radius: 9px; color: #14222b; font-size: 12px; font-weight: 600; line-height: 1.2; }
.app__chip span { display: block; color: #45555f; font-size: 10px; font-weight: 500; }
.app__chip.is-picked { background: #0f6461; border-color: #0f6461; color: #fff; }
.app__chip.is-picked span { color: #d7efed; }
.app__chip.is-taken { color: #6b7880; text-decoration: line-through; background: transparent; border-style: dashed; }
.mock--app .mock__button { justify-self: stretch; text-align: center; margin-top: 4px; padding: 9px 12px; background: #0f6461; color: #fff; border-radius: 10px; font-weight: 650; }
.app__reminder { color: #45555f; font-size: 11px; text-align: center; }
.app__card { margin-top: 6px; padding: 11px 12px; border-radius: 12px; background: #14222b; color: #f2f5f6; display: grid; gap: 7px; }
.app__card-title { font-weight: 650; font-size: 12.5px; }
.app__stamps { display: flex; gap: 6px; }
.app__stamps i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #e8b65c; }
.app__stamps i.is-stamped { background: #e8b65c; }
.app__card-note { color: #c6d0d5; font-size: 11px; }
.app__tabs { flex: none; list-style: none; margin: 0; padding: 7px 8px 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-top: 1px solid #dfe5e8; }
.app__tab { text-align: center; font-size: 10.5px; color: #45555f; font-weight: 600; display: grid; justify-items: center; gap: 3px; }
.app__tab::before { content: ""; width: 18px; height: 4px; border-radius: 2px; background: #cdd6db; }
.app__tab.is-on { color: #0f6461; }
.app__tab.is-on::before { background: #0f6461; }

/* What we do: four plain columns under gold rules */
.services { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 32px; }
@media (min-width: 720px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 44px; } }
@media (min-width: 1120px) { .services { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } }
.service { border-top: 1px solid var(--rule); padding-top: 18px; }
.service h3 { font-size: var(--s24); color: var(--gold); }
.service p { margin-top: 10px; }

/* Apps: the words, then the example app beside them */
.apps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 64px; align-items: center; }
@media (min-width: 900px) { .apps { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.apps__list { list-style: none; padding: 0; margin-top: 24px; display: grid; max-width: 40rem; }
.apps__list li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--rule-soft); }
.apps__list li:last-child { border-bottom: 1px solid var(--rule-soft); }
.apps__list li::before { content: ""; position: absolute; left: 3px; top: calc(10px + 0.62em); width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.apps__note { margin-top: 20px; color: var(--muted); max-width: 46ch; font-size: var(--s16); }
.apps .button { margin-top: 22px; }
.example--app .phone { width: min(78vw, 290px); }

/* Every website comes with */
.included { list-style: none; padding: 0; margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 40px; max-width: 64rem; }
@media (min-width: 720px) { .included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.included li { position: relative; padding-left: 24px; }
.included li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* Already have a website? */
.check { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 56px; }
@media (min-width: 900px) { .check { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.check__list { list-style: none; padding: 0; display: grid; }
.check__list li { padding: 11px 0; border-top: 1px solid var(--rule-soft); }
.check__list li:last-child { border-bottom: 1px solid var(--rule-soft); }
.check .button { margin-top: 24px; }

/* How it works: a real sequence, so it is numbered */
.steps { list-style: none; counter-reset: step; margin: 30px 0 0; padding: 0; display: grid; gap: 26px; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; }
.steps li::before { content: counter(step); grid-row: span 2; font-size: var(--s48); line-height: 1; color: var(--gold); min-width: 0.7em; }
.steps h3 { font-size: var(--s21); }
.steps p { color: var(--muted); margin-top: 6px; font-size: var(--s16); max-width: 32ch; }

/* Customers and partners */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px 56px; margin-top: 28px; }
@media (min-width: 800px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo h3 { font-size: var(--s24); }
.duo p { margin-top: 10px; max-width: 46ch; }
.duo .button { margin-top: 18px; }

/* Closing call to action */
.closing { text-align: center; }
.closing p { margin: 14px auto 0; max-width: 46ch; font-size: var(--s21); line-height: 1.55; }
.closing .button { margin-top: 26px; }

/* Plain pages */
.prose { max-width: 46rem; margin: 0 auto; padding: 32px var(--gutter) clamp(56px, 8vw, 96px); }
.prose h1 { font-size: clamp(2rem, 1.4rem + 2vw, var(--s48)); }
.prose h2 { font-size: var(--s24); margin-top: 36px; }
.prose p { margin-top: 14px; }
.prose--centre { text-align: center; }
.prose--centre .button { margin-top: 12px; }

/* Footer */
.colophon { border-top: 1px solid var(--rule-soft); padding-inline: var(--gutter); }
.colophon__inner { max-width: var(--max); margin: 0 auto; padding: 36px 0 44px; display: grid; gap: 16px; font-size: var(--s16); }
.colophon__name { color: var(--gold); font-size: var(--s21); }
.colophon__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.colophon__motion {
  font: inherit; color: var(--gold-bright); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--rule);
}
.colophon__motion:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.colophon__legal { color: var(--muted); font-size: var(--s14); max-width: 80ch; }
@media (min-width: 860px) {
  .colophon__inner { grid-template-columns: 1fr 1fr; align-items: start; }
  .colophon__nav { justify-content: flex-end; }
  .colophon__legal { grid-column: 1 / -1; }
}