/* White optical glass, satin steel and reflected red light.
   The shared layout adds photographic-glass only to inner pages. */
.grey-site.glass-depth.photographic-glass {
    --frame-ember: #c4101b;
    --frame-ember-text: #98101a;
    --frame-ink: #242225;
    --frame-muted: #514c50;
    --frame-line: rgba(79, 65, 67, .18);
    --frame-bg: #fff;
    --frame-soft: #f8f5f3;
    --frame-paper: #fff;
    --photo-scene: url('/assets/images/site/photographic-glass/notes-desktop-v2.webp');
    --photo-fill: rgba(255, 255, 255, .68);
    --photo-gutter: clamp(12px, 2.5vw, 32px);
    --photo-panel-radius: 20px;
    --photo-heading-height: 480px;
    --photo-banner-width: calc(100% - var(--photo-gutter) - var(--photo-gutter));
    --photo-frost: blur(18px) saturate(1.04);
    --photo-shine: linear-gradient(118deg, rgba(255,255,255,.38), rgba(255,255,255,.06) 35%, rgba(255,255,255,.16) 77%, rgba(255,239,237,.23));
    --photo-rim: linear-gradient(140deg, rgba(255,255,255,.98), rgba(226,226,225,.56) 24%, rgba(255,255,255,.96) 45%, rgba(145,139,139,.48) 75%, rgba(255,255,255,.84));
    --photo-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(73,61,64,.21), inset 0 0 0 3px rgba(255,255,255,.34), 0 1px 0 rgba(255,255,255,.96), 0 3px 0 -1px rgba(154,135,132,.5), 0 6px 9px -5px rgba(208,15,30,.32), 0 12px 24px -12px rgba(77,52,53,.34), 0 30px 60px -35px rgba(55,42,43,.36);
    --depth-panel-fill: linear-gradient(rgba(255,255,255,.68), rgba(255,255,255,.68));
    --depth-blur: var(--photo-frost);
    --depth-radius: 20px;
    --depth-rim: 5px;
    --public-panel-white: var(--photo-fill);
    --section-backdrop: var(--photo-scene);
    --section-backdrop-position: center;
    color: var(--frame-ink);
    background: #e6dfdb;
    text-shadow: none;
}

.grey-site.glass-depth.photographic-glass[data-background-section='notes'] {
    --photo-scene: url('/assets/images/site/photographic-glass/notes-desktop-v2.webp');
}
.grey-site.glass-depth.photographic-glass[data-background-section='process'] {
    --photo-scene: url('/assets/images/site/photographic-glass/process-desktop-v2.webp');
}
.grey-site.glass-depth.photographic-glass[data-background-section='tools'] {
    --photo-scene: url('/assets/images/site/photographic-glass/tools-desktop-v2.webp');
}
.grey-site.glass-depth.photographic-glass[data-background-section='portfolio'] {
    --photo-scene: url('/assets/images/site/photographic-glass/portfolio-desktop-v2.webp');
}
.grey-site.glass-depth.photographic-glass[data-background-section='search'] {
    --photo-scene: url('/assets/images/site/photographic-glass/search-desktop-v2.webp');
}
.grey-site.glass-depth.photographic-glass[data-background-section='contact'] {
    --photo-scene: url('/assets/images/site/photographic-glass/contact-desktop-v2.webp');
}
.grey-site.glass-depth.photographic-glass[data-background-section='account'] {
    --photo-scene: url('/assets/images/site/photographic-glass/account-desktop-v2.webp');
}

/* Private banners share the width of their existing reading workspace. */
.grey-site.glass-depth.photographic-glass[data-background-section='account'] {
    --photo-banner-width: min(1140px, calc(100% - var(--photo-gutter) - var(--photo-gutter)));
}

/* One fixed photographic layer; text and controls are always real DOM content. */
.grey-site.glass-depth.photographic-glass::before {
    background: linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.09)), var(--photo-scene) center / cover no-repeat;
}

