/* raineengineers.studioraine.art: the Raine Engineers offer.
   THE THEME IS DESERT PARK'S (John, 2026-11-11: "literally take the whole
   theme ... Do not make it the studio rain looking theme"): the tokens,
   type cuts, depth levels, rendered platinum key, rendered brass plate and
   studio ground below are copied from desertpark/src/app (utopia.css,
   palette.css, type.css, depth.css, globals.css, studio.css) and
   desertpark/public (brand/metal, studio). No gradients, no reveals. */
@font-face{font-family:"Arimo";src:url(/raineengineers/fonts/arimo-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/raineengineers/fonts/hanken-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/raineengineers/fonts/hanken-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"SR Tag";src:url(/raineengineers/fonts/poppins-900.woff2) format("woff2");font-weight:900;font-display:swap}
:root {
  --step-8: clamp(4.5686rem, 2.0089rem + 10.9211vw, 11.8379rem);
  --step-7: clamp(3.8071rem, 2.0207rem + 7.6222vw, 8.8806rem);
  --step-6: clamp(3.1726rem, 1.9439rem + 5.2425vw, 6.6622rem);
  --step-5: clamp(2.6438rem, 1.815rem + 3.5366vw, 4.9979rem);
  --step-4: clamp(2.2032rem, 1.6588rem + 2.3228vw, 3.7493rem);
  --step-3: clamp(1.836rem, 1.4921rem + 1.4673vw, 2.8127rem);
  --step-2: clamp(1.53rem, 1.3258rem + 0.8714vw, 2.1101rem);
  --step-1: clamp(1.275rem, 1.1666rem + 0.4626vw, 1.5829rem);
  --step-0: clamp(1.0625rem, 1.0185rem + 0.1878vw, 1.1875rem);
  --step-n1: max(0.8125rem, clamp(0.8854rem, 0.8835rem + 0.0082vw, 0.8908rem));
  --step-n2: max(0.75rem, clamp(0.6683rem, 0.7623rem + -0.1045vw, 0.7378rem));
  --space-3xs: clamp(0.25rem, 0.228rem + 0.0939vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5405rem + 0.0939vw, 0.625rem);
  --space-xs: clamp(0.8125rem, 0.7905rem + 0.0939vw, 0.875rem);
  --space-s: clamp(1.0625rem, 1.0185rem + 0.1878vw, 1.1875rem);
  --space-m: clamp(1.625rem, 1.559rem + 0.2817vw, 1.8125rem);
  --space-l: clamp(2.125rem, 2.037rem + 0.3756vw, 2.375rem);
  --space-xl: clamp(3.1875rem, 3.0555rem + 0.5634vw, 3.5625rem);
  --space-2xl: clamp(4.25rem, 4.0739rem + 0.7512vw, 4.75rem);
  --space-3xl: clamp(6.375rem, 6.1109rem + 1.1268vw, 7.125rem);
  --space-4xl: clamp(8.5rem, 8.1479rem + 1.5023vw, 9.5rem);
  --space-3xs-2xs: clamp(0.25rem, 0.118rem + 0.5634vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4525rem + 0.4695vw, 0.875rem);
  --space-xs-s: clamp(0.8125rem, 0.6805rem + 0.5634vw, 1.1875rem);
  --space-s-m: clamp(1.0625rem, 0.7984rem + 1.1268vw, 1.8125rem);
  --space-m-l: clamp(1.625rem, 1.3609rem + 1.1268vw, 2.375rem);
  --space-l-xl: clamp(2.125rem, 1.6188rem + 2.1596vw, 3.5625rem);
  --space-xl-2xl: clamp(3.1875rem, 2.6373rem + 2.3474vw, 4.75rem);
  --space-2xl-3xl: clamp(4.25rem, 3.2377rem + 4.3192vw, 7.125rem);
  --space-3xl-4xl: clamp(6.375rem, 5.2746rem + 4.6948vw, 9.5rem);
  --space-s-l: clamp(1.0625rem, 0.6004rem + 1.9718vw, 2.375rem);
  --space-m-xl: clamp(1.625rem, 0.9428rem + 2.9108vw, 3.5625rem);
  --space-l-2xl: clamp(2.125rem, 1.2007rem + 3.9437vw, 4.75rem);
  --space-xl-3xl: clamp(3.1875rem, 1.8011rem + 5.9155vw, 7.125rem);
}
:root{
  --c-ivory:oklch(0.842 0.009 85);
  --c-pearl:oklch(0.958 0.004 97);
  --c-stone:oklch(0.632 0.008 120);
  --c-gold:oklch(0.672 0.069 82);
  --c-gold-bright:oklch(0.787 0.052 80);
  --c-gold-deep:oklch(0.372 0.063 83);
  --c-cobalt:oklch(0.576 0.065 245);
  --c-engraving:oklch(0 0 0);
  --role-ground:oklch(0 0 0);
  --role-ink:var(--c-ivory);
  --role-ink-soft:var(--c-stone);
  --role-accent:var(--c-gold);
  --role-line:oklch(from var(--c-ivory) l c h / 12%);
  --role-line-strong:oklch(from var(--c-ivory) l c h / 22%);
  --role-link:oklch(from var(--c-cobalt) calc(l + 0.12) c h);
  --role-focus:oklch(from var(--c-cobalt) calc(l + 0.16) calc(c + 0.03) h);
  --edge-light:oklch(1 0 0 / 11%);
  --edge-light-strong:oklch(1 0 0 / 18%);
  --edge-dark:oklch(0 0 0 / 60%);
  --edge-side:oklch(0 0 0 / 28%);
  --sh-ambient:oklch(0 0 0 / 35%);
  --sh-key:oklch(0 0 0 / 55%);
  --sh-deep:oklch(0 0 0 / 72%);
  --hairline:oklch(1 0 0 / 8%);
  --hairline-strong:oklch(1 0 0 / 14%);
  --face-sunk:oklch(0 0 0);
  --face-plate:oklch(0 0 0 / 55%);
  --face-raised:oklch(0.17 0.012 60);
  --sh-sunk:inset 0 2px 4px var(--sh-deep),inset 0 1px 0 var(--edge-dark),inset 0 -1px 0 var(--edge-light);
  --sh-plate:inset 0 1px 0 var(--edge-light),0 0 0 1px var(--hairline),0 1px 0 var(--edge-dark),0 2px 3px -1px var(--sh-ambient);
  --sh-raised:inset 0 1px 0 var(--edge-light-strong),inset 0 -1px 0 var(--edge-side),0 0 0 1px var(--hairline),0 1px 1px var(--sh-key),0 6px 10px -4px var(--sh-key),0 14px 24px -10px var(--sh-ambient);
  --sh-float:inset 0 1px 0 var(--edge-light-strong),inset 0 -1px 0 var(--edge-side),0 0 0 1px var(--hairline-strong),0 2px 2px var(--sh-key),0 12px 20px -6px var(--sh-key),0 32px 48px -16px var(--sh-ambient);
  --f-display:"Arimo",Arial,"Helvetica Neue",Helvetica,sans-serif;
  --f-text:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gutter:max(1.25rem,var(--space-s-l));
  --nav-h:4rem;
  --ease-out-quart:cubic-bezier(0.23,1,0.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#000;color-scheme:dark;scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{margin:0;background:#000;color:var(--role-ink);font-family:var(--f-text);font-size:var(--step-0);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,dl,dd,dt,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--role-link);text-underline-offset:0.2em;text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--role-focus);outline-offset:3px}
.wrap{margin-inline:auto;width:100%;max-width:80rem;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.band{position:relative;isolation:isolate;padding-block:var(--space-2xl-3xl)}
.band+.band{box-shadow:inset 0 1px 0 var(--role-line)}

/* Type: Arimo 700 caps for every title, label, key and figure; Hanken
   Grotesk for reading. Sizes are Utopia steps. */
.t-display,.t-h1,.t-h2,.t-h3,.t-label,.t-figure{font-family:var(--f-display);font-weight:700;font-style:normal}
.t-display{font-size:min(var(--step-6),10.6vw);line-height:0.94;letter-spacing:0.04em;text-transform:uppercase}
.t-h1{font-size:min(var(--step-5),9.4vw);line-height:1;letter-spacing:0.05em;text-transform:uppercase}
.t-h2{font-size:min(var(--step-3),7.4vw);line-height:1.1;letter-spacing:0.06em;text-transform:uppercase}
.t-h3{font-size:var(--step-1);line-height:1.1;letter-spacing:0.08em;text-transform:uppercase}
.t-label{font-size:var(--step-n2);line-height:1.2;letter-spacing:0.18em;text-transform:uppercase}
.t-figure{font-size:var(--step-5);line-height:1;letter-spacing:-0.01em}
.t-body{max-width:65ch;color:var(--role-ink)}
.soft{color:var(--role-ink-soft)}
.gold{color:var(--role-accent)}
.lede{font-size:var(--step-1);line-height:1.45;max-width:36em}
.sec-head{margin-bottom:var(--space-l-xl)}
.sec-head .lede{margin-top:var(--space-s)}

/* The studio ground: Desert Park's rendered room behind a band, three
   layers under one flat black scrim (studio.css). Static here. */
.ground{position:absolute;inset:0;z-index:-1;pointer-events:none;user-select:none;contain:layout style}
.ground-view{position:sticky;top:0;height:min(100vh,100%);height:min(100lvh,100%);overflow:hidden;background:#000}
.ground-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ground-view::after{content:"";position:absolute;inset:0;background:oklch(0 0 0 / 65%)}

/* The bar: frosted lacquer, the brass nameplate, the platinum key. */
.dp-nav{position:sticky;top:0;z-index:40;background-color:oklch(0.08 0.006 60 / 78%);-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);box-shadow:0 1px 0 var(--role-line),0 2px 2px var(--sh-key),0 12px 20px -6px var(--sh-key);padding-top:env(safe-area-inset-top)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dp-nav{background-color:oklch(0.09 0.006 60)}}
.dp-nav-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);min-height:var(--nav-h)}

/* The nameplate: the rendered polished brass plate (brand/metal/plate),
   9-sliced, with the name engraved in the plate's black. */
.nameplate{--plate-h:2.5rem;display:inline-flex;align-items:center;justify-content:center;min-height:var(--plate-h);padding-inline:calc(var(--plate-h) * 0.42);border:0 solid transparent;border-image:url(/raineengineers/metal/plate/u2v2.webp) 0 256 fill / 0 var(--plate-h) / 0 stretch;font-family:var(--f-display);font-weight:700;font-size:clamp(0.78rem,3.1vw,0.95rem);letter-spacing:0.09em;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--c-engraving);text-shadow:0 1px 0 oklch(from var(--c-gold-bright) l c h / 70%);text-decoration:none}
.nameplate-lg{--plate-h:3.25rem;font-size:var(--step-0)}

/* Keys (globals.css): one raised plate, and the platinum key for the one
   action. Hover lifts by shadow or glint; press is on the same frame. */
.key{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:3rem;padding:0 var(--space-m);border-radius:999px;font-family:var(--f-display);font-weight:700;font-size:var(--step-n1);letter-spacing:0.12em;text-transform:uppercase;line-height:1;white-space:nowrap;text-decoration:none;color:var(--role-ink);background-color:var(--face-raised);box-shadow:var(--sh-raised);transition:box-shadow 180ms var(--ease-out-quart),filter 120ms ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.key img{width:1.15em;height:1.15em}
.key-platinum{--key-h:3rem;position:relative;isolation:isolate;color:var(--c-engraving);text-shadow:0 1px 0 oklch(1 0 0 / 55%);border:0 solid transparent;border-image:url(/raineengineers/metal/platinum/key/u2v2.webp) 0 128 fill / 0 var(--key-h) / 0 stretch;background:none;box-shadow:none;padding-inline:calc(var(--key-h) * 0.6);min-height:var(--key-h)}
.key-platinum::before{content:"";position:absolute;inset:0;z-index:-1;border:0 solid transparent;border-image:url(/raineengineers/metal/platinum/key-hover.webp) 0 128 fill / 0 var(--key-h) / 0 stretch;opacity:0;transition:opacity 160ms ease;pointer-events:none}
.key-platinum.key-lg{--key-h:3.5rem;font-size:var(--step-0)}
.key-platinum.key-sm{--key-h:2.75rem;font-size:var(--step-n2)}
@media (hover:hover) and (pointer:fine){.key:hover{box-shadow:var(--sh-float)}.key-platinum:hover{box-shadow:none}.key-platinum:hover::before{opacity:1}}
.key:active{box-shadow:var(--sh-plate);filter:brightness(0.94);transition-duration:0ms}
.key-platinum:active{border-image-source:url(/raineengineers/metal/platinum/key-pressed.webp) !important;box-shadow:none;filter:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-s)}

/* Hero */
.hero{padding-block:var(--space-l-xl) var(--space-2xl-3xl)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-l-xl)}
.hero-words>*+*{margin-top:var(--space-m)}
.hero .t-display{font-size:min(var(--step-5),10.6vw)}
.hero-figs{display:flex;flex-wrap:wrap;gap:var(--space-m) var(--space-xl)}
.hero-figs dd{font-size:var(--step-4)}
.hero-figs dt{margin-top:var(--space-2xs);color:var(--role-ink-soft)}
.frame{background:var(--face-raised);box-shadow:var(--sh-raised);padding:clamp(0.4rem,1.2vw,0.7rem)}
.frame img{width:100%;height:100%;object-fit:cover;box-shadow:var(--sh-sunk)}
.hero-photo{aspect-ratio:4/5}
.hero-photo img{object-position:50% 62%}
@media (min-width:64rem){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}.hero-photo{aspect-ratio:3/4;margin-top:var(--space-xl)}}

