/* about.html, page-scoped styles.
   Generated from designs/About.dc.html, values verbatim.
   Class names are mechanical (.ab-1, .ab-2 ...) and deduplicated:
   elements sharing an identical style share a class. Rename them semantically
   as you go. Load after css/chrome.css. */

/* --- page keyframes and breakpoints, from the design --- */

/* The NavBar's inner row is height:80 plus 16px padding on a content box, so
     the bar actually measured 113px against a fixed 80px body offset and covered
     the top 33px of every page. Border-box makes 80 mean 80. */

@keyframes abLineUp { from { transform: translateY(110%); } to { transform: translateY(0); } }

@keyframes abFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes abRuleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The design-system NavBar ships no hamburger and sets display inline on its
     link row, so the old rule never applied: the bar wrapped to 113px on a
     phone and sat over the page under a fixed 80px offset. Hide the row and the
     nav pill with !important, and hand navigation to the panel below. */

/* Presence is display, and nothing else. transform and opacity on these nodes
     stay pinned to their authored value however they are set, and an entrance
     animation can be left frozen on its first frame, which parks the panel
     off-screen while every other signal says the menu is open. The menu opens
     without motion on purpose: it is the one control a phone visitor cannot do
     without. */

/* The contact tab stays on every page at every width. Its panel is already
     sized to min(292px, 100vw - 76px) so it fits beside its own tab on a 360px
     phone, and it never meets the bottom-centred mobile booking pill. */

/* --- elements --- */

.ab-1 {
  position: relative;
  overflow: hidden;
  background: var(--color-ivory-blush);
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 72px);
}

.ab-2 {
  position: absolute;
  left: min(84%, calc(100% - 0.315 * clamp(360px, 44vw, 620px) - 16px));
  top: 50%;
  width: clamp(360px, 44vw, 620px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ab-3 {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.09;
}

.ab-4 {
  position: relative;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}

.ab-5 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  animation: abFadeIn 900ms var(--silk) 150ms both;
}

.ab-6 {
  display: block;
  width: 1px;
  height: clamp(48px, 6vw, 96px);
  margin-top: calc(-1 * clamp(56px, 7vw, 96px));
  background: linear-gradient(rgba(166, 135, 111, 0) 0%, rgba(166, 135, 111, 0.5) 100%);
}

.ab-7 {
  width: 20px;
  height: 20px;
  transform: rotate(-16deg);
}

.ab-8 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.2;
  letter-spacing: 0.015em;
  color: var(--color-mocha);
  margin: 0;
  max-width: 22ch;
}

.ab-9 {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}

.ab-10 {
  display: block;
  animation: abLineUp 1100ms var(--silk) 250ms both;
}

.ab-11 {
  display: block;
  animation: abLineUp 1100ms var(--silk) 420ms both;
}

.ab-12 {
  position: relative;
  display: inline-block;
  color: var(--color-bronze-text);
}

.ab-13 {
  position: absolute;
  left: 0;
  right: 0.12em;
  bottom: 0.14em;
  height: 1px;
  background: var(--color-champagne-gold);
  transform-origin: left center;
  animation: abRuleGrow 1100ms var(--silk) 1250ms both;
}

.ab-14 {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-top: 34px;
  animation: abFadeIn 900ms var(--silk) 620ms both;
}

.ab-15 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-bronze-text);
  white-space: nowrap;
}

.ab-16 {
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(166, 135, 111, 0.3);
  align-self: center;
}

.ab-17 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: var(--type-small);
  color: var(--color-bronze-text);
  font-feature-settings: 'tnum' 1;
}

.ab-18 {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-mocha);
  max-width: 46ch;
  margin: 34px 0 0;
  animation: abFadeIn 900ms var(--silk) 760ms both;
}

.ab-19 {
  overflow-x: clip;
  background: var(--color-warm-sand);
  padding: clamp(80px, 10vw, 144px) clamp(24px, 5vw, 72px);
}

.ab-20 {
  max-width: 1360px;
  margin: 0 auto;
}

.ab-21 {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.ab-22 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-mocha);
}

.ab-23 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.ab-24 {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: visible;
}

