/* The footer (.homepage-footer) carries a fixed Webflow height with clipped
   overflow; it fit the old link-only footer but the newsletter box below adds
   height, so the footer links + copyright were being clipped off the bottom.
   Let the footer grow to fit its content wherever the newsletter is present. */
.homepage-footer{height:auto!important;overflow:visible!important}

/* Email signup — the same see-through black panel as the philosophy page
   (rgba(0,0,0,.45)); every page has a dark backdrop behind the band (the fixed
   painting div or a black body), so the translucency reads as a deepened panel,
   never gray-over-white. Warm cream text for contrast.
   PADDING IS DELIBERATELY ASYMMETRIC (34 top / 44 bottom) so the space reads EQUAL.
   The bottom edge of the field row is a crisp border, but the kicker's letters sit
   10.4px below the top of their own line box (it inherits line-height:30px from
   .main-body on an 11px font => 8.5px half-leading + the cap offset). 34 + 10.4 = 44,
   which matches the 44 under the fields. Measured with canvas font metrics — if the
   kicker's font-size/line-height changes, re-measure rather than "tidying" this to 44.
   Also needs .nd-newsletter-msg:empty{display:none} (see below). */
.nd-newsletter{width:100%;box-sizing:border-box;padding:34px 24px 44px;background:rgba(0,0,0,.45)}
.nd-newsletter-inner{max-width:560px;margin:0 auto;text-align:center}
/* 5.4 / 17.6 (not 9 / 14) so the sub-paragraph sits optically centred between the
   kicker and the fields: measured ink-to-ink it was 22.9 above vs 15.7 below, so 3.6
   moves from one side to the other. Splitting it this way keeps the panel's height
   (and therefore the 34/44 top-bottom balance) unchanged. Re-measure the INK, not the
   boxes, if the type sizes change. */