/* How it works: a numbered step, its two lanes, and the thing itself */
.steps>li{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-m-l);padding-block:var(--space-l-xl)}
.steps>li+li{box-shadow:inset 0 1px 0 var(--role-line)}
.step-n{display:grid;place-items:center;width:2.75rem;height:2.75rem;color:var(--role-accent);background:var(--face-sunk);box-shadow:var(--sh-sunk);font-family:var(--f-display);font-weight:700;font-size:var(--step-0)}
.step-words>*+*{margin-top:var(--space-s)}
.lanes{display:grid;grid-template-columns:minmax(0,1fr);background:var(--face-plate);box-shadow:var(--sh-plate);margin-top:var(--space-m)}
.lanes>div{padding:var(--space-s) var(--space-s-m)}
.lanes>div+div{box-shadow:inset 0 1px 0 var(--edge-dark),inset 0 2px 0 var(--edge-light)}
.lanes dt{color:var(--role-accent);margin-bottom:0.35rem}
.step-ui{min-width:0}
@media (min-width:30rem){.lanes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lanes>div+div{box-shadow:inset 1px 0 0 var(--edge-dark),inset 2px 0 0 var(--edge-light)}}
@media (min-width:64rem){
  .steps>li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-xl-2xl);align-items:center}
  .steps>li:nth-child(even) .step-words{order:2}
  .steps>li:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}

