/* golive 2026-10-21: homepage additions that live outside the Claude Design template (the template engine reads its own {-braces, so this CSS sits in a file).
   Page tokens: ink #141318, quiet #55535C, line #E4E4E8, white; one accent. Social coins and the floating coin come from /shared/whatsapp-kit/. */

/* header: official Hill logo (primary file), 168 px wide (132 px on phones). Abdi 2026-10-22 (ACC-39), replacing the HILL-001 band: there is no header band; on
   2026-10-23 he chose this floating header (H4) from the headers we have used. The logo and the tabs float over the page. The tabs sit in the pill of the locked Cinema
   board (white 85 %, blur 6 px). The logo has no plate: a thin white keyline and a soft halo keep its navy letters readable over the dark frames. The empty middle of
   the header takes no clicks. The tabs are Home, About, Projects (a drop-down of the four kinds of project) and Contact. */
.hlogo { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; min-height: 48px; }
.hlogo img { display: block; width: 168px; height: auto; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); }
.hbar { background: none; pointer-events: none; }
.hbar > * { pointer-events: auto; }
.hlogo:focus-visible, .mbtn:focus-visible { outline: 2px solid #141318; outline-offset: 2px; box-shadow: 0 0 0 2px #FFFFFF; }

/* tabs: the pill of the locked board (white 85 %, blur 6 px, 4 px padding), dark 13 px text on a 40 px row, 4 px apart. Projects carries a small caret and opens a panel of
   the same pill material under the tabs, hung from the pill's right edge; a 6 px bridge on its top edge lets the pointer cross the join without closing it. */
.hnav { position: relative; display: flex; gap: 4px; align-items: center; padding: 4px; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hnav .hb { display: inline-flex; align-items: center; border: none; background: transparent; color: #141318; padding: 9px 12px; font-size: 13px; min-height: 40px; }
.hnav .hb:hover { background: rgba(20, 19, 24, 0.06); }
.hnav__proj { display: flex; align-items: center; }
.hnav__projbtn::after { content: ""; width: 5px; height: 5px; margin: -3px 0 0 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s, margin 0.2s; }
.hnav__projbtn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.hnav__menu { position: absolute; right: 0; top: 100%; z-index: 2; box-sizing: border-box; min-width: 200px; display: flex; flex-direction: column; padding: 6px 0 8px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 24px rgba(20, 19, 24, 0.14); }
.hnav__menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6px; }
.hnav__menu .hb { width: 100%; justify-content: flex-start; min-height: 44px; padding: 0 20px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .hnav__projbtn::after { transition: none; } }

/* phone menu: a button in the header and a one-column list under it (phones only); the four kinds of project sit under Projects, quieter and indented */
.mbtn { display: none; box-sizing: border-box; min-width: 80px; min-height: 48px; padding: 0 18px; border: 1px solid rgba(20, 19, 24, 0.2); background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #141318; font-size: 15px; font-weight: 600; cursor: pointer; }
.mpanel { display: none; }
.mitem { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; min-height: 60px; padding: 0 clamp(16px, 3vw, 44px); border-bottom: 1px solid #E4E4E8; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: #141318; }
.mitem:hover { color: #55535C; }
.mitem[data-sub="true"] { min-height: 52px; padding-left: calc(clamp(16px, 3vw, 44px) + 18px); font-size: 20px; font-weight: 500; color: #55535C; }
.mitem[data-sub="true"]:hover { color: #141318; }
.mpanel .mitem:focus-visible { outline: 2px solid #141318; outline-offset: -4px; } /* wins over the template .hb:focus-visible (it loads later) */
@media (max-width: 767px) {
  .navp { display: none !important; }
  .mbtn { display: inline-flex; align-items: center; justify-content: center; }
  .hlogo img { width: 132px; }
  .mpanel { display: flex; flex-direction: column; position: absolute; inset: 0; z-index: 19; box-sizing: border-box; padding: 96px 0 24px; background: rgba(255, 255, 255, 0.98); overflow-y: auto; }
}

/* About (Abdi 2026-10-23, design D chosen the same day): the About tab opens this section. It sits on the page ink in white type with hairlines; the colour partner logos sit in white tiles
   and the company logos on the white strip under it. About us and the three figures are the wording Abdi approved on 2026-10-21 (content/facts.json); vision, values, the approach line and the
   partners come from the company profile PDF and await his approval; the history rows are placeholders until the years are supplied. The top padding clears the floating logo and tabs
   when the tab lands the section at the top of the window. */
.about { box-sizing: border-box; padding: 120px clamp(16px, 4vw, 56px) 0; background: #141318; color: #FFFFFF; }
.about__lb { margin: 0 0 24px; font-family: 'Source Code Pro', monospace; font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.about__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(24px, 5vw, 88px); align-items: end; padding-bottom: 72px; }
.about__lead { margin: 0; font-size: clamp(32px, 3.9vw, 58px); line-height: 1.12; font-weight: 500; letter-spacing: -0.025em; }
.about__side { display: flex; flex-direction: column; gap: 18px; }
.about__side p { margin: 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .76); }
.about__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .26); border-bottom: 1px solid rgba(255, 255, 255, .26); }
.about__figs > div { display: flex; flex-direction: column; gap: 10px; padding: 44px 32px 48px 0; }
.about__figs > div + div { padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, .26); }
.about__figs b { font-size: clamp(48px, 5.4vw, 80px); line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.about__q { min-height: 16px; font-family: 'Source Code Pro', monospace; font-size: 12px; line-height: 1.3; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.about__t { max-width: 21em; font-size: 17px; line-height: 1.4; color: rgba(255, 255, 255, .76); }
.about__n { font-family: 'Source Code Pro', monospace; font-size: 13px; line-height: 1; letter-spacing: 0.08em; color: rgba(255, 255, 255, .62); }
.about__vv { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(24px, 5vw, 88px); padding: 72px 0; }
.about__vh { margin: 0 0 24px; max-width: 16em; font-size: clamp(28px, 3vw, 44px); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.about__p { margin: 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .76); }
.about__col { display: flex; flex-direction: column; }
.about__vals { display: flex; flex: 1; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .26); }
.about__vals li { display: grid; flex: 1; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .26); font-size: clamp(22px, 2vw, 30px); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.about__blk { padding: 56px 0 64px; border-top: 1px solid rgba(255, 255, 255, .26); }
.about__how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
.about__how li { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .4); }
.about__how h4 { margin: 12px 0 8px; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.about__how p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .76); }
.about__tl { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.about__tl::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: rgba(255, 255, 255, .4); }
.about__tl li { position: relative; padding-top: 34px; font-size: 18px; line-height: 1.4; }
.about__tl li::before { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: #FFFFFF; }
.about__y { display: block; margin-bottom: 6px; font-family: 'Source Code Pro', monospace; font-size: 14px; line-height: 1.3; letter-spacing: 0.08em; color: rgba(255, 255, 255, .62); }
.about__tl .is-placeholder { color: rgba(255, 255, 255, .62); }
.about__tl .is-placeholder::before { background: #141318; border: 1px dashed rgba(255, 255, 255, .62); }
@media (max-width: 1023px) { .about__top, .about__vv { grid-template-columns: minmax(0, 1fr); } .about__figs { grid-template-columns: minmax(0, 1fr); } .about__figs > div, .about__figs > div + div { padding: 24px 0; border-left: 0; } .about__figs > div + div { border-top: 1px solid rgba(255, 255, 255, .26); } .about__how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } .about__tl { grid-template-columns: minmax(0, 1fr); gap: 28px; } .about__tl::before { display: none; } }
@media (max-width: 767px) { .about { padding: 104px 16px 0; } .about__top { padding-bottom: 48px; } .about__vv { padding: 48px 0; } .about__blk { padding: 40px 0 48px; } .about__how { grid-template-columns: minmax(0, 1fr); } }

/* Partners wall (Abdi 2026-10-23), on white after the ink About: logos only, official transparent files, hairlines drawn by a 1 px gap so no cell is ever empty. Logo widths are set per file
   in the markup so each logo carries about the same visual weight (equal area at the 1440 cell). 6 across (4 rows of 6, 24 logos); 3 across below 1024 px; 2 across on phones. */
.pw { padding: 64px 0 56px; background: #FFFFFF; color: #141318; }
.pw__lb { margin: 0; padding: 0 clamp(16px, 4vw, 56px); font-family: 'Source Code Pro', monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.26em; color: #55535C; }
.pw__p { margin: 14px 0 0; padding: 0 clamp(16px, 4vw, 56px); max-width: 24em; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; color: #141318; }
.pw__wall { --k: 1; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); margin: 36px clamp(16px, 4vw, 56px) 0; padding: 0 1px 1px 0; list-style: none; }
.pw__wall li { grid-column: span 2; display: grid; place-items: center; box-sizing: border-box; min-height: 140px; margin: 0 -1px -1px 0; padding: 22px 14px; background: #FFFFFF; border: 1px solid #E4E4E8; }
.pw__wall li.s2 { grid-column: 2 / span 2; }
.pw__wall img { display: block; width: calc(var(--w) * var(--k) * 1px); max-width: 100%; height: auto; }
@media (min-width: 1700px) { .pw__wall { --k: 1.2; } }
@media (max-width: 1279px) { .pw__wall { --k: .74; } }
@media (max-width: 1023px) { .pw__wall { --k: 1; grid-template-columns: repeat(6, minmax(0, 1fr)); } .pw__wall li.s2 { grid-column: span 2; } }
@media (max-width: 767px) { .pw { padding: 48px 0 40px; } .pw__wall { --k: .88; grid-template-columns: repeat(4, minmax(0, 1fr)); } .pw__wall li { min-height: 112px; padding: 16px 12px; } .pw__wall li.p2 { grid-column: 2 / span 2; } }

/* "Our companies" strip, fourth pass (Abdi 2026-10-23: make it pop, then "add the card this aura"). It is the group showcase, so it outranks the partners wall above it: a real headline in the page type instead of the small label,
   a lilac band (the page's own rgba(83, 58, 253, .07) tint, translucent so the topographic lines stay) and three white tiles inside the daisyUI "aura" effect (daisyUI aura.css, MIT: a conic-gradient light that circles the card
   plus two blurred copies as glow), rebuilt here without the library. Colour: silver, the daisyUI "aura-silver" ring (Abdi 2026-10-23: silver for the company cards only; the project cards keep --aura, see the cards block below).
   Each tile starts a third of a turn after the one before so the three lights do not move in step. Reduced motion: the light stands still.
   Official logo files untouched, natural proportions. Columns weighted 1.25 : 1 : 1 because the Somdesign wordmark is wide and low (4.2 : 1) and needs more width than the two lockups (2.7 : 1); the subgrid rows put all three
   logos on one baseline, the descriptions on one line and the tiles at one height. Logo width is capped (520 px Somdesign, 416 px the others) and centred in its tile. Phones: one column of tiles, logos up to 280 px. */
@property --aura-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes cos-aura { to { --aura-angle: 360deg; } }
.cosw { padding: 40px 0; background: rgba(83, 58, 253, 0.07); }
.cos__lb { margin: 0; padding: 0 clamp(16px, 4vw, 56px); font-family: 'Source Code Pro', monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.26em; color: #55535C; }
.cos__h { margin: 0; padding: 0 clamp(16px, 4vw, 56px); font-size: clamp(30px, 3vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: #141318; }
.cos { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: clamp(16px, 1.6vw, 24px); margin-top: 28px; padding: 0 clamp(16px, 4vw, 56px); }
/* the aura wrapper is the anchor: its 3 px of padding show the light as a ring around the white card; the two pseudo-elements are blurred copies of the light, behind the card; the anchor's own soft shadow keeps the tile lifted when the light is on the far side */
.cos a { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; padding: 3px; border-radius: 15px; background-image: repeating-conic-gradient(from var(--aura-angle), oklch(0.3 0 0), oklch(0.9 0 0), oklch(0.6 0 0), oklch(0.9 0 0), oklch(0.5 0 0), oklch(0.3 0 0) 50%); box-shadow: 0 8px 28px rgba(20, 19, 24, 0.1); text-decoration: none; animation: cos-aura 6s linear infinite; transition: translate .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; }
.cos a:nth-child(2) { animation-delay: -2s; }
.cos a:nth-child(3) { animation-delay: -4s; }
.cos a::before, .cos a::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 0; width: 100%; height: 100%; translate: -50% -50%; border-radius: inherit; background-image: inherit; animation: inherit; opacity: 0.85; filter: blur(0.3rem); pointer-events: none; transition: opacity .25s; }
.cos a::after { opacity: 0.4; filter: blur(1.1rem); }
.cos__card { position: relative; z-index: 1; display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; row-gap: 12px; padding: 24px 24px 20px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(20, 19, 24, 0.08); color: #141318; }
.cos__lg { align-self: end; justify-self: center; width: 100%; max-width: 416px; }
.cos a:first-child .cos__lg { max-width: 520px; }
.cos img { display: block; width: 100%; height: auto; }
.cos__cp { font-family: 'Source Code Pro', monospace; font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; text-wrap: balance; color: #141318; }
.cos a:hover { translate: 0 -3px; box-shadow: 0 12px 34px rgba(20, 19, 24, 0.16); }
.cos a:hover::before { opacity: 1; }
.cos a:hover::after { opacity: 0.6; }
.cos a:focus-visible { outline: 2px solid #141318; outline-offset: 4px; }
@media (max-width: 1023px) { .cos__card { padding: 16px 16px 14px; } }
@media (max-width: 767px) { .cosw { padding: 32px 0; } .cos { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; } .cos a { display: block; } .cos__card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 20px 18px; } .cos__lg, .cos a:first-child .cos__lg { align-self: center; max-width: 280px; } }
@media (prefers-reduced-motion: reduce) { .cos a, .cos a::before, .cos a::after { animation: none; } .cos a:hover { translate: none; } }

/* Gallery cards aura (Abdi 2026-10-23: "remove the glowing purple, add the aura effect to all the similar cards, use a different colour than purple"). The same day he took the aura off the project reel (see "Expanding reel" below),
   so it stays on the full-reel gallery cards only: --aura, set here on :root; the company tiles have their own silver (strip block above).
   The gallery cards (.gc) sit 8 px apart and number in the dozens, so they carry the light as a ring inside the card edge with no outer glow (cheap to paint, no overlap with the neighbours). Reduced motion: the light stands still.
   Colour: Hill Design System V5 ruby #EA2261, the one non-purple accent token of the system. It measures 4.3 : 1 against white and stands out from the blue skies and greens of the project pictures.
   Eight colours were compared on the real cards on 2026-10-23 (ruby, metallic gold, amber to violet, pastel, sky blue, rainbow, silver, safety orange); Abdi kept ruby for the project cards and chose silver for the company
   tiles. To change the colour of the gallery-card auras, change this one line. */
:root { --aura: #EA2261; }
.gc::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 2px; border-radius: inherit; background-image: conic-gradient(from var(--aura-angle), transparent 225deg, var(--aura)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: cos-aura 6s linear infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .gc::before { animation: none; } }

/* the coin row in the contact section */
.so-row { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) { .cos a { transition: none; } .cos a:hover { transform: none; } }
/* /golive */

/* perf 2026-10-22: Source Code Pro, self-hosted. The same seven files and the same rules (weights 400, 500, 600, font-display swap, one file per script
   range) that Google Fonts served for family=Source+Code+Pro:wght@400;500;600&display=swap (v32, SIL OFL 1.1, see /vendor/fonts/source-code-pro/OFL.txt).
   This replaces the render-blocking stylesheet on fonts.googleapis.com and the font request on fonts.gstatic.com: two third-party connections less. */
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-greek-ext.woff2) format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-greek.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-greek-ext.woff2) format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-greek.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-greek-ext.woff2) format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-greek.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/source-code-pro/source-code-pro-v32-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* /perf */

/* hill programme 2026-10-22 ------------------------------------------------------------------------------------------------------------------ */

/* HILL-007: skip link, the first thing a keyboard reaches; it moves focus into <main> inside the page's own scroller */
.skip { position: absolute; left: 16px; top: -120px; z-index: 80; padding: 12px 18px; background: #141318; color: #FFFFFF; font-size: 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; color: #FFFFFF; outline: 2px solid #FFFFFF; outline-offset: -4px; }

/* Expanding reel (Abdi 2026-10-23: the four project reels become expanding cards, reference "Architectural Wonders", no aura; mockup, contrast and width checks: content/reports/reel-expanding/). Replaces HILL-002 (the phone grid of small cards).
   One card is open: colour picture, name, place, one line, "Open project". The others stand as grey strips with the caption on its side. A mouse opens a card on hover (70 ms pause, set in the page script), the keyboard on focus,
   a first tap opens a card, a click on the open card opens the viewer. Only the width animates (flex-grow, 650 ms); the open text keeps a fixed width so it never re-wraps. Up to five cards plus the "All projects" tile.
   Tablets: the tile moves under the cards. Phones: the cards stack and open downward, the caption lies flat. Reduced motion: nothing animates. */
.reelx { --h: clamp(420px, 36vw, 560px); display: flex; gap: 10px; padding: 34px 0 52px; } /* Abdi 2026-10-23: white around the cards as before, the row fills the page from edge to edge (no side margin) */
.xr { list-style: none; margin: 0; padding: 0; display: flex; flex: 1 1 auto; gap: 10px; min-width: 0; height: var(--h); }
.xp { display: flex; flex: 1 1 0; min-width: 84px; transition: flex-grow .65s cubic-bezier(.22, 1, .36, 1); }
.xp[data-on="true"] { flex-grow: 5; }
.xp__b { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; border-radius: 12px; background: #EFEFF1; }
.xp__b:focus-visible, .xt:focus-visible { outline: 2px solid #141318; outline-offset: 3px; }
.xp__b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1.1); transition: filter .5s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); }
.xp[data-on="true"] .xp__b img { filter: none; transform: none; }
.xp__dim { position: absolute; inset: 0; background: rgba(20, 19, 24, .22); transition: opacity .5s; }
.xp[data-on="true"] .xp__dim { opacity: 0; }
.xp__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 19, 24, 0) 30%, rgba(20, 19, 24, .5) 63%, rgba(20, 19, 24, .86) 100%); }
/* closed card: the caption stands up like a book spine, reading upward from the foot */
.xp__spine { position: absolute; left: 50%; bottom: 22px; max-height: calc(100% - 44px); transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; letter-spacing: .05em; color: #FFFFFF; transition: opacity .25s; }
.xp[data-on="true"] .xp__spine { opacity: 0; }
/* open card: name, place, one line, the way in */
.xp__body { box-sizing: border-box; position: absolute; left: 0; bottom: 0; width: clamp(320px, 38vw, 540px); padding: 0 clamp(20px, 2.2vw, 32px) clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; color: #FFFFFF; font-weight: 400; letter-spacing: normal; white-space: normal; text-shadow: 0 1px 14px rgba(20, 19, 24, .55); }
.xp__body > * { opacity: 0; transform: translateY(14px); transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1); }
.xp[data-on="true"] .xp__body > * { opacity: 1; transform: none; }
.xp[data-on="true"] .xp__body > :nth-child(1) { transition-delay: .16s; }
.xp[data-on="true"] .xp__body > :nth-child(2) { transition-delay: .22s; }
.xp[data-on="true"] .xp__body > :nth-child(3) { transition-delay: .28s; }
.xp[data-on="true"] .xp__body > :nth-child(4) { transition-delay: .34s; }
.xp__t { display: block; font-size: clamp(26px, 2.5vw, 38px); font-weight: 600; letter-spacing: -.01em; line-height: 1.05; }
.xp__m { display: block; font-family: 'Source Code Pro', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.xp__d { display: block; max-width: 440px; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.xp__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 44px; padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .85); background: rgba(20, 19, 24, .3); backdrop-filter: blur(4px); font-size: 15px; font-weight: 500; color: #FFFFFF; text-shadow: none; transition: background .25s, color .25s, opacity .3s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1); }
.xp__b:hover .xp__go { background: #FFFFFF; color: #141318; }
/* "All projects": the dark tile, same radius as the cards */
.xt { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex: 0 0 232px; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 18px; overflow: hidden; border-radius: 12px; text-align: center; color: #FFFFFF; background: radial-gradient(135% 135% at 50% 32%, #26252E 0%, #141318 62%, rgba(20, 19, 24, .88) 100%); box-shadow: 0 18px 44px rgba(20, 19, 24, .35); }
.xt .txt { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.xt .k { font-family: 'Source Code Pro', monospace; font-size: 10px; letter-spacing: .22em; color: rgba(255, 255, 255, .8); }
.xt .h { font-size: 28px; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
@media (max-width: 1023px) {
  .reelx { flex-direction: column; }
  .xt { flex: none; flex-direction: row; justify-content: space-between; gap: 16px; min-height: 76px; padding: 14px 22px; text-align: left; }
  .xt .txt { align-items: flex-start; gap: 2px; }
  .xt .h { font-size: 22px; }
  .xt .circ { width: 40px; height: 40px; font-size: 18px; }
}
@media (max-width: 767px) {
  .reelx { padding: 24px 16px 40px; }
  .xr { flex-direction: column; height: 506px; }
  .reelx[data-n="1"] .xr { height: 420px; }
  .reelx[data-n="3"] .xr { height: 592px; }
  .reelx[data-n="4"] .xr { height: 678px; }
  .reelx[data-n="5"] .xr { height: 764px; }
  .xp { min-width: 0; min-height: 76px; }
  .xp__spine { left: 18px; right: 18px; top: 50%; bottom: auto; max-height: none; transform: translateY(-50%); writing-mode: horizontal-tb; }
  .xp__body { width: 100%; padding: 0 18px 18px; }
  .xp__t { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .xp, .xp__b img, .xp__dim, .xp__spine, .xp__body > *, .xp__go { transition: none; } }

/* HILL-004: the photo viewer on phones. The picture takes the full width (358 px at 390), the two arrows sit in their own 48 px row under it,
   the thumbnails scroll sideways instead of shrinking below a usable size. Every picture keeps its own proportions (contain). */
@media (max-width: 767px) {
  .lbx { gap: 12px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
  .lbx { bottom: auto !important; height: 100vh; height: 100dvh; } /* the visible screen, not the large one under the browser toolbars */
  .lbrow { flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px !important; }
  .lbrow .lbimg { order: -1; flex: 0 0 100% !important; width: 100%; height: auto !important; max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px);; aspect-ratio: auto 16 / 9; } /* 16:9 room while the photo loads, its own shape after */
  .lbthumbs { justify-content: flex-start !important; overflow-x: auto; padding-bottom: 4px; }
  .lbthumbs > button:first-child { margin-left: auto; } .lbthumbs > button:last-child { margin-right: auto; } /* centred when they fit, scrollable from the first one when they do not (no reliance on safe center) */
  .lbthumbs > button { flex: 0 0 auto; width: 64px !important; height: 48px !important; }
}

/* HILL-009: the phone field's example and its error. The error text stays ink (contrast); the V5 danger colour (ruby #EA2261) marks the field and the line. */
.cf-hint { font-size: 14px; line-height: 1.4; color: #55535C; }
.cf-err { font-size: 15px; line-height: 1.4; color: #141318; border-left: 3px solid #EA2261; padding-left: 10px; }
.cf-err:empty { display: none; }
.cf input[aria-invalid="true"] { border-color: #EA2261; }

/* Phase 3: the footer. Order: who we are and how to start, projects, the group, contact, then copyright and the legal pages. Four columns with
   32 px gaps on desktop, two on tablets, one on phones (24 px between groups); 48 px above it (32 px on phones). The room under the last line is
   counted once: 24 px under the bar plus var(--wa-clear) (64 + 24 = 88 px, or 58 + 16 = 74 px on phones) gives 112 px and 98 px. */
.hf { padding: 40px clamp(16px, 4vw, 56px) 0; border-top: 1px solid #E4E4E8; color: #141318; }
.hf-top { display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.hf-id img { display: block; width: 180px; height: auto; }
.hf-id p { margin: 12px 0 0; max-width: 30ch; font-size: 16px; line-height: 1.5; color: #55535C; }
.hf-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; font-family: 'Source Code Pro', monospace; font-size: 13px; color: #141318; }
.hf-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hf-col h2 { margin: 0 0 6px; font-family: 'Source Code Pro', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: #55535C; }
.hf-col > a, .hf-col > button { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font-size: 16px; line-height: 1.3; color: #141318; text-align: left; text-decoration: none; cursor: pointer; }
.hf-col > a:hover, .hf-col > button:hover, .hf-cta:hover { color: #55535C; }
.hf-col address, .hf-col p { margin: 0; padding: 8px 0; font-style: normal; font-size: 16px; line-height: 1.5; color: #141318; }
.hf-coins { margin-top: 8px; }
.hf-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 24px; margin-top: 32px; padding: 8px 0 24px; border-top: 1px solid #E4E4E8; font-family: 'Source Code Pro', monospace; font-size: 12px; color: #55535C; }
.hf-bar nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.hf-bar a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hf-bar a:hover { color: #141318; }
.hf a:focus-visible, .hf button:focus-visible { outline: 2px solid #141318; outline-offset: 2px; }
.fam-end { height: calc(var(--wa-clear) + env(safe-area-inset-bottom)); }
@media (max-width: 1023px) { .hf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .hf { padding-top: 24px; } .hf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } .hf-id, .hf-top > .hf-col:last-child { grid-column: 1 / -1; } .hf-bar { margin-top: 24px; } }
/* /hill programme */

/* hill programme 2026-10-22: reduced motion. The cinema still follows the scroll (it moves only when the visitor scrolls); hover zooms,
   the fly-out's entrance and the arrow nudge are switched off. The nav jump and the fly-out zoom are handled in the page script. */
@media (prefers-reduced-motion: reduce) {
  .rc, .rc .cta-img, .circ, .gc, .gc img, .lgc { transition: none !important; }
  .rc:hover .cta-img, .gc:hover img, .rc:hover .circ, .lgc:hover { transform: none !important; }
  [data-layer="fg"], [data-layer="fg"] * { animation: none !important; }
}

/* hill programme 2026-10-22: short screens (phone landscape, 200% zoom). Below 500 px of height the page fits the screen instead of keeping its
   640 px minimum (which made the window scroll as well as the page's own scroller and pushed the photo viewer off the screen), and the viewer
   tightens its spacing so the photo, both arrows, the close button and the thumbnails stay on screen. */
@media (max-height: 500px) {
  .stage { min-height: 0 !important; }
  .lbx { padding-top: 8px !important; padding-bottom: 8px !important; gap: 8px !important; }
  .lbx h2 { font-size: 20px !important; }
  .lbthumbs > button { width: 56px !important; height: 40px !important; }
}
@media (max-width: 767px) and (max-height: 500px) {
  .lbrow .lbimg { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }
}

/* hill programme 2026-10-22 (Phase 4, Abdi's choice): the "Building from abroad" block at the top of the contact section. Contact facts
   only; the same mono label, ink, line colour and dark button as the rest of the section. */
.abroad { flex: 1 1 100%; min-width: 0; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; border: 1px solid #E4E4E8; padding: 24px clamp(18px, 3vw, 32px); }
.abroad__txt { min-width: 0; max-width: 680px; }
.abroad h2 { margin: 0; font-family: 'Source Code Pro', monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.26em; color: #55535C; }
.abroad p { margin: 10px 0 0; font-size: 19px; line-height: 1.45; color: #141318; }
.abroad p a { color: inherit; text-underline-offset: 3px; }
.abroad__btn { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 48px; padding: 15px 26px; background: #141318; color: #FFFFFF; font-size: 17px; font-weight: 600; text-decoration: none; }
.abroad__btn:hover { opacity: .88; color: #FFFFFF; }
.abroad__btn:focus-visible, .abroad p a:focus-visible { outline: 2px solid #141318; outline-offset: 2px; }
@media (max-width: 767px) { .abroad p { font-size: 17px; } .abroad__btn { width: 100%; justify-content: center; } }

/* end screen (ACC-40, Abdi 2026-10-22, mock-up approved): the closing scene is the end of the site. The building-from-abroad block, the site-visit form,
   the office details and the footer sit on it. Scoped to .end so the static pages' footers (same .hf classes) are untouched. Ink #141318 and white, no navy. */
.hf.end { position: relative; box-sizing: border-box; min-height: 100vh; min-height: 100svh; overflow: hidden; padding: 0; border-top: 0; background: #141318; color: #FFFFFF; }
.end a { color: #FFFFFF; }
.end a:hover { color: #FFFFFF; }
.end__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.end__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 19, 24, 0.72) 0%, rgba(20, 19, 24, 0.44) 50%, rgba(20, 19, 24, 0.2) 100%), linear-gradient(180deg, rgba(20, 19, 24, 0.3) 0%, rgba(20, 19, 24, 0) 22%, rgba(20, 19, 24, 0) 52%, rgba(20, 19, 24, 0.8) 80%, rgba(20, 19, 24, 0.94) 100%); }
.end__in { position: relative; z-index: 1; box-sizing: border-box; min-height: 100vh; min-height: 100svh; padding: 100px clamp(16px, 3vw, 44px) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); grid-template-rows: minmax(0, 1fr) auto auto auto; column-gap: clamp(32px, 5vw, 72px); }
.end__b, .end .hf-bar, .end .fam-end { grid-column: 1 / -1; }
.end__l { min-width: 0; padding-bottom: 24px; }
.end__eb { display: block; font-family: 'Source Code Pro', monospace; font-size: 12px; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.85); }
.end__h { margin: 14px 0 0; font-size: clamp(40px, 3.8vw, 54px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; color: #FFFFFF; }
.end__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.end .abroad { display: block; flex: none; max-width: 560px; margin-top: 18px; padding: 0; border: 0; }
.end .abroad h2 { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.74); }
.end .abroad p { margin: 0 0 14px; font-size: 16px; line-height: 1.5; font-weight: 300; color: rgba(255, 255, 255, 0.92); }
.end .abroad p a { color: #FFFFFF; }
.end .abroad__btn { padding: 14px 25px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.85); color: #FFFFFF; }
.end .abroad__btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.end__of { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.26); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; max-width: 700px; font-style: normal; }
.end__lb { display: block; margin: 0 0 4px; font-family: 'Source Code Pro', monospace; font-size: 11px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.74); }
.end__lb--2 { margin-top: 10px; }
.end__of b { display: block; font-weight: 600; font-size: 16px; line-height: 1.35; color: #FFFFFF; }
.end__of a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; text-decoration: none; }
.end__of a:hover { text-decoration: underline; text-underline-offset: 3px; }
.end__of a.end__map { font-family: 'Source Code Pro', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-decoration: underline; text-underline-offset: 3px; }
.end__r { align-self: start; box-sizing: border-box; min-width: 0; padding: 26px 28px 28px; background: rgba(20, 19, 24, 0.52); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.26); }
.end__r h2 { margin: 0; font-family: 'Source Code Pro', monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.26em; color: rgba(255, 255, 255, 0.82); }
.end .cf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; margin-top: 16px; }
.cf-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cf-f--w, .cf-row { grid-column: 1 / -1; }
.cf-lb { font-family: 'Source Code Pro', monospace; font-size: 11px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.76); }
.end .cf input, .end .cf select, .end .cf textarea { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; }
.end .cf input:hover, .end .cf select:hover, .end .cf textarea:hover { border-color: #FFFFFF; }
.end .cf select option { background: #FFFFFF; color: #141318; }
.end .cf textarea { min-height: 84px; }
.end .cf input:-webkit-autofill { -webkit-text-fill-color: #FFFFFF; box-shadow: 0 0 0 1000px rgba(20, 19, 24, 0.9) inset; }
.end .cf-hint { color: rgba(255, 255, 255, 0.72); }
.end .cf-err { color: #FFFFFF; }
.cf-go { border: 0; background: #FFFFFF; color: #141318; padding: 15px 26px; font-size: 17px; font-weight: 600; min-height: 48px; cursor: pointer; }
.cf-box { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 20px clamp(18px, 3vw, 26px); border: 1px solid rgba(255, 255, 255, 0.4); }
.cf-box--ok { margin: 16px 0 0; scroll-margin-top: 96px; }
.cf-box p { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.cf-box .cf-thx { font-size: 23px; font-weight: 600; line-height: 1.2; color: #FFFFFF; }
.cf-box a { display: inline-flex; align-items: center; min-height: 44px; font-family: 'Source Code Pro', monospace; font-size: 13px; }
.end__b { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.3fr) auto; gap: 16px 32px; align-items: start; margin-top: 8px; padding: 18px 0 6px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.end .hf-id img { width: 168px; }
.end .hf-id p { margin: 8px 0 0; max-width: 30ch; font-size: 14px; line-height: 1.45; font-weight: 300; color: rgba(255, 255, 255, 0.82); }
.end .hf-col h2 { color: rgba(255, 255, 255, 0.74); }
.end__ls { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 24px; }
.end__ls a, .end__ls button { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 300; line-height: 1.3; text-align: left; text-decoration: none; color: rgba(255, 255, 255, 0.94); cursor: pointer; }
.end__ls a:hover, .end__ls button:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.end .hf-coins { margin-top: 0; }
.end .hf-bar { margin-top: 0; padding: 0 0 12px; border-top: 0; justify-content: flex-start; gap: 0 26px; color: rgba(255, 255, 255, 0.76); }
.end .hf-bar a { color: rgba(255, 255, 255, 0.9); }
.end a:focus-visible, .end button:focus-visible, .end input:focus-visible, .end select:focus-visible, .end textarea:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (max-width: 1099px) {
  .end__in { display: block; padding-top: 96px; }
  .end__l, .end__r { max-width: 720px; }
  .end__r { margin-top: 32px; }
  .end__b { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .end__b .hf-id, .end__b .hf-coins { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .end__in { padding-top: 92px; padding-right: 16px; padding-left: 16px; }
  .end__scrim { background: linear-gradient(180deg, rgba(20, 19, 24, 0.55) 0%, rgba(20, 19, 24, 0.78) 30%, rgba(20, 19, 24, 0.9) 100%); }
  .end__h { font-size: 42px; }
  .end__of { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .end__ad { grid-column: 1 / -1; }
  .end .cf { grid-template-columns: minmax(0, 1fr); }
  .end__r { padding: 22px 18px 24px; }
  .end .hf-bar { padding-bottom: 8px; }
  .end__ls { grid-template-columns: minmax(0, 1fr); }
}

/* About copy update, 2026-10-23: scoped layout for the six owner-supplied figures. */
#about .about__figs > div { padding: 32px; }
#about .about__figs > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
#about .about__figs > div:nth-child(n + 4) { border-top: 1px solid rgba(255, 255, 255, .26); }
#about .about__offices { margin: 0; padding: 24px 0 0; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .76); }
#about .about__value-copy { display: block; margin-top: 10px; font-size: 16px; line-height: 1.5; letter-spacing: 0; font-weight: 400; color: rgba(255, 255, 255, .76); }
#about .about__story-lead { margin: 0 0 24px; max-width: 34em; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.015em; }
#about .about__blk > .about__p { max-width: 62em; }
#about + .pw .pw__intro { max-width: 52em; margin: 24px 0 0; padding: 0 clamp(16px, 4vw, 56px); font-size: 18px; line-height: 1.55; color: #55535C; }
@media (max-width: 1023px) {
  #about .about__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #about .about__figs > div { padding: 28px 20px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .26); }
  #about .about__figs > div:nth-child(3n + 1) { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .26); }
  #about .about__figs > div:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  #about .about__figs > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .26); }
  #about .about__figs b { font-size: clamp(42px, 8vw, 64px); }
}
@media (max-width: 379px) {
  #about .about__figs { grid-template-columns: minmax(0, 1fr); }
  #about .about__figs > div, #about .about__figs > div:nth-child(3n + 1) { padding: 24px 0; border-left: 0; }
  #about .about__figs > div + div { border-top: 1px solid rgba(255, 255, 255, .26); }
}