/* Optic Wave Laboratories — 2026 rebuild
   Every gradient stop below is sampled pixel-by-pixel from the 2021 artwork:
   .plaque  <- qowl.jpg      (inner plaque y37..y111, text-free columns)
   .nav a   <- home.jpg      (inner plaque y5..y32)
   text     <- #decc96 flat cream, cap height = 31% of plaque height        */

:root{
  --oxblood:#520d0d;
  --cream:#decc96;
  --cream-hi:#f0e3bc;
  --rule-red:#a90101;
  --roundel-gold:#f0c00c;
  --ink:#231f1f;
  --shell-max:1350px;
  --serif:"Times New Roman",Times,"Nimbus Roman","Liberation Serif",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:0 clamp(0px,2vw,24px) clamp(16px,4vw,48px);
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background-color:var(--oxblood);
  background-image:linear-gradient(180deg,#000 0%,#0e0202 30%,#320907 60%,#530d0d 100%);
  background-repeat:no-repeat;
  background-size:100% 240px;
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:10px 14px;border-radius:4px}

.shell{
  --edge:clamp(13px,2.35vw,29px);          /* bodyarea.jpg edge band, 18px at 743 -> 29px at 1200 */
  max-width:var(--shell-max);
  margin:clamp(12px,3vw,34px) auto 0;
  padding:0 var(--edge);
  border-radius:6px;
  background-color:#000;
  background-repeat:no-repeat;
  background-position:left top,right top;
  background-size:var(--edge) 100%,var(--edge) 100%;
  /* sampled across bodyarea.jpg: maroon outside -> amber peak #9b663c -> hard to black */
  background-image:
    linear-gradient(90deg,#540e0e 0%,#571310 11%,#5c1913 22%,#622219 33%,#6c2d1e 44%,#7a3d28 55%,#88502f 67%,#9b663c 78%,#533c2c 89%,#000005 100%),
    linear-gradient(270deg,#540e0e 0%,#571111 11%,#5e1e15 22%,#662718 33%,#733623 44%,#83452e 55%,#925c3a 67%,#9f7346 78%,#533c2c 89%,#000005 100%);
  box-shadow:0 0 18px 4px rgba(84,14,14,.55), 0 0 46px 14px rgba(60,10,11,.35);
  overflow:hidden;
}

/* ---------- masthead ---------- */
.masthead{display:flex;align-items:center;gap:clamp(10px,2vw,22px);padding:clamp(10px,2vw,18px)}
.roundel{flex:0 0 auto;line-height:0}
.roundel img{
  width:clamp(96px,20vw,236px);height:auto;display:block;
  filter:drop-shadow(0 0 5px rgba(240,192,12,.45)) drop-shadow(0 2px 5px rgba(0,0,0,.85));
}
.plaque-stack{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:clamp(5px,.8vw,10px)}

/* ---------- the chrome plaque, straight off qowl.jpg ---------- */
.plaque{
  position:relative;
  border:.125em solid #120102;           /* 5px dark band on a 75px plaque */
  border-radius:.36em;                   /* outer arc; inner = outer - band, matching the artwork's ~6.5px */
  background-origin:padding-box;         /* gradient starts INSIDE the band, so the inner curve reads */
  background-clip:padding-box;
  /* sampled across the chrome region only (dy5..dy69 of qowl.jpg) */
  background-image:linear-gradient(180deg,
    #81807e 0.0%, #7a7c7b 1.6%, #777576 3.1%, #767072 4.7%,
    #716d6c 6.2%, #6a6967 7.8%, #686262 9.4%, #605a5a 12.5%,
    #5b5555 14.1%, #595051 15.6%, #544b4c 17.2%, #4f4647 18.8%,
    #473d3c 21.9%, #403434 25.0%, #3b2f2f 26.6%, #352727 29.7%,
    #302222 31.2%, #291919 34.4%, #251515 35.9%, #210f0f 37.5%,
    #1d0b0b 39.1%, #190707 40.6%, #160203 42.2%, #160203 57.8%,
    #1d0d0e 64.1%, #211313 67.2%, #251717 70.3%, #271b1d 71.9%,
    #2b1f21 75.0%, #302627 78.1%, #342b2c 81.2%, #373131 84.4%,
    #3c3636 87.5%, #403c3b 90.6%, #454140 93.8%, #444945 96.9%,
    #4a4a4a 98.4%, #494641 100%);
  box-shadow:
    0 0 0 .031em var(--rule-red),         /* 1px red rule, outside the dark band */
    0 2px 8px rgba(0,0,0,.8);
}

.brand{
  display:flex;align-items:center;justify-content:flex-end;
  font-size:clamp(1.15rem,4.15vw,3.1rem);  /* padding below is em-relative to THIS */
  padding:.58em 1.05em .58em .7em;
}
.brand-title{
  margin:0;
  font-family:var(--serif);
  font-weight:700;
  font-size:1em;
  line-height:1.15;
  letter-spacing:.005em;
  text-align:right;
  color:#e5cf9d;
  text-shadow:0 2px 0 rgba(0,0,0,.95), 0 3px 5px rgba(0,0,0,.85), 0 0 1px rgba(0,0,0,.9);
}

/* ---------- nav cells, straight off home.jpg ---------- */
.nav.plaque{
  font-size:1.35rem;
  border:.078em solid var(--rule-red);  /* red rule IS the frame, per home.jpg y5/y32 */
  border-radius:.32em;
  box-shadow:0 2px 8px rgba(0,0,0,.8);  /* no outer red ring: the border is the rule */
}
/* first/last cells must curve with the bar, or their gradient cuts square at the corner */
/* home.jpg: red arc x4->x2 over dy0-2 (r~2px); chrome arc x6->x4 over dy2-4 (ALSO r~2px).
   The button keeps the frame's radius, offset inward - not outer-minus-band. */
.nav li:first-child > a,
.nav li:first-child > details > summary{border-radius:.44em 0 0 .44em}
.nav li:last-child > a{border-right:.125em solid #030103;border-radius:0 .44em .44em 0}
.nav li:first-child > details[open] > summary{border-bottom-left-radius:0}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.nav li{flex:1 1 auto;border-left:1px solid var(--rule-red)}
.nav li:first-child{border-left:0}
.nav a,.nav summary{
  display:block;text-align:center;text-decoration:none;cursor:pointer;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(.92rem,1.85vw,1.38rem);
  line-height:1.2;
  padding:.42em .5em;
  color:#e5cf9d;
  text-shadow:0 1px 0 rgba(0,0,0,.95), 0 2px 4px rgba(0,0,0,.8);
  border:.125em solid #030103;           /* wrapping dark band = the gap */
  border-right:0;                        /* cells butt: only the divider side carries it */
  background-origin:padding-box;
  background-clip:padding-box;
  background-image:linear-gradient(180deg,
    #7a7e7d 0.0%, #737172 4.3%, #686463 8.7%, #5d5757 13.0%,
    #544b4c 17.4%, #483e3d 21.7%, #3e3232 26.1%, #332525 30.4%,
    #271717 34.8%, #22090d 39.1%, #130304 43.5%, #050000 47.8%,
    #050000 52.0%, #120203 56.5%, #190507 60.9%, #1f0c0e 65.2%,
    #211515 69.6%, #281c1c 73.9%, #302424 78.3%, #352b2c 82.6%,
    #3d3435 87.0%, #454344 95.7%, #373737 100%);
}
.nav a:hover,.nav a:focus-visible,.nav summary:hover,
.nav a[aria-current="page"],.nav summary[aria-current="true"],.nav details[open] summary{
  color:#fff6d8;
  background-image:linear-gradient(180deg,
    #2a0001 0.0%, #8e5352 7.4%, #86494a 11.1%, #7a3c3b 14.8%,
    #6d3232 18.5%, #602a2a 22.2%, #522020 25.9%, #471919 29.6%,
    #3c1212 33.3%, #300b0b 37.0%, #290506 40.7%, #1c0203 44.4%,
    #0d0000 48.1%, #150102 51.9%, #1d0203 55.6%, #260405 59.3%,
    #2d090a 63.0%, #32100f 66.7%, #3a1616 70.4%, #431c1c 74.1%,
    #4a2222 77.8%, #532a2a 81.5%, #5c3433 88.9%, #4a2726 92.6%,
    #0d0000 100%);
}

/* Products disclosure — <details>, no JavaScript */
.nav details{position:relative}
.nav summary{list-style:none}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{content:" \25be";font-size:.8em}
.nav .submenu{margin:0;padding:.3em 0;list-style:none;background:#0b0b0c;border-top:1px solid var(--rule-red)}
.nav .submenu li{border-left:0;flex:1 1 100%}
.nav .submenu a{
  text-align:left;padding:.5em clamp(12px,3vw,26px);font-size:.98em;
  background-image:linear-gradient(180deg,#141414 0%,#0b0b0c 100%);
}
@media (min-width:720px){
  .nav .submenu{
    position:absolute;z-index:20;top:100%;left:0;min-width:246px;
    border:1px solid var(--rule-red);border-radius:0 0 7px 7px;
    box-shadow:0 12px 26px rgba(0,0,0,.8);
  }
}

/* ---------- content ---------- */
.card{background:#fff;margin:clamp(10px,2.6vw,32px);padding:clamp(20px,4vw,52px) clamp(18px,4.5vw,70px);border-radius:6px;line-height:1.62}
.card h1{margin:0 0 .7em;color:var(--oxblood);font-size:clamp(1.4rem,4.2vw,1.9rem);line-height:1.2}
.card h2{margin:2em 0 .6em;color:var(--oxblood);font-size:clamp(1.15rem,3.2vw,1.45rem)}
.card p{margin:0 0 1em}
.card a{color:#7d1213}
.card a:hover{color:#c00}
.lede{font-weight:700}

.pricing{width:100%;border-collapse:collapse;margin:1.2em 0 1.8em;font-variant-numeric:tabular-nums}
.pricing caption{text-align:left;font-weight:700;padding-bottom:.5em}
.pricing th,.pricing td{padding:.55em .7em;text-align:right;border-bottom:1px solid #e4e0dc}
.pricing th:first-child,.pricing td:first-child{text-align:left}
.pricing thead th{border-bottom:2px solid var(--oxblood);color:var(--oxblood);white-space:nowrap}
.pricing tbody tr:nth-child(even){background:#faf7f4}
@media (max-width:600px){
  .pricing,.pricing tbody,.pricing tr,.pricing td{display:block;width:100%}
  .pricing thead{position:absolute;left:-9999px}
  .pricing tr{border:1px solid #e4e0dc;border-radius:6px;margin-bottom:.7em;padding:.3em .6em}
  .pricing tbody tr:nth-child(even){background:#fff}
  .pricing td{display:flex;justify-content:space-between;gap:1em;border-bottom:1px dotted #e4e0dc;text-align:right}
  .pricing td:last-child{border-bottom:0}
  .pricing td::before{content:attr(data-label);font-weight:700;color:var(--oxblood);text-align:left}
}
.video{
  position:relative;
  width:100%;
  max-width:720px;
  aspect-ratio:16/9;
  margin:.6em auto 1.6em;
  background:#000;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-caption{font-weight:700;margin:0 0 .2em}

.notice{
  background:#fbf6ec;
  border:1px solid #e3d3ad;
  border-left:5px solid var(--oxblood);
  border-radius:0 5px 5px 0;
  padding:1em 1.15em;
  margin:0 0 1.5em;
  font-size:1.02rem;
  line-height:1.5;
}
.notice strong{color:var(--oxblood)}
.notice p{margin:0}
.notice p + p{margin-top:.5em}

.note{background:#faf7f4;border-left:3px solid var(--oxblood);padding:.9em 1.1em;border-radius:0 4px 4px 0}
.note ul{margin:.4em 0 0;padding-left:1.2em}
.note li{margin:.3em 0}

.foot{
  display:flex;flex-wrap:wrap;gap:.4em 1.5em;justify-content:space-between;
  padding:clamp(14px,2.5vw,22px) clamp(16px,3vw,30px);
  font-size:.78rem;color:#cbbfa9;
  background:linear-gradient(180deg,#000 0%,#1b0605 100%);
  border-top:1px solid rgba(228,204,144,.22);
}
.foot a{color:var(--cream)}
@media (prefers-reduced-motion:no-preference){.nav a,.nav summary{transition:background-image .15s ease,color .15s ease}}


/* ---------- page furniture: reusable across content pages ---------- */

.card p,.card li,.card dd{text-wrap:pretty}

.card .lead{font-size:1.06rem;line-height:1.6;color:#3a3230;margin:0 0 1.6em}

.page-toc{margin:0 0 2.2em;padding:.85em 1.1em;background:#fbf8f2;border:1px solid #ece3d0;border-radius:5px}
.page-toc p{margin:0 0 .45em;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:#8a7a62;font-weight:700;max-width:none}
.page-toc ul{display:flex;flex-wrap:wrap;gap:.35em 1.6em;margin:0;padding:0;list-style:none;max-width:none}
.page-toc li{margin:0}
.page-toc a{color:var(--oxblood);text-decoration:none;border-bottom:1px solid rgba(82,13,13,.28);font-weight:700}
.page-toc a:hover{border-bottom-color:var(--oxblood);color:#8c1a17}

.section{border-top:1px solid #ede6d9;margin-top:2.6em;padding-top:2em}
.section:first-of-type{border-top:0;margin-top:0;padding-top:0}
.section > h2{margin-top:0}
.section h3{margin:1.6em 0 .5em;color:#6b2a20;font-size:1.05rem}
[id]{scroll-margin-top:1.2rem}

.video-grid{display:grid;gap:1.5em 1.7em;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));margin:1.2em 0 0}
.video-grid .video{max-width:none;margin:.5em 0 0}
figure.video-item{margin:0 0 1.6em}
figure.video-item figcaption{font-weight:700;color:var(--oxblood);margin:0 0 .35em;font-size:1rem;text-align:center}

.to-top{display:inline-block;margin-top:1.4em;font-size:.8rem;color:#8a7a62;text-decoration:none}
.to-top:hover{color:var(--oxblood)}

/* ---------- content media ---------- */
.card img{max-width:100%;height:auto;display:block;margin:1.3em auto;border-radius:3px}
.card figure{margin:1.3em 0}
.card ul,.card ol{max-width:none}
.card li{margin:.3em 0}
.card hr{border:0;border-top:1px solid #e4e0dc;margin:2em 0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.3em 0}
.table-wrap .pricing{margin:0;min-width:34rem}
@media (max-width:600px){
  .table-wrap{overflow-x:visible}
  .table-wrap .pricing{min-width:0}
}

/* ---------- charts & data links ---------- */
.data-links{display:flex;flex-wrap:wrap;gap:.6em .7em;margin:0 0 1.8em;padding:0}
.data-links a{display:inline-block;padding:.5em .95em;font-size:.92rem;font-weight:700;
  color:var(--oxblood);text-decoration:none;background:#fbf6ec;border:1px solid #e3d3ad;border-radius:4px}
.data-links a:hover{background:#f5ecd9;border-color:#d8c49a;color:#7d1213}
figure.chart{margin:0 0 1.8em}
figure.chart img{width:100%;max-width:1000px;height:auto;margin:0 auto;border:1px solid #ece3d0;border-radius:4px;background:#fff}
figure.chart figcaption{margin:.7em auto 0;max-width:1000px;font-size:.9rem;color:#6b625a;text-align:center}

/* ---------- price lists ---------- */
.price-note{font-size:.82em;color:#8a7a62;font-weight:400}
.price-poa{color:#6b625a;font-style:italic}
.price-notes{margin:.4em 0 1.2em;padding-left:1.15em;font-size:.93rem;color:#4a423d}
.price-notes li{margin:.25em 0}
.price-effective{font-size:.85rem;color:#8a7a62;margin:0 0 .6em}
.card dl.spec{margin:1.1em 0 1.4em}
.card dl.spec dt{font-weight:700;color:var(--oxblood);margin:1em 0 .15em}
.card dl.spec dd{margin:0 0 .2em}
.section h3{margin:1.6em 0 .5em;color:#6b2a20;font-size:1.05rem}
#faq h3{font-size:1.06rem;color:var(--oxblood)}
#faq p{margin:0 0 1.3em}
.card figure figcaption{font-size:.9rem;color:#6b625a;margin:.5em 0 0}