.nd-newsletter-k{font-family:Lato,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#e8b98f;margin-bottom:5.4px}
.nd-newsletter-h{font-family:Gill Sans,Arial,sans-serif;font-size:26px;line-height:32px;color:#fdf6ee;margin:0 0 8px;font-weight:400}
.nd-newsletter-s{font-size:14.5px;line-height:21px;color:#ecd9c4;margin:0 0 17.6px}
/* gap:0 — name / email / subscribe sit flush against each other (owner's ask). */
.nd-newsletter-form{display:grid;grid-template-columns:1fr 1fr auto;gap:0;align-items:stretch}
/* Fields: the same see-through black as the philosophy panels (rgba(0,0,0,.45)) but
   20% lighter => .36 alpha. Text/placeholder go light since the fill is now dark. */
.nd-newsletter-input{height:48px;color:#f5ece0;background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.28);border-radius:0;padding:8px 14px;font-family:inherit;font-size:15px;-webkit-appearance:none;appearance:none}
.nd-newsletter-input::placeholder{color:rgba(245,236,224,.5)}
.nd-newsletter-input:focus{outline:0;border-color:#f0a45e;box-shadow:0 0 0 2px rgba(240,164,94,.35)}
.nd-newsletter-btn{height:48px;padding:0 22px;border:1px solid #eab07a;background:#f2d3ac;color:#4a2a08;font-family:Lato,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.nd-newsletter-btn:hover{background:#fbe6cd;border-color:#f2d3ac;color:#4a2a08}
.nd-newsletter-btn:disabled{opacity:.55;cursor:default}
.nd-newsletter-msg{grid-column:1/-1;font-size:13px;line-height:19px;color:#e6cfb4;min-height:1.2em;margin-top:4px}
/* Empty by default: collapse it so it stops adding a phantom ~29px (grid gap + margin
   + min-height) below the name/email row, which made the panel bottom-heavy. */
.nd-newsletter-msg:empty{display:none}
.nd-newsletter-msg.is-err{color:#ffc2b1}
.nd-newsletter-msg.is-ok{color:#f3e2cd}
.nd-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media(max-width:700px){
  .nd-newsletter-form{grid-template-columns:1fr; }
  .nd-newsletter-btn{width:100%}
}
/* Signup success — the thank-you replaces the copy + form in place, with a
   left-to-right glowing letter reveal (identical to naotonakada.com). The JS
   locks the inner's height before the swap so the section height never changes. */
.nd-newsletter-thanks{font-family:Gill Sans,Arial,sans-serif;font-size:20px;line-height:28px;color:#fdf6ee;margin:0}
.nd-newsletter-inner.nd-done{display:flex;flex-direction:column;justify-content:center}
.nd-newsletter-inner.nd-done > :not(.nd-newsletter-thanks){display:none}
@keyframes ndnl-fade{from{opacity:0}to{opacity:1}}
@keyframes ndnl-glow{0%{text-shadow:0 0 13px #fff,0 0 22px #fff}55%{text-shadow:0 0 6px #fff,0 0 12px #fff}100%{text-shadow:none}}
.nd-newsletter-thanks .nn-rl{opacity:1;animation:ndnl-fade .32s ease both,ndnl-glow .14s ease-out both}
@media(prefers-reduced-motion:reduce){.nd-newsletter-thanks .nn-rl{animation:none}}
/* ===== Site-wide overrides (loaded on every page via this stylesheet) ===== */
/* Navbar: two scroll-linked ramps, both starting at scroll 0 —
     blur   reaches full exactly as the navbar's lower edge meets the TOP of
            "We design desire";
     darken reaches full exactly as it meets the TOP of the black section below
            the hero (so darkening keeps deepening long after the blur is done).
   Both are drawn by these two layers sitting BEHIND the nav content (negative
   z-index inside the fixed navbar, which is its own stacking context). Each layer's
   EFFECT is constant and nd-newsletter.js ramps only its OPACITY per frame.
   WHY THIS SHAPE — do NOT "simplify" it back:
     * writing background-color / backdrop-filter values per scroll frame FLICKERS
       (an element with a backdrop blur re-samples its backdrop on every style
       change). Opacity is composited on the GPU and does not.
     * putting a transition on a per-frame value makes it only arrive once scrolling
       STOPS — so there is deliberately NO transition here; the scroll IS the timeline.
     * the original flicker also had a second cause: a Webflow ix2 interaction
       ("Navbar Scroll Down") writing this element's background inline every frame.
       Its data-w-id has been stripped from the navbar site-wide. */
.designnavbar{background-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.nd-nav-blur,.nd-nav-dark{position:absolute;inset:0;pointer-events:none}
.nd-nav-blur{z-index:-2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0}
.nd-nav-dark{z-index:-1;background:#000;opacity:0}
/* Footer text + legal links: orange glow on hover (match navbar), not gray */
.footer-link:hover,.footer-link.footerlinktext:hover,.footer-link.footerlinktext.footerlinktitle:hover,.footer-link.copyright:hover,.footer-link.copyright.leftlink:hover,.footer-link.copyright.rightlink:hover{color:#ff8d1b!important;text-shadow:1px 1px 4px #855a33!important}
/* Footer social icons: on hover an orange glow that hugs the ACTUAL LINES of each
   logo (drop-shadow follows the glyph's shape, so the X glows along its strokes).
   No lift. The glow filter also overrides the base filter:invert(27%). */
/* 🚨 The rest filter is TWO TRANSPARENT drop-shadows, matching the hover's two,
   ON PURPOSE. Without a rest filter (filter:none), the FIRST hover promotes the
   icon to a new compositing layer, and that first frame paints the drop-shadow
   on the element's SQUARE box before the layer rasterises the PNG's alpha — the
   "square glow for a brief moment" the owner saw. A non-none filter at rest
   pre-creates the layer, so hover only interpolates the shadow COLOUR (0 alpha
   -> orange), never creates a layer, never flashes. Same fix as the submit
   arrow + naotonakada.com social icons. Do NOT drop the rest filter. */
.instagramlink,.x,.xlink,.linkedinlink{filter:drop-shadow(0 0 4px rgba(255,141,27,0)) drop-shadow(0 0 8px rgba(255,141,27,0));will-change:filter;transform:translateZ(0);transition:filter .25s ease,opacity .25s ease}
.instagramlink:hover,.x:hover,.xlink:hover,.linkedinlink:hover{opacity:1!important;filter:drop-shadow(0 0 4px rgba(255,141,27,.95)) drop-shadow(0 0 8px rgba(255,141,27,.55))!important}
/* Footer address: halve the vertical gap between the two lines (line-height 30->22) */
.footeraddress{line-height:22px!important}
/* Hero subtitle: vertically centred in the black band between the hero image
   and the agency logos. Adjacent vertical margins collapse, so the gap below is
   max(this margin-bottom, the logos' 2vh top margin) — equal top/bottom margins
   (>=2vh) therefore land the text dead-centre. h1 UA margins zeroed; <br> removed. */
.landingtopdiv{margin-top:3vh!important;margin-bottom:3vh!important}
.landingtopdiv h1{margin-top:0!important;margin-bottom:0!important}
/* Contact-form -> email-signup gap halved (15vh -> 7.5vh) */
.inquire.inquireform{margin-bottom:7.5vh!important}

/* ── Related Reading on stories (owner's rule 2026-07-17: every story carries
   related stories below the inquire form and above the email band). Generated
   by scripts/related_stories.py. Scoped to .nd-related-stories so the two pages
   that inline their own .nd-artcards (interior-designers, seo-service-for-
   interior-designers) keep their hand-tuned copy untouched. Titles and
   descriptions here are pulled from each article's own <title>/meta, so they
   vary in length — hence the line clamps, which the hand-written pages do not need. */
.nd-related-stories{margin:0 0 7.5vh}
.nd-related-stories .nd-artcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 14px}
.nd-related-stories .nd-card{display:flex;flex-direction:column;background:#000000ad;border:1px solid rgba(255,255,255,.16);padding:26px 24px 22px;text-decoration:none;transition:border-color .2s}
.nd-related-stories .nd-card:hover{border-color:#ff8206}
.nd-related-stories .k{font-family:Lato,sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,227,221,.55);margin-bottom:8px}
.nd-related-stories .t{font-family:Gill Sans,Arial,sans-serif;font-size:23px;line-height:29px;font-weight:400;color:#fff;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nd-related-stories .d{font-family:Jost Variablefont Wght,Trebuchet MS,sans-serif;font-size:15px;line-height:22px;color:rgba(255,255,255,.82);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nd-related-stories .g{font-family:Lato,sans-serif;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#ff8d1b;margin-top:auto;padding-top:16px;white-space:nowrap}
.nd-related-stories .nd-card:hover .g{color:#ff8206}
@media(max-width:767px){.nd-related-stories .nd-artcards{grid-template-columns:1fr}}
/* Inquire page: the geo-personalised "Tell us about your project in {city}."
   line sits left-aligned under the Aristotle quote (owner 2026-07-17). Its
   own 20px left padding indented the text past the quote's edge: zero it so
   the glyphs, not just the box, line up. */
.designinquirediv .nd-geo-line{text-align:left!important;padding-left:0!important}

/* ============================================================
   LIGHT MODE (2026-07-17)
   ------------------------------------------------------------
   Dark stays the site default. html[data-theme="light"] is set
   BEFORE first paint by the inline bootstrap that
   scripts/add_theme_boot.py stamps into every <head> (plus a
   critical style with the canvas colors, so nothing flashes).
   Canvas is CREAM (#f0ece4), deliberately never pure white.
   These stay DARK on purpose, as anchors of the brand:
     - the footer band with its fruit painting (untouchable)
     - the email signup band (solid espresso in light mode)
     - FAQ marble summaries + their black answer panels
     - the tool "instrument" panels (.nd-tool and everything in them)
     - the gate modal (.ndg-*), a dark overlay in both themes
     - Cole-painting backdrops: pages with the painting keep it
       (daytime artwork reads as light, same as naotonakada.com),
       so philosophy/sitemap keep their translucent black panels.
   404.html has the only class-less <body> and is exempt via
   body[class]; it keeps its own dark design in both themes.
   Every rule below is scoped to the light theme except the
   toggle chip itself, which looks the same in both.
   ============================================================ */

/* ---- Canvas ---- */
html[data-theme="light"] body[class]{background-color:#f0ece4!important;color:#241f18}
html[data-theme="light"] .background-image.nakadadesignpage,
html[data-theme="light"] .main-body.landingpage{background-color:#f0ece4!important}
html[data-theme="light"]{--white:#241f18d1}

/* ---- Navbar in light mode (owner 2026-07-17, rounds 4-5) ----
   The nav stays WHITE everywhere, logo included ("incorrectly black on
   inquire page"). On pages without artwork behind it the links run a
   brighter white than the faint base #ffffff8a, for readability; art-backed
   pages (homepage hero, painting backdrops, template Rubens) keep the exact
   dark-mode tone. Scrolling keeps the BLUR but no darkening veil, and links
   carry no text-shadow in light. */
html[data-theme="light"]{--nd-nav-ink:#ffffffde}
html[data-theme="light"] body:has(.landingpagediv),
html[data-theme="light"] body:has(.background-image:not(.nakadadesignpage)),
html[data-theme="light"] body:has(.nd-libtop){--nd-nav-ink:#ffffff8a}
html[data-theme="light"] .navbarmenu.navbar{color:var(--nd-nav-ink)!important}
html[data-theme="light"] .icon-3{color:var(--nd-nav-ink)!important}
html[data-theme="light"] .navbarmenu.navbar:hover,
html[data-theme="light"] .navbarmenu.navbar:active,
html[data-theme="light"] .navbarmenu.navbar:focus,
html[data-theme="light"] .navbarmenu.navbar.w--current{color:#ff8d1b!important}
/* Menu links carry the house warm shadow for definition on cream (owner
   round 5); the current-page item stays clean orange, no shadow. Logo is an
   image and gets nothing. */
html[data-theme="light"] .navbarmenu.navbar{text-shadow:1px 1px 4px #855a33!important}
html[data-theme="light"] .navbarmenu.navbar.w--current,
html[data-theme="light"] .navbarmenu.navbar.w--current:hover{text-shadow:none!important}
html[data-theme="light"] .nd-nav-dark{background:transparent!important}
html[data-theme="light"] .nav-menu-2:not([data-nav-menu-open]){background-color:transparent!important}
html[data-theme="light"] .agencylogolinkblock img.agencylogo{filter:brightness(0)!important;opacity:.88}
/* DesignRush: the ink-outline badge swaps in via the theme JS (src swap on
   the img itself: exact layout, every browser); it is already ink, so exempt
   it from the strip's blanket blackening. Agency Spotter inverts. */
html[data-theme="light"] .designrushlogo img.agencylogo{filter:brightness(1)!important;opacity:.92}
html[data-theme="light"] .agencylogolinkblock img.agencylogo[src*="AgencySpotter"]{filter:invert(1)!important;opacity:.92}
/* The horizontal breaker keeps its brush stroke but the asset is the dark
   orange (#623001): lift it into the site's regular orange family in light
   mode (x2.4 lands the stroke at ~#f57802, owner 2026-07-17). */
html[data-theme="light"] img.horizontal-dark-orange-line{filter:brightness(2.4) saturate(1.05)}

/* ---- Base text: light-on-dark classes become warm ink.
        Their warm halo text-shadows are for dark backdrops; drop them. ---- */
html[data-theme="light"] .heading,
html[data-theme="light"] .heading-6,
html[data-theme="light"] .heading-9,
html[data-theme="light"] .hero-heading-left-2,
html[data-theme="light"] .in-head-1,
html[data-theme="light"] .main-text,
html[data-theme="light"] .main-text-copy,
html[data-theme="light"] .paragraph-11,
html[data-theme="light"] .sections-1,
html[data-theme="light"] .sections-1.homepage.storiessubtitle.title,
html[data-theme="light"] .bold-text-2,
html[data-theme="light"] .text-block-2,
html[data-theme="light"] .text-block-24,
html[data-theme="light"] .text-block-31,
html[data-theme="light"] .text-block-32,
html[data-theme="light"] .text-block-34,
html[data-theme="light"] .text-block-37,
html[data-theme="light"] .text-block-38,
html[data-theme="light"] .text-block-43,
html[data-theme="light"] .text-block-44,
html[data-theme="light"] .landingtext,
html[data-theme="light"] .landingtitle,
html[data-theme="light"] .landingpageheader,
html[data-theme="light"] .landingpagecta,
html[data-theme="light"] .landingpageaffluentcopy,
html[data-theme="light"] ._2ndlinelanding2,
html[data-theme="light"] ._2ndlinelanding3._2ndlinelanding,
html[data-theme="light"] .specializationtitle,
html[data-theme="light"] .specializationtext,
html[data-theme="light"] .distinctiontext,
html[data-theme="light"] .biotext,
html[data-theme="light"] .whocta,
html[data-theme="light"] .whatpagelink,
html[data-theme="light"] .margin-bottom-24px,
html[data-theme="light"] .client-list-item,
html[data-theme="light"] .list-item,
html[data-theme="light"] .list-2,
html[data-theme="light"] .artworkquote,
html[data-theme="light"] .rich-text-block-2,
html[data-theme="light"] .story-header-h4,
html[data-theme="light"] .sitemap-text-block,
html[data-theme="light"] .sitemapheader,
html[data-theme="light"] .link-2,
html[data-theme="light"] .link-3,
html[data-theme="light"] .icon-4,
html[data-theme="light"] .text-field-3{color:#241f18!important;text-shadow:none!important}
html[data-theme="light"] .sections-1.homepage.storysubtitle{color:#57514a!important}
/* Byline color arrives as an inline style attr on 174 stories; !important outranks it. */
html[data-theme="light"] .story-byline{color:#6f6960!important}
/* Brand logo: NEVER any outline/border/shadow (owner 2026-08-14). Focus ring
   after mouse click used to flash black on cream; kill all outline states.
   Early twin of these rules lives in head #nd-theme-crit (add_theme_boot.py)
   because this file loads late in <body>. */
.brand-logo,
.brand-logo:focus,
.brand-logo:focus-visible,
.brand-logo:active,
.brand-logo:focus:not(:focus-visible){
  outline:none!important;
  border:none!important;
  box-shadow:none!important;
}
/* Hold invisible until AVIF is decoded: the load/decode gap otherwise paints
   the UA placeholder chrome (a black/dark rectangular outline on cream light
   mode; invisible on black). nd-newsletter.js flips data-nd-ready after
   img.decode(); no-JS uses the delayed reveal below. */
.brand-logo img,
.nakadadesignlogo.agencylogo{
  color:transparent;
  opacity:0;
  outline:none!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent;
  /* Override sitewide img{overflow:clip!important} + .agencylogo{overflow:clip}
     which can hard-edge the transparent AVIF into a dark clip outline. */
  overflow:visible!important;
  /* Rest no-op filter so theme toggles never create a compositing-layer flash. */
  filter:brightness(1);
}
.brand-logo img[data-nd-ready],
.nakadadesignlogo.agencylogo[data-nd-ready]{opacity:1}
/* JS-off safety net ONLY (head boot stamps html.nd-js): reveal after 0.9s. */
html:not(.nd-js) .brand-logo img{animation:nd-logo-in 0s linear .9s forwards}
@keyframes nd-logo-in{to{opacity:1}}
html[data-theme="light"] .boldtext{color:#8a5c14!important}
/* "We design desire" / "Activate your renaissance." sit OVER the hero painting:
   color AND grounding shadow stay exactly as in dark (owner 2026-07-17). */
html[data-theme="light"] .landingtext.landingtexttop{color:#ffffffde!important;text-shadow:1px 1px 8px #613d1d!important}
html[data-theme="light"] .landingtext.landingtexttop.landingpagesubtitle{color:#ff8c00!important;text-shadow:1px 1px 8px #613d1d!important}
/* Painting pages (philosophy, sitemap, privacy-policy, terms: a bare
   .background-image, no .nakadadesignpage) keep the artwork and their dark
   see-through panels in light mode, so their copy must stay light. */
html[data-theme="light"] body:has(.background-image:not(.nakadadesignpage)) .heading,
html[data-theme="light"] body:has(.background-image:not(.nakadadesignpage)) .paragraph-11,
html[data-theme="light"] body:has(.background-image:not(.nakadadesignpage)) .main-text,
html[data-theme="light"] body:has(.background-image:not(.nakadadesignpage)) .rich-text-block-2,
html[data-theme="light"] body:has(.background-image:not(.nakadadesignpage)) .list-2,
html[data-theme="light"] body:has(.background-image:not(.nakadadesignpage)) .sitemap-text-block,
html[data-theme="light"] body:has(.background-image:not(.nakadadesignpage)) .sitemapheader{color:#fff!important}
/* Hover states the flips above would otherwise outrank (same values as dark). */
html[data-theme="light"] .story-header-h4:hover,
html[data-theme="light"] .sitemap-text-block:hover,
html[data-theme="light"] .main-text.bold-text-2:hover,
html[data-theme="light"] .specializationtext:hover,
html[data-theme="light"] .whatpagelink:hover{color:#ff8d1b!important}
html[data-theme="light"] .link-2:hover{color:#fb7e00!important}
html[data-theme="light"] .link-3:hover{color:#ff8206!important}

/* ---- Forms: paper fields, ink text (fields sat on #000000ad) ----
   Size lock: light and dark share the same 59px single-line height and
   box model. Only color/border tokens flip with theme — never height,
   padding, or line-height (owner 2026-08-03). ---- */
.form-submission.inquirestyle .form-text-field:not(textarea),
.form-submission.inquirestyle .nd-sel-face{
  height:59px!important;
  min-height:59px!important;
  max-height:59px!important;
  box-sizing:border-box!important;
  margin-bottom:0!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
  line-height:1.35!important;
  font-size:16px!important;
}
.form-submission.inquirestyle textarea.form-text-field.message{
  height:59px!important;
  min-height:59px!important;
  box-sizing:border-box!important;
  margin-bottom:0!important;
  font-size:16px!important;
  line-height:1.35!important;
}
/* Dark: gray horizontal rules between stacked fields (owner 2026-08-03).
   Light keeps its full hairline box; both stay the same outer size. */
.form-submission.inquirestyle .form-text-field:not(.landingpageform),
.form-submission.inquirestyle .nd-sel-face{
  border:none!important;
  border-bottom:1px solid rgba(200,196,190,.42)!important;
  border-radius:0!important;
  background-color:rgba(0,0,0,.68)!important;
}
.form-submission.inquirestyle .form-text-field:not(.landingpageform):last-of-type,
.form-submission.inquirestyle .nd-msg-wrap .form-text-field.message{
  /* last field still needs a bottom edge so the stack reads closed */
  border-bottom:1px solid rgba(200,196,190,.42)!important;
}
.form-submission.inquirestyle .form-text-field:hover,
.form-submission.inquirestyle .form-text-field:focus,
.form-submission.inquirestyle .nd-sel-face:hover,
.form-submission.inquirestyle .nd-sel-face.nd-focus{
  border-bottom-color:rgba(255,141,27,.65)!important;
}
html[data-theme="light"] .form-text-field{color:#241f18!important;background-color:rgba(255,253,247,.72)!important;border:1px solid rgba(26,22,16,.28)!important;text-shadow:none!important}
html[data-theme="light"] .form-submission.inquirestyle .form-text-field:not(.landingpageform),
html[data-theme="light"] .form-submission.inquirestyle .nd-sel-face{
  /* light: full box border (not only bottom rule), same 59px box */
  border:1px solid rgba(26,22,16,.28)!important;
  border-bottom:1px solid rgba(26,22,16,.28)!important;
  background-color:rgba(255,253,247,.72)!important;
}
html[data-theme="light"] .form-text-field::placeholder{color:rgba(36,31,24,.5)!important}
html[data-theme="light"] .form-text-field:hover,
html[data-theme="light"] .form-text-field:active,
html[data-theme="light"] .form-text-field:focus{color:#ff8d1b!important}
html[data-theme="light"] .form-submission.inquirestyle .form-text-field:hover,
html[data-theme="light"] .form-submission.inquirestyle .form-text-field:focus,
html[data-theme="light"] .form-submission.inquirestyle .nd-sel-face:hover,
html[data-theme="light"] .form-submission.inquirestyle .nd-sel-face.nd-focus{
  border-color:rgba(255,141,27,.55)!important;
}
html[data-theme="light"] .text-field-3{background-color:rgba(255,253,247,.72)!important;border:1px solid rgba(26,22,16,.28)!important}
html[data-theme="light"] .text-field-3::placeholder{color:rgba(36,31,24,.5)!important}
/* The hero email form's arrow is a white-glow AVIF: invisible on cream, so it
   uses the shared gray chevron (see the arrow pair at the end of this file).
   Dark keeps its original glow. */
html[data-theme="light"] .submit-button-3,
html[data-theme="light"] .submit-button-3:hover{background-image:none!important;background-color:#8f8a83!important;opacity:1!important;-webkit-mask:var(--nd-chev-right);mask:var(--nd-chev-right);transition:background-color .2s}
html[data-theme="light"] .submit-button-3:hover{background-color:#ff8d1b!important}
/* The glow + frame belong to DARK, where the owner wants them; only the cream
   canvas needed them gone. Round 6 wrongly scoped both to every theme. */
html[data-theme="light"] .form-submission{box-shadow:none!important}
/* Hero email (.form-2): kill Webflow black 3px outline + gray border frame,
   collapse the 80px flex gap, and let the email field span full width up to
   the submit arrow (owner 2026-08-14). Both themes. */
.form-2{
  outline:none!important;
  border:none!important;
  gap:0!important;
  column-gap:0!important;
  grid-column-gap:0!important;
  grid-row-gap:0!important;
  width:100%!important;
  max-width:100%!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  box-sizing:border-box!important;
}
.form-2 .text-field-3{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin-bottom:0!important;
  height:auto!important;
  align-self:stretch!important;
}
.form-2 .submit-button-3{
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  margin-left:0!important;
  margin-right:0!important;
  align-self:center!important;
}
/* Endeavor placeholder sits vertically centered ((59px - 22.9px line) / 2). */
.form-text-field.message.inquirepage{padding-top:18px!important}
html[data-theme="light"] .apply-btn:hover{background-color:#241f18!important;border-color:#241f18!important;color:#f0ece4!important}

/* ---- Panels / dividers ---- */
html[data-theme="light"] .section1{background-color:rgba(26,22,16,.05)!important}
html[data-theme="light"] .columns-7{background-color:rgba(26,22,16,.05)!important}
html[data-theme="light"] .faq-divider{border-top-color:rgba(26,22,16,.28)!important}
/* Section shells that paint their own black (hero sections on /interior-designers). */
html[data-theme="light"] .hero-heading-left,
html[data-theme="light"] .hero-heading-left-2{background-color:transparent!important}
/* Webflow left a 1px solid #000 border on these section shells. In light mode
   (transparent bg) it reads as an erroneous black hairline under the nav and
   between body blocks. Kill the border both themes (owner 2026-08-14). */
.hero-heading-left,
.hero-heading-left-2{border:none!important;border-color:transparent!important}
/* ALL artwork canvases keep their art in light mode (owner 2026-07-17: "i
   never told u to delete artwork"). Copy color follows the art: the Rubens
   band is an opaque dark painting, so its tagline stays white on service and
   template pages; tool pages strip that band themselves in both themes, so
   their tagline stays ink. Transparent illustrations (container-5's rose,
   the line-art canvases) read as cream in light, so their copy stays ink. */
html[data-theme="light"] body:not([data-ndgate-tool]) .columns-8 .text-block-39,
html[data-theme="light"] body:has(.nd-libtop) .columns-8 .text-block-39{color:#ffffffd1!important}
/* Homepage art canvases KEEP their artwork in light mode (owner 2026-07-17:
   the backgrounds stay, and the orange horizontal breaker keeps its color).
   The dancing-ladies canvas is line art on cream, so its copy stays ink. The
   HORSE section keeps its white glowing titles in light too: owner round 5,
   "revert horse color i never told u to change it". Only the opaque painting
   (.artwork-break) and the horse keep light copy. */
/* White titles on cream need a dark shadow to hold their edge (owner round 7:
   "add black shadow to horse white text"); the white halo stays underneath. */
html[data-theme="light"] .key-distinctions .distinctiontext{color:#ffffffde!important;text-shadow:1px 1px 6px rgba(0,0,0,.62),0 0 10px #ffffff87!important}
html[data-theme="light"] .key-distinctions .landingpagecta{color:#ffffffde!important;text-shadow:1px 1px 6px #613d1d!important}
html[data-theme="light"] .artwork-break{color:#fff}
html[data-theme="light"] .artwork-break .landingtitle,
html[data-theme="light"] .artwork-break .landingpageaffluentcopy,
html[data-theme="light"] .artwork-break .landingpagecta{color:#ffffffde!important;text-shadow:1px 1px 6px #613d1d!important}
html[data-theme="light"] .artwork-break .link-3{color:#fff!important;text-shadow:none!important}
html[data-theme="light"] .artwork-break .link-3:hover{color:#ff8206!important}
/* FAQ answer panels stay black: keep the copy inside them light. */
html[data-theme="light"] .c-faq-a-text,
html[data-theme="light"] .c-faq-a-text p,
html[data-theme="light"] .c-faq-a-text li,
html[data-theme="light"] .c-faq-a-text .paragraph-11,
html[data-theme="light"] .c-faq-a-text .main-text,
html[data-theme="light"] .c-faq-a-text .rich-text-block-2{color:#efeae2!important;text-shadow:none!important}
/* FAQ question rows keep the dark marble (faq-marble.avif) in BOTH themes —
   the marble is the intended design. The light theme's base rule flips FAQ
   question text to dark ink, which vanishes on the dark marble; keep the
   question text light (cream) on the marble so it stays readable in light. */
html[data-theme="light"] .c-faq .c-faq-q .faq-q-text,
html[data-theme="light"] .c-faq-q .faq-q-text,
html[data-theme="light"] .c-faq .c-faq-q .sections-1,
html[data-theme="light"] .c-faq-q .sections-1{color:#efeae2!important;text-shadow:none!important}

/* ---- Email band: light brown, one step darker than the cream canvas, and
        as see-through as dark's rgba(0,0,0,.45) (owner 2026-07-17 both).
        This caramel at 45% composites to the approved #d8c3a0 over cream and
        lets the paintings show through on art pages. Dark mode untouched. ---- */
html[data-theme="light"] .nd-newsletter{background:rgba(187,145,77,.45)!important}
html[data-theme="light"] .nd-newsletter-k{color:#8a5c14!important}
html[data-theme="light"] .nd-newsletter-h{color:#2c2115!important}
html[data-theme="light"] .nd-newsletter-s{color:#4a3a28!important}
html[data-theme="light"] .nd-newsletter-input{color:#2c2115!important;background:rgba(255,253,247,.55)!important;border-color:rgba(44,33,21,.3)!important}
html[data-theme="light"] .nd-newsletter-input::placeholder{color:rgba(44,33,21,.45)!important}
html[data-theme="light"] .nd-newsletter-msg{color:#5a4732!important}
html[data-theme="light"] .nd-newsletter-msg.is-err{color:#8a2a1a!important}
html[data-theme="light"] .nd-newsletter-msg.is-ok{color:#42533b!important}
html[data-theme="light"] .nd-newsletter-thanks{color:#2c2115!important}

/* ---- Cards: hub cards, story artcards, related-reading cards -> paper ---- */
html[data-theme="light"] .nd-card{background:rgba(255,255,255,.55)!important;border-color:rgba(26,22,16,.2)!important}
html[data-theme="light"] .nd-card:hover{border-color:#ff8206!important}
html[data-theme="light"] .nd-card .k{color:#6f6960!important}
html[data-theme="light"] .nd-card .t{color:#241f18!important}
html[data-theme="light"] .nd-card .d{color:#3d3831!important}

/* ---- Stories index + tools hub (nds-*) ---- */
html[data-theme="light"] .nds-toolbar{background:rgba(240,236,228,.94)!important}
html[data-theme="light"] .nds-search,
html[data-theme="light"] .nds-ask-input{color:#241f18!important;border-color:rgba(26,22,16,.3)!important}
html[data-theme="light"] .nds-search::placeholder,
html[data-theme="light"] .nds-ask-input::placeholder{color:#8a8378!important}
html[data-theme="light"] .nds-search:focus,
html[data-theme="light"] .nds-ask-input:focus{border-color:rgba(26,22,16,.55)!important}
html[data-theme="light"] .nds-tab,
html[data-theme="light"] .nds-sortbtn,
html[data-theme="light"] .nds-ask-btn,
html[data-theme="light"] .nds-empty button{color:#241f18!important;border-color:rgba(26,22,16,.3)!important}
html[data-theme="light"] .nds-tab:hover,
html[data-theme="light"] .nds-tab[aria-pressed="true"]{color:#ff8d1b!important}
html[data-theme="light"] .nds-ask-btn:hover{color:#ff8d1b!important;border-color:rgba(255,141,27,.6)!important}
html[data-theme="light"] .nds-card{background:rgba(26,22,16,.04)!important;border-color:rgba(26,22,16,.16)!important}
html[data-theme="light"] .nds-card:hover{background:rgba(255,255,255,.5)!important;border-color:rgba(26,22,16,.45)!important;box-shadow:0 0 22px rgba(26,22,16,.12)!important}
html[data-theme="light"] .nds-title{color:#241f18!important}
html[data-theme="light"] .nds-card:hover .nds-title{color:#000!important}
html[data-theme="light"] .nds-desc{color:#57514a!important}
html[data-theme="light"] .nds-sub{color:#57514a!important}
html[data-theme="light"] .nds-eyebrow,
html[data-theme="light"] .nds-meta,
html[data-theme="light"] .nds-count,
html[data-theme="light"] .nds-featured-label,
html[data-theme="light"] .nds-ask-line,
html[data-theme="light"] .nds-ask-msg{color:#6f6960!important}
html[data-theme="light"] .nds-empty,
html[data-theme="light"] .nds-ask-done{color:#3d3831!important}

/* ---- Template libraries ---- */
html[data-theme="light"] .tpl-card{background:rgba(255,255,255,.55)!important;border-color:rgba(26,22,16,.2)!important}
html[data-theme="light"] .tpl-card .t{color:#241f18!important}
html[data-theme="light"] .tpl-card .d{color:#3d3831!important}
html[data-theme="light"] .tpl-btn{color:#241f18!important;border-color:rgba(26,22,16,.4)!important}
html[data-theme="light"] .tpl-btn:hover{color:#ff8206!important;border-color:#ff8206!important}
html[data-theme="light"] .tpl-btn.pri,
html[data-theme="light"] .tpl-btn.pri:hover{color:#0c0c0c!important;border-color:#ff8206!important}
html[data-theme="light"] .tpl-pre{background:#171310!important}
html[data-theme="light"] .nd-libtop .cnt{color:#6f6960!important}
html[data-theme="light"] .nd-loc{color:#57514a!important}

/* ---- Tool pages: the instrument panel stays dark; frame it in ink.
        Everything inside (.nd-field, .nd-res, panes, drops) keeps its dark
        styling untouched. ---- */
html[data-theme="light"] .nd-tool{background:#17130ff2!important;border-color:rgba(26,22,16,.35)!important}
/* Comparison tables sit on the page canvas, not in the panel: ink on cream.
   A table inside the panel keeps its white. */
html[data-theme="light"] .nd-table td{color:#3d3831!important;border-bottom-color:rgba(26,22,16,.18)!important}
html[data-theme="light"] .nd-table th{border-bottom-color:rgba(26,22,16,.3)!important}
html[data-theme="light"] .nd-tool .nd-table td{color:#fff!important;border-bottom-color:rgba(255,255,255,.14)!important}
html[data-theme="light"] .nd-tool .nd-table th{border-bottom-color:rgba(255,255,255,.3)!important}
html[data-theme="light"] .nd-related a{background:rgba(255,255,255,.5)!important;border-color:rgba(26,22,16,.25)!important;color:#3d3831!important}
html[data-theme="light"] .nd-related a:hover{color:#000!important;border-color:#ff8206!important}
/* Foot CTAs under guide cards / tool grids ("More interior design guides →",
   "See all complimentary tools…"). Page-inline CSS sets color:#fff for dark
   canvases; on cream light mode that reads invisible. Rest = ink black,
   hover = house orange (owner 2026-08-14). */
html[data-theme="light"] .nd-related-more{color:#000!important}
html[data-theme="light"] .nd-related-more:hover{color:#ff8d1b!important}

/* ---- Intelligent SEO page sections ---- */
html[data-theme="light"] .nd-iseo-note{color:#3d3831!important}
html[data-theme="light"] .nd-engines span{background:rgba(255,255,255,.5)!important;border-color:rgba(26,22,16,.25)!important}
html[data-theme="light"] .nd-engines svg{color:#241f18!important}
html[data-theme="light"] .nd-moment-step,
html[data-theme="light"] .nd-step,
html[data-theme="light"] .nd-honest,
html[data-theme="light"] .nd-compare{background:rgba(255,255,255,.55)!important;border-color:rgba(26,22,16,.2)!important}
html[data-theme="light"] .nd-moment-step .q,
html[data-theme="light"] .nd-step .t{color:#241f18!important}
html[data-theme="light"] .nd-moment-step .d,
html[data-theme="light"] .nd-step .d,
html[data-theme="light"] .nd-honest .d{color:#3d3831!important}
html[data-theme="light"] .nd-compare th{color:#57514a!important}
html[data-theme="light"] .nd-compare td{color:#3d3831!important;border-color:rgba(26,22,16,.14)!important}
html[data-theme="light"] .nd-compare td:first-child{color:#57514a!important}
html[data-theme="light"] .nd-compare td.hi{background:rgba(26,22,16,.06)!important;color:#241f18!important}

/* ============================================================
   Theme toggle chip twin of #nd-chat-launcher.
   SOLID twin chip fill #6b6966 (not translucent glass): backdrop-filter over different
   page regions made the two circles read as different grays.
   ============================================================ */
/* Twin of naotonakada.com .theme-toggle (glass, not solid gray). */
.nd-theme-toggle{position:fixed;top:16px;right:18px;z-index:1200;width:42px;height:42px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:#fff;background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.16);box-shadow:0 2px 12px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:color .15s ease,background .2s ease,transform .15s ease}
.nd-theme-toggle:hover{color:#ff8d1b;background:rgba(255,255,255,.45)}
.nd-theme-toggle:active{transform:scale(.92)}
.nd-theme-toggle svg{width:18px;height:18px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.nd-theme-toggle .icon-sun{overflow:visible}
/* 🚨 DO NOT give .designnavbar a view-transition-name to stop the page-change
   flash. Proved on camera 2026-07-17: a view-transition-name makes the navbar
   a BACKDROP ROOT, so .nd-nav-blur (its child) has nothing left to sample and
   the scroll blur dies site-wide. It reads as "light mode nav scroll missing
   blur" because light has no darken layer to mask the loss. A/B: striped
   backdrop under the navbar renders razor sharp with the name, blurred
   without it. The blur outranks the flash; fix the flash another way. */
.nd-theme-toggle .icon-sun{display:block}
.nd-theme-toggle .icon-moon{display:none}
html[data-theme="light"] .nd-theme-toggle .icon-sun{display:none}
html[data-theme="light"] .nd-theme-toggle .icon-moon{display:block}
@media screen and (max-width:479px){.nd-theme-toggle{top:14px;right:14px}}

/* Homepage AI services grid — above Creativity CTA */
.nd-ai-services{max-width:1080px;margin:4vh auto 5vh;padding:0 22px;box-sizing:border-box}
.nd-ai-services-title{margin:0 0 .6rem;text-align:center;font-family:Gill Sans,Arial,sans-serif;font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.94)}
.nd-ai-services-lead{margin:0 auto 1.6rem;max-width:36rem;text-align:center;font-size:15px;line-height:1.5;color:rgba(255,255,255,.72)}
.nd-ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nd-ai-card{display:flex;flex-direction:column;gap:6px;padding:18px 16px 16px;text-decoration:none;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 28px rgba(0,0,0,.22);color:rgba(255,255,255,.9);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease}
.nd-ai-card:hover{border-color:rgba(255,141,27,.55);background:rgba(255,141,27,.08);box-shadow:0 0 0 1px rgba(255,141,27,.2),0 14px 34px rgba(0,0,0,.28);color:#fff}
.nd-ai-card-k{font-family:Lato,sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,141,27,.92)}
.nd-ai-card-h{font-family:Gill Sans,Arial,sans-serif;font-size:1.05rem;font-weight:500;letter-spacing:.02em;color:inherit}
.nd-ai-card-p{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.68)}
html[data-theme="light"] .nd-ai-services-title{color:#241f18}
html[data-theme="light"] .nd-ai-services-lead{color:rgba(36,31,24,.72)}
html[data-theme="light"] .nd-ai-card{background:rgba(255,255,255,.72);border-color:rgba(36,31,24,.12);box-shadow:0 10px 28px rgba(36,31,24,.08);color:#241f18}
html[data-theme="light"] .nd-ai-card:hover{border-color:rgba(255,141,27,.55);background:rgba(255,141,27,.1);box-shadow:0 0 0 1px rgba(255,141,27,.18),0 14px 34px rgba(36,31,24,.1);color:#241f18}
html[data-theme="light"] .nd-ai-card-p{color:rgba(36,31,24,.68)}
@media (max-width:900px){.nd-ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.nd-ai-grid{grid-template-columns:1fr}.nd-ai-services{padding:0 16px}}

/* ============================================================
   Inquiry form fields (owner, 2026-07-17): the endeavor textarea
   sits at the same 59px height as every other field and expands
   vertically via a quiet corner grip; the budget select wears the
   submit button's arrow, rotated down and smaller. Light theme
   swaps both icons for dark variants.
   ============================================================ */
.form-text-field.message{height:59px;min-height:59px;resize:vertical;overflow:auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11 5L5 11M11 9L9 11' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px bottom 6px;background-size:11px 11px}
.form-text-field.message.budgetfield{background-image:none}
.form-text-field.message::-webkit-resizer{background:transparent}
html[data-theme="light"] .form-text-field.message{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11 5L5 11M11 9L9 11' stroke='%23241f18' stroke-opacity='.6' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")!important}
html[data-theme="light"] select.form-text-field.w-select{background-image:url(/images/arrow-down-dark.png)!important}

/* Page headings ("Privacy Policy", "Terms and Conditions", "Philosophy") were rendering
   in Times serif. Cause: .heading asks for the family "Jost", but the only Jost @font-face
   this site ships is named "Jost Variablefont Wght" — bare "Jost" matches nothing and has
   no fallback listed, so the browser dropped to its default serif. Restore the same stack
   every other heading uses. (Pre-existing, not from the painting work — production shows
   the identical serif.) Several other classes also name bare "Jost" (.copyright,
   .footer-link, .sections-1 …) but each is already overridden by a more specific rule that
   spells the family correctly, so .heading was the only one left exposed. */
.heading{font-family:"Jost Variablefont Wght","Trebuchet MS",sans-serif}
/* ============================================================
   Budget dropdown facade + styled panel (owner, 2026-07-17).
   The native select sits invisible, full-size, inside .nd-sel so
   form submission and validation anchoring keep working.
   ============================================================ */
.nd-sel{position:relative;display:block}
.nd-sel select{position:absolute;inset:0;width:100%;height:100%;opacity:.001;pointer-events:none;z-index:1;margin:0}
.nd-sel-face{cursor:pointer;user-select:none;-webkit-user-select:none;display:flex;align-items:center;padding-right:52px;position:relative}
.nd-sel-face.nd-focus{border-color:rgba(255,255,255,.45)!important}
.nd-sel-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Positioning only. The visible fill (flat-gray CSS-mask chevron, identical to
   the submit arrow) is set by the .nd-sel-arr rule at the end of this file. The
   old glow/dark PNGs are gone: in light mode arrow-down-dark.png was a beveled
   "3D" arrow that painted INSIDE the chevron mask (its rule was
   html[data-theme=light] .nd-sel-arr, higher specificity than the mask rule),
   so the budget arrow read grayer/3D vs the flat submit arrow. */
.nd-sel-arr{position:absolute;top:50%;transform:translateY(-50%);right:15px;width:20px;height:15px;pointer-events:none}
.nd-sel-list{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:120;background:#000;border:1px solid rgba(255,255,255,.22);box-shadow:0 0 14px rgba(255,255,255,.28);max-height:280px;overflow:auto}
.nd-sel.is-open .nd-sel-list{display:block}
.nd-sel-opt{font-family:Jost Variablefont Wght,Trebuchet MS,sans-serif;font-size:16px;line-height:1.35;text-align:left;color:rgba(255,255,255,.88);padding:13px 18px;cursor:pointer;transition:color .15s,background-color .15s}
.nd-sel-opt:hover{color:#ff8d1b;background:rgba(255,141,27,.1)}
.nd-sel-opt.is-sel{color:#ff8d1b}
html[data-theme="light"] .nd-sel-list{background:#fffdf7;border-color:rgba(26,22,16,.25);box-shadow:0 6px 18px rgba(26,22,16,.18)}
html[data-theme="light"] .nd-sel-opt{color:#241f18}
html[data-theme="light"] .nd-sel-opt:hover{color:#ff8d1b;background:rgba(255,141,27,.12)}
html[data-theme="light"] .nd-sel-opt.is-sel{color:#ff8d1b}

/* The submit arrow is pulled up over the form visually (top:-7.5vh) but its
   flow slot still adds ~40-60px of dead air under the endeavor field, which
   reads as an oversized field (owner, 2026-07-17). Collapse the slot. */
/* The page's inline .form-submission.inquirestyle carries padding-bottom:16px.
   It is invisible in light (the form has no visible box), but in DARK the white
   glow (box-shadow on this element) draws its edge 16px BELOW the last field —
   and because the dark fields are borderless, the endeavor field visually
   merges with that gap and reads ~16px too tall vs the clean light box (owner
   2026-07-18: "endeavor field should be same height as light mode"). Zero it so
   the glow hugs the fields; light is unchanged, and the submit arrow (absolute,
   bottom:22px) lands aligned with the endeavor placeholder in both themes. */
.form-submission.inquirestyle{position:relative;padding-bottom:0}
/* Endeavor + submit nest (.nd-msg-wrap from nd-inquire-autofill). Arrow INSIDE the box. */
.nd-msg-wrap{position:relative;width:100%;display:block}
.nd-msg-wrap .form-text-field.message,
.nd-msg-wrap .form-text-field.message.inquirepage{
  display:block;width:100%;max-width:100%;margin-bottom:0;padding-right:48px!important;box-sizing:border-box
}
.nd-msg-wrap .inquire-submit-button.inquirebutton,
.nd-msg-wrap .inquire-submit-button.inquirebutton.inquirepage,
.nd-msg-wrap .inquire-submit-button.inquirebutton.talentpage{
  position:absolute!important;
  top:auto!important;
  left:auto!important;
  right:12px!important;
  bottom:12px!important;
  margin:0!important;
  width:28px!important;
  height:28px!important;
  z-index:6;
}
.form-text-field.message.inquirepage{margin-bottom:0;padding-right:48px!important}
/* ============================================================
   Cross-document view transitions (owner, 2026-07-17).
   Navigating between pages crossfades rather than flashing white.
   The browser still performs an ordinary navigation: same URL, same
   request, same HTML. Nothing about what a crawler receives changes,
   only the paint between the two documents. Both the outgoing and the
   incoming document have to carry this rule, which they do, because
   this file is on every page. Chrome 126+ and Safari 18.2+ honour it;
   everywhere else it is ignored and navigation stays exactly as it is.

   Deliberately NO view-transition-name on .designnavbar. The theme
   toggle above runs its own same-document startViewTransition, and a
   name pinned to the navbar would lift it out of THAT crossfade too,
   making it snap between dark and light instead of fading. The navbar
   is identical either side of a navigation anyway, so crossfading it
   against itself is invisible.
   ============================================================ */
@view-transition{navigation:auto}

/* The theme toggle already declines its transition under reduced motion
   (see setTheme in nd-newsletter.js); hold navigation to the same promise. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
}

/* Geo-personalized lines (state swapped in via /api/geo). */
.nd-geo-line{font-family:Jost Variablefont Wght,Trebuchet MS,sans-serif;font-size:17px;line-height:25px;text-align:center;color:rgba(255,255,255,.8);max-width:640px;margin:0 auto 7vh;padding:0 20px}
.nd-geo-line a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);transition:color .2s,border-color .2s}
.nd-geo-line a:hover{color:#ff8d1b;border-color:#ff8d1b}
.nd-geo-home{margin:14px auto 0;font-size:16px;color:rgba(255,255,255,.75)}
html[data-theme="light"] .nd-geo-line{color:rgba(36,31,24,.75)!important}
html[data-theme="light"] .nd-geo-line a{color:#241f18!important;border-color:rgba(36,31,24,.35)!important}
html[data-theme="light"] .nd-geo-line a:hover{color:#ff8d1b!important;border-color:#ff8d1b!important}

/* ============================================================
   Form arrow pair — submit + budget (owner 2026-07-17, round 7)
   ------------------------------------------------------------
   The two controls share one form and must read as a pair: the same 14px
   chevron, gray at rest, orange on hover, in BOTH themes. Their source assets
   can never match (a white-glow AVIF vs a dark PNG, each with its own
   padding), so both are drawn as a CSS mask over a background-color: one
   colour swap now drives both, and the glyph geometry is identical by
   construction.

   .nd-sel-arr keeps its 20px-wide box: nd-newsletter.js align() centres a
   20px arrow on the submit button's axis, so resizing the box would shift it.
   Only the mask inside the box is 14px.

   The budget facade's PNG rules (near .nd-sel-face above) have been reduced to
   positioning only, so this mask is the sole fill. Do NOT reintroduce a
   `html[data-theme=…] .nd-sel-arr{background-image:…}` rule: its (0,1,1)
   specificity beats this bare `.nd-sel-arr` (0,1,0) and the PNG then paints
   inside the mask (the "3D/grayer" budget-arrow bug, 2026-07-18).
   ============================================================ */
:root{--nd-chev-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") 50% 50%/14px no-repeat;
      --nd-chev-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") 50% 50%/14px no-repeat}
.inquire-submit-button,
.inquire-submit-button.inquirebutton{background-image:none!important;background-color:#8f8a83!important;opacity:1!important;border:none!important;border-radius:0!important;filter:none!important;box-shadow:none!important;-webkit-mask:var(--nd-chev-right);mask:var(--nd-chev-right);transition:background-color .2s}
/* Both hover selectors are listed so the .inquirebutton variant (higher
   specificity) cannot pin the rest colour through its own :hover state. */
.inquire-submit-button:hover,
.inquire-submit-button.inquirebutton:hover{background-color:#ff8d1b!important;box-shadow:none!important;filter:none!important}
/* Budget arrow: the SAME clean chevron treatment as the submit arrow (owner
   2026-07-18) — same 14px CSS-mask chevron, gray at rest, orange on hover — but
   pointing DOWN, since it is a dropdown. "Same as submit" meant the style, not
   the direction. */
.nd-sel-arr{background-image:none!important;background-color:#8f8a83!important;-webkit-mask:var(--nd-chev-down);mask:var(--nd-chev-down);transition:background-color .2s}
.nd-sel-face:hover .nd-sel-arr{background-color:#ff8d1b!important}
/* Keyboard: the native <select> is the tab stop (invisible at opacity .001)
   and syncs .nd-focus onto the facade. Without a visible ring, tabbing from
   Website to Budget looked like nothing happened. An outline is used rather
   than a border-colour so it survives both themes' field-border rules. */
.nd-sel-face.nd-focus{outline:2px solid #ff8d1b;outline-offset:-2px}
/* The facade carries the visible text (the <select> underneath is invisible,
   so styling that one changed nothing): match the sibling placeholders until
   a budget is actually chosen. */
html[data-theme="light"] .nd-sel-face .nd-sel-txt{color:rgba(36,31,24,.5)}
html[data-theme="light"] .nd-sel-face.nd-sel-filled .nd-sel-txt{color:#241f18}

/* Theme-switch flicker (owner round 7): a filter that appears on toggle
   CREATES a compositing layer and blanks the image for a frame — the same
   trap as the submit arrow and the social icons. Keep a no-op filter at rest
   so every logo already owns its layer before the theme ever changes. */
.agencylogolinkblock img.agencylogo{filter:brightness(1)}

/* Agency badge strip (homepage + vertical hubs).
   Dark mode is the MASTER for size and form (owner 2026-08-03): light may
   only recolor (filter / DesignRush src swap) — never scale, crop, or change
   max-height. AgencySpotter is a full circle and the tallest mark; Webflow
   + sitewide img{overflow:clip!important} used to shave the bottom arc.
   Keep overflow visible, pad the strip, and give Spotter a little inner
   air so the circle never sits flush with the clip edge. No hover motion. */
.agencylogos-section,
.agencylogos-section-interior-designers{
  overflow:visible!important;
  align-items:center;
  padding-top:10px;
  padding-bottom:14px;
  box-sizing:border-box;
}
.agencylogos-section .agencylogolinkblock,
.agencylogos-section-interior-designers .agencylogolinkblock{
  overflow:visible!important;
  line-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Shared slot so light/dark keep identical footprint per badge. */
  height:52px;
  max-height:52px;
}
.agencylogos-section .agencylogo,
.agencylogos-section-interior-designers .agencylogo{
  overflow:visible!important;
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:44px;
  object-fit:contain;
  object-position:center center;
  vertical-align:middle;
  /* filters (light recolor) must not change layout box */
  transform:none!important;
}
/* Spotter circle: slightly tighter max-height + vertical pad so the arc
   never clips under filter layers or subpixel rounding. */
.agencylogos-section .agencylogolinkblock img.agencylogo[src*="AgencySpotter"],
.agencylogos-section-interior-designers .agencylogolinkblock img.agencylogo[src*="AgencySpotter"]{
  max-height:40px!important;
  padding:2px 0;
  box-sizing:content-box;
}
html[data-theme="light"] .agencylogos-section .agencylogo,
html[data-theme="light"] .agencylogos-section-interior-designers .agencylogo{
  /* recolor only — lock geometry to dark master */
  max-height:44px;
  width:auto;
  height:auto;
  transform:none!important;
}
html[data-theme="light"] .agencylogos-section .agencylogolinkblock img.agencylogo[src*="AgencySpotter"],
html[data-theme="light"] .agencylogos-section-interior-designers .agencylogolinkblock img.agencylogo[src*="AgencySpotter"]{
  max-height:40px!important;
}
/* DesignRush light asset is a different PNG (src-swap). Force the DARK master
   box (891×232 → height 44 → width ~169) so light cannot change size/form. */
.agencylogos-section .designrushlogo img.agencylogo,
.agencylogos-section-interior-designers .designrushlogo img.agencylogo{
  height:44px!important;
  max-height:44px!important;
  width:169px!important;
  max-width:169px!important;
  object-fit:contain!important;
  object-position:center center!important;
}
@media screen and (max-width:767px){
  .agencylogos-section .designrushlogo img.agencylogo,
  .agencylogos-section-interior-designers .designrushlogo img.agencylogo{
    height:38px!important;max-height:38px!important;width:146px!important;max-width:146px!important;
  }
}
@media screen and (max-width:479px){
  .agencylogos-section .designrushlogo img.agencylogo,
  .agencylogos-section-interior-designers .designrushlogo img.agencylogo{
    height:32px!important;max-height:32px!important;width:123px!important;max-width:123px!important;
  }
}
@media screen and (max-width:767px){
  .agencylogos-section .agencylogolinkblock,
  .agencylogos-section-interior-designers .agencylogolinkblock{height:46px;max-height:46px}
  .agencylogos-section .agencylogo,
  .agencylogos-section-interior-designers .agencylogo{max-height:38px}
  .agencylogos-section .agencylogolinkblock img.agencylogo[src*="AgencySpotter"],
  .agencylogos-section-interior-designers .agencylogolinkblock img.agencylogo[src*="AgencySpotter"]{max-height:34px!important}
}
@media screen and (max-width:479px){
  .agencylogos-section .agencylogolinkblock,
  .agencylogos-section-interior-designers .agencylogolinkblock{height:40px;max-height:40px}
  .agencylogos-section .agencylogo,
  .agencylogos-section-interior-designers .agencylogo{max-height:32px}
  .agencylogos-section .agencylogolinkblock img.agencylogo[src*="AgencySpotter"],
  .agencylogos-section-interior-designers .agencylogolinkblock img.agencylogo[src*="AgencySpotter"]{max-height:30px!important}
}


/* Split hero: text left, painting right (who + vertical hubs + what) */
.nd-split-hero{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:2.5rem 3%;
  width:auto;
  max-width:1100px;
  margin:6vh auto 2vh;
  padding:0 4%;
  box-sizing:border-box;
}
.nd-split-copy{
  flex:1 1 320px;
  min-width:min(100%,280px);
  max-width:540px;
}
.nd-split-art{
  flex:0 1 360px;
  min-width:min(100%,220px);
  max-width:38%;
  margin-left:auto;
}
.nd-split-art img,
.nd-split-hero .image-26,
.nd-split-hero .architectheaderimage,
.nd-split-hero .artgalleryheaderimage,
.nd-split-hero .photographerheaderimage,
.nd-split-hero .luxuryheaderimage,
.nd-split-hero .image-24,
.nd-split-hero .whatwedoimage{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  margin:0!important;
  display:block!important;
}
.nd-split-copy .main-text{
  margin-top:0!important;
}
.nd-split-copy h1.bold-text-2{
  margin-top:0;
}
@media screen and (max-width:767px){
  .nd-split-hero{
    flex-direction:column-reverse;
    margin-top:3vh;
    gap:1.5rem;
  }
  .nd-split-art{
    max-width:100%;
    width:100%;
    flex-basis:auto;
  }
  .nd-split-copy{max-width:100%}
}
/* What page — owner layout export 2026-08-14c (ref viewport 1728).
   FIX: never body margin-top:-40 (collides intro at ≥1400). QC at 1728 not only 1280.
   H1 ≤61.5 / intro ≤26.5 @ 426px content, painting ~689, quote transparent. */
.div-block-18.whatwedo,
.div-block-18.whatwedo.nd-what-split{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:clamp(1.5rem, 3.5vw, 3rem);
  margin:2vh 7vw 2vh!important; /* equal L/R 7% */
  padding:0!important;
  max-width:none!important;
  width:auto!important;
  box-sizing:border-box;
}
/* Left: extra inset beyond hero 7vw (~166px at 1728) WITHOUT % width that crushes copy.
   content-box so padding-left is outside the 426px copy width. */
.div-block-18.whatwedo .div-block-21{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0 0 0 clamp(0.75rem, 9.6vw, 166px)!important;
  box-sizing:content-box!important;
  align-self:flex-start!important;
}
.div-block-18.whatwedo .div-block-21 .main-text.whywework{
  margin:0 0 0.85rem 0!important;
  padding:0!important;
  max-width:426px!important;
}
.div-block-18.whatwedo .div-block-21 h1.bold-text-2{
  font-size:clamp(1.85rem, 3.56vw, 3.84375rem)!important; /* ≤61.5px */
  line-height:1.15!important;
  margin:0!important;
  padding:0!important;
  width:auto!important;
  max-width:426px!important;
  height:auto!important;
  transform:none!important;
  white-space:nowrap;
}
.div-block-18.whatwedo .div-block-21 .main-text.whatwedo,
.div-block-18.whatwedo .div-block-21 .nd-what-intro{
  font-size:clamp(1.05rem, 1.53vw, 1.65625rem)!important; /* ≤26.5px */
  line-height:1.55!important;
  margin:clamp(0.75rem, 2.5vw, 2.7rem) 0 0 0!important;
  padding:0!important;
  letter-spacing:0.01em;
  width:min(426px, 100%)!important;
  max-width:426px!important;
  height:auto!important;
  transform:none!important;
}
/* Art frame ~51% / max 880; painting ~689 with ~19px inset */
.div-block-18.whatwedo .div-block-22{
  width:min(880px, 51%)!important;
  max-width:880px!important;
  min-width:0!important;
  margin:0 0 0 auto!important;
  padding:0!important;
  position:relative!important;
  overflow:hidden!important;
  flex:1 1 51%!important;
  align-self:flex-start!important;
  min-height:0!important;
  height:auto!important;
}
.div-block-18.whatwedo .whatwedoimage{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:min(689px, 92%)!important;
  max-width:92%!important;
  height:auto!important;
  max-height:none!important;
  display:block!important;
  margin:0 0 0 clamp(0.4rem, 1.12vw, 19px)!important;
  object-fit:contain!important;
  object-position:top left!important;
  transform:none!important;
}
/* Body ALWAYS below taller of left/paint — no negative tuck (broke ≥1400).
   Force each side with !important so no stale/competing rule can pull body up. */
.nd-what-body{
  width:auto;
  max-width:820px;
  margin-top:clamp(1.5rem, 3.5vh, 2.75rem)!important;
  margin-right:auto!important;
  margin-bottom:1.5vh!important;
  margin-left:auto!important;
  padding:0 7vw;
  box-sizing:border-box;
  clear:both;
  position:relative;
  z-index:1;
  transform:none!important;
}
.nd-what-body .main-text.whatwedo{
  font-size:16.5px!important;
  line-height:1.6!important;
  margin:0!important;
  max-width:820px;
  transform:none!important;
}
.nd-what-body .main-text.whatwedo a.link{
  font-size:inherit!important;
}
/* Dark is default (no data-theme). Webflow body stays white; black plate
   .background-image.nakadadesignpage only covers part of the page — extend
   full-page black on What so services/quote/specialized stay on black with
   light type (and white Aristotle script stays legible without a plate). */
body.main-body:has(.div-block-18.whatwedo){
  background-color:#000!important;
}
html[data-theme="light"] body.main-body:has(.div-block-18.whatwedo){
  background-color:#f0ece4!important;
}
/* Aristotle quote — transparent; export nudge +16px (slightly lower) */
img.image-23{
  display:block!important;
  width:min(720px, 41.7vw, 86%)!important;
  max-width:86%!important;
  height:auto!important;
  margin:clamp(1.25rem, 2.2vh, 2.2rem) auto clamp(2.5rem, 4.5vh, 3.5rem)!important;
  vertical-align:baseline;
  background:transparent!important;
  padding:0!important;
  box-sizing:content-box;
  border-radius:0;
  transform:none!important;
}
/* Light mode: white lettering on cream is nearly invisible — invert to ink */
html[data-theme="light"] img.image-23{
  filter:invert(1);
  opacity:.86;
}
/* Other white-on-transparent quotes still need the plate (not What) */
img.whyquote,
img.quote{
  background:#161412;
  padding:1.25rem 1.5rem;
  box-sizing:content-box;
  border-radius:2px;
}
/* Specialized block: slight top tuck + air below last yacht line before newsletter */
.nakadadesignsection.worktop{
  margin-top:clamp(1.25rem, 2vh, 1.5rem)!important;
  margin-bottom:clamp(2.5rem, 5vh, 4rem)!important;
}
.nakadadesignsection.worktop .list{
  margin-bottom:0!important;
  padding-bottom:clamp(0.75rem, 1.5vh, 1.25rem)!important;
}
@media screen and (max-width:1100px){
  .div-block-18.whatwedo .div-block-21{
    width:auto!important;
    max-width:none!important;
    padding-left:clamp(0.5rem, 4vw, 3rem)!important;
    box-sizing:content-box!important;
  }
  .div-block-18.whatwedo .div-block-22{
    width:min(640px, 54%)!important;
    max-width:640px!important;
  }
  .div-block-18.whatwedo .div-block-21 h1.bold-text-2{
    font-size:clamp(1.65rem, 3.2vw, 2.75rem)!important;
  }
  .div-block-18.whatwedo .div-block-21 .nd-what-intro{
    max-width:min(426px, 100%)!important;
  }
}
@media screen and (max-width:767px){
  .div-block-18.whatwedo,
  .div-block-18.whatwedo.nd-what-split{
    flex-direction:column-reverse!important;
    flex-wrap:wrap!important;
    margin:1vh 5vw 2vh!important;
    gap:1.25rem;
  }
  .div-block-18.whatwedo .div-block-21,
  .div-block-18.whatwedo .div-block-22{
    width:100%!important;
    max-width:100%!important;
    flex:1 1 auto!important;
    min-height:0!important;
    padding-left:0!important;
    box-sizing:border-box!important;
  }
  .div-block-18.whatwedo .div-block-22{order:-1;margin:0!important;overflow:visible!important}
  .div-block-18.whatwedo .whatwedoimage{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    position:relative!important;
  }
  .div-block-18.whatwedo .div-block-21 h1.bold-text-2{
    font-size:clamp(1.75rem, 8vw, 2.4rem)!important;
    max-width:none!important;
    white-space:normal;
  }
  .div-block-18.whatwedo .div-block-21 .main-text.whatwedo,
  .div-block-18.whatwedo .div-block-21 .nd-what-intro{
    font-size:clamp(1rem, 4.2vw, 1.15rem)!important;
    max-width:none!important;
    width:auto!important;
    margin-top:0.75rem!important;
  }
  .nd-what-body{
    padding:0 5vw;
    max-width:none;
    margin-top:1.5vh;
  }
  img.image-23{
    width:min(720px, 92vw)!important;
    max-width:92%!important;
    margin:2.5vh auto 4vh!important;
    background:transparent!important;
    padding:0!important;
  }
}

/* 404 page layout: footer stays in document flow (never floats over content) */
body.nd-404{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  min-height:100vh;
  text-align:left;
  padding:0!important;
}
body.nd-404 .nd-404-main{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12vh 1.5rem 6vh;
  width:100%;
  box-sizing:border-box;
}
body.nd-404 .nd-404-wrap{max-width:640px;width:100%}
body.nd-404 .nd-404-code{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(4rem,14vw,7rem);
  line-height:1;
  letter-spacing:.04em;
  color:#c8a96a;
  font-weight:400;
}
body.nd-404 .nd-404-wrap h1{
  margin:1.1rem 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(1.35rem,3.6vw,1.85rem);
  letter-spacing:.02em;
  color:#f4f1ea;
}
html[data-theme=light] body.nd-404 .nd-404-wrap h1{color:#241f18}
body.nd-404 .nd-404-search{
  margin-top:2.4rem;
  width:min(100%,420px);
  display:flex;
  align-items:stretch;
  border:1px solid rgba(200,169,106,.75);
  background:rgba(0,0,0,.25);
}
html[data-theme=light] body.nd-404 .nd-404-search{
  background:rgba(255,255,255,.55);
  border-color:rgba(36,31,24,.28);
}
body.nd-404 .nd-404-search input[type=search]{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font-family:Lato,Arial,sans-serif;
  font-size:.95rem;
  padding:.95rem 1.1rem;
  min-width:0;
}
body.nd-404 .nd-404-search input::placeholder{color:rgba(244,241,234,.45)}
html[data-theme=light] body.nd-404 .nd-404-search input::placeholder{color:rgba(36,31,24,.45)}
body.nd-404 .nd-404-search button{
  border:0;
  background:transparent;
  color:#c8a96a;
  font-family:Lato,Arial,sans-serif;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:0 1.15rem;
  cursor:pointer;
  transition:color .2s,background-color .2s;
}
body.nd-404 .nd-404-search button:hover{
  color:#0c0c0c;
  background:#c8a96a;
}
html[data-theme=light] body.nd-404 .nd-404-search button:hover{
  color:#fff;
  background:#241f18;
}
body.nd-404 .nd-404-slogan{
  margin-top:2.8rem;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:.95rem;
  color:#6f6b62;
  letter-spacing:.03em;
}
body.nd-404 .homepage-footer{
  flex:0 0 auto;
  margin-top:auto;
  width:100%;
  position:relative!important;
  float:none!important;
}
body.nd-404 .designnavbar{
  flex:0 0 auto;
  width:100%;
}