@charset "UTF-8";
/* ==========================================================================
   AVAVA TRAVEL — How we work
   Loaded after style.css and destination.css: tokens, top bar, breadcrumb,
   page header, footer and the shared paper devices (letterhead strip, display
   type, script accents, proof chips) come from those two.
   --------------------------------------------------------------------------
   00. Page palette
   01. Section shells — heads, rails, stat strips
   02. Your draft, day by day
   03. Who runs your trip
   04. A day at our pace
   05. Money and dates
   06. Responsive — 1500 / 1200 / 1000 / 760 / 430
   --------------------------------------------------------------------------
   Like the About page this design is authored in fixed pixels at any width
   (only the nav and footer scale), so the values below are literal px.
   ========================================================================== */

/* ==========================================================================
   00. Page palette
   ========================================================================== */

.page-howwork {
  --hw-band-bg: #17435A;
  --hw-band-ink: #FBF6EC;
  --hw-band-rgb: 251, 246, 236;
  --hw-band-accent: #F0B48A;
  --hw-inc-pick-ink: #FBF6EC;
  --hw-inc-pick-rgb: 251, 246, 236;
  --ab-mail-accent: #C0521B;
  --hw-accent-rule-rgb: 192, 82, 27;
}

[data-theme="dark"] .page-howwork {
  --hw-band-bg: #EDE3D3;
  --hw-band-ink: #1A1A1A;
  --hw-band-rgb: 26, 26, 26;
  --hw-band-accent: #C0521B;
  --ab-panel: rgba(16, 16, 16, 0.72);
  --ab-on-accent: #1A1A1A;
  --ab-mail-bg: #FBF6EC;
  --ab-mail-ink: #17435A;
  --ab-mail-rgb: 23, 67, 90;
  --ab-mail-bar: rgba(16, 16, 16, 0.72);
  --ab-mail-bar-ink: #EDE3D3;
  --ab-mail-bar-accent: #E2661F;
  --ab-mail-rule: #17435A;
  --hw-inc-pick-rgb: 255, 240, 225;
}

.handover,
.alsotrue,
.paperrail--ink {
  --ab-panel: var(--hw-band-bg);
  --ab-panel-ink: var(--hw-band-ink);
  --ab-panel-rgb: var(--hw-band-rgb);
  --ab-panel-accent: var(--hw-band-accent);
}

/* ==========================================================================
   01. Section shells — heads, rails, stat strips
   ========================================================================== */

.crumbs--paper { margin-top: -8px; padding-top: 0; }

/* this page prints its strips a touch tighter than About */

.page-howwork .letterhead { gap: 20px; padding: 20px 0 16px; }

.page-howwork .letterhead--invert { padding: 16px 32px 14px; }

/* on dark paper every structural rule on this page softens to 45% */

[data-theme="dark"] .page-howwork .letterhead,
[data-theme="dark"] .page-howwork .letterhead__tag,
[data-theme="dark"] .statstrip,
[data-theme="dark"] .draft-sec__rail { border-color: rgba(var(--ink-rgb), 0.45); }

.who-sec,
.pay-sec {
  padding: 0 0 68px;
}

.paperhead {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 44px 0 32px;
}

.paperhead--invert { margin: 0 32px; padding: 46px 0 30px; }

.pay-sec .paperhead { padding-bottom: 34px; }

.paperhead--aside { margin: 0; padding: 0; }

.paperhead--aside .paperhead__line { gap: 22px; }

