/* GDC ROI Calculator: soft colour light, frosted cards, solid charcoal and white cards, pill fields, one geometric sans (Sofia Pro, with Jost standing in). No photographs. */
/* Goldenbook's licence does not allow web embedding, so it is only ever taken from the visitor's own machine. */
@font-face { font-family: "GDC Hotel"; font-weight: 500; font-style: normal; font-display: swap; src: local("Goldenbook Medium"), local("Goldenbook-Medium"), local("Goldenbook"), local("Goldenbook-Regular"); }
@font-face { font-family: "GDC Hotel Fallback"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/cormorant/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 200; font-style: normal; font-display: swap; src: url(/fonts/jost/jost-latin-200-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/jost/jost-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/jost/jost-latin-400-normal.woff2) format("woff2"); }

:root {
  --sans: "sofia-pro", "Jost", system-ui, sans-serif;
  --hotel: "goldenbook", "GDC Hotel", "GDC Hotel Fallback", Georgia, serif;
  --ink: #161616; --mute: rgba(22,22,22,.62); --faint: rgba(22,22,22,.3);
  --page: #EDE6DA;
  --shade-1: rgba(100,110,103,.42); --shade-2: rgba(100,110,103,.4); --mass-1: #8C7058; --mass-2: #5E5444; --mass-3: #353E37; --green: #7D8A80; --grain: .4;
  --glass: rgba(255,255,255,.6); --glass-solid: rgba(250,248,245,.94); --stroke: rgba(255,255,255,.95);
  --field: rgba(255,255,255,.78); --field-line: rgba(22,22,22,.07); --line: rgba(22,22,22,.08); --dot: #FFFFFF;
  --dark: #232220; --dark-ink: #F7F3EE; --dark-mute: rgba(247,243,238,.58); --dark-line: rgba(247,243,238,.14);
  --white: #FFFFFF; --btn: #232220; --btn-ink: #F7F3EE; --accent: #646E67; --accent-2: #8E9A90; --warm: #C9A27E;
  --blob-dot: rgba(255,255,255,.12); --blob-dot-hover: rgba(255,255,255,.2); --soft: #F4F0EA; --soft-2: #F8F5F1; --soft-hover: #EDE7DF; --pill: rgba(255,255,255,.6); --pill-line: rgba(255,255,255,.9); --ok-bg: #E3E8E2; --ok-ink: #3F4A42; --zero: rgba(22,22,22,.22);
  --lift: 0 1px 2px rgba(70,48,24,.05), 0 24px 56px -28px rgba(90,62,32,.28);
  --blur: blur(40px) saturate(1.6);
  --pad: 24px; --r-xl: 34px; --r-lg: 28px; --r-md: 22px; --r-sm: 16px;
  --ease: cubic-bezier(.22,.61,.36,1); --spring: cubic-bezier(.34,1.45,.5,1); --glide: cubic-bezier(.16,1,.3,1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #F3EEE7; --mute: rgba(243,238,231,.62); --faint: rgba(243,238,231,.3);
  --page: #1D1915;
  --shade-1: rgba(20,30,24,.5); --shade-2: rgba(0,0,0,.55); --mass-1: #4A3829; --mass-2: #33261C; --mass-3: #1F2A23; --green: #2F3A33; --grain: .5;
  --glass: rgba(36,33,30,.62); --glass-solid: rgba(26,24,22,.95); --stroke: rgba(255,255,255,.09);
  --field: rgba(255,255,255,.06); --field-line: rgba(255,255,255,.07); --line: rgba(243,238,231,.1); --dot: #F3EEE7;
  --dark: #E9E3DA; --dark-ink: #1C1B19; --dark-mute: rgba(28,27,25,.58); --dark-line: rgba(28,27,25,.12);
  --white: #1D1B19; --btn: #EDE7DF; --btn-ink: #1C1B19;
  --blob-dot: rgba(0,0,0,.08); --blob-dot-hover: rgba(0,0,0,.14); --soft: #2A2724; --soft-2: #24221F; --soft-hover: #33302C; --pill: rgba(255,255,255,.07); --pill-line: rgba(255,255,255,.1); --ok-bg: #2E3830; --ok-ink: #C9D3CB; --zero: rgba(243,238,231,.22);
  --lift: 0 1px 2px rgba(0,0,0,.2), 0 24px 56px -28px rgba(0,0,0,.7);
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* one inner margin for every card, so text lines up from card to card */
@media (min-width: 900px) { :root { --pad: 28px; } }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body { margin: 0; color: var(--ink); font: 300 16px/1.5 var(--sans); letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums; min-height: 100vh; min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; font-weight: inherit; font-size: inherit; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--btn-ink); }
::placeholder { color: var(--mute); opacity: 1; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; animation-timing-function: var(--ease); }

/* ---- the light behind everything: warm ivory, soft shadows falling across it, a deep brown mass with motion streaks, fine grain ---- */
.stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--page); transition: background .6s; }
.stage i { position: absolute; display: block; will-change: transform; animation-timing-function: cubic-bezier(.45,0,.55,1); animation-iteration-count: infinite; animation-direction: alternate; }
/* a long diagonal shadow from the top left */
.stage .a { width: 34vmax; height: 150vh; left: -4vmax; top: -30vh; transform-origin: 50% 0; transform: rotate(-24deg);
  background: linear-gradient(90deg, transparent, var(--shade-1) 45%, var(--shade-1) 55%, transparent); filter: blur(48px); opacity: .9; animation: beamA 18s; }
