/* Sannidhi Palette and type locked to the Sannidhi brand system. Light surfaces lead throughout. */ :root { /* Sannidhi locked palette, mapped onto the site's original token roles. */ --ink: #1C1A17; --slate: #3D3830; --steel: #7A7269; --copper: #5A7248; --copper-deep: #4A5E3A; --copper-tint: #EDE8DF; --chalk: #FAF8F4; --paper: #F5F0E8; --mist: #EDE8DF; --line: rgba(28, 26, 23, 0.16); --white: #FAF8F4; --sand: #C4B99A; --gold: #B5892A; --serif: "Playfair Display", Georgia, "Times New Roman", serif; --sans: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "DM Mono", "Courier New", monospace; --wrap: 1120px; --gap: clamp(1.25rem, 3vw, 2.5rem); --radius: 14px; /* ---------- Type scale ---------- Every static step is a whole pixel value at the 16px root, so the scale stays exact rather than accumulating rounding drift. 2xs 11 xs 12 sm 13 base 14 md 15 lg 16 body 17 xl 19 2xl 22 3xl 28 4xl 32 */ --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 0.9375rem; --text-lg: 1rem; --text-body: 1.0625rem; --text-xl: 1.1875rem; --text-2xl: 1.375rem; --text-3xl: 1.75rem; --text-4xl: 2rem; /* Fluid ranges for the handful of elements that scale with the viewport. */ --text-h1-min: 2.125rem; --text-h1-max: 3.5rem; --text-h2-min: 1.625rem; --text-h2-max: 2.375rem; --text-lead-min: 1.125rem; --text-lead-max: 1.3125rem; /* Line height, by role rather than by element. */ --lh-tight: 1; /* single glyph or icon-scale numeral */ --lh-num: 1.1; /* short stat numerals, a few characters wide */ --lh-heading: 1.15; /* h1 through h4 */ --lh-control: 1.2; /* single line interactive UI: buttons, nav, inputs, labels */ --lh-snug: 1.35; /* short serif pull quotes */ --lh-body: 1.6; /* running paragraph copy and chat bubbles */ /* Letter spacing, by role. Uppercase micro labels get one shared, size correlated set rather than a different value per component. */ --ls-tight: -0.02em; /* h1 */ --ls-snug: -0.012em; /* h2 */ --ls-none: 0em; /* h3, h4, body, standard UI */ --ls-label-tight: 0.06em; /* uppercase labels at 13px */ --ls-label: 0.08em; /* uppercase labels at 12px */ --ls-label-wide: 0.1em; /* uppercase labels at 11px */ /* Motion. Two durations, both inside the 200 to 300ms window, one easing curve with no overshoot anywhere on the site. */ --motion-fast: 200ms; --motion-base: 260ms; --motion-ease: cubic-bezier(0.4, 0, 0.2, 1); --reveal-distance: 14px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--chalk); color: var(--ink); font-family: var(--sans); font-size: var(--text-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } img, svg, canvas { max-width: 100%; display: block; } a { color: var(--copper-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--motion-fast) var(--motion-ease); } a:hover { color: var(--ink); } :focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--chalk); padding: .75rem 1rem; z-index: 200; } .skip:focus { left: 0; } /* ---------- Scroll reveal ---------- Elements are only ever hidden once JS confirms it is running and the person has not asked for reduced motion, so content is never at risk of staying invisible. One reveal per element, never re-hidden. */ body.reveal-ready .reveal { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); } body.reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--ls-none); margin: 0 0 .6em; } h1 { font-size: clamp(var(--text-h1-min), 5.2vw, var(--text-h1-max)); letter-spacing: var(--ls-tight); } h2 { font-size: clamp(var(--text-h2-min), 3.4vw, var(--text-h2-max)); letter-spacing: var(--ls-snug); } h3 { font-size: clamp(var(--text-xl), 2.2vw, var(--text-2xl)); } h4 { font-size: var(--text-lg); } p { margin: 0 0 1.1em; color: var(--slate); } .lead { font-size: clamp(var(--text-lead-min), 2.1vw, var(--text-lead-max)); line-height: var(--lh-snug); color: var(--ink); } .eyebrow { font-family: var(--sans); font-size: var(--text-xs); line-height: var(--lh-control); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--copper-deep); font-weight: 700; margin: 0 0 .9rem; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(250, 248, 244, 0.92); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem var(--gap); max-width: var(--wrap); margin: 0 auto; } .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; transition: opacity var(--motion-fast) var(--motion-ease); } .brand:hover { opacity: .8; } .brand img { width: 38px; height: 38px; } .brand-text { display: flex; flex-direction: column; line-height: var(--lh-tight); } .brand-name { font-family: var(--serif); font-size: var(--text-2xl); line-height: var(--lh-heading); font-weight: 700; color: var(--ink); } .brand-sub { font-size: var(--text-2xs); line-height: var(--lh-control); letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--copper-deep); margin-top: .28rem; font-weight: 700; } .nav { display: flex; align-items: center; gap: 1.6rem; } .nav a { color: var(--ink); text-decoration: none; font-size: var(--text-md); line-height: var(--lh-control); transition: color var(--motion-fast) var(--motion-ease); } .nav a:hover, .nav a[aria-current="page"] { color: var(--copper-deep); } .nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; cursor: pointer; color: var(--ink); font-size: var(--text-md); line-height: var(--lh-control); transition: border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); } .nav-toggle:hover { border-color: var(--copper); color: var(--copper-deep); } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--sans); font-size: var(--text-md); line-height: var(--lh-control); font-weight: 700; padding: .82rem 1.5rem; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); } .btn-primary { background: var(--copper); color: var(--white); } .btn-primary:hover { background: var(--copper-deep); color: var(--white); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--copper); color: var(--copper-deep); } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .hero h1 { margin-bottom: .5em; } .hero-sub { font-size: clamp(var(--text-lead-min), 2vw, var(--text-lead-max)); line-height: var(--lh-snug); color: var(--slate); max-width: 34ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } .hero-note { margin-top: 1.4rem; font-size: var(--text-base); line-height: var(--lh-body); color: var(--steel); } .canvas-frame { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--white), var(--paper)); overflow: hidden; aspect-ratio: 4 / 3; } #crossing { width: 100%; height: 100%; display: block; } .canvas-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: .6rem .9rem; font-size: var(--text-2xs); line-height: var(--lh-control); letter-spacing: var(--ls-label-wide); text-transform: uppercase; font-weight: 700; color: var(--steel); background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9)); } .canvas-caption span:last-child { color: var(--copper-deep); } /* ---------- Sections ---------- */ .section { padding: clamp(3.25rem, 6vw, 4.75rem) 0; } .section-paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-mist { background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-head { max-width: 62ch; margin-bottom: 2.5rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.4rem; } .card h3 { margin-bottom: .45em; } .card p:last-child { margin-bottom: 0; } .card-step { font-family: var(--serif); font-size: var(--text-3xl); color: var(--copper); line-height: var(--lh-tight); margin-bottom: .5rem; } .badge { display: inline-block; background: var(--copper-tint); color: var(--copper-deep); font-size: var(--text-xs); line-height: var(--lh-control); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; margin-bottom: 1rem; } /* ---------- Door list ---------- */ .door { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); align-items: start; } .door:last-child { border-bottom: none; } .door-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--copper-tint); display: grid; place-items: center; color: var(--copper-deep); font-family: var(--serif); font-weight: 700; } .door h3 { margin-bottom: .3em; } .door p { margin-bottom: 0; } /* ---------- Photo placeholders ---------- */ .photo-ph { background: repeating-linear-gradient(45deg, var(--mist), var(--mist) 12px, var(--paper) 12px, var(--paper) 24px); border: 1px dashed var(--line); border-radius: var(--radius); display: grid; place-items: center; text-align: center; color: var(--steel); font-size: var(--text-sm); line-height: var(--lh-body); letter-spacing: var(--ls-label-tight); text-transform: uppercase; font-weight: 700; padding: 1.5rem; min-height: 240px; } /* ---------- Headshot ---------- */ .headshot { margin: 0; } .headshot img { width: 100%; max-width: 380px; height: auto; border-radius: var(--radius); display: block; } .headshot figcaption { margin-top: 0.7rem; font-family: var(--mono); font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper-deep); font-weight: 500; } /* ---------- Case study ---------- */ .pull { border-left: 3px solid var(--copper); padding: .3rem 0 .3rem 1.2rem; font-family: var(--serif); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--ink); margin: 2.2rem 0; } .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 2.1rem 0; } .metric { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; } .metric .k { font-family: var(--serif); font-size: var(--text-3xl); color: var(--copper-deep); line-height: var(--lh-num); } .metric .v { font-size: var(--text-sm); line-height: var(--lh-control); color: var(--steel); margin-top: .35rem; } .table-wrap { overflow-x: auto; margin: 1.6rem 0; } table { width: 100%; border-collapse: collapse; font-size: var(--text-md); line-height: var(--lh-body); background: var(--white); } th, td { text-align: left; padding: .8rem .9rem; border: 1px solid var(--line); vertical-align: top; } th { background: var(--mist); font-family: var(--sans); font-size: var(--text-sm); line-height: var(--lh-control); letter-spacing: var(--ls-label-tight); text-transform: uppercase; color: var(--ink); } td { color: var(--slate); } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); padding: .3rem 0; } .faq summary { cursor: pointer; padding: 1.05rem 0; font-family: var(--serif); font-size: var(--text-body); line-height: var(--lh-heading); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; transition: color var(--motion-fast) var(--motion-ease); } .faq summary:hover { color: var(--copper-deep); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--copper); font-size: var(--text-2xl); line-height: var(--lh-tight); flex-shrink: 0; display: inline-block; transition: transform var(--motion-base) var(--motion-ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding-bottom: .9rem; margin-bottom: 0; } /* ---------- Form ---------- */ .form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); } .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: var(--text-base); line-height: var(--lh-control); font-weight: 700; color: var(--ink); margin-bottom: .38rem; } .field input, .field select, .field textarea { width: 100%; padding: .78rem .9rem; font-family: var(--sans); font-size: var(--text-lg); line-height: var(--lh-body); border: 1px solid var(--line); border-radius: 9px; background: var(--chalk); color: var(--ink); transition: border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease); } .field textarea { min-height: 120px; resize: vertical; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--copper); background: var(--white); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { margin-top: 1rem; font-size: var(--text-base); line-height: var(--lh-body); } .form-status.ok { color: #2F6B4F; } .form-status.err { color: #9B3A2C; } /* ---------- Footer ---------- */ .site-footer { background: var(--paper); border-top: 1px solid var(--line); padding: 2.6rem 0 2rem; margin-top: 1rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; } .footer-grid h4 { font-family: var(--sans); font-size: var(--text-xs); line-height: var(--lh-control); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--copper-deep); margin-bottom: .8rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: .5rem; } .footer-grid a { color: var(--slate); text-decoration: none; font-size: var(--text-md); line-height: var(--lh-body); } .footer-grid a:hover { color: var(--copper-deep); } .footer-bottom { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: var(--text-sm); line-height: var(--lh-control); color: var(--steel); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; } /* ---------- Chat widget ---------- */ .chat-launch { position: fixed; right: 20px; bottom: 20px; z-index: 150; background: var(--copper); color: var(--white); border: none; border-radius: 999px; padding: .85rem 1.3rem; font-family: var(--sans); font-weight: 700; font-size: var(--text-md); line-height: var(--lh-control); cursor: pointer; box-shadow: 0 6px 22px rgba(38,49,58,.18); display: flex; align-items: center; gap: .5rem; transition: background var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); } .chat-launch:hover { background: var(--copper-deep); transform: translateY(-1px); } .chat-panel { position: fixed; right: 20px; bottom: 20px; z-index: 160; width: min(380px, calc(100vw - 40px)); height: min(560px, calc(100vh - 40px)); background: var(--white); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 50px rgba(38,49,58,.22); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px) scale(.98); transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease), visibility 0s linear var(--motion-base); } .chat-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease), visibility 0s linear 0s; } .chat-head { background: var(--ink); color: var(--chalk); padding: .9rem 1rem; display: flex; justify-content: space-between; align-items: center; } .chat-head strong { font-family: var(--serif); font-size: var(--text-lg); line-height: var(--lh-heading); } .chat-head small { display: block; font-size: var(--text-xs); line-height: var(--lh-control); color: #B9C4CB; margin-top: .1rem; } .chat-close { background: none; border: none; color: var(--chalk); font-size: var(--text-2xl); line-height: var(--lh-tight); cursor: pointer; padding: 0 .2rem; transition: opacity var(--motion-fast) var(--motion-ease); opacity: .85; } .chat-close:hover { opacity: 1; } .chat-log { flex: 1; overflow-y: auto; padding: 1rem; background: var(--chalk); } .msg { margin-bottom: .9rem; font-size: var(--text-md); line-height: var(--lh-body); } .msg .who { font-size: var(--text-2xs); line-height: var(--lh-control); letter-spacing: var(--ls-label-wide); text-transform: uppercase; font-weight: 700; color: var(--steel); margin-bottom: .25rem; } .msg.bot .bubble { background: var(--white); border: 1px solid var(--line); } .msg.you .bubble { background: var(--copper-tint); border: 1px solid #E3CDBC; } .bubble { padding: .7rem .85rem; border-radius: 12px; color: var(--ink); } .chat-suggest { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; background: var(--chalk); } .chat-suggest button { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .7rem; font-size: var(--text-sm); line-height: var(--lh-control); color: var(--ink); cursor: pointer; font-family: var(--sans); transition: border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); } .chat-suggest button:hover { border-color: var(--copper); color: var(--copper-deep); } .chat-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--line); background: var(--white); } .chat-form input { flex: 1; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 9px; font-family: var(--sans); font-size: var(--text-md); line-height: var(--lh-body); background: var(--chalk); color: var(--ink); transition: border-color var(--motion-fast) var(--motion-ease); } .chat-form input:focus { border-color: var(--copper); } .chat-form button { background: var(--copper); color: var(--white); border: none; border-radius: 9px; padding: .7rem 1rem; font-weight: 700; font-size: var(--text-md); line-height: var(--lh-control); cursor: pointer; font-family: var(--sans); transition: background var(--motion-fast) var(--motion-ease); } .chat-form button:hover:not(:disabled) { background: var(--copper-deep); } .chat-form button:disabled { background: var(--steel); cursor: default; } .chat-foot { font-size: var(--text-2xs); line-height: var(--lh-control); color: var(--steel); text-align: center; padding: .5rem; background: var(--white); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .canvas-frame { order: -1; aspect-ratio: 16 / 11; } .grid-3, .metric-grid { grid-template-columns: 1fr; gap: 1.5rem; } .grid-2 { grid-template-columns: 1fr; gap: 1.5rem; } .footer-grid { grid-template-columns: 1fr; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--chalk); border-bottom: 1px solid var(--line); padding: .5rem var(--gap) 1rem; } .nav.open { display: flex; } .nav a { padding: .7rem 0; width: 100%; border-bottom: 1px solid var(--line); } .nav .btn { margin-top: .8rem; border-bottom: none; } .nav-toggle { display: block; } .site-header { position: relative; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---------- Chat launcher, narrow viewports ---------- The pill button is wide enough to sit over real content on a phone screen. Below 600px it shrinks to a fixed circular icon button, small enough that it no longer blocks a heading, a paragraph, or a form field the way the full pill did. The footer also gets a little extra room at its own bottom edge, since every visitor who reaches the end of a page lands at that exact same scroll position and would otherwise find the launcher sitting on the copyright line every time. */ @media (max-width: 600px) { .chat-launch { width: 52px; height: 52px; padding: 0; border-radius: 50%; font-size: 0; gap: 0; justify-content: center; } .chat-launch::after { content: ""; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23FFFFFF'%20d='M5%204h14a2%202%200%200%201%202%202v9a2%202%200%200%201%20-2%202H9l-4%204v-4H5a2%202%200%200%201%20-2%20-2V6a2%202%200%200%201%202%20-2Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } .site-footer { padding-bottom: 5.5rem; } } /* ---------- Sannidhi brand overrides (source order wins) ---------- */ h1, h2, h3, h4, .brand-name { font-weight: 600; } .eyebrow, .brand-sub, .footer-grid h4, .badge, .msg .who { font-family: var(--mono); font-weight: 500; } .btn, .chat-form button, .field label { font-weight: 600; } .brand img { border-radius: 50%; } .chat-head small { color: var(--sand); } .form-status.ok { color: var(--copper-deep); } .form-status.err { color: var(--slate); } /* ---------- Arch scene, ported from the v7 Sannidhi hero ---------- */ .arch-scene { position: relative; margin: 0 auto; pointer-events: none; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } .arch-scene svg { width: 100%; height: auto; overflow: visible; display: block; } .arch-hero { width: min(320px, 74vw); } .arch-small { width: 170px; margin-bottom: 1.6rem; } .scene-band { opacity: 0; transform: translateY(14px); animation: bandIn 0.9s var(--ease-out) forwards; transform-box: fill-box; transform-origin: center bottom; } .scene-band:nth-child(1) { animation-delay: 0.30s; } .scene-band:nth-child(2) { animation-delay: 0.42s; } .scene-band:nth-child(3) { animation-delay: 0.54s; } .scene-band:nth-child(4) { animation-delay: 0.66s; } .scene-band:nth-child(5) { animation-delay: 0.78s; } .scene-band:nth-child(6) { animation-delay: 0.90s; } @keyframes bandIn { to { opacity: 1; transform: translateY(0); } } @keyframes archFade { to { opacity: 1; } } .scene-base { opacity: 0; animation: archFade 0.8s var(--ease-out) 1.05s forwards; } .scene-glow { opacity: 0; transform-box: fill-box; transform-origin: center; animation: archFade 1.2s var(--ease-out) 1.3s forwards, glowBreathe 4.5s ease-in-out 2.5s infinite; } @keyframes glowBreathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.75; } } .scene-door { opacity: 0; animation: archFade 0.9s var(--ease-out) 1.35s forwards; } .scene-mote { opacity: 0; transform-box: fill-box; transform-origin: center; animation: moteRise 8.5s ease-in-out infinite; } .scene-mote.m1 { animation-duration: 8.2s; animation-delay: 1.8s; --drift: -26px; } .scene-mote.m2 { animation-duration: 9.6s; animation-delay: 3.3s; --drift: 20px; } .scene-mote.m3 { animation-duration: 7.8s; animation-delay: 4.9s; --drift: -8px; } .scene-mote.m4 { animation-duration: 10.4s; animation-delay: 6.1s; --drift: 32px; } .scene-mote.m5 { animation-duration: 9.1s; animation-delay: 7.7s; --drift: -18px; } @keyframes moteRise { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 8% { opacity: 0.9; } 55% { opacity: 0.55; } 78% { opacity: 0; transform: translate(var(--drift, 12px), -190px) scale(1); } 100% { opacity: 0; transform: translate(var(--drift, 12px), -190px) scale(1); } } @media (prefers-reduced-motion: reduce) { .scene-band, .scene-base, .scene-door, .scene-glow { animation: none; opacity: 1; transform: none; } .scene-mote { animation: none; opacity: 0; } } /* ===== SANNIDHI TYPE SCALE v1 : BEGIN (typography only, delete to revert) ===== */ /* ========================================================================== SANNIDHI TYPOGRAPHY LAYER v1 ------------------------------------------------------------------------ Generated by sannidhi-build-kit/typography/type_scale.py. Typography properties only. Edit config.json, not this output. Position: last in the stylesheet, so these rules win on source order against the equal-specificity rules above them. Do not move earlier. Revert: delete everything between the BEGIN and END markers. ======================================================================== */ :root { /* ---- SIZE ---- */ --fs-050: 0.6875rem; --fs-100: 0.75rem; --fs-200: 0.875rem; --fs-300: 1rem; --fs-400: 1.125rem; --fs-500: 1.375rem; --fs-600: 1.625rem; --fs-700: clamp(1.75rem, 1.56rem + 0.76vw, 2.25rem); --fs-800: clamp(2rem, 1.77rem + 0.95vw, 2.625rem); --fs-900: clamp(2.5rem, 2.18rem + 1.33vw, 3.375rem); --fs-lead: clamp(1.0625rem, 0.98rem + 0.34vw, 1.25rem); /* ---- LEADING ---- */ --lh-tight: 1.05; --lh-display: 1.12; --lh-heading: 1.25; --lh-label: 1.4; --lh-lead: 1.55; --lh-body: 1.6; /* ---- TRACKING ---- */ --ls-caps-sm: 0.14em; --ls-caps: 0.1em; --ls-caps-tight: 0.06em; --ls-display: -0.015em; --ls-display-lg: -0.025em; /* ---- MEASURE ---- */ --measure: 68ch; } /* global body: 16px DM Sans, not 17. The scale's own base. */ body { font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--fs-300); line-height: var(--lh-body); font-weight: 400; text-wrap: pretty; font-optical-sizing: auto; } /* heading wrap */ h1, h2, h3, h4 { text-wrap: balance; } /* h1 display. rem+vw fluid, capped at the measured 54px. Playfair runs regular. */ h1 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: var(--fs-900); line-height: var(--lh-display); letter-spacing: var(--ls-display-lg); font-weight: 400; } /* h2 sections */ h2 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: var(--fs-800); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; } /* h3 card titles */ h3 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: var(--fs-500); line-height: var(--lh-heading); letter-spacing: normal; font-weight: 400; } /* h4 */ h4 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: var(--fs-400); line-height: var(--lh-heading); letter-spacing: normal; font-weight: 400; } /* lead paragraphs: 17 to 20 fluid at reading leading, not 1.35 */ .lead, .hero-sub { font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 400; } /* pull quote and FAQ question, serif at heading leading */ .pull, .faq summary { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: var(--fs-400); line-height: var(--lh-heading); font-weight: 400; } /* large serif numerals: step markers and case study metrics */ .card-step, .metric .k { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: var(--fs-600); line-height: var(--lh-tight); font-weight: 400; font-variant-numeric: lining-nums; } /* uppercase mono labels at 12px: 0.10em tracking */ .eyebrow, .badge, .footer-grid h4, .photo-ph { font-family: "DM Mono", "Courier New", monospace; font-size: var(--fs-100); line-height: var(--lh-label); letter-spacing: var(--ls-caps); font-weight: 500; } /* uppercase mono labels at 11px: 0.14em tracking */ .brand-sub, .canvas-caption, .msg .who { font-family: "DM Mono", "Courier New", monospace; font-size: var(--fs-050); line-height: var(--lh-label); letter-spacing: var(--ls-caps-sm); font-weight: 500; } /* uppercase table headers, width constrained: 0.06em */ th { font-family: "DM Mono", "Courier New", monospace; font-size: var(--fs-100); line-height: var(--lh-label); letter-spacing: var(--ls-caps-tight); font-weight: 500; } /* controls: nav, buttons, chat controls at 14px */ .nav a, .nav-toggle, .btn, .chat-launch, .chat-form button, .chat-suggest button { font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--fs-200); font-weight: 600; } /* form fields hold the 16px body size against zoom-on-focus */ .field input, .field select, .field textarea, .chat-form input { font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--fs-300); line-height: var(--lh-body); font-weight: 400; } /* form labels and status */ .field label, .form-status { font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--fs-200); line-height: var(--lh-label); font-weight: 600; } /* small body: notes, metric captions, footer, table copy, chat log */ .hero-note, .metric .v, .footer-bottom, .footer-grid a, table, .msg, .chat-foot { font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--fs-200); line-height: var(--lh-body); font-weight: 400; } /* brand wordmark and chat title, fixed serif */ .brand-name { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: var(--fs-500); line-height: var(--lh-tight); font-weight: 600; } /* chat panel title */ .chat-head strong { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: var(--fs-300); line-height: var(--lh-heading); font-weight: 600; } @media (max-width: 600px) { .chat-launch { font-size: 0; } } /* end typography layer */ /* ===== SANNIDHI TYPE SCALE v1 : END ===== */ /* ===== SANNIDHI SPACING v1 : BEGIN (spacing only, delete to revert) ===== */ /* ========================================================================== SANNIDHI SPACING LAYER v1 ------------------------------------------------------------------------ Generated by sannidhi-build-kit/spacing/spacing.py. Spacing properties only. Edit config.json, not this output. Position: last in the stylesheet, so these rules win on source order against the equal-specificity rules above them. Do not move earlier. Revert: delete everything between the BEGIN and END markers. ======================================================================== */ :root { /* ---- SPACE ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* ---- DERIVED ---- */ --section-y: clamp(3rem, 2.5rem + 1.6vw, 4rem); --hero-y: clamp(1.5rem, 1rem + 1.6vw, 2.75rem); --stack-tight: var(--sp-5); --stack-block: var(--sp-7); --section-y-tight: clamp(2rem, 1.6rem + 1.3vw, 2.75rem); --section-y-open: clamp(4rem, 3.2rem + 2.6vw, 5.75rem); } /* section rest: 48 to 64, retuned 2026-08-21 from the doubled 112 to 144 */ .section { padding-block: var(--section-y); } /* section rest, tight: 32 to 44. For a short turn or a statement section. */ .section-tight { padding-block: var(--section-y-tight); } /* section rest, open: 64 to 88. For the densest sections and the closing band. */ .section-open { padding-block: var(--section-y-open); } /* hero rest: 24 to 44 uniform, retuned 2026-08-21 so the canvas sits inside the fold */ .hero { padding-block: var(--hero-y); } /* footer rest: was 41 over 32, now 64 both sides */ .site-footer { padding-block: var(--sp-8); } /* heading group to its content: 48px, retuned 2026-08-21 from 64 */ .section-head { margin-bottom: var(--stack-block); } /* eyebrow to heading */ .eyebrow { margin-bottom: var(--sp-4); } /* hero actions and note step off the subhead */ .hero-actions, .hero-note { margin-top: var(--sp-6); } /* grid gaps match the padding inside one card: was 22px */ .grid-2, .grid-3 { gap: var(--sp-6); } /* card padding, one value: was 24 over 22 */ .card { padding: var(--sp-6); } /* the four doors breathe: was 22px each side */ .door { padding-block: var(--sp-6); } /* case study metric strip stands apart from the headline */ .metric-grid { margin-block: var(--sp-7); } /* pull quotes get air */ .pull { margin-block: var(--sp-7); } /* end typography layer */ /* ===== SANNIDHI SPACING v1 : END ===== */ /* ===== SANNIDHI MOTION v1 : BEGIN (motion only, delete to revert) ===== */ /* ========================================================================== SANNIDHI MOTION LAYER v1 ------------------------------------------------------------------------ Generated by sannidhi-build-kit/motion/motion.py. Motion properties only. Nothing overshoots. Edit config.json. Position: last in the stylesheet, so these rules win on source order against the equal-specificity rules above them. Do not move earlier. Revert: delete everything between the BEGIN and END markers. ======================================================================== */ :root { /* ---- DURATION ---- */ --dur-quick: 150ms; --dur-hover: 250ms; --dur-reveal: 600ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-settle: cubic-bezier(0.33, 1, 0.68, 1); /* ---- DISPLACEMENT ---- */ --lift-control: -1px; --lift-card: -3px; --reveal-rise: 14px; } /* reveal timing onto the kit scale: 600ms settle instead of 260 */ body.reveal-ready .reveal { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } /* controls: buttons, chat launcher, nav toggle */ .btn, .chat-launch, .chat-form button, .nav-toggle { transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out); } /* control hover and focus lift */ .btn:hover, .btn:focus-visible, .chat-launch:hover, .chat-launch:focus-visible { transform: translateY(var(--lift-control)); } /* control press returns to rest, quickly */ .btn:active, .chat-launch:active { transform: translateY(0); transition-duration: var(--dur-quick); } /* cards settle rather than snap */ .card, .metric { transition: background var(--dur-hover) var(--ease-settle), border-color var(--dur-hover) var(--ease-settle), transform var(--dur-hover) var(--ease-settle); } /* card lift, three pixels, and it must win against the reveal state */ body.reveal-ready .reveal.is-visible.card:hover, .card:hover { transform: translateY(var(--lift-card)); } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:focus-visible, .chat-launch:hover, .card:hover { transform: none; } } /* end typography layer */ /* ===== SANNIDHI MOTION v1 : END ===== */ /* ===== SANNIDHI MOBILE 375 v1 : BEGIN (measured mobile fixes, delete to revert) ===== */ /* Tap targets measured at 375px, 2026-08-11. The 44px bar. Inline text links grow their hitbox with symmetric padding and negative margin, so nothing shifts visually. */ #main p > a:not(.btn) { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; } .footer-grid a { display: inline-block; padding-block: 0.85rem; margin-block: -0.85rem; } .chat-suggest button { padding-block: 0.6rem; } @media (max-width: 900px) { /* Open-menu rows measured 40px, the Menu button 34px. */ .nav a { padding-block: 0.85rem; } .nav-toggle { padding: 0.85rem 0.95rem; } } /* ===== SANNIDHI MOBILE 375 v1 : END ===== */ /* ===== SANNIDHI LOGO PULSE v1 : BEGIN (motion only, delete to revert) ===== */ /* The nav roundel breathes: a gold glow behind the logo expands and settles on the arch cadence. Transform and opacity only, no overshoot. Reduced motion holds the glow still at its resting state. */ .brand { position: relative; } .brand img { position: relative; z-index: 1; } .brand::before { content: ""; position: absolute; left: -13px; top: 50%; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 178, 90, 0.55) 0%, rgba(232, 178, 90, 0.18) 45%, rgba(232, 178, 90, 0) 70%); transform: scale(0.8); opacity: 0.6; animation: brandPulse 4.5s ease-in-out infinite; pointer-events: none; } @keyframes brandPulse { 0%, 100% { transform: scale(0.8); opacity: 0.55; } 50% { transform: scale(1.25); opacity: 0.95; } } @media (prefers-reduced-motion: reduce) { .brand::before { animation: none; transform: scale(1); opacity: 0.45; } } /* ===== SANNIDHI LOGO PULSE v1 : END ===== */ /* ===== SANNIDHI GRAPHICS v1 : BEGIN (graphics only, delete to revert) ===== */ /* Seven brand graphics, inline SVG in the locked palette, extending the arch and crossing motifs. Entrance states hide only under body.reveal-ready (JS confirmed, motion allowed), same contract as the reveal system. Loops are transform and opacity only, no overshoot. */ .gfx { margin: 0 auto; } .gfx svg { display: block; width: 100%; height: auto; } .gfx-doc { max-width: 250px; margin: 0 auto 3rem; } .gfx-cross { max-width: 760px; margin: 0 auto 3rem; } .gfx-platform { max-width: 540px; margin: 2.5rem auto 0; } .gfx-orbit { max-width: 210px; margin: 2.5rem auto 0; } .gfx-week { max-width: 520px; margin: 2.5rem 0 0; } .gfx-chip { display: block; width: 132px; height: auto; margin-bottom: 1.2rem; } .door-mark { width: 56px; height: 56px; } .door-mark svg { width: 42px; height: 42px; display: block; } .gfx .draw { transform-box: fill-box; } body.reveal-ready .gfx .draw { opacity: 0; transform: translateY(8px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } body.reveal-ready .gfx.gfx-live .draw { opacity: 1; transform: none; } .gfx.gfx-live .d1 { transition-delay: 0.05s; } .gfx.gfx-live .d2 { transition-delay: 0.2s; } .gfx.gfx-live .d3 { transition-delay: 0.38s; } .gfx.gfx-live .d4 { transition-delay: 0.56s; } .gfx.gfx-live .d5 { transition-delay: 0.74s; } .seal-glow, .core { transform-box: fill-box; transform-origin: center; animation: gfxBreathe 4.5s ease-in-out infinite; } @keyframes gfxBreathe { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 0.9; } } .trav { opacity: 0; animation: gfxTravel linear infinite; } .t1 { animation-duration: 12s; } .t2 { animation-duration: 15s; animation-delay: 4s; } .t3 { animation-duration: 18s; animation-delay: 8s; } @keyframes gfxTravel { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 0.7; } 88% { opacity: 0.7; } 100% { transform: translateX(740px); opacity: 0; } } .jit { transform-box: fill-box; transform-origin: center; animation: gfxJitter ease-in-out infinite; } .j1 { animation-duration: 2.7s; } .j2 { animation-duration: 3.5s; animation-delay: 0.6s; } .j3 { animation-duration: 3s; animation-delay: 1.2s; } .j4 { animation-duration: 3.9s; animation-delay: 0.3s; } @keyframes gfxJitter { 0%, 100% { transform: translate(0, 0); } 28% { transform: translate(3px, -4px); } 55% { transform: translate(-3px, 3px); } 80% { transform: translate(2px, 4px); } } .trav2 { opacity: 0; animation: gfxTravelWobble linear infinite; } .w1 { animation-duration: 11s; animation-delay: 1s; } .w2 { animation-duration: 13s; animation-delay: 3s; } .w3 { animation-duration: 16s; animation-delay: 5.5s; } .w4 { animation-duration: 12s; animation-delay: 7s; } .w5 { animation-duration: 14.5s; animation-delay: 9.5s; } .w6 { animation-duration: 17s; animation-delay: 12s; } @keyframes gfxTravelWobble { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 0.7; } 16% { transform: translate(105px, -8px); } 30% { transform: translate(210px, 7px); } 42% { transform: translate(310px, -5px); } 52% { transform: translate(385px, 0); } 88% { opacity: 0.7; } 100% { transform: translate(720px, 0); opacity: 0; } } .orb { transform-box: view-box; transform-origin: 50% 50%; animation: gfxOrbit linear infinite; } .o1 { animation-duration: 42s; } .o2 { animation-duration: 58s; } .o3 { animation-duration: 74s; } @keyframes gfxOrbit { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .gfx .draw { opacity: 1 !important; transform: none !important; transition: none; } .seal-glow, .core, .orb { animation: none; } .trav, .trav2 { animation: none; opacity: 0; } .jit { animation: none; } } /* ===== SANNIDHI GRAPHICS v1 : END ===== */ /* ===== SANNIDHI V12 v1 : BEGIN (two doors, limits, industry pages; delete to revert) ===== */ .door-card .door-mark { margin-bottom: 1rem; } .door-card h3 { margin-bottom: .5em; } .door-card p:last-child { margin-bottom: 0; } .doors-note { margin-top: 1.6rem; color: var(--steel); font-family: var(--mono); font-size: var(--text-sm); letter-spacing: .06em; text-transform: uppercase; } .limit { display: block; margin-top: .6em; color: var(--steel); font-size: var(--text-sm); line-height: var(--lh-body); } .not-yet { margin-top: 2.4rem; padding: 1.6rem 1.8rem; border: 1px solid var(--line); border-left: 4px solid var(--copper); border-radius: var(--radius); background: var(--white); } .not-yet h3 { margin-bottom: .8em; } .not-yet ul { list-style: none; padding: 0; margin: 0; } .not-yet li { position: relative; padding-left: 1.4em; margin-bottom: .7em; } .not-yet li::before { content: ""; position: absolute; left: 0; top: .62em; width: .7em; height: 2px; background: var(--copper); } .not-yet li:last-child { margin-bottom: 0; } .door-links { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: var(--text-sm); } .story-photo img, .card-photo { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); } .section-head .arch-small { margin-bottom: 1.6rem; } @media (max-width: 720px) { .doors-2, .paths { grid-template-columns: 1fr; } } /* ===== SANNIDHI V12 v1 : END ===== */ /* ===== SANNIDHI TEMPO v1 : BEGIN (grounds only, delete to revert) ===== */ /* Hand written, locked palette tokens only. No new colours: the two rgba values are chalk and sand at reduced alpha. Why this exists. Measured 5 September 2026 against the armincx reference: all ten homepage sections rested at the same 63.04px top and bottom, and the three warm grounds sat within a 1.07 to 1.15 contrast ratio of one another, so no section boundary read as a boundary. The rests are handled by the spacing layer, generated from its config. This block adds the one dark ground the page has never had, and it is used once per page at most. Contrast, measured: chalk on soil 16.4:1, sand on soil 8.9:1, chalk on the moss button 5.0:1, the button against the soil ground 3.3:1 which clears the 3:1 required of a UI component. The sand edge is there to sharpen that boundary, not to meet it. Revert: delete everything between the BEGIN and END markers. ======================================================================== */ .section-soil { background: var(--ink); border-top: 1px solid rgba(196, 185, 154, 0.30); border-bottom: 1px solid rgba(196, 185, 154, 0.30); color: var(--paper); } .section-soil h1, .section-soil h2, .section-soil h3 { color: var(--chalk); } .section-soil p, .section-soil .lead { color: var(--sand); } .section-soil .eyebrow { color: var(--sand); } .section-soil a:not(.btn) { color: var(--chalk); } .section-soil .btn-primary { border: 1px solid rgba(250, 248, 244, 0.55); } .section-soil .btn-primary:hover { background: var(--copper); } /* ===== SANNIDHI TEMPO v1 : END ===== */ /* ===== SANNIDHI FIGURES v1 : BEGIN (figures only, delete to revert) ===== */ /* Generated by sannidhi-build-kit/figures/figures.py. Edit config.json, not this output. Every value below resolves to an existing brand token, so a figure inherits the palette and introduces no colour of its own. Revert: delete everything between the BEGIN and END markers. */ :root { --fig-quiet: var(--steel, #7A7269); --fig-live: var(--copper, #5A7248); --fig-deep: var(--copper-deep, #4A5E3A); --fig-accent: var(--gold, #B5892A); --fig-tint: var(--copper-tint, #EDE8DF); --fig-ground: var(--chalk, #FAF8F4); --fig-hair: 1.25; --fig-line: 1.75; --fig-bold: 2.5; } .fig { display: block; width: 100%; height: auto; } .fig-frame { background: var(--fig-ground); border: 1px solid var(--line, rgba(28,26,23,0.16)); border-radius: calc(var(--radius, 14px) - 4px); padding: var(--sp-5, 1.5rem); margin-bottom: var(--sp-5, 1.5rem); } /* The wide frame is for a figure that carries a whole section rather than a card. One per page at most. */ .fig-frame-wide { padding: var(--sp-6, 2rem); margin-bottom: var(--sp-7, 3rem); } /* A wide figure squeezed to phone width is a grey smear, so below the breakpoint it keeps a legible minimum and pans inside its own frame. The frame scrolls; the page never does. Measured at 375: the gap figure fell to 82px tall before this rule. */ @media (max-width: 640px) { .fig-frame { padding: var(--sp-4, 1rem); } .fig-frame-wide { padding: var(--sp-4, 1rem); overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .fig-frame-wide .fig { min-width: 620px; } } /* On the dark ground the frame inverts: the figure keeps its own light panel so the stroke contrast does not have to be re-solved per ground. */ .section-soil .fig-frame { border-color: rgba(196, 185, 154, 0.30); } @media (prefers-reduced-motion: no-preference) { .fig { transition: opacity 240ms ease; } } /* ===== SANNIDHI FIGURES v1 : END ===== */ /* ===== SANNIDHI CONTRAST v1 : BEGIN (colour repair, delete to revert) ===== */ /* Found 5 September 2026 by an independent review, then confirmed in a browser. The header call to action is an sitting inside