/* ============================================================ LATITUDE SCREEN & RAIL — DEMONSTRATION SITE Design direction: ENGINEERING DRAWING SHEET Drafting paper ground, blueprint grid, ink-blue linework, graphite text, one annotation red used only for refusals and callouts. No external requests of any kind. ============================================================ */ :root{ --paper: #eef2f7; --paper-2: #f8fafc; --paper-3: #e3eaf2; --grid-min: rgba(120,152,186,.16); --grid-maj: rgba(120,152,186,.30); --ink: #12406f; /* linework */ --ink-2: #1b5798; --ink-3: #6e8dae; --gr: #262c33; /* graphite text */ --gr-2: #4c5661; --gr-3: #77828e; --red: #bf2a1c; /* annotation red — refusals + callouts ONLY */ --red-wash: #fbeceb; --rule: #a6bacd; --rule-2: #c6d4e1; /* paper values — the sheet is not one dead white */ --paper-4: #e9eff6; /* title block + schedule field sit ON the sheet */ --paper-5: #fdfefe; /* highlight side of the sheet gradient */ --grid-fine: rgba(120,152,186,.085); /* screen-mesh charcoal — every woven mesh on this site is drawn in it */ --mesh: #38434f; --mesh-2: #5f6c7b; --mesh-3: #8b96a2; /* anodized bronze — every aluminum extrusion is drawn in it */ --brz: #8a6435; --brz-2: #b0854f; --brz-3: #d7c3a4; --brz-wash: #f7f1e7; --sans: "Helvetica Neue", Helvetica, "Arial Narrow", Arial, "Liberation Sans", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* ⭐ THE ONE ACCENT — 11 Sep 2026. Drawing blue. It is NOT --ink: --ink is linework, it is everywhere, and a colour that is everywhere cannot point at anything. --acc appears in five places only: the mark, the offer strip, one phrase of the h1, the primary button, and focus. */ --acc: #1f5fa8; --acc-dk: #17497f; /* small type on paper — --acc alone is 5.8:1, this is 7.9:1 */ --acc-wash: #e9f0fa; --shell: 1180px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--sans); font-size:var(--t5); line-height:1.62; color:var(--gr); background-color:var(--paper); /* A real sheet has paper tone and print density. Three layers of wash sit under two tiers of grid: 24px fine, 120px coarse, with an 8px ghost tier that only shows up where the wash is lightest. */ background-image: radial-gradient(130% 90% at 8% -12%, rgba(255,255,255,.92), rgba(255,255,255,0) 58%), radial-gradient(100% 75% at 98% 4%, rgba(196,216,236,.50), rgba(196,216,236,0) 62%), linear-gradient(174deg, rgba(250,245,236,.62) 0%, rgba(250,245,236,0) 30%, rgba(206,221,236,.42) 100%), linear-gradient(var(--grid-maj) 1px, transparent 1px), linear-gradient(90deg, var(--grid-maj) 1px, transparent 1px), linear-gradient(var(--grid-min) 1px, transparent 1px), linear-gradient(90deg, var(--grid-min) 1px, transparent 1px), linear-gradient(var(--grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px, 8px 8px, 8px 8px; background-position: 0 0, 0 0, 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px, -1px -1px, -1px -1px; overflow-x:hidden; } img,svg{max-width:100%} a{color:var(--ink-2)} .shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 20px} /* ---------- demonstration strip ---------- */ .demostrip{ display:flex;align-items:flex-start;gap:.6rem; background:var(--ink);color:#e8f0f9; padding:.6rem 20px; font-size:var(--t2);line-height:1.5; letter-spacing:.01em; border-bottom:2px solid var(--red); } .demostrip b{color:#fff;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:var(--t1)} .demostrip a{color:#ffd9d4;text-decoration:underline;text-underline-offset:2px;white-space:nowrap} .demostrip__dot{ flex:none;width:9px;height:9px;margin-top:.42rem;border-radius:50%; background:var(--red);box-shadow:0 0 0 3px rgba(191,42,28,.28); } /* ---------- lettering ---------- */ .lbl{ display:inline-block; font-family:var(--mono); font-size:var(--t1); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); } .lbl--red{color:var(--red)} h1,h2,h3,h4{ font-family:var(--sans); font-weight:700; font-stretch:semi-condensed; letter-spacing:-.005em; color:var(--gr); margin:0 0 .55rem; line-height:1.14; } h1{font-size:var(--t8);letter-spacing:-.025em;line-height:1.055} h2{font-size:var(--t8);letter-spacing:-.019em;line-height:1.09} h3{font-size:var(--t6);letter-spacing:-.008em} h4{font-size:var(--t4);letter-spacing:.02em} p{margin:0 0 1rem} .mono{font-family:var(--mono)} .dim{font-family:var(--mono);font-size:var(--t3);color:var(--ink);letter-spacing:.02em} /* ---------- header ---------- */ .top{ position:sticky;top:0;z-index:60; background:rgba(248,250,252,.96); border-bottom:1px solid var(--rule); } .top__in{display:flex;align-items:center;gap:1rem;min-height:64px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;padding:.5rem 0} .brand__mk{ flex:none;width:38px;height:38px;border:1.5px solid var(--ink); display:grid;place-items:center;background:var(--paper-2); } .brand__mk svg{display:block;width:26px;height:26px} .brand__nm{display:block;font-weight:700;font-stretch:semi-condensed;font-size:var(--t5);letter-spacing:.01em;line-height:1.1} .brand__sub{display:block;font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .nav{margin-left:auto} .nav ul{display:flex;flex-wrap:wrap;gap:.15rem;list-style:none;margin:0;padding:0} .nav a{ display:block;padding:.42rem .6rem;text-decoration:none;color:var(--gr-2); font-size:var(--t3);font-weight:600;letter-spacing:.02em;border-bottom:2px solid transparent; } .nav a:hover{color:var(--ink);border-bottom-color:var(--ink)} .nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)} .top__act{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap} .tel{ font-family:var(--mono);font-size:var(--t3);font-weight:600;color:var(--gr); text-decoration:none;letter-spacing:.01em;white-space:nowrap; } .tel span{display:block;font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .btn{ display:inline-block;padding:.58rem 1.05rem;text-decoration:none;cursor:pointer; font-family:var(--mono);font-size:var(--t1);font-weight:600;letter-spacing:.14em;text-transform:uppercase; border:1.5px solid var(--ink);background:var(--ink);color:#fff; } .btn:hover{background:var(--ink-2);border-color:var(--ink-2)} .btn--line{background:transparent;color:var(--ink)} .btn--line:hover{background:var(--paper-3);color:var(--ink)} /* ---------- dimension rule between sections ---------- */ .dimrule{position:relative;height:1px;background:var(--rule);margin:0;border:0} .dimrule::before,.dimrule::after{ content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--rule); } .dimrule::before{left:0} .dimrule::after{right:0} .sec{padding:4.2rem 0} .sec--tight{padding:2.7rem 0} .sec__hd{max-width:64ch;margin-bottom:2rem} .sec__hd p{color:var(--gr-2)} .sec__hd .lbl{margin-bottom:.55rem} /* ---------- hero ---------- */ .hero, .showcase{padding:2.4rem 0 2.6rem;border-bottom:1px solid var(--rule)} .hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.8rem} .hero__lede{font-size:var(--t5);color:var(--gr-2);max-width:58ch} .hero__act{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.3rem 0 .8rem} .hero__note{font-family:var(--mono);font-size:var(--t2);color:var(--ink-3);letter-spacing:.02em;max-width:52ch} /* the drawing frame */ .sheet{ position:relative;background:var(--paper-2); border:1.5px solid var(--ink);padding:10px; } .sheet__in{border:1px solid var(--rule-2);padding:14px 14px 0} .sheet__hd{ display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);border-bottom:1px solid var(--rule-2);padding-bottom:.5rem;margin-bottom:.6rem; } .sheet__fig{overflow-x:auto} .sheet svg{display:block;width:100%;height:auto} .sheet__hint{display:none;margin:.5rem 0 0;font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:center} @media (max-width:820px){ .sheet__fig svg{min-width:640px} .sheet__hint{display:block} } /* title block */ .tblock{ border:1.5px solid var(--ink);background:var(--paper-2); display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:10px; } .tblock__row{ grid-column:1/-1;border-bottom:1px solid var(--rule); padding:.5rem .7rem; } .tblock__cell{border-top:1px solid var(--rule);border-right:1px solid var(--rule);padding:.44rem .7rem} .tblock__cell:nth-child(even){border-right:0} .tblock dt{ font-family:var(--mono);font-size:var(--t1);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3); } .tblock dd{margin:.1rem 0 0;font-family:var(--mono);font-size:var(--t2);color:var(--gr);letter-spacing:.01em} .tblock__nm{font-weight:700;font-stretch:semi-condensed;font-size:var(--t5);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)} .tblock__sh{font-family:var(--mono);font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;color:var(--gr-2);margin-top:.1rem} /* ---------- the record (schedule table field) ---------- */ .rec{border:1.5px solid var(--ink);background:var(--paper-2)} .rec__hd{ display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap; background:var(--ink);color:#e8f0f9;padding:.55rem .85rem; font-family:var(--mono);font-size:var(--t1);letter-spacing:.15em;text-transform:uppercase; } .rec__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--rule)} .rec__m{padding:.5rem .85rem;border-right:1px solid var(--rule);border-top:1px solid var(--rule-2)} .rec__m:nth-child(even){border-right:0} .rec__m dt{font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .rec__m dd{margin:.08rem 0 0;font-family:var(--mono);font-size:var(--t2);color:var(--gr)} .rec__scroll{overflow-x:auto} .rec table{width:100%;border-collapse:collapse;min-width:520px} .rec th{ text-align:left;font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);font-weight:400;padding:.5rem .85rem;border-bottom:1px solid var(--rule); } .rec td{padding:.6rem .85rem;border-bottom:1px solid var(--rule-2);vertical-align:top;font-size:var(--t4)} .rec td:last-child,.rec th:last-child{text-align:right;font-family:var(--mono);white-space:nowrap} .rec__it{display:block;font-weight:600;color:var(--gr)} .rec__sp{display:block;font-family:var(--mono);font-size:var(--t1);color:var(--gr-3);letter-spacing:.01em;margin-top:.12rem} .rec__ref{font-family:var(--mono);font-size:var(--t1);color:var(--ink-3);white-space:nowrap} tr.is-declined{background:var(--red-wash)} tr.is-declined .rec__it{color:var(--red);text-transform:uppercase;letter-spacing:.04em} tr.is-declined td:last-child{color:var(--red);font-weight:700} tr.is-declined .rec__ref{color:var(--red)} .rec__why{ border-top:1.5px solid var(--red);background:var(--red-wash); padding:.9rem .85rem;font-size:var(--t4);color:var(--gr); } .rec__why b{color:var(--red);text-transform:uppercase;letter-spacing:.06em;font-size:var(--t2);font-family:var(--mono)} .rec__ft{ display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap; border-top:1px solid var(--rule);padding:.55rem .85rem; font-family:var(--mono);font-size:var(--t1);color:var(--gr-2); } .rec__tot{color:var(--gr);font-weight:700} /* ---------- spec table (services) ---------- */ .spectbl{overflow-x:auto;border:1.5px solid var(--ink);background:var(--paper-2)} .spectbl table{width:100%;border-collapse:collapse;min-width:640px} .spectbl caption{ caption-side:top;text-align:left;background:var(--ink);color:#e8f0f9; padding:.55rem .85rem;font-family:var(--mono);font-size:var(--t1);letter-spacing:.15em;text-transform:uppercase; } .spectbl th{ text-align:left;font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);font-weight:400;padding:.55rem .85rem;border-bottom:1px solid var(--rule); } .spectbl td{padding:.75rem .85rem;border-bottom:1px solid var(--rule-2);vertical-align:top;font-size:var(--t4);color:var(--gr-2)} .spectbl tr:last-child td{border-bottom:0} .spectbl a{font-weight:700;color:var(--ink);text-decoration:none;font-stretch:semi-condensed;font-size:var(--t5)} .spectbl a:hover{text-decoration:underline} .spectbl .c-spec{font-family:var(--mono);font-size:var(--t2);color:var(--ink);white-space:nowrap} .spectbl .c-ref{font-family:var(--mono);font-size:var(--t1);color:var(--ink-3);white-space:nowrap} /* ---------- callout ---------- */ .callout{ position:relative;border-left:2px solid var(--red);background:var(--paper-2); padding:.9rem 1rem;margin:1.4rem 0; } .callout__n{ display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%; border:1.5px solid var(--red);color:var(--red); font-family:var(--mono);font-size:var(--t1);font-weight:700;margin-right:.5rem;vertical-align:-4px; } .callout p:last-child{margin-bottom:0} .note{ border:1px dashed var(--rule);background:var(--paper-2);padding:.9rem 1rem;margin:1.4rem 0; font-size:var(--t4);color:var(--gr-2); } .note b{color:var(--gr)} .note p:last-child{margin-bottom:0} /* ---------- generic prose + grids ---------- */ .prose{max-width:70ch} .prose h3{margin-top:1.9rem} .prose ul{padding-left:1.1rem;margin:0 0 1rem} .prose li{margin-bottom:.45rem} .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem} @media (min-width:860px){ .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem} .cols--3{grid-template-columns:repeat(3,minmax(0,1fr))} } .card{border:1px solid var(--rule);background:var(--paper-2);padding:1.1rem} .card .lbl{display:block;margin-bottom:.4rem} .card p:last-child{margin-bottom:0} .card h3{margin-bottom:.4rem} .steps{list-style:none;margin:0;padding:0;counter-reset:s} .steps li{ position:relative;padding:0 0 1.5rem 3.1rem;border-left:1px solid var(--rule);margin-left:.9rem; } .steps li:last-child{border-left-color:transparent;padding-bottom:0} .steps li::before{ counter-increment:s;content:counter(s,decimal-leading-zero); position:absolute;left:-15px;top:0;width:30px;height:30px; display:grid;place-items:center;background:var(--paper-2);border:1.5px solid var(--ink); color:var(--ink);font-family:var(--mono);font-size:var(--t1);font-weight:700; } .steps h3{margin-bottom:.35rem} .steps p:last-child{margin-bottom:0} .steps .dim{display:block;margin-top:.35rem} .faq{border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule-2);padding:.9rem 0} .faq summary{cursor:pointer;font-weight:700;font-stretch:semi-condensed;font-size:var(--t5);color:var(--gr);list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"+ ";font-family:var(--mono);color:var(--red)} .faq details[open] summary::before{content:"\2212 "} .faq .a{padding-top:.7rem;max-width:70ch;color:var(--gr-2)} .faq .a p:last-child{margin-bottom:0} .empty{ border:1px dashed var(--ink-3);background:var(--paper-2);padding:1.6rem;text-align:center; } .empty b{display:block;font-family:var(--mono);font-size:var(--t2);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:.4rem} .empty span{display:block;max-width:52ch;margin:0 auto;font-size:var(--t4);color:var(--gr-2)} /* ---------- form ---------- */ .form{border:1.5px solid var(--ink);background:var(--paper-2);padding:1.2rem} .form .fg{margin-bottom:1rem} .form label{ display:block;font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase; color:var(--ink);margin-bottom:.3rem; } .form input,.form select,.form textarea{ width:100%;padding:.6rem .7rem;border:1px solid var(--rule);background:#fff; font-family:var(--sans);font-size:var(--t4);color:var(--gr); } .form textarea{min-height:120px;resize:vertical} .form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:-1px} .form .hint{font-size:var(--t2);color:var(--gr-3);margin:.3rem 0 0} /* ---------- footer ---------- */ .foot{border-top:2px solid var(--ink);background:var(--paper-2);padding:2.2rem 0 1.4rem;margin-top:1rem} .foot__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem} @media (min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}} .foot h4{font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem} .foot ul{list-style:none;margin:0;padding:0} .foot li{margin-bottom:.3rem} .foot a{color:var(--gr-2);text-decoration:none;font-size:var(--t4)} .foot a:hover{color:var(--ink);text-decoration:underline} .foot p{font-size:var(--t4);color:var(--gr-2)} .foot__bar{ border-top:1px solid var(--rule);margin-top:1.6rem;padding-top:1rem; font-family:var(--mono);font-size:var(--t1);color:var(--gr-3);letter-spacing:.02em; } .foot__bar p{font-size:var(--t1);color:var(--gr-3);font-family:var(--mono)} /* ---------- chat launcher (bottom LEFT — host page owns the right) ---------- */ .chatbtn{ position:fixed;left:16px;bottom:16px;z-index:90; display:flex;align-items:center;gap:.5rem; border:1.5px solid var(--ink);background:var(--ink);color:#fff; padding:.6rem .9rem;cursor:pointer; font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase; } .chatbtn:hover{background:var(--ink-2)} .chatbtn i{width:8px;height:8px;border-radius:50%;background:#7fe0a8;display:block} .chatpanel{ position:fixed;left:16px;bottom:16px;z-index:95;width:min(360px,calc(100vw - 32px)); background:var(--paper-2);border:1.5px solid var(--ink);display:none;flex-direction:column; max-height:min(560px,calc(100vh - 32px)); box-shadow:0 10px 34px rgba(18,64,111,.22); } .chatpanel.is-open{display:flex} .chatpanel__hd{ display:flex;align-items:center;justify-content:space-between;gap:.5rem; background:var(--ink);color:#e8f0f9;padding:.55rem .7rem; font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase; } .chatpanel__hd button{background:none;border:0;color:#e8f0f9;font-size:var(--t6);cursor:pointer;line-height:1;padding:0 .2rem} .chatlog{padding:.8rem;overflow-y:auto;flex:1;font-size:var(--t4);min-height:150px} .msg{margin-bottom:.7rem;max-width:92%} .msg p{margin:0;padding:.55rem .7rem;border:1px solid var(--rule);background:#fff} .msg--bot p{border-left:2px solid var(--ink)} .msg--me{margin-left:auto} .msg--me p{background:var(--ink);color:#fff;border-color:var(--ink)} .chatops{border-top:1px solid var(--rule);padding:.6rem;display:flex;flex-wrap:wrap;gap:.4rem} .chatops button{ border:1px solid var(--ink);background:var(--paper-2);color:var(--ink);cursor:pointer; padding:.42rem .6rem;font-family:var(--sans);font-size:var(--t2);text-align:left; } .chatops button:hover{background:var(--paper-3)} .chatops input{ flex:1;min-width:150px;padding:.45rem .6rem;border:1px solid var(--rule);font-size:var(--t4);font-family:var(--sans); } .chatnote{ padding:.45rem .7rem;border-top:1px solid var(--rule-2); font-family:var(--mono);font-size:var(--t1);letter-spacing:.06em;color:var(--gr-3); } @media (min-width:980px){ .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:2.4rem;align-items:start} .hero, .showcase{padding:3.2rem 0 3.4rem} .tblock{grid-template-columns:repeat(3,minmax(0,1fr))} .tblock__cell:nth-child(even){border-right:1px solid var(--rule)} .tblock__cell:last-child{border-right:0} .rec__meta{grid-template-columns:repeat(4,minmax(0,1fr))} .rec__m:nth-child(even){border-right:1px solid var(--rule)} .rec__m:last-child{border-right:0} } @media (max-width:520px){ .top__in{min-height:0;padding-top:.5rem;padding-bottom:.5rem} .nav{margin-left:0;width:100%;order:3} .nav ul{gap:0} .nav a{padding:.3rem .45rem;font-size:var(--t2)} .sec{padding:2.9rem 0} .sec--tight{padding:2.1rem 0} .chatbtn{left:10px;bottom:10px;padding:.5rem .7rem;font-size:var(--t1)} .chatpanel{left:10px;bottom:10px} } @media print{ /* ⛔ superseded — the notice is a chip in .utilbar now */ .chatbtn,.chatpanel,.top{display:none} body{background-image:none} } /* ============================================================ ENRICHMENT PASS — paper depth, two working hues, motion, drawn details, and designed slots for photographs to come. Nothing below loads anything. Motion only ever ENHANCES: every drawing is complete with the stylesheet alone. ============================================================ */ /* ---------- paper depth ---------- */ .sheet{ background:linear-gradient(158deg,var(--paper-5) 0%,var(--paper-2) 42%,#eef4fa 100%); box-shadow:5px 5px 0 0 rgba(18,64,111,.055); } .sheet__in{background:transparent} .tblock{background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper-4) 100%)} .tblock__row{background:var(--paper-2)} .rec{background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper-4) 340px,var(--paper-4) 100%)} .rec__hd,.spectbl caption,.meshcmp__hd{ background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%); } .spectbl{background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper-4) 100%)} .card{background:linear-gradient(172deg,var(--paper-2) 0%,var(--paper-4) 100%)} .foot{background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper-4) 100%)} .top{backdrop-filter:saturate(1.4) blur(3px);-webkit-backdrop-filter:saturate(1.4) blur(3px)} h1,h2,h3,h4{overflow-wrap:break-word} /* the coarse tier gets a corner tick where two majors cross — print density */ .sec{position:relative} /* ---------- the two working hues ---------- */ /* bronze = aluminum extrusion. charcoal = woven mesh. red stays rare. */ .spectbl .c-spec{color:var(--brz)} .spectbl .c-ref{color:var(--ink-3)} .tag-mesh,.tag-brz{ display:inline-block;font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em; text-transform:uppercase;padding:.14rem .42rem;border:1px solid currentColor; } .tag-mesh{color:var(--mesh)} .tag-brz{color:var(--brz)} /* ---------- motion ---------- */ @keyframes lsr-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes lsr-fade{from{opacity:0}to{opacity:1}} @keyframes lsr-draw{from{stroke-dashoffset:var(--dl,900)}to{stroke-dashoffset:0}} @keyframes lsr-pop{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:none}} @keyframes lsr-dot{0%,100%{box-shadow:0 0 0 3px rgba(191,42,28,.30)}50%{box-shadow:0 0 0 7px rgba(191,42,28,.06)}} @keyframes lsr-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* Section reveals. The class is added by script; without it, everything is already in its finished state. Never the other way round. */ .rv.is-in{animation:lsr-rise .55s cubic-bezier(.22,.68,.34,1) both;animation-delay:var(--d,0s)} .demostrip__dot{animation:lsr-dot 3.4s ease-in-out infinite} /* --- the drawing draws itself --- */ /* Default (no .is-in): complete, static, visible. */ .drw .d-deck,.drw .d-post,.drw .d-beam,.drw .d-door,.drw .d-dim, .drw .d-a,.drw .d-b{stroke-dashoffset:0} .drw.is-in .d-deck{stroke-dasharray:920;animation:lsr-draw .5s ease-out both;--dl:920} .drw.is-in .d-post{stroke-dasharray:620;animation:lsr-draw .5s ease-out .16s both;--dl:620} .drw.is-in .d-beam{stroke-dasharray:1700;animation:lsr-draw .58s ease-out .34s both;--dl:1700} .drw.is-in .d-mesh{animation:lsr-fade .5s ease-out .62s both} .drw.is-in .d-door{stroke-dasharray:760;animation:lsr-draw .42s ease-out .74s both;--dl:760} .drw.is-in .d-dim{stroke-dasharray:880;animation:lsr-draw .44s ease-out .92s both;--dl:880} .drw.is-in .d-txt{animation:lsr-fade .38s ease-out 1.06s both} .drw.is-in .d-note{animation:lsr-pop .4s cubic-bezier(.2,1.35,.4,1) 1.2s both;transform-box:fill-box;transform-origin:50% 50%} /* compact variant used by the detail drawings */ .drw.is-in .d-a{stroke-dasharray:820;animation:lsr-draw .46s ease-out both;--dl:820} .drw.is-in .d-b{stroke-dasharray:620;animation:lsr-draw .46s ease-out .17s both;--dl:620} .drw.is-in .d-c{animation:lsr-fade .42s ease-out .34s both} .drw.is-in .d-d{animation:lsr-fade .36s ease-out .52s both} /* ---------- hover + focus, 150–250ms ---------- */ a{transition:color .18s ease,background-color .18s ease,border-color .18s ease,text-decoration-color .18s ease} .nav a{transition:color .18s ease,border-bottom-color .2s ease,background-color .18s ease} .nav a:hover{background:var(--paper-3)} .btn{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease} .btn:hover{transform:translateY(-2px);box-shadow:0 2px 0 0 rgba(18,64,111,.5)} .btn:active{transform:translateY(0);box-shadow:none} .btn--line:hover{box-shadow:0 2px 0 0 var(--brz-2)} .tel{transition:color .18s ease} .tel:hover{color:var(--ink)} .brand__mk{transition:border-color .2s ease,background-color .2s ease} .brand:hover .brand__mk{border-color:var(--brz);background:var(--brz-wash)} .spectbl tbody tr{transition:background-color .2s ease} .spectbl tbody tr:hover{background:var(--brz-wash)} .spectbl tbody td:first-child{position:relative} .spectbl tbody td:first-child::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brz); transform:scaleX(0);transform-origin:left center;transition:transform .2s ease; } .spectbl tbody tr:hover td:first-child::before{transform:scaleX(1)} .spectbl a{transition:color .18s ease} .spectbl tbody tr:hover a{color:var(--brz)} .rec tbody tr{transition:background-color .2s ease} .rec tbody tr:hover{background:var(--paper-3)} .rec tbody tr.is-declined{transition:background-color .2s ease} .rec tbody tr.is-declined:hover{background:#f7dcd8} .card{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease} .card:hover{border-color:var(--ink-3)} .steps li::before{transition:background-color .2s ease,color .2s ease,border-color .2s ease} .steps li:hover::before{background:var(--ink);color:#fff} .faq summary{transition:color .18s ease} .faq summary:hover{color:var(--ink)} .faq details{transition:background-color .2s ease} .faq details[open]{background:linear-gradient(90deg,rgba(233,239,246,.7),rgba(233,239,246,0))} .chatops button{transition:background-color .18s ease,border-color .18s ease,color .18s ease} .chatbtn{transition:background-color .18s ease,transform .18s ease} .chatbtn:hover{transform:translateY(-2px)} .form input,.form select,.form textarea{transition:border-color .18s ease,background-color .18s ease} .form input:hover,.form select:hover,.form textarea:hover{border-color:var(--ink-3)} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible{outline:2px solid var(--brz);outline-offset:2px} /* ---------- detail drawings ---------- */ .dtlgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem} @media (min-width:680px){.dtlgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1020px){.dtlgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}} .dtl{ border:1px solid var(--rule); background:linear-gradient(168deg,var(--paper-2) 0%,var(--paper-4) 100%); padding:10px 10px 0; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; } .dtl:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:4px 4px 0 0 rgba(18,64,111,.07)} .dtl__hd{ display:flex;justify-content:space-between;align-items:baseline;gap:.7rem; font-family:var(--mono);font-size:var(--t1);letter-spacing:.15em;text-transform:uppercase; color:var(--ink-3);border-bottom:1px solid var(--rule-2);padding-bottom:.42rem; } .dtl__hd b{color:var(--ink);font-weight:700;letter-spacing:.15em} .dtl__fig{padding:.55rem 0 .35rem} .dtl svg{display:block;width:100%;height:auto} .dtl__cap{ margin:0 -10px;padding:.6rem .75rem;border-top:1px solid var(--rule-2); background:var(--paper-2);font-size:var(--t3);color:var(--gr-2); } .dtl__cap b{display:block;color:var(--gr);font-size:var(--t4);font-stretch:semi-condensed;margin-bottom:.12rem} .dtl__cap a{font-family:var(--mono);font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor} /* a single detail, full width, on a service page */ .dtl--wide{max-width:640px} /* ---------- mesh comparison ---------- */ .meshcmp{border:1.5px solid var(--ink);background:var(--paper-2)} .meshcmp__hd{ display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap; color:#e8f0f9;padding:.55rem .85rem; font-family:var(--mono);font-size:var(--t1);letter-spacing:.15em;text-transform:uppercase; } .meshcmp__grid{display:grid;grid-template-columns:minmax(0,1fr)} @media (min-width:760px){.meshcmp__grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .meshcmp__c{padding:.95rem;border-top:1px solid var(--rule-2);transition:background-color .2s ease} .meshcmp__c:hover{background:var(--paper-4)} @media (min-width:760px){ .meshcmp__c{border-top:0;border-right:1px solid var(--rule-2)} .meshcmp__c:last-child{border-right:0} } .meshcmp__c h3{font-size:var(--t5);margin-bottom:.15rem} .meshcmp__w{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.5rem} .meshcmp__c p{font-size:var(--t3);color:var(--gr-2);margin:.55rem 0 0} .meshcmp__c svg{display:block;width:100%;height:auto;border:1px solid var(--rule-2);background:#fff} .meshcmp__ft{border-top:1px solid var(--rule);padding:.85rem} .meshcmp__bar{ position:relative;height:12px;border:1px solid var(--rule); background:linear-gradient(90deg,var(--brz-3) 0%,var(--brz-2) 30%,var(--mesh-2) 70%,var(--mesh) 100%); } .meshcmp__bar span{position:absolute;top:-1px;bottom:-1px;width:1px;background:rgba(255,255,255,.75)} .meshcmp__lg{ display:flex;justify-content:space-between;gap:.8rem;margin-top:.4rem; font-family:var(--mono);font-size:var(--t1);letter-spacing:.11em;text-transform:uppercase;color:var(--gr-2); } .meshcmp__lg b{color:var(--mesh)} .meshcmp__lg i{font-style:normal;color:var(--brz)} /* ---------- designed slots for photographs not yet taken ---------- */ .figgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem} @media (min-width:760px){.figgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} .figslot{ border:1.5px solid var(--ink); background:linear-gradient(158deg,var(--paper-5) 0%,var(--paper-2) 50%,var(--paper-4) 100%); padding:9px; transition:border-color .2s ease,box-shadow .2s ease; } .figslot:hover{box-shadow:4px 4px 0 0 rgba(18,64,111,.07)} .figslot__in{ position:relative;border:1px solid var(--rule-2);overflow:hidden; aspect-ratio:3 / 2; background: linear-gradient(178deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 46%), linear-gradient(158deg,#f4f8fc 0%,#e6eef6 52%,#dbe6f1 100%); } .figslot__in svg{position:absolute;inset:0;display:block;width:100%;height:100%} .figslot__tag{ position:absolute;left:0;top:0;z-index:2; background:var(--ink);color:#eaf1f8; font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase; padding:.3rem .55rem; } .figslot__stamp{ position:absolute;right:8px;bottom:8px;z-index:2; border:1px dashed var(--brz);color:var(--brz);background:rgba(255,255,255,.74); font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase; padding:.22rem .45rem; } .figslot__cap{ display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;flex-wrap:wrap; padding:.6rem .1rem .1rem; font-family:var(--mono);font-size:var(--t1);letter-spacing:.05em;color:var(--gr-2);line-height:1.5; } .figslot__cap b{color:var(--ink);letter-spacing:.13em;text-transform:uppercase;font-size:var(--t1);white-space:nowrap} /* Belt and braces. The script sets .is-drawn a beat after the animation should have finished; from then on the finished state is forced. So a drawing can be left incomplete by nothing — not a failed script, not a frozen clock, not a browser that ignores @keyframes. The default, with no script at all, is already the complete drawing. */ .rv.is-drawn,.drw.is-drawn{animation:none !important;opacity:1 !important;transform:none !important} .drw.is-drawn [class^="d-"]{ animation:none !important;stroke-dashoffset:0 !important;opacity:1 !important;transform:none !important; } /* ---------- reduced motion: the drawing simply appears complete ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .drw.is-in [class^="d-"]{stroke-dashoffset:0 !important;opacity:1 !important;transform:none !important} } /* ═══ 📱 MOBILE MENU — added 8 Sep 2026. See tools/navfix notes. ⛔ Do not give this a colour. The panel IS this site's own