.paperhead__stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.paperhead__line {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.paperhead__note {
  margin: 0 0 0 auto;
  max-width: 400px;
  padding-bottom: 10px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  opacity: 0.8;
  text-wrap: pretty;
}

.paperhead--invert .paperhead__note { max-width: 380px; opacity: 0.82; }

.display--about { font-size: 92px; }

.display--about-md { font-size: 90px; }

.display--about-sm { font-size: 84px; line-height: 0.9; }

.script--about { font-size: 66px; padding-bottom: 18px; }

.script--about-md { font-size: 64px; padding-bottom: 16px; }

.script--about-sm { font-size: 60px; padding-bottom: 18px; }

/* bottom rail */

.paperrail {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 34px var(--gutter) 0;
}

.paperrail--invert { margin: 26px 0 0; }

.who-sec .paperrail { margin-top: 20px; }

.paperrail--aside { margin: 0; gap: 20px; }

.paperrail--aside .paperrail__text { max-width: 400px; font-size: 20px; }

.paperrail--aside .paperrail__cta {
  border: 0;
  background: var(--accent);
  color: var(--ab-on-accent);
  padding: 15px 32px;
  font-size: 18px;
}

.paperrail--aside .paperrail__cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ab-on-accent);
}

.paperrail--ink {
  margin: 30px var(--gutter) 0;
  background: var(--ab-panel);
  color: var(--ab-panel-ink);
  padding: 22px 26px;
}

.paperrail__figure {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 54px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.paperrail--invert .paperrail__figure,
.paperrail--ink .paperrail__figure {
  color: var(--ab-panel-accent);
}

.paperrail--invert .paperrail__figure { font-size: 44px; }

.paperrail--invert .paperrail__text { font-size: 19px; opacity: 0.85; }

.who-sec .paperrail__figure { font-size: 50px; }

.paperrail__label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ab-panel-accent);
}

.paperrail__text {
  max-width: 540px;
  font-size: 21px;
  font-weight: 500;
  opacity: 0.78;
  text-wrap: pretty;
}

.paperrail__cta {
  margin-left: auto;
  border: 2px solid var(--accent);
  padding: 15px 32px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.paperrail__cta:hover { background: var(--accent); color: var(--cta-label); }

.paperrail__cta--solid {
  border: 0;
  background: var(--accent);
  color: var(--ab-on-accent);
  padding: 16px 36px;
  font-size: 19px;
}

.paperrail__cta--solid:hover { background: var(--ink); border-color: var(--ink); }

.paperrail__stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}

.paperrail__stack .paperrail__text {
  max-width: 740px;
  font-size: 21px;
  opacity: 0.9;
}

.paperrail__cta--sand {
  border-color: var(--ab-panel-cta);
  background: var(--ab-panel-cta);
  color: var(--ab-panel-cta-ink);
  padding: 15px;
  letter-spacing: 0.14em;
  text-align: center;
  white-space: normal;
}

.paperrail__cta--wide {
  padding: 15px 34px;
  font-size: 19px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.paperrail__cta--sand:hover { background: transparent; color: var(--ab-panel-cta); }

/* stat strip */

.statstrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 var(--gutter) 26px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.22);
}

.statstrip--invert { margin: 0 32px 26px; border-color: rgba(var(--ab-panel-rgb), 0.3); }

.statcell {
  flex: 1 1 200px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 20px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.22);
}

.statstrip--invert .statcell { border-left-color: rgba(var(--ab-panel-rgb), 0.3); }

.statcell:first-child { border-left: 0; }

.statcell__value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
}

.statstrip--invert .statcell__value { color: var(--ab-panel-accent); }

.statcell__label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ==========================================================================
   02. Your draft, day by day
   ========================================================================== */

.draft-sec,
.oneday-sec { padding: 0 0 66px; }

/* these two sections print the heading and the script on one line */
.draft-sec .paperhead,
.oneday-sec .paperhead { padding: 42px 0 26px; }

.draft-sec .paperhead__stack,
.oneday-sec .paperhead__stack {
  flex-direction: row;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}

.draft-sec .script--about,
.oneday-sec .script--about {
  font-size: 66px;
  padding-top: 0;
  padding-bottom: 18px;
}

.draft-sec .paperhead__note { max-width: 380px; }
.oneday-sec .paperhead__note { max-width: 360px; }

.draft-sec .statstrip { margin-bottom: 20px; }

.draft-sec__body {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
}

/* four days of the nine, as photographs */
.dayframes {
  flex: 1 1 720px;
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}

