html { background:var(--page-bg); }
body { margin:0; background:var(--page-bg); color:rgb(var(--ink)); font-family:Archivo, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:clip; }
::selection { background:#F3F1EC; color:#07080A; }
a { color:rgb(var(--ink)); text-decoration:none; }
a:hover { color:#B9B4A8; }
img { -webkit-user-drag:none; user-select:none; }
section[id] { scroll-margin-top:110px; }
.site-nav { position:fixed; top:0; left:0; right:0; z-index:90; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 clamp(18px,3.4vw,52px); min-height:70px; background:color-mix(in srgb,var(--page-bg) 94%,transparent); backdrop-filter:blur(10px); box-sizing:border-box; }
.nav-links { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.6vw,24px); }
:root { --page-bg:#07080A; --ink:243,241,236; color-scheme:dark; }
:root[data-theme="light"] { --page-bg:#f3f1ec; --ink:25,32,43; color-scheme:light; }
.contact-backdrop { position:absolute; inset:0; background:radial-gradient(closest-side at 50% 50%,color-mix(in srgb,var(--page-bg) 78%,transparent),color-mix(in srgb,var(--page-bg) 94%,transparent) 62%,var(--page-bg)); }
.contact-button { display:inline-flex; align-items:center; height:52px; padding:0 32px; border-radius:999px; background:rgb(var(--ink)); color:var(--page-bg); font:11.5px 'IBM Plex Mono',monospace; letter-spacing:.18em; white-space:nowrap; }
.contact-button:hover { background:rgba(var(--ink),.85); color:var(--page-bg); }
.contact-button:focus-visible { outline:2px solid rgb(var(--ink)); outline-offset:5px; }
.enquiry-section { width:100%; max-width:1000px; }
.enquiry-section > h2,.enquiry-section > p { text-align:center; }
.enquiry-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:32px; margin-top:28px; }
.enquiry-layout form { display:grid; gap:16px; }
.enquiry-layout label { display:grid; gap:7px; font-size:14px; }
/* Signed-in swaps: account-links.js sets data-silks-signed-in / data-silks-identity on . */
html:not([data-silks-signed-in]) [data-signed-in-only] { display:none; }
html:not([data-silks-identity]) [data-enquiry-sender] { display:none; }
html[data-silks-identity] [data-enquiry-identity] { display:none; }
[data-enquiry-error]:empty { display:none; }
[hidden] { display:none !important; }
.enquiry-layout input,.enquiry-layout textarea { box-sizing:border-box; width:100%; border:1px solid rgba(var(--ink),.3); border-radius:8px; padding:12px; background:var(--page-bg); color:rgb(var(--ink)); font:inherit; }
.enquiry-layout textarea { resize:vertical; }
.enquiry-layout input:focus-visible,.enquiry-layout textarea:focus-visible { outline:2px solid rgb(var(--ink)); outline-offset:2px; }
.enquiry-layout .contact-button { border:0; cursor:pointer; justify-content:center; width:fit-content; max-width:100%; white-space:normal; line-height:1.5; }
.enquiry-layout button:disabled { opacity:.6; cursor:wait; }
.enquiry-layout aside,.enquiry-layout [role="status"] { line-height:1.7; }
.enquiry-layout [role="alert"] { color:rgb(var(--ink)); border-left:3px solid #d7794b; padding-left:12px; }
.enquiry-honeypot { display:none; }
@media(max-width:720px) { .enquiry-layout { grid-template-columns:1fr; gap:24px; } }
.brand-logo { display:flex; align-items:center; flex:none; gap:7px; color:rgb(var(--ink)); }
.brand-mark { display:block; width:47px; height:46px; overflow:hidden; flex:none; }
.brand-mark img { display:block; width:200px; height:auto; max-width:none; transform:translate(-14px,-19px); }
.brand-wordmark { font:700 23px Archivo,Helvetica,Arial,sans-serif; letter-spacing:-.8px; white-space:nowrap; }
:root[data-theme="light"] .brand-mark img { content:url('../assets/logo-concepts/sash-v1.png'); }
.account-placeholders .theme-toggle { grid-column:1/-1; cursor:pointer; padding:4px 10px; }
@media(max-width:480px) { .brand-wordmark { font-size:19px; } .brand-logo { gap:3px; } }
.nav-commercial { font:10.5px 'IBM Plex Mono',monospace; letter-spacing:.2em; color:rgba(var(--ink),.65); }
.account-placeholders { display:grid; grid-template-columns:auto auto; align-items:center; gap:4px 6px; flex:none; }
.account-placeholders button { padding:8px 12px; border:1px solid rgba(var(--ink),.24); border-radius:999px; background:transparent; color:rgba(var(--ink),.65); font:11px Archivo,sans-serif; cursor:not-allowed; }
.account-placeholders .signup-placeholder { background:#e8e5dc; color:#333; border-color:#e8e5dc; }
.account-placeholders a { padding:8px 12px; border:1px solid rgba(var(--ink),.24); border-radius:999px; color:rgba(var(--ink),.65); font:11px Archivo,sans-serif; }
.hero-copy .account-note { margin-top:10px; font-size:12px; line-height:1.6; }
.account-placeholders span { grid-column:1/-1; font:8px 'IBM Plex Mono',monospace; text-align:center; color:rgba(var(--ink),.4); letter-spacing:.08em; }
.commercial-section { padding:clamp(26px,3vw,38px) clamp(18px,3.4vw,52px); border-top:1px solid rgba(var(--ink),.08); }
.commercial-inner { max-width:1280px; margin:0 auto; }
.use-cases-section { position:relative; padding:clamp(26px,3vw,38px) clamp(18px,3.4vw,52px); border-top:1px solid rgba(var(--ink),.08); }
.use-cases-section h2 { margin:12px 0; font-size:clamp(30px,3.6vw,50px); line-height:1.04; letter-spacing:-.035em; }
.use-cases-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.use-case-card { min-width:0; display:flex; flex-direction:column; padding:20px; border:1px solid rgba(var(--ink),.12); border-radius:18px; background:linear-gradient(145deg,rgba(var(--ink),.045),rgba(var(--ink),.012)); }
.use-case-art { display:flex; align-items:center; justify-content:center; gap:12px; min-height:96px; margin:0 0 18px; border-radius:10px; background:#e8e5dc; }
.use-case-art img { display:block; width:clamp(55px,5.5vw,85px); max-width:28%; aspect-ratio:1; object-fit:contain; }
.use-case-type { font:9px 'IBM Plex Mono',monospace; letter-spacing:.13em; color:rgba(var(--ink),.45); line-height:1.6; }
.use-case-card h3 { margin:12px 0 14px; font-size:clamp(23px,2.1vw,29px); line-height:1.15; letter-spacing:-.025em; }
.use-case-card p { margin:0 0 24px; color:rgba(var(--ink),.65); font-size:14px; line-height:1.6; }
.use-case-output { margin-top:auto; border-top:1px solid rgba(var(--ink),.1); padding-top:18px; color:rgba(var(--ink),.72); font-size:12px; line-height:1.7; }
.use-case-output span { display:block; margin-bottom:7px; font:9px 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:rgba(var(--ink),.4); }
.use-case-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:20px; padding:16px 0; border-bottom:1px solid rgba(var(--ink),.1); }
.use-case-footer p { max-width:690px; margin:0; font-size:14px; line-height:1.6; color:rgba(var(--ink),.6); }
.use-case-footer a { flex:none; font-size:13px; border-bottom:1px solid rgba(var(--ink),.35); padding:8px 0; }
.use-case-caveat { margin:18px 0 0; font-size:11px; line-height:1.7; color:rgba(var(--ink),.4); }
@media (max-width:1000px) { .use-cases-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .use-cases-grid { grid-template-columns:1fr; } .use-case-art img { width:85px; } .use-case-footer { align-items:flex-start; flex-direction:column; gap:12px; } }
.section-eyebrow { font:10px 'IBM Plex Mono',monospace; letter-spacing:.24em; color:rgba(var(--ink),.45); }
.commercial-section h2 { margin:12px 0; font-size:clamp(30px,3.6vw,50px); line-height:1.04; letter-spacing:-.035em; }
.section-intro { max-width:680px; margin:0 0 26px; color:rgba(var(--ink),.6); font-size:clamp(15px,1.3vw,18px); line-height:1.7; }
.plans-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.plan-card,.delivery-card,.custom-card,.request-card { min-width:0; padding:20px; border:1px solid rgba(var(--ink),.13); border-radius:18px; background:rgba(var(--ink),.025); }
.plan-featured { background:rgba(var(--ink),.065); border-color:rgba(var(--ink),.3); }
.plan-type { font:9px 'IBM Plex Mono',monospace; letter-spacing:.16em; color:rgba(var(--ink),.5); }
.commercial-section h3 { margin:18px 0 14px; font-size:25px; letter-spacing:-.025em; }
.plan-card p,.delivery-card p,.service-details p,.custom-card p,.request-card p,.request-summary p { margin:0; color:rgba(var(--ink),.62); font-size:14px; line-height:1.6; }
.custom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.request-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.request-section { background:linear-gradient(180deg,rgba(var(--ink),.025),transparent); }
.request-card .request-example { margin-top:24px; padding-top:20px; border-top:1px solid rgba(var(--ink),.1); font-size:12px; color:rgba(var(--ink),.5); }
.request-summary { margin-top:30px; max-width:850px; }
.request-summary h3 { font-size:21px; }
.custom-details-link { display:inline-block; margin-top:20px; font-size:13px; border-bottom:1px solid rgba(var(--ink),.3); padding-bottom:6px; }
@media (max-width:850px) { .custom-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .request-grid { grid-template-columns:1fr; } }
.plan-card ul { padding-left:18px; margin:16px 0; color:rgba(var(--ink),.8); font-size:13px; line-height:1.6; }
.plan-card li+li { margin-top:10px; }
.plan-card .plan-detail { padding-top:20px; border-top:1px solid rgba(var(--ink),.1); font-size:12px; color:rgba(var(--ink),.45); }
.launch-note { max-width:780px; margin:26px 0 18px; font-size:12px; line-height:1.7; color:rgba(var(--ink),.48); }
.commercial-link { display:inline-flex; align-items:center; gap:16px; border-bottom:1px solid rgba(var(--ink),.35); padding-bottom:8px; font-size:14px; }
.delivery-section { background:linear-gradient(180deg,rgba(var(--ink),.025),transparent); }
.delivery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.service-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:24px; }
.service-details h3 { font-size:18px; }
.service-details p { font-size:13px; }
@media (max-width:1100px) { .site-nav { flex-wrap:wrap; padding-top:10px; padding-bottom:10px; } .nav-links { order:3; width:100%; gap:18px; } section[id] { scroll-margin-top:140px; } }
@media (max-width:720px) { .plans-grid,.delivery-grid,.service-details { grid-template-columns:1fr; } .site-nav .nav-links { justify-content:space-between; gap:8px; } .nav-links a[href="#global"],.nav-links a[href="#scale"],.nav-links a[href="#contact"] { display:none!important; } .commercial-section { padding-top:26px; padding-bottom:26px; } }
.hero-section { padding:108px clamp(18px,3.4vw,52px) 24px; background:radial-gradient(ellipse at 80% 40%,rgba(var(--ink),.04),transparent 60%); }
.hero-layout { max-width:1280px; margin:auto; display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; }
.hero-copy h1 { margin:20px 0; font-size:clamp(38px,5.7vw,82px); line-height:1.02; letter-spacing:-.04em; }
.hero-copy p { max-width:530px; font-size:clamp(15px,1.3vw,18px); line-height:1.7; color:rgba(var(--ink),.62); }
.hero-cta { display:inline-flex; align-items:center; gap:22px; margin-top:18px; padding:14px 22px; border-radius:999px; background:#e8e5dc; color:#161616; font-size:13px; }
.hero-preview { margin:0; min-width:0; }
.hero-preview > img { display:block; box-sizing:border-box; width:min(100%,310px); max-height:310px; margin:0 auto 18px; padding:24px; border-radius:22px; background:#e8e5dc; object-fit:contain; aspect-ratio:1; }
.logo-concepts { max-width:1280px; margin:auto; padding:36px clamp(18px,3.4vw,52px); }
.logo-concept-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.logo-concept-grid figure { margin:0; min-width:0; }
.logo-concept-grid img { display:block; width:100%; aspect-ratio:2.4; object-fit:contain; background:#f3f1ec; border-radius:12px; }
.logo-concept-grid figcaption { padding:12px 0; font-size:13px; color:rgba(var(--ink),.75); }
@media(max-width:620px) { .logo-concept-grid { grid-template-columns:1fr; } }
.hero-preview figcaption { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; font-size:11px; color:rgba(var(--ink),.55); }
.hero-preview button { border:0; border-bottom:1px solid rgba(var(--ink),.25); background:transparent; color:inherit; padding:5px 0; font:inherit; cursor:pointer; }
.hero-preview button:focus-visible { outline:2px solid #F3F1EC; outline-offset:4px; }
.featured-example { border:1px solid rgba(var(--ink),.12); border-radius:18px; padding:18px; background:rgba(var(--ink),.025); }
.design-pair { display:grid; grid-template-columns:1fr 1.3fr; gap:18px; }
.design-pair figure { margin:0; min-width:0; }
.design-pair img { display:block; width:100%; height:clamp(190px,20vw,270px); object-fit:contain; border-radius:12px; }
.featured-silk img { box-sizing:border-box; padding:24px; background:var(--preview-background,#e8e5dc); }
.preview-background-control { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin:0 0 12px; color:rgba(var(--ink),.55); font-size:11px; }
.preview-background-control label { margin-right:auto; color:rgba(var(--ink),.75); }
.preview-background-control input { width:140px; max-width:45vw; accent-color:#e8e5dc; cursor:pointer; }
.preview-background-control input:focus-visible { outline:2px solid #F3F1EC; outline-offset:4px; }
.featured-rider img { background:#090a0c; }
.design-pair figcaption { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; font-size:12px; line-height:1.5; color:rgba(var(--ink),.8); }
.design-pair figcaption span:last-child { color:rgba(var(--ink),.45); }
.example-picker-label { margin:20px 0 10px; font-size:12px; color:rgba(var(--ink),.65); }
.example-picker { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; }
.example-picker button { display:flex; align-items:center; flex-direction:column; gap:8px; min-width:0; padding:12px 5px; border:1px solid transparent; border-radius:12px; background:transparent; color:rgba(var(--ink),.55); font:inherit; font-size:10px; line-height:1.4; cursor:pointer; }
.example-picker img { width:48px; height:48px; object-fit:contain; }
.example-picker button:hover,.example-picker button[aria-pressed="true"] { background:rgba(var(--ink),.06); border-color:rgba(var(--ink),.2); color:rgb(var(--ink)); }
.example-picker button:focus-visible { outline:2px solid #F3F1EC; outline-offset:2px; }
@media (max-width:720px) { .hero-section { padding-top:150px; } .hero-layout { gap:18px; grid-template-columns:1fr 1fr; } .hero-copy h1 { font-size:clamp(30px,6vw,44px); } .hero-preview > img { max-height:270px; } .example-picker { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:480px) { .hero-layout { grid-template-columns:1fr; } .hero-preview > img { height:220px; } .hero-preview { margin-top:4px; } .hero-copy h1 { font-size:42px; } .featured-example { padding:10px; } .design-pair { gap:10px; grid-template-columns:1fr 1fr; } .design-pair img { height:190px; } .design-pair figcaption { font-size:10px; gap:4px; flex-direction:column; } }
.style-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:0 0 16px; }
.style-picker button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; min-width:0; padding:14px 8px; border:1px solid transparent; border-radius:14px; background:transparent; color:rgba(var(--ink),.55); font:inherit; font-size:11px; cursor:pointer; transition:background .18s,color .18s,border-color .18s; }
.style-picker button img { width:64px; height:64px; object-fit:contain; transition:transform .18s; }
.style-picker button:hover, .style-picker button[aria-pressed="true"] { color:rgb(var(--ink)); background:rgba(var(--ink),.055); border-color:rgba(var(--ink),.18); }
.style-picker button:hover img { transform:translateY(-3px); }
.style-picker button:focus-visible { outline:2px solid #F3F1EC; outline-offset:3px; }
.gallery-note { margin:0 0 28px; font-size:12px; line-height:1.6; color:rgba(var(--ink),.42); }
@media (max-width:620px) { .style-picker { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { .style-picker button, .style-picker button img { transition:none; } }