.ab-25 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: auto;
  left: calc(-1 * min(140px, calc(clamp(24px, 5vw, 72px) + max(0px, (100vw - 2 * clamp(24px, 5vw, 72px) - 1360px) / 2))));
  width: calc(100% + min(140px, calc(clamp(24px, 5vw, 72px) + max(0px, (100vw - 2 * clamp(24px, 5vw, 72px) - 1360px) / 2))));
  height: 100%;
  object-fit: cover;
  object-position: 60% 28%;
  display: block;
}

.ab-26 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.2;
  color: var(--color-espresso);
  margin: 0 0 var(--space-lg);
  max-width: 20ch;
}

.ab-27 {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0 0 var(--space-md);
  max-width: 62ch;
}

.ab-28 {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0 0 var(--space-lg);
  max-width: 62ch;
}

.ab-29 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: var(--type-small);
  font-weight: 300;
  color: var(--color-mocha);
  margin: 0;
  max-width: 100%;
}

.ab-30 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1;
  color: var(--color-espresso);
}

.ab-31 {
  flex: 1;
  height: 1px;
  background: rgba(166, 135, 111, 0.3);
}

.ab-32 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  white-space: nowrap;
  text-align: right;
}

.ab-33 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mocha);
}

.ab-34 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* AHPRA registration link. Was mocha at 0.72 alpha, 4.02:1 on warm sand. */
  color: var(--color-mocha);
  font-feature-settings: 'tnum' 1;
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 135, 111, 0.26);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--color-champagne-gold), var(--color-champagne-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), background-size 450ms var(--silk);
}
.ab-34:hover {
  /* Deep bronze is only 3.49:1 on warm sand, and this is 11px normal text. */
  color: var(--color-bronze-text);
  border-bottom-color: rgba(184, 154, 75, 0.45);
  background-size: 100% 1px;
}

.ab-35 {
  background: var(--color-ivory-blush);
  padding: clamp(80px, 10vw, 144px) clamp(24px, 5vw, 72px);
}

.ab-36 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-bronze-text);
  margin: 0;
}

.ab-37 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  border-top: 1px solid rgba(166, 135, 111, 0.3);
}

.ab-38 {
  padding: var(--space-lg);
  border-right: 1px solid rgba(166, 135, 111, 0.22);
}

.ab-39 {
  width: 34px;
  height: 34px;
  display: block;
  margin: 0 0 var(--space-md);
}

.ab-40 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h4);
  color: var(--color-espresso);
  margin: 0 0 var(--space-xs);
}

.ab-41 {
  font-size: var(--type-small);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0;
  max-width: 36ch;
}

.ab-42 {
  padding: var(--space-lg);
}

.ab-43 {
  position: relative;
  overflow: hidden;
  height: clamp(200px, 26vw, 340px);
  background: var(--color-warm-sand);
}

.ab-44 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 55%;
}

.ab-45 {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(246, 239, 233, 0.32) 0%, rgba(246, 239, 233, 0.12) 50%, rgba(246, 239, 233, 0.32) 100%);
  pointer-events: none;
}

.ab-46 {
  background: var(--color-rose-nude);
  padding: clamp(80px, 10vw, 144px) clamp(24px, 5vw, 72px);
}

.ab-47 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-mocha);
  margin: 0;
}

.ab-48 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.ab-49 {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-warm-sand);
  border: 1px solid rgba(184, 154, 75, 0.3);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.ab-50 {
  width: 30px;
  height: 30px;
}

.ab-51 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h4);
  color: var(--color-espresso);
  margin: 0;
}

.ab-52 {
  font-size: var(--type-small);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0;
}

.ab-53 {
  margin-top: auto;
  align-self: flex-start;
  font-size: var(--type-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-mocha);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 135, 111, 0.5);
  padding-bottom: 4px;
  background-image: linear-gradient(var(--color-champagne-gold), var(--color-champagne-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), background-size 450ms var(--silk);
}
.ab-53:hover {
  color: var(--color-espresso);
  border-bottom-color: rgba(184, 154, 75, 0.4);
  background-size: 100% 1px;
}