.dayframe {
  position: relative;
  flex: 1 1 220px;
  min-width: 220px;
  height: 560px;
  overflow: hidden;
}

.dayframe--pick {
  flex: 1.3 1 270px;
  min-width: 270px;
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.dayframe__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dayframe__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.88) 0%, transparent 56%);
  pointer-events: none;
}

.dayframe--pick .dayframe__scrim {
  background: linear-gradient(to top, rgba(192, 82, 27, 0.92) 0%, rgba(10, 10, 10, 0.3) 50%, transparent 74%);
}

.dayframe__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  pointer-events: none;
}

.dayframe__tag {
  background: rgba(192, 82, 27, 0.94);
  color: #FFFFFF;
  padding: 5px 12px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
}

.dayframe--pick .dayframe__tag { background: #FFFFFF; color: var(--accent); }

.dayframe__count {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: #FFFFFF;
  opacity: 0.75;
}

.dayframe__cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #FFFFFF;
  pointer-events: none;
}

.dayframe__title {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.02;
}

.dayframe--pick .dayframe__title { font-size: 36px; font-weight: 600; }

.dayframe__text {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.88;
  text-wrap: pretty;
}

.dayframe--pick .dayframe__text { opacity: 0.95; }

.dayframe__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 11px;
  border-top: 1px dashed rgba(255, 255, 255, 0.5);
}

.dayframe--pick .dayframe__meta { border-top-color: rgba(255, 255, 255, 0.6); }

.dayframe__label {
  color: var(--ab-panel-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dayframe--pick .dayframe__label { color: #FFFFFF; opacity: 0.8; }

.dayframe__hotel { font-size: 18px; font-weight: 600; }

.dayframe__meals {
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* the price, in full */
.pricecard {
  flex: 0 1 330px;
  min-width: 310px;
  display: flex;
  flex-direction: column;
  background: var(--ab-panel);
  color: var(--ab-panel-ink);
  padding: 0 0 22px;
}

.pricecard__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid rgba(var(--ab-panel-rgb), 0.3);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pricecard__tab-label { color: var(--ab-panel-accent); }
.pricecard__tab-note { margin-left: auto; opacity: 0.6; }

.pricecard__rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px 22px 0;
}

.pline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

.pline__label {
  font-size: 19px;
  font-weight: 500;
  opacity: 0.7;
}

.pline--lead .pline__label { font-size: 20px; opacity: 0.8; }

.pline__value {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 24px;
  font-weight: 500;
}

.pline--lead .pline__value {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  color: var(--ab-panel-accent);
}

.pline--total {
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(var(--ab-panel-rgb), 0.45);
}

.pline--total .pline__value { font-size: 26px; }

.pricecard__inside {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 22px 0;
  padding-top: 15px;
  border-top: 2px dotted rgba(var(--ab-panel-rgb), 0.45);
}

.pricecard__inside-label {
  margin: 0;
  color: var(--ab-panel-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.incl {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.incl__item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 19px;
  font-weight: 500;
  opacity: 0.88;
}

.incl__tick {
  flex: none;
  color: var(--ab-panel-accent);
  font-size: 16px;
  font-weight: 700;
  opacity: 1;
}

.pricecard__budget {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 16px 22px 0;
  padding-top: 15px;
  border-top: 1px dashed rgba(var(--ab-panel-rgb), 0.4);
}

.pricecard__budget-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pricecard__budget-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
}

.pricecard__budget-note {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.75;
}

.pricecard__budget-value {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--ab-panel-accent);
  white-space: nowrap;
}

.pricecard__budget-unit { font-size: 16px; opacity: 0.7; }

.pricecard__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding: 18px 22px 0;
}

.pricecard__dash {
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(var(--ab-panel-rgb), 0.5) 0 8px, transparent 8px 16px);
}

.pricecard__promise {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  opacity: 0.82;
}

.pricecard__cta {
  background: var(--ab-panel-cta);
  color: var(--ab-panel-cta-ink);
  padding: 15px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.pricecard__cta:hover { background: var(--ab-panel-accent); }

.draft-sec__rail {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 26px var(--gutter) 0;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}

.draft-sec__rail-text {
  max-width: 700px;
  font-size: 21px;
  font-weight: 500;
  opacity: 0.78;
  text-wrap: pretty;
}

.draft-sec__script {
  margin-left: auto;
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: 52px;
  line-height: 0.5;
  color: var(--accent);
  white-space: nowrap;
}

/* ==========================================================================
   03. Who runs your trip
   ========================================================================== */

.whocards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin: 0 var(--gutter);
}

.whocard {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ab-card-border);
}