/* a curved shadow sweeping across the top */
.stage .b { width: 120vmax; height: 70vmax; left: 8vw; top: -48vmax; border-radius: 50%;
  box-shadow: 0 6vmax 7vmax -2vmax var(--shade-2); filter: blur(30px); opacity: .85; animation: beamB 22s; }
/* the deep brown mass, lower right, streaked sideways as if moving */
.stage .c { width: 74vw; height: 72vh; right: -6vw; bottom: -12vh; border-radius: 6vmax 0 0 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 3px, rgba(0,0,0,.07) 3px 9px, rgba(255,255,255,0) 9px 16px), linear-gradient(170deg, var(--mass-1) 0%, var(--mass-2) 38%, var(--mass-3) 82%);
  filter: blur(26px); opacity: .95; animation: mass 20s; }
.stage .d { width: 60vw; height: 18vh; right: -4vw; bottom: 40vh; border-radius: 50%; background: var(--green); filter: blur(46px); opacity: .75; animation: streak 14s; }
.stage::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .16  0 0 0 0 .12  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px; opacity: var(--grain); mix-blend-mode: multiply; pointer-events: none; }
@keyframes beamA { from { transform: rotate(-24deg) translateX(0); } to { transform: rotate(-20deg) translateX(8vw); } }
@keyframes beamB { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8vw, 4vh) scale(1.06); } }
@keyframes mass { from { transform: translate(0, 0) scaleX(1); } to { transform: translate(-5vw, -3vh) scaleX(1.06); } }
@keyframes streak { from { transform: translateX(0) scaleX(1); opacity: .45; } to { transform: translateX(-10vw) scaleX(1.25); opacity: .7; } }
@media (max-width: 700px) {
  .stage .a { width: 60vw; left: -18vw; }
  .stage .c { width: 110vw; height: 58vh; right: -30vw; bottom: -8vh; }
  .stage .d { width: 90vw; bottom: 42vh; }
}

/* ---- type: one sans, large and light for the things that matter ---- */
.mono, .label-tiny, .label-sm, .label { font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.45; color: var(--mute); }
.title, .statement { font-weight: 300; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; }
.sub, .caption { color: var(--mute); font-size: 15px; line-height: 1.5; }
.xsmall { font-size: 13px; color: var(--mute); line-height: 1.5; }
.quiet { color: var(--mute); }
.center { text-align: center; }
em { font-style: normal; color: var(--mute); }