.photographic-glass .site-stage {
    padding: clamp(10px, 2vw, 30px);
    background: transparent;
    box-shadow: none;
}

.grey-site.glass-depth.photographic-glass .site-frame {
    width: min(1500px, 100%);
    background: transparent;
    border: 0;
    border-radius: 20px;
    box-shadow: none;
}
.grey-site.glass-depth.photographic-glass .site-frame::before { content: none; }

/* Header is a frosted optical sheet with a narrow stainless lower lip. */
.grey-site.glass-depth.photographic-glass :is(.frame-header, .frame-header.is-scrolled, .member-dashboard-band) {
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 16px;
    background: var(--photo-shine), rgba(255,255,255,.83);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(129,116,118,.35), 0 10px 28px -16px rgba(62,37,40,.48);
}
.grey-site.glass-depth.photographic-glass .frame-header::after {
    content: '';
    display: block;
    inset: auto 16px -3px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #d8d4d3, #fff 20%, #8c8080 48%, #fff 76%, #c9c4c2);
    box-shadow: 0 2px 2px rgba(132,0,13,.7), 0 4px 8px rgba(220,12,28,.28);
    opacity: 1;
    animation: none;
}
.photographic-glass .frame-brand strong { font-weight: 750; }
.photographic-glass .frame-brand span { color: #5c5156; }
.photographic-glass .member-dashboard-band { margin-top: 16px; }
.grey-site.glass-depth.photographic-glass :is(.category-mega, .account-mega, .member-dashboard-menu, .nav-dropdown) {
    border: 1px solid rgba(255,255,255,.94);
    border-radius: 16px;
    color: var(--frame-ink);
    background: linear-gradient(125deg, rgba(255,255,255,.97), rgba(250,246,245,.94));
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: var(--photo-shadow);
}

/* Let the room show between independent sheets instead of stacking full-page blur. */
.grey-site.glass-depth.photographic-glass main > :is(
    .content-section, .process-overview, .process-template-section, .capability-section,
    .project-section, .contact-layout, .auth-page, .article-page, .process-builder, .reference-tool,
    .json-tool, .password-tool, .date-tool, .ico-tool, .colour-tool, .encoder-tool,
    .comparer-tool, .downloader-tool, .css-tool, .margin-tool,
    .admin-shell, .account-shell, .invoice-screen-shell, .google-admin, .lottery-admin, .category-admin
),
.grey-site.glass-depth.photographic-glass :is(.article-reading, .article-comments, .article-related, .article-accreditations, .article-support) {
    background: transparent !important;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.photographic-glass main > :is(.content-section, .process-overview, .process-template-section, .capability-section, .project-section, .contact-layout, .auth-page) {
    padding: clamp(24px, 4vw, 52px) var(--photo-gutter);
}
.grey-site.glass-depth.photographic-glass :is(.json-workbench, .comparer-workbench, .margin-workspace, .css-workspace, .ai-grid) {
    background: transparent;
    gap: 22px;
}
.photographic-glass .page-geometry { display: none; }
.grey-site.glass-depth.photographic-glass main > .process-builder { padding: 0 0 48px; }
.photographic-glass .process-builder > :is(.process-builder-progress, .process-payment-panel) {
    width: var(--photo-banner-width);
    margin-inline: auto;
}

/* One soft white bed keeps unboxed administration controls readable. */
.grey-site.glass-depth.photographic-glass.admin-site main > .wrap.admin-shell {
    width: var(--photo-banner-width);
    margin: 24px auto;
    padding: clamp(16px, 2.5vw, 28px);
    border: 1px solid rgba(255,255,255,.74);
    border-radius: var(--photo-panel-radius);
    background: rgba(255,255,255,.5) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px -20px rgba(66,40,43,.28);
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
}
.grey-site.glass-depth.photographic-glass[data-background-section='account'] main > :is(.wrap.account-shell, .wrap.invoice-screen-shell, .wrap.admin-shell) {
    width: var(--photo-banner-width);
}

/* The leading sheet carries a steel foot and a restrained, reflected LED edge. */
.grey-site.glass-depth.photographic-glass :is(
    .page-intro, .page-hero, .google-intro, .lottery-intro, .twilio-intro,
    .article-page-header, .auth-intro, .process-builder-header,
    .json-tool-header, .password-tool-header, .date-tool-header, .colour-tool-header,
    .encoder-tool-header, .comparer-tool-header, .ico-tool-header, .downloader-tool-header,
    .css-tool-header, .margin-tool-header, .margin-header, .ai-head, .bgr-header, .reference-header
) {
    position: relative;
    overflow: visible;
    width: var(--photo-banner-width);
    min-height: var(--photo-heading-height) !important;
    margin: 26px auto 30px;
    padding: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 52px);
    border: 5px solid rgba(255,255,255,.7);
    border-radius: var(--photo-panel-radius);
    color: var(--frame-ink);
    background-color: rgba(255,255,255,.68) !important;
    background-image: var(--photo-shine) !important;
    background-clip: padding-box;
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
}
/* Tool headers sit inside full-width sections; give the workbench the same
   single inset rather than adding another gutter around its header. */
.grey-site.glass-depth.photographic-glass main > :is(
    .json-tool, .password-tool, .date-tool, .ico-tool, .colour-tool, .encoder-tool,
    .comparer-tool, .downloader-tool, .css-tool, .margin-tool,
    #ai-screenshot-redactor, #ai-field-mapper, #ai-audio-transcriber, #ai-background-remover,
    .reference-tool
) { padding-inline: 0; }
.grey-site.glass-depth.photographic-glass :is(
    .json-workbench, .password-settings, .date-adjust-workspace, .ico-workspace,
    .encoder-workbench, .comparer-workbench, .downloader-workspace, .css-workspace,
    .margin-workspace, .ai-grid, .bgr-workspace, .colour-fields, .process-builder-layout
) { padding-inline: var(--photo-gutter); }
.grey-site.glass-depth.photographic-glass :is(.page-intro, .page-hero, .google-intro, .lottery-intro, .twilio-intro, .article-page-header, .auth-intro, .process-builder-header)::after {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: auto 14px -11px;
    height: 9px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 0 0 6px 6px;
    background: linear-gradient(180deg, #fcfbfa 0%, #bab2b1 25%, #dfdcda 46%, #aba3a2 60%, #ece8e7 80%, #8e8181 100%);
    box-shadow: 0 2px 0 rgba(237,32,44,.85), 0 5px 7px rgba(221,19,32,.32), 0 14px 20px -10px rgba(100,43,44,.32);
}
.photographic-glass :is(.page-intro h1, .page-hero h1, .google-intro h1, .lottery-intro h1, .twilio-intro h1, .article-page-header h1, .auth-intro h1) {
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -.035em;
    text-transform: none;
}
.photographic-glass .article-back { margin-bottom: 24px; }
.photographic-glass .page-intro-side > p { font-size: .98rem; line-height: 1.75; color: #403a3d; }
.photographic-glass :is(h1, h2, h3, h4, .mesh-statement) { text-shadow: none !important; }
.photographic-glass :is(h2, h3, h4) { font-weight: 650; }
.photographic-glass .section-index { color: #8f1821; letter-spacing: .06em; }
.grey-site.glass-depth.photographic-glass main :is(.page-intro, .page-hero, .google-intro, .lottery-intro, .twilio-intro, .account-intro) :is(h1, h2, p) {
    color: #302a2e !important;
    text-shadow: none !important;
}
.grey-site.glass-depth.photographic-glass main :is(.page-intro, .page-hero) :is(.section-index, .eyebrow) { color: #92121c !important; }
.grey-site.glass-depth.photographic-glass .google-intro .google-connection { color: #43383e !important; }
.grey-site.glass-depth.photographic-glass .google-intro .google-connection.is-connected { color: #18664f !important; }
.photographic-glass :is(.page-hero, .google-intro, .lottery-intro, .twilio-intro) > .wrap { width: 100%; padding: 0; margin: 0; }
.grey-site.glass-depth.photographic-glass .page-intro { align-items: center; }
.grey-site.glass-depth.photographic-glass .page-intro .section-index { margin-top: 0; }

/* Individual content sheets: white readable centre, rounded clear optical edge. */
.grey-site.glass-depth.photographic-glass :is(
    .service-grid > article, .article-card, .capability-grid > article, .project-list > article,
    .login-inline, .protected-note, .comment, .admin-panel, .admin-form,
    .admin-stats > article, .comment-moderation > article, .note-search-results > li,
    .dashboard-filter-panel, .comment-filter-panel, .dashboard-tools, .auth-benefits,
    .twilio-status, .twilio-section, .account-panel, .issue-comment, .contact-form,
    .comment-form, .accreditation-provider, .date-endpoint, .date-adjust-form > section,
    .date-world-source, .date-world-locations, .password-length-panel,
    .password-character-panel, .password-advanced-panel, .ico-source-panel,
    .ico-options-panel, .encoder-panel, .colour-fields > article, .json-pane,
    .comparer-pane, .downloader-source-panel, .downloader-output-panel, .margin-inputs,
    .margin-results, .css-preview-column, .css-controls, .ai-pane, .bgr-pane,
    .portfolio-entry, .process-template-card, .process-builder-preview,
    .admin-report-metrics > article, .twilio-metrics > article, .etoro-stat,
    .related-article-list, .contact-aside, .subscription-section,
    .process-builder-map, .process-builder-form, .process-preview-purchase, .process-template-row,
    .workspace-summary, .workspace-raise-issue, .issue-layout, .issue-discussion, .issue-table,
    .process-core-track > article, .google-section, .lottery-section, .google-stats > article,
    .note-search-options, .reference-toolbar, .article-comments, .article-support
),
.grey-site.glass-depth.photographic-glass[data-page-template='portfolio'] .portfolio-timeline--compact .portfolio-entry {
    border: 5px solid transparent;
    border-radius: var(--photo-panel-radius);
    background-color: var(--photo-fill) !important;
    background-image: var(--photo-shine), var(--photo-rim) !important;
    background-size: 100% 100%;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    color: var(--frame-ink);
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: var(--photo-frost) !important;
    backdrop-filter: var(--photo-frost) !important;
    text-shadow: none;
}
.grey-site.glass-depth.photographic-glass :is(.account-panel, .project-list.tool-list > article):hover {
    background-color: var(--photo-fill) !important;
    background-image: var(--photo-shine), var(--photo-rim) !important;
}
.photographic-glass :is(.article-card, .portfolio-entry) { overflow: hidden; }
.grey-site.glass-depth.photographic-glass .article-archive .article-card-body,
.grey-site.glass-depth.photographic-glass .portfolio-entry-copy {
    background: rgba(255,255,255,.7) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.photographic-glass .article-card-body { padding: 24px; }
.photographic-glass :is(.article-card h3, .tool-detail h2) { line-height: 1.24; }
.photographic-glass :is(.article-image img, .article-feature img) { filter: none; }
.photographic-glass .article-image::after { background: none; }
.photographic-glass .contact-aside { padding: 30px; align-self: start; }
.photographic-glass :is(.subscription-section, .note-search-options, .google-section, .lottery-section) { padding: 24px; }
.photographic-glass #note-search-page > .note-search-options,
.photographic-glass .reference-tool > :is(.reference-toolbar, .reference-results) {
    width: var(--photo-banner-width);
    margin: 24px auto;
}
.photographic-glass .subscription-section + .subscription-section { padding-top: 24px; }
.photographic-glass .process-core-track { gap: 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.photographic-glass .process-core-track::before { display: none; }
.grey-site.glass-depth.photographic-glass :is(.process-core-heading, .process-template-heading, .list-heading) {
    padding: 22px;
    border: 1px solid rgba(255,255,255,.84);
    border-radius: 16px;
    background: rgba(255,255,255,.76);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 #fff, 0 6px 15px -12px rgba(71,41,47,.3);
}
.photographic-glass .process-core-heading { margin: 0 0 26px; }
.photographic-glass .process-core-heading .section-index { margin: 0; }
.grey-site.glass-depth.photographic-glass .process-builder-map button[data-builder-goto] {
    border: 1px solid rgba(143,121,126,.24);
    border-radius: 11px;
    color: #302a2e !important;
    background: rgba(255,255,255,.76) !important;
    box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(71,41,47,.08) !important;
}
.grey-site.glass-depth.photographic-glass .process-builder-map button[data-builder-goto][aria-current='step'] {
    color: #fff !important;
    background: linear-gradient(165deg, #b31822, #840a13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px rgba(104,17,28,.2) !important;
}
.photographic-glass .process-builder-map button[data-builder-goto][aria-current='step'] small { color: #fff !important; }
.grey-site.glass-depth.photographic-glass :is(#note-search-page, #ai-screenshot-redactor, #ai-field-mapper, #ai-audio-transcriber, #ai-background-remover) {
    background: transparent;
    box-shadow: none;
}

/* Prose is denser than the decorative rim; no text is blurred or rasterised. */
.grey-site.glass-depth.photographic-glass.public-site .article-page > .article-summary-grid {
    width: var(--photo-banner-width);
    margin: 28px auto;
    border: 5px solid rgba(255,255,255,.76);
    border-radius: var(--photo-panel-radius);
    background: var(--photo-fill) !important;
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: var(--photo-frost);
    backdrop-filter: var(--photo-frost);
}
.grey-site.glass-depth.photographic-glass .article-reading { padding: 22px var(--photo-gutter) 42px; }
.grey-site.glass-depth.photographic-glass.public-site .article-reading > .article-body.live-article-body {
    width: min(100%, 1040px);
    padding: clamp(24px, 4vw, 54px);
    border: 5px solid rgba(255,255,255,.84);
    border-radius: 22px;
    color: #302a2e;
    background: rgba(255,255,255,.93) !important;
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 1rem;
    line-height: 1.85;
}
.photographic-glass .live-article-body > :first-child { margin-top: 0; }
.grey-site.glass-depth.photographic-glass .live-article-body a { color: #97131d; }
.grey-site.glass-depth.photographic-glass .article-page > section.article-credit {
    width: var(--photo-banner-width);
    margin: 26px auto;
    border: 5px solid rgba(255,255,255,.8);
    border-radius: var(--photo-panel-radius);
    background: rgba(255,255,255,.78) !important;
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: var(--photo-frost);
    backdrop-filter: var(--photo-frost);
}
.grey-site.glass-depth.photographic-glass .article-comments .comment-content {
    background: rgba(255,255,255,.94);
    color: #302a2e;
    border-radius: 14px;
}
.grey-site.glass-depth.photographic-glass .article-page > section:is(.article-comments, .article-support) {
    width: var(--photo-banner-width);
    margin: 26px auto;
    padding: clamp(22px, 3vw, 42px);
    border-radius: var(--photo-panel-radius);
}
/* Reader support uses clear glass; the discussion and individual comments are frosted. */
.grey-site.glass-depth.photographic-glass .article-page > .article-support {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.photographic-glass .article-feature {
    width: var(--photo-banner-width);
    margin: 26px auto;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 5px solid rgba(255,255,255,.82);
    border-radius: var(--photo-panel-radius);
    box-shadow: var(--photo-shadow);
}

/* Frost the surroundings; fields, code and table cells keep a firm white bed. */
.grey-site.glass-depth.photographic-glass :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']):not([type='color']), textarea, select) {
    color: #292427 !important;
    background: rgba(255,255,255,.89) !important;
    border: 1px solid rgba(128,113,116,.35) !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px 3px rgba(77,55,57,.1), 0 1px 0 rgba(255,255,255,.98) !important;
    text-shadow: none !important;
}
.photographic-glass :is(input, textarea)::placeholder { color: #74696e; opacity: 1; }
.photographic-glass :is(input, textarea, select):focus-visible {
    outline: 2px solid #a3101d;
    outline-offset: 3px;
}
.photographic-glass :is(input[type='checkbox'], input[type='radio'], input[type='range']) { accent-color: #b91120; }
.grey-site.glass-depth.photographic-glass :is(.json-output-highlight, .syntax-pretty, .live-article-body pre.syntax-pretty) {
    color: #302a2e;
    background: #fcfaf9 !important;
    box-shadow: inset 0 1px 3px rgba(61,43,47,.06);
}
.photographic-glass :is(.dashboard-table-scroll, .google-table-scroll) {
    border: 3px solid rgba(255,255,255,.82);
    border-radius: 14px;
    background: rgba(255,255,255,.88);
    box-shadow: inset 0 1px 0 #fff, 0 9px 22px -16px rgba(71,40,47,.3);
}
.grey-site.glass-depth.photographic-glass :is(.dashboard-table-scroll, .google-table-scroll) thead th {
    color: #3a3035;
    background: linear-gradient(#fff, #ede7e5);
    border-bottom: 1px solid rgba(133,26,35,.32);
}
.grey-site.glass-depth.photographic-glass :is(.dashboard-table-scroll, .google-table-scroll) tbody :is(th, td) {
    background: rgba(255,255,255,.9);
}
.grey-site.glass-depth.photographic-glass :is(.dashboard-table-scroll, .google-table-scroll) tbody tr:nth-child(even) > * {
    background: rgba(245,240,239,.94);
}

/* Supporting sections and the footer are matching glass, not dark opaque bands. */
.grey-site.glass-depth.photographic-glass .site-frame > :is(section.insight-band, section.data-strip, .frame-footer, .advert-privacy-links) {
    width: var(--photo-banner-width);
    margin: 20px auto;
    border: 1px solid rgba(255,255,255,.83);
    border-radius: var(--photo-panel-radius);
    background: var(--photo-shine), rgba(255,255,255,.8);
    color: #302a2e;
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.grey-site.glass-depth.photographic-glass .site-frame > .insight-band :is(h2, p, a, time) { color: #3b3035; text-shadow: none; }
.grey-site.glass-depth.photographic-glass .site-frame > .insight-band .insight-copy h2,
.grey-site.glass-depth.photographic-glass .site-frame > .insight-band .insight-copy > p:last-child,
.grey-site.glass-depth.photographic-glass .site-frame > .insight-band .insight-index > a,
.grey-site.glass-depth.photographic-glass .site-frame > .insight-band .insight-tags a {
    color: #3b3035;
    text-shadow: none;
}
.grey-site.glass-depth.photographic-glass .site-frame > .insight-band :is(.section-index, .insight-index time) { color: #92121c; }
.grey-site.glass-depth.photographic-glass .site-frame > section.data-strip {
    color: #fff;
    border-color: rgba(255,225,226,.74);
    background: linear-gradient(120deg, rgba(255,255,255,.25), transparent 34%, rgba(255,255,255,.08) 75%), linear-gradient(155deg, rgba(181,16,32,.93), rgba(124,8,20,.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.76), inset 0 -2px 0 rgba(73,4,12,.45), 0 5px 16px -8px rgba(180,10,25,.45), var(--photo-shadow);
}
.grey-site.glass-depth.photographic-glass .site-frame > .data-strip :is(strong, span) {
    color: #fff;
    text-shadow: 0 2px 0 #760612, 1px 1px 0 #760612, -1px 1px 0 #760612;
}
.grey-site.glass-depth.photographic-glass .site-frame > .data-strip > div { border-color: rgba(255,255,255,.24); }
.grey-site.glass-depth.photographic-glass .site-frame > .insight-band .insight-tags a { background: rgba(255,255,255,.78); }
.photographic-glass .frame-footer { padding: 22px 28px; }
.grey-site.glass-depth.photographic-glass .site-frame > .frame-footer a { color: #3b3035; }
.photographic-glass .advert-privacy-links { padding: 12px; }

/* Advert backgrounds follow the same inset glass bands; the served unit
   retains its own size and its existing hidden/unfilled behaviour. */
.grey-site.glass-depth.photographic-glass .site-frame .site-ad[data-ad-placement] {
    border: 1px solid rgba(255,255,255,.74);
    border-radius: var(--photo-panel-radius);
    color: #3b3035;
    background: var(--photo-shine), rgba(255,255,255,.32) !important;
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.grey-site.glass-depth.photographic-glass :is(main, .site-frame, .article-page, .reference-tool) > .site-ad {
    width: var(--photo-banner-width);
    margin: 24px auto;
}
.grey-site.glass-depth.photographic-glass .site-frame .site-ad .site-ad-inner {
    border: 3px solid rgba(255,255,255,.7);
    border-radius: 14px;
    background: linear-gradient(125deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 8px 20px -16px rgba(67,41,47,.3);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.grey-site.glass-depth.photographic-glass .site-ad :is(.site-ad-label, .adsterra-consent) { color: #3b3035; }
.photographic-glass .flash { background: rgba(255,255,255,.94); border-left: 4px solid #b40f1d; color: #31272c; border-radius: 10px; }
.grey-site.glass-depth.photographic-glass :is(.login-modal, #site-search-dialog, .cookie-consent, .subscription-sms-dialog) {
    color: #302a2e;
    border: 4px solid rgba(255,255,255,.86);
    border-radius: 20px;
    background: linear-gradient(125deg, rgba(255,255,255,.98), rgba(248,240,238,.95));
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.photographic-glass :is(.login-modal, .cookie-consent) :is(h2, p, a, label) { color: #302a2e; }
.photographic-glass .modal-backdrop { background: rgba(52,29,32,.3); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.photographic-glass .note-search-dialog::backdrop { background: rgba(52,29,32,.3); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }

/* Keep the existing scroll-linked portfolio film as a subtle moving reflection. */
.grey-site.glass-depth.photographic-glass[data-page-template='portfolio'] main > .portfolio-timeline-section {
    padding-inline: var(--photo-gutter);
}
.grey-site.glass-depth.photographic-glass[data-page-template='portfolio']::before { z-index: -2; }
.grey-site.glass-depth.photographic-glass[data-page-template='portfolio'] .portfolio-video-layer {
    z-index: -1;
    opacity: .16;
    filter: saturate(.15);
    mix-blend-mode: multiply;
}
.grey-site.glass-depth.photographic-glass[data-page-template='portfolio'] .portfolio-timeline--compact > .portfolio-timeline-band {
    padding-inline: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.grey-site.glass-depth.photographic-glass[data-page-template='portfolio'] .portfolio-timeline--compact .portfolio-scene { width: 100%; }
.grey-site.glass-depth.photographic-glass[data-page-template='portfolio'] .portfolio-motion-toggle:not([hidden]) {
    color: #302a2e !important;
    background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.7)) !important;
    border: 1px solid rgba(135,117,120,.42);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(93,73,78,.15), 0 3px 7px rgba(67,35,42,.15);
}
.photographic-glass .portfolio-motion-toggle[hidden] { display: none !important; }

@media (max-width: 900px) {
    .grey-site.glass-depth.photographic-glass { --photo-heading-height: 480px; }
    .photographic-glass .site-stage { padding: 10px; }
    .grey-site.glass-depth.photographic-glass .frame-header { border-radius: 12px; }
    .grey-site.glass-depth.photographic-glass .frame-nav.is-open { background: rgba(255,255,255,.97); border-radius: 0 0 14px 14px; }
    .grey-site.glass-depth.photographic-glass :is(.page-intro, .page-hero, .google-intro, .lottery-intro, .twilio-intro, .article-page-header, .auth-intro, .process-builder-header) { margin: 20px auto 26px; padding: 26px 20px; gap: 26px; }
    .photographic-glass :is(.page-intro h1, .page-hero h1, .google-intro h1, .lottery-intro h1, .twilio-intro h1, .article-page-header h1, .auth-intro h1) { font-size: clamp(2rem, 7vw, 3rem); }
    .grey-site.glass-depth.photographic-glass :is(.json-tool-header, .password-tool-header, .date-tool-header, .colour-tool-header, .encoder-tool-header, .comparer-tool-header, .ico-tool-header, .downloader-tool-header, .css-tool-header, .margin-tool-header, .margin-header, .ai-head, .bgr-header, .reference-header) { margin: 18px auto; padding: 22px 18px; }
}
@media (max-width: 600px) {
    .grey-site.glass-depth.photographic-glass { --photo-frost: blur(12px); --photo-gutter: 4px; --photo-heading-height: 620px; }
    .photographic-glass .site-stage { padding: 8px; }
    .grey-site.glass-depth.photographic-glass main > :is(.content-section, .process-overview, .process-template-section, .capability-section, .project-section, .contact-layout, .auth-page) { padding: 22px var(--photo-gutter); }
    .grey-site.glass-depth.photographic-glass.public-site .article-reading > .article-body.live-article-body { padding: 22px 16px; border-width: 3px; }
    .photographic-glass .article-card-body { padding: 20px; }
    .photographic-glass .article-page-meta { flex-wrap: wrap; gap: 8px 18px; }
    .grey-site.glass-depth.photographic-glass.admin-site main > .wrap.admin-shell { padding: 14px; }
    .photographic-glass .contact-aside { padding: 24px; }
    .photographic-glass .frame-footer { padding: 20px; }
}
@media (max-width: 360px) {
    .grey-site.glass-depth.photographic-glass { --photo-heading-height: 680px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .grey-site.glass-depth.photographic-glass { --photo-fill: rgba(255,255,255,.96); }
    .grey-site.glass-depth.photographic-glass.admin-site main > .wrap.admin-shell { background: rgba(255,255,255,.96) !important; }
    .grey-site.glass-depth.photographic-glass .site-frame .site-ad[data-ad-placement] { background: rgba(255,255,255,.96) !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .grey-site.glass-depth.photographic-glass { --photo-fill: #fff; --photo-frost: none; }
    .photographic-glass *, .photographic-glass *::before, .photographic-glass *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .grey-site.glass-depth.photographic-glass.admin-site main > .wrap.admin-shell { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .grey-site.glass-depth.photographic-glass .site-frame .site-ad[data-ad-placement] { background: #fff !important; }
}
@media print {
    .grey-site.glass-depth.photographic-glass { background: #fff !important; color: #000; }
    .grey-site.glass-depth.photographic-glass::before { display: none; }
    .photographic-glass *, .photographic-glass *::before, .photographic-glass *::after { box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .photographic-glass :is(.page-intro, .article-page-header, .article-reading, .live-article-body, .account-panel, .admin-panel, .article-credit) { background: #fff !important; border-color: #ddd !important; }
    .grey-site.glass-depth.photographic-glass.admin-site main > .wrap.admin-shell { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .grey-site.glass-depth.photographic-glass .site-frame > section.data-strip { background: #fff; }
    .grey-site.glass-depth.photographic-glass .site-frame > .data-strip :is(strong, span) { color: #000; text-shadow: none; }
    .photographic-glass :is(.page-intro, .page-hero, .google-intro, .lottery-intro, .twilio-intro, .article-page-header, .auth-intro, .process-builder-header)::after { display: none; }
}