.whocard--accent { border-color: var(--accent); }

.whocard__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  background: var(--ab-tab-bg);
  color: var(--ab-tab-ink);
  padding: 12px 20px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 17px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.whocard--accent .whocard__tab { background: var(--accent); color: var(--ab-on-accent-deep); }

.whocard__role { margin-left: auto; color: var(--ab-tab-accent); }

.whocard--accent .whocard__role { color: inherit; }

.whocard__top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 22px 18px;
}

.whocard__photo {
  position: relative;
  flex: none;
  width: 128px;
  height: 128px;
  overflow: hidden;
  border: 2px solid var(--ab-card-border);
}

.whocard--accent .whocard__photo { border-color: var(--accent); }

.whocard--accent .wown { border-bottom-color: rgba(var(--hw-accent-rule-rgb), 0.4); }

.whocard--accent .wstats,
.whocard--accent .wstat {
  border-color: rgba(var(--hw-accent-rule-rgb), 0.4);
}

.whocard--accent .whocard__when { border-top-color: rgba(var(--hw-accent-rule-rgb), 0.5); }

.whocard--accent .whocard__reply-label { border-color: var(--accent); }

.whocard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.whocard__who {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.whocard__name {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
}

.whocard__title {
  margin: 0;
  color: var(--accent);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.whocard__since {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  opacity: 0.75;
}

.whocard__reply {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding-top: 4px;
}

.whocard__reply-label {
  border: 2px solid var(--ab-card-border);
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.whocard__reply-value {
  color: var(--accent);
  font-size: 19px;
  font-weight: 700;
}

.wstats {
  display: flex;
  align-items: stretch;
  margin: 0 22px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.3);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.3);
}

.wstat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 14px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.3);
}

.wstat:first-child { border-left: 0; padding-left: 0; }

.wstat__value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.wstat__label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

.whocard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 22px 22px;
}

