/* ESTATE colour theme. Light (beige, teal ink) is the default; the toggle in the bar and the menu switches to dark (the
   original teal). Dark is simply the page's own styles, so nothing here applies to it except the toggle itself and snapping.
   Photographic bands (the film, the three services, the practice band, the closing photo) keep their dark scrims in both
   themes, because their text sits on photographs: inside them the colour tokens are put back to their dark values, so the
   rules written for them (which read the tokens) keep working. */

/* ------------------------------------------------------ the toggle -- */
.theme { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer; color: var(--sc-ink);
  background: none; border: 1px solid color-mix(in srgb, currentColor 34%, transparent); border-radius: 3px; transition: border-color .2s, color .2s; }
.theme:hover { color: var(--sc-accent); border-color: currentColor; }
.theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .theme .i-moon { display: none; }
html:not([data-theme="dark"]) .theme .i-sun { display: none; }
.bar > .theme { margin-left: .2rem; }
@media (max-width: 860px) { .bar > .theme { display: none; } }

/* ------------------------------------------------------ light theme -- */
html[data-theme="light"] { color-scheme: light; --sc-canvas: #F4F0E6; --sc-surface: #EDE6D4; --sc-ink: #00343d; --sc-ink-soft: #2e6158;
  --sc-accent: #7a5f14; --sc-accent-ink: #F4F0E6; --mark: #00343d; --btn-bg: #00343d; --btn-ink: #F4F0E6; --paper: radial-gradient(120% 90% at 85% 20%, #FBF8F0 0%, #F4F0E6 55%, #EDE6D4 100%); }
html[data-theme="light"] :is(.film, .arms-bleed, .prac-band, #close) { --sc-canvas: #061d22; --sc-ink: #F3EEE3; --sc-ink-soft: #A9C0BD; --sc-accent: #cbad68; --sc-accent-ink: #00343d;
  --mark: #cbad68; --btn-bg: #cbad68; --btn-ink: #00343d; color: #F3EEE3; }
html[data-theme="light"] .site-foot__mark { color: #7a5f14; }
html[data-theme="light"] .btn { background: var(--btn-bg); color: var(--btn-ink); }
@media (hover: hover) and (pointer: fine) { html[data-theme="light"] .btn:hover { background: color-mix(in srgb, var(--btn-bg) 84%, #fff); } }

/* bar and menu */
html[data-theme="light"] .bar { background: linear-gradient(rgba(244,240,230,.97), rgba(244,240,230,.9) 62%, rgba(244,240,230,0)); }
html[data-theme="light"] .bar.bar--solid { background: rgba(244,240,230,.95); box-shadow: inset 0 -1px 0 rgba(0,52,61,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-theme="light"] :is(.bar__phone, .bar__nav a, .bar__menu) { text-shadow: none; }
html[data-theme="light"] .bar__nav + .bar__phone { border-left-color: rgba(0,52,61,.25); }
html[data-theme="light"] .btn--bar { background: #00343d !important; color: #F4F0E6 !important; border: 1px solid #00343d !important; box-shadow: none !important; }
html[data-theme="light"] .sheet { background: #F4F0E6; }
html[data-theme="light"] .sheet nav a { border-bottom-color: rgba(0,52,61,.16); }
html[data-theme="light"] .sheet__foot span { color: #2e6158; }
html[data-theme="light"] .skip { background: #00343d; color: #F4F0E6; }

/* typologies */
html[data-theme="light"] .tx { background: #F4F0E6; position: relative; }
html[data-theme="light"] .tx__stage { background: var(--paper); }
html[data-theme="light"] .tx::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24vh; z-index: 6; pointer-events: none;
  background: linear-gradient(180deg, #0a262c 0%, rgba(10,38,44,.6) 35%, rgba(244,240,230,0) 100%); }
html[data-theme="light"] .tx__q, html[data-theme="light"] .tx__facts dd { color: #00343d; }
html[data-theme="light"] .tx__facts { border-top-color: #7a5f14; }
html[data-theme="light"] .tx__facts dt { color: #7a5f14; }
html[data-theme="light"] .tx__bar { border-top-color: rgba(0,52,61,.2); }
html[data-theme="light"] .tx__bar button { color: #2e6158; }
html[data-theme="light"] .tx__bar button::before { background: #7a5f14; }
html[data-theme="light"] .tx__bar button[aria-current="true"] { color: #00343d; }
@media (hover: hover) { html[data-theme="light"] .tx__bar button:hover { color: #7a5f14; } }
html[data-theme="light"] #management::before { display: none; }

/* approvals */
html[data-theme="light"] #approved [data-sc-stage] { background: var(--paper); }
html[data-theme="light"] #approved .appr__head { background: rgba(251,248,240,.88); border-top-color: rgba(122,95,20,.5); }
html[data-theme="light"] .appr__head h2, html[data-theme="light"] .ap h3, html[data-theme="light"] .appr__end p { color: #00343d; }
html[data-theme="light"] .appr__head .sc-body, html[data-theme="light"] .appr__figs .lab, html[data-theme="light"] .ap__u,
html[data-theme="light"] .ap__ph .ap__u, html[data-theme="light"] .ap .who { color: #2e6158; }
html[data-theme="light"] .ap .out { color: #7a5f14; border-top-color: rgba(122,95,20,.3); }
html[data-theme="light"] #approved .ap { background: linear-gradient(180deg, #FBF8F0, #F0E9D8); border: 1px solid rgba(122,95,20,.35); border-bottom-color: rgba(122,95,20,.6); }
html[data-theme="light"] #approved .ap .typ path, html[data-theme="light"] #approved .ap .typ circle { stroke: #8a6d1f; }
html[data-theme="light"] #approved .ap .typ .g { stroke: rgba(122,95,20,.45); }
html[data-theme="light"] #approved .ap .typ .t { stroke: rgba(122,95,20,.7); }
html[data-theme="light"] #approved .ap .typ .d { stroke: #8a6d1f; }
html[data-theme="light"] .appr__end { background: rgba(251,248,240,.6); border-color: rgba(122,95,20,.7); }

/* clients and footer */
html[data-theme="light"] .clients { background: radial-gradient(120% 90% at 85% 55%, #FBF8F0 0%, #F4F0E6 55%, #EDE6D4 100%); }
html[data-theme="light"] .clients h2, html[data-theme="light"] .cq p { color: #00343d; }
html[data-theme="light"] .cq blockquote { border-top-color: #7a5f14; }
html[data-theme="light"] .cq footer { color: #2e6158; }
html[data-theme="light"] .cq footer b { color: #7a5f14; }
html[data-theme="light"] .site-foot { background: #E8DFC9; border-top-color: rgba(122,95,20,.3); }
html[data-theme="light"] .site-foot h3 { color: #7a5f14; }
html[data-theme="light"] .site-foot a:hover { color: #7a5f14; }
html[data-theme="light"] .site-foot__legal { border-top-color: rgba(0,52,61,.16); }

/* seams into and out of the photographic bands */
html[data-theme="light"] .prac-band::before, html[data-theme="light"] .close__ph::before { background: linear-gradient(180deg, #F4F0E6 0%, rgba(244,240,230,.65) 35%, rgba(244,240,230,0) 100%); }

/* the enquiry drawer */
html[data-theme="light"] dialog.drawer { background: #F4F0E6; border-left-color: rgba(0,52,61,.2); }
html[data-theme="light"] dialog.drawer::backdrop { background: rgba(0,30,36,.45); }
html[data-theme="light"] .x { border-color: rgba(0,52,61,.35); }
html[data-theme="light"] .tabs { border-bottom-color: rgba(0,52,61,.18); }
html[data-theme="light"] .field input, html[data-theme="light"] .field select, html[data-theme="light"] .field textarea { background: #fff; border-color: rgba(0,52,61,.35); }
html[data-theme="light"] .field select option { background: #fff; color: #00343d; }
html[data-theme="light"] .field input:user-invalid, html[data-theme="light"] .field textarea:user-invalid, html[data-theme="light"] .field select:user-invalid,
html[data-theme="light"] .field gmp-place-autocomplete.is-invalid { border-color: #b3502f; }
html[data-theme="light"] .seg { border-color: rgba(0,52,61,.25); }
html[data-theme="light"] .seg button[aria-pressed="true"] { background: rgba(122,95,20,.14); }
html[data-theme="light"] .contactline { border-top-color: rgba(0,52,61,.16); }
html[data-theme="light"] .files__box { border-color: rgba(0,52,61,.4); background: rgba(255,255,255,.6); }
html[data-theme="light"] .files__box.is-over { border-color: #7a5f14; background: rgba(122,95,20,.08); }
html[data-theme="light"] .files__list li { border-color: rgba(0,52,61,.2); background: rgba(255,255,255,.5); }
html[data-theme="light"] .field .files__btn { border-color: rgba(122,95,20,.7); }
html[data-theme="light"] .field .files__btn:hover { background: rgba(122,95,20,.1); }
html[data-theme="light"] .files__rm:hover { border-color: rgba(122,95,20,.5); }
html[data-theme="light"] .field__err, html[data-theme="light"] .files__msg { color: #9b3a1e; }
html[data-theme="light"] .field gmp-place-autocomplete { color-scheme: light; background-color: #fff; border-color: rgba(0,52,61,.35); color: #00343d;
  --gmp-mat-color-surface: #fff; --gmp-mat-color-on-surface: #00343d; --gmp-mat-color-on-surface-variant: #2e6158;
  --gmp-mat-color-outline-decorative: rgba(0,52,61,.2); --gmp-mat-color-outline-interactive: rgba(0,52,61,.4);
  --gmp-mat-color-primary: #7a5f14; --gmp-mat-color-secondary-container: rgba(122,95,20,.14); --gmp-mat-color-on-secondary-container: #00343d;
  --gmp-mat-color-neutral-container: #F4F0E6; --gmp-mat-color-on-neutral-container: #00343d; }
html[data-theme="light"] .field gmp-place-autocomplete::part(input) { color: #00343d; }
html[data-theme="light"] .field gmp-place-autocomplete::part(prediction-list) { background: #fff; border-color: rgba(122,95,20,.5); box-shadow: 0 18px 40px rgba(0,52,61,.2); }
html[data-theme="light"] .field gmp-place-autocomplete::part(prediction-item) { color: #2e6158; border-color: rgba(0,52,61,.12); }
html[data-theme="light"] .field gmp-place-autocomplete::part(prediction-item-selected) { background: rgba(122,95,20,.12); }
html[data-theme="light"] .field gmp-place-autocomplete::part(prediction-item-main-text) { color: #00343d; }
html[data-theme="light"] .field gmp-place-autocomplete::part(prediction-item-match) { color: #7a5f14; }
html[data-theme="light"] .field gmp-place-autocomplete::part(prediction-item-secondary-text) { color: #2e6158; }

/* ------------------------------------------------ legibility -- */
/* Bodoni Moda's optical size axis turns its hairlines wafer-thin at large sizes, which made "Approved" and the figures hard to read.
   Headings now sit at a low optical size (sturdier hairlines) and weight 500; every figure uses Outfit, the face of "DA APPROVED". */
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, .statement, .cq p, .sheet nav a, .drawer__top h2, .done h3, .appr__end p, .arm h3, .hero-copy h1, .sc-display {
  font-optical-sizing: none; font-variation-settings: "opsz" 11; font-weight: 500; }
.ap__n, .appr__figs b, .stats b, .big, .reads b, .facts dd b {
  font-family: var(--sc-font-text, "Outfit", system-ui, sans-serif); font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: lining-nums; font-optical-sizing: auto; font-variation-settings: normal; }
.reads b { font-family: "Outfit", system-ui, sans-serif; }
/* the footer logo's tagline follows the wordmark's colour */
html[data-theme="light"] .site-foot__mark { color: #00343d; }