/* ---- surfaces ---- */
.card { position: relative; background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-xl); padding: var(--pad); box-shadow: var(--lift);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.card.dark { background: var(--dark); color: var(--dark-ink); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 24px 50px -30px rgba(30,20,10,.45); }
.card.dark .quiet, .card.dark em, .card.dark .mono { color: var(--dark-mute); }
.card.white { background: var(--white); border-color: var(--stroke); -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card { background: var(--glass-solid); } }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--faint); font-size: 13px; white-space: nowrap; }
.chip.solid { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.chip.light { background: var(--dot); color: #181818; border-color: transparent; }

/* ---- buttons: a pill, and the pill joined to a round arrow ---- */
.btn, .link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px; background: var(--btn); color: var(--btn-ink);
  font-size: 16px; font-weight: 300; white-space: nowrap; transition: transform .35s var(--spring), opacity .3s; }
.btn:hover, .link:hover { transform: translateY(-1px); }
.btn:active, .link:active { transform: scale(.975); }
.btn[disabled], .link[disabled] { opacity: .55; cursor: default; }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--faint); }
.btn.small, .link.small { height: 44px; padding: 0 20px; font-size: 14.5px; }
/* the action pill: one continuous shape, the label, and the icon in its own circle inset 6px from the edge */
.blob { display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 6px 6px 6px 26px; border: 0; border-radius: 999px; background: var(--btn); color: var(--btn-ink);
  transition: transform .35s var(--spring), box-shadow .3s; box-shadow: 0 12px 24px -18px rgba(0,0,0,.4); }
.blob .t { display: block; font-size: 16px; line-height: 1; white-space: nowrap; }
.blob .a { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--blob-dot); transition: transform .45s var(--spring), background .3s; }
.blob .a svg { display: block; }
/* every icon sits in the exact centre of its circle, whatever the browser */
.blob .a, .icon-btn, .dock-b, .step, .field .ic, .ic.big, .more .chev, .steps .chev { position: relative; }
.blob .a > svg, .icon-btn > svg, .dock-b > svg, .field .ic > svg, .ic.big > svg, .more .chev > svg, .steps .chev > svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.blob:hover .a { background: var(--blob-dot-hover); }
.blob:active { transform: scale(.97); }
.blob[disabled] { opacity: .6; }
/* full width: the label is centred on the whole button, balanced by an invisible space the size of the icon circle */
.blob.wide { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: 44px; padding: 6px; gap: 8px; }
.blob.wide .t { grid-column: 2; grid-row: 1; align-self: center; text-align: center; white-space: normal; line-height: 1.25; }
.blob.wide .a { grid-column: 3; grid-row: 1; }
.btn svg, .blob svg, .icon-btn svg, .link2 svg, .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.link2 { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; color: var(--mute); transition: background .3s, color .3s; white-space: nowrap; }
.link2:hover { background: var(--line); color: var(--ink); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; color: var(--ink); background: var(--glass); border: 1px solid var(--stroke); box-shadow: 0 6px 16px -10px rgba(90,62,32,.35);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: transform .35s var(--spring), background .3s; }
.icon-btn:hover { background: var(--field); } .icon-btn:active { transform: scale(.9); }
.icon-btn .i-sun, :root[data-theme="dark"] .icon-btn .i-moon { display: none; } :root[data-theme="dark"] .icon-btn .i-sun { display: block; }
.icon-btn .i-off, .icon-btn[data-off] .i-on { display: none; } .icon-btn[data-off] .i-off { display: block; }

/* ---- top bar ---- */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 0 8px; }   /* same edges as the cards below */
.top .l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top .r { display: flex; justify-content: flex-end; gap: 10px; }
.top .logo { width: 76px; display: block; }
.top .mono { white-space: nowrap; }
.roi-logo, .gdc-logo { display: block; width: 100%; height: auto; overflow: visible; }
/* CALCULATOR's strokes are hairline-thin; a fine outline in the same colour keeps it as solid as ROI at every size */
.roi-logo .lg-w { stroke: currentColor; stroke-width: .3; stroke-linejoin: round; paint-order: stroke; }
.top .roi-logo .lg-w { stroke-width: .7; }
/* the sign-off under the ROI mark: small, spaced capitals */
.byline { display: block; font-size: 10.5px; font-weight: 400; letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }

/* ---- pill fields with a round icon ---- */
.field { position: relative; display: flex; align-items: center; margin: 0 0 12px; text-align: left; flex-wrap: wrap; }
.field .ic { position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--ink); pointer-events: none; }
.in { width: 100%; height: 56px; padding: 0 22px; border-radius: 999px; background: var(--field); border: 1px solid var(--field-line); font-size: 16.5px; font-weight: 300; -webkit-appearance: none; appearance: none; transition: border-color .3s, box-shadow .3s, background .3s; }
.field .ic + .in { padding-left: 60px; }
.in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--line); }
.in:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }
.field .err { flex-basis: 100%; display: block; font-size: 13px; color: var(--ink); padding: 6px 0 0 22px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .3s; }
.field.bad .err { max-height: 40px; opacity: 1; }
.field.bad .in { border-color: var(--ink); animation: nudge .4s var(--ease); }
@keyframes nudge { 20% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }

/* ---- segmented control ---- */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--line); gap: 2px; }
.seg button { height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; color: var(--mute); transition: background .35s var(--ease), color .3s, transform .3s var(--spring); }
.seg button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.seg button:active { transform: scale(.94); }

/* ---- tables ---- */
table.hair { width: 100%; border-collapse: collapse; }
table.hair th { text-align: left; font-weight: 300; font-size: 13px; color: var(--mute); padding: 0 12px 10px 0; white-space: nowrap; }
table.hair td { padding: 13px 12px 13px 0; border-top: 1px solid var(--line); vertical-align: baseline; font-size: 15px; }
table.hair .r { text-align: right; padding-right: 0; padding-left: 12px; }
table.hair td.k { color: var(--mute); font-size: 14.5px; }
table.hair td.n { font-size: 17px; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }

/* ---- motion ---- */
@keyframes up { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }
.enter > * { opacity: 0; animation: up .9s var(--glide) forwards; }
.enter > *:nth-child(2) { animation-delay: .07s; } .enter > *:nth-child(3) { animation-delay: .14s; } .enter > *:nth-child(4) { animation-delay: .21s; }
.enter > *:nth-child(5) { animation-delay: .28s; } .enter > *:nth-child(6) { animation-delay: .35s; } .enter > *:nth-child(n+7) { animation-delay: .42s; }
.leaving { opacity: 0; transform: translateY(-12px); transition: opacity .32s var(--ease), transform .32s var(--ease); }

/* ---- the opening: R O I arrive one by one, CALCULATOR, then GDC Interiors ---- */
.splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 24px; color: var(--ink);
  background: var(--glass-solid); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); transition: opacity 1.1s var(--ease), visibility 1.1s; }
.splash.done { opacity: 0; visibility: hidden; }
.splash .glogo { width: min(300px, 64vw); }
.splash .lg { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.splash .by { opacity: 0; margin-top: -10px; }
.splash .skip { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom)); opacity: 0; animation: fadeIn .6s 1.2s forwards; }
.play .lg-r, .play .lg-o, .play .lg-i { animation: letter 1.4s var(--glide) forwards; }
.play .lg-r { animation-delay: .35s; } .play .lg-o { animation-delay: .55s; } .play .lg-i { animation-delay: .75s; }
.play .lg-w { animation: word 1.5s 1.25s var(--glide) forwards; }
.splash .lg-w { transform-origin: 50% 50%; }
.play .by { animation: rise 1.1s 2.2s var(--glide) forwards; }
@keyframes letter { from { opacity: 0; transform: translateY(16%) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes word { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }   /* a fade and a small rise, never wider than the logo */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: .85; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .play .lg, .play .by { animation: none; opacity: 1; }
  .enter > * { animation: none; opacity: 1; }
  .stage i { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}