.wowns {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wowns__label {
  margin: 0;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

.wowns__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wown {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(var(--ink-rgb), 0.3);
}

.wown:last-child { border-bottom: 0; }

.wown__tick { color: var(--accent); font-weight: 700; }

.wown__text { font-size: 20px; font-weight: 600; }

.whocard__when {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-top: 14px;
  border-top: 2px dotted rgba(var(--ink-rgb), 0.4);
}

.whocard__when-label {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.whocard__when-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.8;
  text-wrap: pretty;
}

.whocard__contact {
  margin: auto 0 0;
  padding-top: 14px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.handover {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 30px var(--gutter) 0;
  background: var(--ab-panel);
  color: var(--ab-panel-ink);
  padding: 24px 30px;
}

.handover__label {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.handover__label-text {
  color: var(--ab-panel-accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.handover__day {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 500;
}

.handover__text {
  flex: 1 1 460px;
  max-width: 820px;
  margin: 0;
  font-size: 21px;
  font-weight: 500;
  opacity: 0.9;
  text-wrap: pretty;
}

.handover__script {
  margin-left: auto;
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: 56px;
  line-height: 0.5;
  color: var(--ab-panel-accent);
  white-space: nowrap;
}

/* ==========================================================================
   04. A day at our pace
   ========================================================================== */

/* the day drawn to scale: travel, guided, yours, the rest */
.dayshape {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 var(--gutter) 24px;
}

.shapebar {
  display: flex;
  height: 22px;
  width: 100%;
  margin: 0;
}

.shapebar__seg { display: block; height: 100%; }

.shapebar__seg--travel { width: 4%; background: rgba(var(--ink-rgb), 0.25); }
.shapebar__seg--guided { width: 23%; background: var(--accent); }
.shapebar__seg--gap { width: 10%; background: rgba(var(--ink-rgb), 0.25); }

.shapebar__seg--free {
  width: 27%;
  background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), 0.35) 0 6px, rgba(var(--accent-rgb), 0.12) 6px 12px);
}

.shapebar__seg--rest { width: 36%; background: rgba(var(--ink-rgb), 0.25); }

.shapekeys {
  display: flex;
  align-items: baseline;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shapekeys__guided { width: 27%; color: var(--accent); }
.shapekeys__free { width: 37%; opacity: 0.55; }
.shapekeys__rest { margin-left: auto; opacity: 0.55; }

/* five hours of that day, at five different heights */
.hourframes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
  margin: 0 var(--gutter);
}

.hourframe {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hourframe--free {
  background: rgba(var(--accent-rgb), 0.06);
  padding: 14px;
}

.hourframe__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
}

.hourframe__time {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
}

.hourframe--pick .hourframe__time { color: var(--accent); }

.hourframe__no {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
}

.hourframe__shot {
  position: relative;
  display: block;
  overflow: hidden;
}

.hourframe__shot--h240 { height: 240px; }
.hourframe__shot--h260 { height: 260px; }
.hourframe__shot--h300 { height: 300px; }
.hourframe__shot--h350 { height: 350px; }
.hourframe__shot--h420 { height: 420px; }

.hourframe--pick .hourframe__shot {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.hourframe__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hourframe__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(192, 82, 27, 0.7) 0%, transparent 46%);
  pointer-events: none;
}

.hourframe__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  background: #FFFFFF;
  color: var(--accent);
  padding: 4px 11px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  pointer-events: none;
}

.hourframe__tag--outline {
  border: 2px solid #FFFFFF;
  background: transparent;
  color: #FFFFFF;
}

.hourframe__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hourframe__title {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.05;
}

.hourframe--pick .hourframe__title { font-weight: 600; color: var(--accent); }

.hourframe__text {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.78;
  text-wrap: pretty;
}

.hourframe__meta {
  margin: 5px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.4);
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hourframe--pick .hourframe__meta { border-top-color: rgba(var(--hw-accent-rule-rgb), 0.5); }

.paceband {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 30px var(--gutter) 0;
  background: var(--ab-panel);
  color: var(--ab-panel-ink);
  padding: 24px 30px;
}

.paceband__cell {
  flex: 1 1 200px;
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 0;
  padding: 0 26px;
  border-left: 1px solid rgba(var(--ab-panel-rgb), 0.35);
}

.paceband__cell:first-child { padding-left: 0; border-left: 0; }

.paceband__value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--ab-panel-accent);
}

.paceband__label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

.paceband__cta {
  margin-left: auto;
  background: var(--ab-panel-cta);
  color: var(--ab-panel-cta-ink);
  padding: 15px 32px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.paceband__cta:hover { background: var(--ab-panel-accent); }

/* ==========================================================================
   05. Money and dates
   ========================================================================== */

.paystops-wrap { position: relative; margin: 0 var(--gutter); }

.paystops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 56px;
}

.paystop {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 30px 26px 0;
}

.paystop + .paystop {
  padding-left: 30px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.22);
}

.ladders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  margin: 34px var(--gutter) 0;
}

.ladder {
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--ab-card-border);
}

.lrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.18);
}

.lrow--last { border-bottom-width: 3px; border-bottom-color: var(--ab-card-border); }

.alsotrue {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 30px var(--gutter) 0;
  background: var(--ab-panel);
  color: var(--ab-panel-ink);
  padding: 24px 30px;
}