/* Mentioned by name, shown by mark */
.mark{display:inline-block;height:1.05em;width:auto;vertical-align:-0.16em;margin-right:0.3em}
.mark-word{height:0.95em;vertical-align:-0.2em;margin-right:0}

/* Google's own surfaces, drawn as Google draws them (light, Roboto/Arial) */
.g{font-family:Roboto,Arial,"Helvetica Neue",sans-serif;color:#202124;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--sh-float);font-size:14px;line-height:1.35;letter-spacing:0;text-transform:none;max-width:27rem;margin-inline:auto}
.g-search{padding:26px 18px 14px}
.g-search>img{height:34px;width:auto;margin:0 auto 20px}
.g-box{border:1px solid #dfe1e5;border-radius:24px;box-shadow:0 1px 6px rgba(32,33,36,.28);overflow:hidden}
.g-q{display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:16px}
.g-q svg{flex:none;width:18px;height:18px;fill:#9aa0a6}
.g-caret{display:inline-block;width:1px;height:1.15em;background:#202124;vertical-align:-0.2em;margin-left:1px}
.g-sugg{border-top:1px solid #e8eaed;padding:4px 0 8px}
.g-sugg li{display:flex;align-items:center;gap:12px;padding:8px 16px;font-size:15px}
.g-sugg b{font-weight:700}
.g-sugg svg{flex:none;width:18px;height:18px;fill:#9aa0a6}
.g-maps{position:relative}
.g-map{position:relative;aspect-ratio:10/9;background:#f1f3f4;overflow:hidden}
.g-map svg{position:absolute;inset:0;width:100%;height:100%}
.g-bar{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:24px;padding:9px 14px;box-shadow:0 1px 4px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);font-size:15px}
.g-bar img{height:22px;width:auto;flex:none}
.g-sheet{position:relative;margin-top:-14px;background:#fff;border-radius:16px 16px 0 0;padding:8px 16px 16px;box-shadow:0 -1px 6px rgba(60,64,67,.2)}
.g-grab{width:36px;height:4px;border-radius:2px;background:#dadce0;margin:0 auto 10px}
.g-name{font-size:22px;line-height:1.2;font-weight:400;color:#202124}
.g-cat{color:#5f6368;margin-top:3px}
.g-chips{display:flex;gap:8px;margin-top:12px;overflow:hidden}
.g-chip{display:inline-flex;align-items:center;gap:6px;flex:none;border:1px solid #dadce0;border-radius:18px;padding:7px 12px;font-size:13px;font-weight:500;color:#1a73e8;background:#fff}
.g-chip svg{width:16px;height:16px;fill:currentColor}
.g-chip-fill{background:#1a73e8;border-color:#1a73e8;color:#fff}
.g-photos{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:118px;gap:4px;margin-top:14px;border-radius:10px;overflow:hidden;height:118px}
.g-photos img{width:100%;height:100%;object-fit:cover}
.g-row{display:flex;gap:14px;align-items:flex-start;margin-top:14px;color:#3c4043}
.g-row svg{flex:none;width:20px;height:20px;fill:#1a73e8;margin-top:1px}
.ui-note{margin-top:var(--space-xs);text-align:center;color:var(--role-ink-soft)}

/* The studio's own process, drawn on plates */
.flow{display:grid;gap:var(--space-xs)}
.flow-node{display:flex;align-items:center;gap:var(--space-s);background:var(--face-plate);box-shadow:var(--sh-plate);padding:var(--space-s) var(--space-s-m)}
.flow-node img{flex:none;width:2rem;height:2rem;object-fit:contain}
.flow-node .t-h3{font-size:var(--step-0)}
.flow-arrow{justify-self:center;width:1px;height:var(--space-s);background:var(--role-line-strong)}
.split{background:var(--face-plate);box-shadow:var(--sh-plate)}
.split>div{padding:var(--space-s-m)}
.split>div+div{box-shadow:inset 0 1px 0 var(--edge-dark),inset 0 2px 0 var(--edge-light)}
.split-bar{display:flex;height:2.75rem;margin-top:var(--space-xs);box-shadow:var(--sh-sunk)}
.split-you{display:flex;align-items:center;padding-inline:var(--space-xs);background:var(--c-ivory);color:#000;font-family:var(--f-display);font-weight:700;letter-spacing:0.06em;font-size:var(--step-n1);white-space:nowrap}
.split-house{flex:1;display:flex;align-items:center;justify-content:flex-end;padding-inline:var(--space-xs);color:var(--role-ink-soft);font-family:var(--f-display);font-weight:700;letter-spacing:0.06em;font-size:var(--step-n1);white-space:nowrap}

/* Rows of facts: label left, the fact right (the credit page's list) */
.rows>div{display:grid;grid-template-columns:minmax(0,1fr);gap:0.4rem;padding-block:var(--space-s-m)}
.rows>div+div{box-shadow:inset 0 1px 0 var(--role-line)}
.rows dt{color:var(--role-accent)}
.rows dd{max-width:60ch}
@media (min-width:48rem){.rows>div{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-l);align-items:baseline}}

/* The building's names, set as the plate's caps */
.names{display:flex;flex-wrap:wrap;gap:0.5em 1.1em;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;line-height:1.1;font-size:min(var(--step-3),6.4vw);color:var(--role-ink)}
.names li:nth-child(3n+2){color:var(--role-ink-soft)}
.names-src{margin-top:var(--space-m);color:var(--role-ink-soft);max-width:60ch}
.outgrow{margin-top:var(--space-xl-2xl);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-s)}
@media (min-width:64rem){.outgrow{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-xl);align-items:end}}

/* Figures in a row */
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-l) var(--space-m)}
.figs dd{font-size:min(var(--step-4),9vw)}
.figs dt{margin-top:var(--space-xs);color:var(--role-ink-soft);max-width:26ch;font-size:var(--step-n1);line-height:1.4}
@media (min-width:64rem){.figs{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* The rates: one plate, each price in a sunk cell (globals.css .rates) */
.money{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-l)}
@media (min-width:64rem){.money{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-xl);align-items:start}}
.price{background:var(--face-plate);box-shadow:var(--sh-plate);padding:var(--space-m-l)}
.price .t-figure{font-size:min(var(--step-7),20vw);display:block}
.price p{margin-top:var(--space-s);max-width:26em}
.price .key{margin-top:var(--space-m)}
.rates{background:var(--face-plate);box-shadow:var(--sh-plate)}
.rates-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-s);padding:var(--space-s) var(--space-m)}
.rates-row+.rates-row{box-shadow:inset 0 1px 0 var(--edge-dark),inset 0 2px 0 var(--edge-light)}
.rates-price{display:inline-flex;align-items:baseline;gap:0.5em;padding:0.35em 0.8em;background:var(--face-sunk);box-shadow:var(--sh-sunk)}
.rates-price .t-figure{font-size:var(--step-2)}
.rates-price .t-label{color:var(--role-ink-soft)}
@media (max-width:39.999rem){.rates-row{grid-template-columns:minmax(0,1fr);gap:var(--space-xs)}.rates-price{justify-self:start}}
.worked{margin-top:var(--space-m)}

/* Lenders, by their own marks */
.lenders{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-s)}
.lender{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:var(--space-s);align-items:center;background:var(--face-plate);box-shadow:var(--sh-plate);padding:var(--space-s) var(--space-s-m);text-decoration:none;color:var(--role-ink)}
.lender img{width:3rem;height:3rem}
.lender p{color:var(--role-ink-soft)}
@media (min-width:48rem){.lenders{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pay-note{margin-top:var(--space-m);display:flex;flex-wrap:wrap;align-items:center;gap:0.5em;color:var(--role-ink-soft)}
.pay-note img{height:1.25rem;width:auto}

/* Close and footer */
.close .actions{margin-top:var(--space-l)}
footer{position:relative;isolation:isolate;padding-block:var(--space-xl-2xl) calc(var(--space-xl) + env(safe-area-inset-bottom));box-shadow:inset 0 1px 0 var(--role-line)}
.foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-l)}
.foot p{color:var(--role-ink-soft);max-width:36ch}
.foot a{color:var(--role-ink)}
.sr-tag{display:inline-flex;align-items:center;gap:.55em;margin-top:var(--space-s);font-family:"SR Tag",system-ui,sans-serif;font-weight:900;font-size:14px;letter-spacing:.05em;text-transform:uppercase;line-height:1;color:var(--role-ink);text-decoration:none}
@media (max-width:26rem){.actions .key{width:100%}}
@media (prefers-reduced-motion:reduce){.key,.key-platinum::before{transition:none}}
@media (max-width:22.49rem){.dp-nav-row{gap:var(--space-2xs)}.dp-nav .key-platinum{padding-inline:1.05rem;letter-spacing:0.07em}.dp-nav .nameplate{font-size:0.7rem;letter-spacing:0.06em;padding-inline:0.75rem}}

/* Studio Raine is named by its own mark (John, 2026-11-11: "show my original
   svg logo instead of just writing studio raine text") */
.brand{display:inline-flex;align-items:center;min-height:2.75rem}
.brand img{height:clamp(1.3rem,5.4vw,1.75rem);width:auto}
.sr-logo{display:inline-block;height:1.05em;width:auto;vertical-align:-0.18em}
dt .sr-logo{height:1.35em;vertical-align:-0.3em}
.sr-logo-h1{display:block;height:0.78em;width:auto;margin-top:0.18em}
.flow-sr{padding-left:calc(var(--space-s-m) + 2rem + var(--space-s))}
.foot-logo{display:inline-block;margin-top:var(--space-s)}
.foot-logo img{height:1.5rem;width:auto}
/* Google Maps results, A to D */
.g-list{padding:8px 0 6px;list-style:none;margin-top:-14px}
.g-res{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 16px}
.g-res+.g-res{border-top:1px solid #e8eaed}
.g-let{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.6px solid #ea4335;color:#ea4335;font-size:12px;font-weight:700}
.g-res-top .g-let{background:#ea4335;color:#fff}
.g-rname{font-size:16px;line-height:1.25;color:#202124}
.g-res-top .g-rname{font-weight:700}
.g-res img{width:64px;height:64px;object-fit:cover;border-radius:8px}

/* Google Maps in Safari, as in John's screenshot of 2026-11-11: the search
   pill, the sheet with its title and filters, then the results. */
.sr-logo-h3{display:block;height:0.8em;width:auto;margin-bottom:0.3em}
.g-maps .g-map{aspect-ratio:4/3}
.g-maps .g-bar{justify-content:space-between;padding:11px 16px;font-size:16px;border-radius:26px}
.g-maps .g-map .g-bar svg{position:static;width:20px;height:20px;fill:#202124;flex:none}
.g-results{padding:8px 0 4px}
.g-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 16px 10px}
.g-head p{font-size:20px;font-weight:500;color:#202124}
.g-x{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f1f3f4;flex:none}
.g-x svg{width:16px;height:16px;fill:#202124}
.g-filters{display:flex;align-items:center;gap:8px;padding:0 16px 12px;overflow:hidden;white-space:nowrap}
.g-filters svg{width:20px;height:20px;fill:#3c4043;flex:none;margin-right:2px}
.g-filters span{flex:none;background:#f1f3f4;border-radius:8px;padding:7px 12px;font-size:13.5px;font-weight:500;color:#202124}
.g-rlist{list-style:none;margin:0;padding:0}
.g-r{padding:12px 16px}
.g-r+.g-r{border-top:1px solid #e8eaed}
.g-rn{font-size:17px;line-height:1.25;font-weight:500;color:#202124}
.g-r-top .g-rn{font-size:19px}
.g-rl{color:#5f6368;margin-top:3px;font-size:14px}
.g-star{display:inline-block;width:14px;height:14px;fill:#fbbc04;vertical-align:-2px}
.g-open{color:#188038;font-size:14px;margin-top:2px}
.g-rphotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:92px;gap:6px;margin-top:10px}
.g-rphotos img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.g-acts{display:flex;gap:8px;margin-top:12px;overflow:hidden;white-space:nowrap}
.g-acts span{display:inline-flex;align-items:center;gap:6px;flex:none;background:#d3e3fd;color:#0b3a6f;border-radius:20px;padding:8px 13px;font-size:13.5px;font-weight:500}
.g-acts svg{width:16px;height:16px;fill:currentColor}