.paystops__rail {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(var(--accent-rgb), 0.55) 0 8px, transparent 8px 20px);
}

.paystop__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.paystop__no {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.paystop--pick .paystop__no {
  border: 0;
  background: var(--accent);
  color: var(--ab-on-accent);
}

.paystop--done .paystop__no {
  border: 0;
  background: var(--ab-panel);
  color: var(--ab-on-accent);
}

.paystop__stage {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.paystop__title {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.02;
}

.paystop__amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.paystop__value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 54px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.paystop__unit {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

.paystop__text {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.42;
  opacity: 0.8;
  text-wrap: pretty;
}

.paystop__balance {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.35);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

.ladder__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding: 16px 0 12px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.22);
}

.ladder__title {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 500;
}

.ladder__note {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
}

.ladder__list { display: flex; flex-direction: column; }

.lrow__when { font-size: 21px; font-weight: 600; }

.lrow__what {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--accent);
}

.lrow__what--plain { color: inherit; opacity: 0.7; }

.ladder__tail {
  margin: 0;
  padding-top: 12px;
  font-size: 19px;
  font-weight: 500;
  opacity: 0.72;
  text-wrap: pretty;
}

.alsotrue__label {
  flex: none;
  color: var(--ab-panel-accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.alsotrue__text {
  flex: 1 1 520px;
  max-width: 900px;
  font-size: 21px;
  font-weight: 500;
  opacity: 0.9;
  text-wrap: pretty;
}

.alsotrue__cta {
  margin-left: auto;
  border: 2px solid var(--ab-panel-cta);
  background: var(--ab-panel-cta);
  padding: 14px 30px;
  color: var(--ab-panel-cta-ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.alsotrue__cta:hover { background: transparent; color: var(--ab-panel-cta); }

/* ==========================================================================
   06. Responsive
   ========================================================================== */

@media (max-width: 1500px) {
  .draft-sec .paperhead__stack .display--about,
  .oneday-sec .paperhead__stack .display--about { font-size: 74px; }

  .display--about,
  .display--about-md {
    font-size: 74px;
  }

  .display--about-sm { font-size: 54px; }

  .prow__no { font-size: 84px; width: 120px; }

  .whocards { gap: 22px; }
}

@media (max-width: 1200px) {
  .draft-sec__body { flex-direction: column; }

  .dayframes { flex: 1 1 100%; }

  .dayframe,
  .dayframe--pick { flex: 1 1 46%; min-width: 260px; }

  .pricecard { flex: 1 1 100%; min-width: 0; }

  .hourframes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .paystops__rail { display: none; }

  .paystops { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }

  .paystop { padding: 22px 30px 22px 0; }
}

@media (max-width: 1000px) {
  .draft-sec,
  .oneday-sec { padding-bottom: 40px; }

  .draft-sec .paperhead,
  .oneday-sec .paperhead { padding: 26px 0 20px; gap: 14px; }

  .draft-sec .paperhead__note,
  .oneday-sec .paperhead__note {
    margin-left: 0;
    padding-bottom: 0;
    text-align: left;
    font-size: 18px;
  }

  .dayframe,
  .dayframe--pick { height: 460px; }

  .shapekeys { font-size: 13px; }

  .paceband { padding: 18px 20px; }

  .paceband__cell { flex: 1 1 150px; padding: 10px 16px; }

  .paceband__cell:first-child { padding-left: 0; }

  .paceband__cta { margin-left: 0; padding: 13px 24px; font-size: 16px; }

  .draft-sec__rail { margin-top: 20px; padding-top: 16px; gap: 14px; }

  .draft-sec__script { margin-left: 0; font-size: 44px; }

  .display--about,
  .display--about-md,
  .display--about-sm {
    font-size: clamp(34px, 7vw, 56px);
  }

  .script--about,
  .script--about-md,
  .script--about-sm {
    font-size: clamp(34px, 8vw, 56px);
    padding-bottom: 8px;
    white-space: normal;
  }

  .paperhead,
  .paperhead--invert {
    padding: 26px 0 20px;
    gap: 14px;
  }

  .paperhead--invert { margin: 0 20px; }

  .paperhead__note {
    margin-left: 0;
    text-align: left;
    padding-bottom: 0;
    font-size: 18px;
  }

  .paperrail,
  .paperrail--ink {
    margin: 24px var(--gutter) 0;
    gap: 14px;
  }

  .paperrail--ink { padding: 18px 20px; }

  .paperrail__cta,
  .paperrail__cta--solid {
    margin-left: 0;
    padding: 13px 24px;
    font-size: 16px;
  }

  .paperrail__figure { font-size: 40px; }

  .statstrip--invert { margin-left: 20px; margin-right: 20px; }

  .prow__no { font-size: 56px; width: auto; }

  .prow__main { flex: 1 1 100%; }

  .prow__title { font-size: 30px; }

  .prow__lead { font-size: 19px; }

  .prow__cols { gap: 16px; }

  .prow__time { min-width: 0; align-items: flex-start; }

  .mail__body { padding: 18px 18px 20px; }

  .mail__subject { font-size: 26px; }

  .whocards { grid-template-columns: minmax(0, 1fr); }

  .whocard__name { font-size: 30px; }

  .handover { gap: 14px; padding: 18px 20px; }

  .handover__script,
  .onroad__script {
    margin-left: 0;
    font-size: 40px;
  }

  .paystop__value { font-size: 40px; }

  .paystops { grid-template-columns: minmax(0, 1fr); }

  .paystop,
  .paystop + .paystop {
    padding: 22px 0;
    border-left: 0;
    border-top: 1px dashed rgba(var(--ink-rgb), 0.3);
  }

  .paystops > .paystop:first-child { border-top: 0; padding-top: 0; }

  .ladders { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  .alsotrue { gap: 14px; padding: 18px 20px; }

  .alsotrue__cta { margin-left: 0; }

  .chg__value { font-size: 52px; }

  .statstrip { margin: 0 var(--gutter) 20px; }

  .statcell { flex: 1 1 160px; padding: 12px 14px; }

  .statcell__label { font-size: 15px; }

  .faqrow__question { font-size: 24px; }

  .faqrow__chip { margin-left: 0; }
}

@media (max-width: 760px) {
  .dayframes { flex-direction: column; }

  .dayframe,
  .dayframe--pick { flex: 1 1 auto; min-width: 0; height: 380px; }

  .hourframes { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .hourframe__shot--h240,
  .hourframe__shot--h260,
  .hourframe__shot--h300,
  .hourframe__shot--h350,
  .hourframe__shot--h420 { height: 260px; }

  .shapekeys__guided,
  .shapekeys__free { width: auto; }

  .shapekeys { flex-wrap: wrap; gap: 8px 14px; }

  .whocard__top { flex-direction: column; }

  .wstats { flex-wrap: wrap; }

  .wstat { flex: 1 1 120px; }

  .mail__sender { gap: 10px; }

  .mail__chip { margin-left: 0; }

  .rline__qty,
  .nline__cost {
    margin-left: 0;
  }
}

@media (max-width: 430px) {
  .dayframe,
  .dayframe--pick { min-width: 0; }

  .paystop__head { flex-wrap: wrap; }

  .paystop__stage { white-space: normal; }

  .paystop__unit,
  .ladder__note,
  .lrow__what { white-space: normal; text-align: left; }

  .lrow,
  .paystop__amount,
  .ladder__head { flex-wrap: wrap; gap: 6px 14px; }

  .paystop { padding-right: 0; }

/* nothing keeps a floor wider than the phone */

  .linebox__rail { min-width: 0; }

  .letterhead__tag { white-space: normal; }

  .prow__no { font-size: 44px; }

  .prow__title { font-size: 26px; }

  .paystop__title,
  .ladder__title {
    font-size: 26px;
  }

  .inc__title { font-size: 30px; }

  .mail__signature { font-size: 42px; }
}