/* ══════════════════════════════════════════════════════════════════════
   CNS Frame Displays · Optical Retail Consulting — the page's own CSS

   Lifted out of index.html's inline <style> so that page.html stays
   small enough to survive the BigCommerce Page Builder widget encoder.
   Upload it beside the other files and link it; page.html carries the
   <link>, marked ⚑ PATH 1 of 4.

   What is NOT in here: the .orc-deck block, and the carousel's own
   rules. Those went to carousel.html with the slides they style. What
   is left is the page — hero, trust bar, logo strip, eight pillars,
   both CTAs, the comparison, the roadmap and the contact block — plus
   the frame the carousel now sits in.

   Everything stays namespaced under .orc, so it cannot collide with the
   site's existing CSS in either direction.
   ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');

.orc{
  /* ── palette: taken from the live consulting page + deck-v4 ── */
  --orc-navy:#0D1729;
  --orc-navy-2:#16233C;
  --orc-blue:#1D51AE;
  --orc-blue-2:#5B8EE0;
  --orc-blue-pale:#EBF1FB;
  --orc-red:#D4362D;
  --orc-paper:#FFFFFF;
  --orc-mist:#F4F7FA;
  --orc-slate:#57657A;
  --orc-slate-2:#8592A6;
  --orc-line:#DBE3ED;

  /* --orc-dur, the one number that controls how long each deck slide
     holds, moved to carousel.html with the script that reads it. */

  /* ⚑ PATH 4 of 4 — hero image. Absolute for the same reason the three
     in page.html are: this file is linked from a page at another URL, so
     a relative path would resolve against that page. */
  --orc-hero-img:url("https://www.framedisplays.com/content/optical-retail-consulting/assets/hero-banner.jpg");

  --orc-pad:clamp(20px,5vw,72px);
  --orc-max:1280px;

  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--orc-navy);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.orc *{box-sizing:border-box}
.orc [hidden]{display:none !important}
.orc p,.orc ul,.orc ol,.orc li,.orc figure{margin:0;padding:0}
.orc ul,.orc ol{list-style:none}
.orc h1,.orc h2,.orc h3,.orc h4{margin:0;padding:0;font-weight:800;letter-spacing:-.028em;line-height:1.08;color:inherit;text-transform:none}
.orc img{max-width:100%;display:block}
.orc a{text-decoration:none}
.orc :focus-visible{outline:3px solid var(--orc-blue-2);outline-offset:3px}

.orc .orc-wrap{max-width:var(--orc-max);margin:0 auto;padding-left:var(--orc-pad);padding-right:var(--orc-pad)}
.orc .orc-sec{padding:clamp(56px,7vw,104px) 0}
.orc .orc-sec--tight{padding:clamp(40px,5vw,68px) 0}
.orc .orc-sec--mist{background:var(--orc-mist)}
.orc .orc-sec--navy{background:var(--orc-navy);color:#fff}

/* ── type scale ── */
.orc .orc-eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orc-blue);margin-bottom:18px}
.orc .orc-eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:none}
.orc .orc-sec--navy .orc-eyebrow,.orc .orc-hero .orc-eyebrow{color:var(--orc-blue-2)}

.orc .orc-h1{font-size:clamp(34px,5.1vw,62px);font-weight:900;letter-spacing:-.035em}
.orc .orc-h2{font-size:clamp(28px,3.6vw,44px)}
.orc .orc-h3{font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.02em}
.orc .orc-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--orc-slate);font-weight:400}
.orc .orc-sec--navy .orc-lead,.orc .orc-hero .orc-lead{color:#AFBED4}
.orc .orc-body{font-size:16px;line-height:1.62;color:var(--orc-slate)}
.orc .orc-sec--navy .orc-body{color:#9FADC2}
.orc .orc-label{font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}

/* ── buttons ── */
.orc .orc-btn{display:inline-flex;align-items:center;gap:10px;padding:17px 30px;border-radius:3px;
  font-size:15px;font-weight:800;letter-spacing:.01em;line-height:1;border:2px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;cursor:pointer}
.orc .orc-btn--primary{background:var(--orc-blue);color:#fff}
.orc .orc-btn--primary:hover{background:#17408B;color:#fff;transform:translateY(-1px)}
.orc .orc-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.orc .orc-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.orc .orc-btn--onlight{background:var(--orc-navy);color:#fff}
.orc .orc-btn--onlight:hover{background:var(--orc-blue);color:#fff}
.orc .orc-btn .orc-arrow{font-size:17px;line-height:1;transform:translateY(-1px)}

/* ════════ HERO ════════ */
.orc .orc-hero{position:relative;background-color:var(--orc-navy);background-image:var(--orc-hero-img);
  background-size:cover;background-position:78% center;background-repeat:no-repeat;overflow:hidden}
.orc .orc-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,var(--orc-navy) 0%,var(--orc-navy) 26%,rgba(13,23,41,.94) 40%,rgba(13,23,41,.55) 58%,rgba(13,23,41,0) 76%)}
.orc .orc-hero .orc-wrap{position:relative;padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,8vw,120px)}
.orc .orc-hero-inner{max-width:640px;color:#fff}
.orc .orc-hero .orc-h1{color:#fff;margin-bottom:20px}
.orc .orc-hero .orc-lead{margin-bottom:32px;max-width:520px}
.orc .orc-hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.orc .orc-hero-note{margin-top:22px;font-size:13.5px;color:#8394AC;letter-spacing:.01em}

/* ════════ TRUST BAR ════════ */
.orc .orc-trust{background:var(--orc-navy-2);border-top:1px solid rgba(255,255,255,.09)}
.orc .orc-trust-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.orc .orc-trust-item{padding:26px 22px;border-left:1px solid rgba(255,255,255,.09);
  min-width:0;overflow-wrap:break-word}
.orc .orc-trust-item:first-child{border-left:0}
/* display:block matters here. These two spans sit adjacent with no whitespace
   between them, so as inline boxes they form a single unbreakable min-content
   run ("40,000+Professionals"). That forced the two-column grid wider than the
   viewport below 560px and put a horizontal scrollbar on the page. */
.orc .orc-trust-v{display:block;font-size:clamp(17px,1.7vw,21px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.2}
.orc .orc-trust-k{display:block;margin-top:5px;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orc-blue-2)}

/* ════════ CLIENT LOGO STRIP ════════
   Hidden until at least one slot has a real src. See the markup below. */
.orc .orc-logos{background:var(--orc-paper)}
.orc .orc-logogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(24px,3vw,44px);margin-top:6px}
.orc .orc-logoslot{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.orc .orc-logoslot .orc-label{color:var(--orc-slate-2);text-align:center}
/* Logo sheets arrive at whatever size they arrive at. width/height stay auto so
   the aspect ratio is never distorted; the two max- constraints cap a tall sheet
   and stop a wide one overflowing; align-self centres it instead of letting the
   column flex container stretch it. Small sheets are never upscaled. */
.orc .orc-logoslot img{align-self:center;width:auto;height:auto;
  max-width:100%;max-height:170px;object-fit:contain}

/* ════════ DECK CAROUSEL — a frame now ════════

   The 14 slides, their controls and the script that drives them are in
   carousel.html. What is left on this side is the box it sits in and
   the hint line underneath.

   ── the height ──
   The frame is the deck's own 16:9 stage plus a fixed strip for the
   controls, so the section is exactly as tall as it was when the
   carousel was inline:

       56.25%   9/16 — the stage. A percentage padding resolves against
                the CONTAINING BLOCK's width, which is .orc-wrap's
                content box, so the 12px of bleed below does not enter
                into it and the stage keeps its ratio.
       + 14px   .orc-ctrls margin-top
       + 40px   .orc-ctrl height, the tallest thing in that row
       + 18px   .orc-rail margin-top
       + 16px   .orc-rail-i height
       +  6px   the focus-ring gutter, see below
       + ~2px   slack, so a rounding error can never put a scrollbar
                inside the frame

   Neither strip can wrap. The control row needs about 372px and the
   frame is never narrower than ~810px — that is what a 900px page
   leaves after .orc-wrap's padding, and below 900px there is no frame
   at all. The rail is a flex row with no wrap.

   .orc-rail-hint is the one line that CAN wrap, which is why it stayed
   out here. Inside a fixed-height frame a second line would be clipped;
   out here it pushes the page down, exactly as it always did. Its
   margin gives back the 6px the gutter took, so the gap under the rail
   comes to 12px plus the slack — 13.1px against the 12px it was.

   ── the 6px gutter ──
   A frame clips at its own edge, and the page's focus ring is drawn
   3px OUTSIDE the control it belongs to. The prev button and the first
   and last rail segments sit flush against the frame edge, so without
   a gutter their rings would be cut in half — in the inline version
   those pixels came from .orc-wrap's padding, which is now outside the
   frame. So the frame bleeds 6px into that padding on each side and
   6px below, and carousel.html pads the same 6px back in. The stage
   and the controls land on exactly the pixels they always did; the
   rings now have somewhere to go. Keep the two 6px values in step. */
.orc .orc-carousel{margin-top:38px}
.orc .orc-deckframe{position:relative;width:calc(100% + 12px);margin:0 -6px;
  padding-top:calc(56.25% + 96px)}
.orc .orc-deckframe iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}
.orc .orc-rail-hint{margin-top:6px;font-size:13px;color:var(--orc-slate-2)}

/* below 900px the carousel is not built at all — this card stands in for it,
   and it is also what shows if JavaScript never runs */
.orc .orc-deckcard{margin-top:38px;background:var(--orc-paper);border:1px solid var(--orc-line);
  border-radius:4px;padding:clamp(24px,5vw,38px)}
.orc .orc-deckcard p{margin-bottom:22px;max-width:52ch}

/* ── shared problem / solution block (carousel section + pillars) ── */
.orc .orc-ps{border-left:3px solid var(--orc-red);padding:4px 0 4px 18px;margin-bottom:22px}
.orc .orc-ps--sol{border-left-color:var(--orc-blue);margin-bottom:0}
.orc .orc-ps .orc-label{display:block;color:var(--orc-red);margin-bottom:6px}
.orc .orc-ps--sol .orc-label{color:var(--orc-blue)}

/* ════════ COMPARISON — one grid, two columns, seven PAIRED rows ════════

   Row 1 left is exactly as tall as row 1 right, all the way down. That is the
   whole point of the section: the reader should not have to match the two
   lists up themselves.

   How: the outer .orc-vs owns 9 rows (heading + 7 + closer). Each column
   spans all 9 with grid-template-rows:subgrid, and each <ul> re-subgrids
   rows 2-8 so its seven <li> land on the shared row lines. Source order stays
   column-major — left column complete, then right — so a screen reader and
   the <860px stacked view both read one column at a time, not L1 R1 L2 R2.

   Both columns carry IDENTICAL padding and border-width on purpose. A
   subgrid's own box metrics inset its tracks, so if the two differed the
   rows would drift out of alignment by that difference. Colour, background
   and shadow do all the work of making the right column win. */
.orc .orc-vs{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto repeat(7,auto) auto;
  gap:0 clamp(16px,2.2vw,30px);
  margin-top:40px;
}
.orc .orc-vs-col{
  display:grid;
  grid-row:1 / -1;
  grid-template-rows:subgrid;
  align-content:start;
  padding:clamp(20px,2.4vw,28px);
  border:2px solid var(--orc-line);
  border-radius:4px;
  background:var(--orc-paper);
}
.orc .orc-vs-col--bad{grid-column:1}
.orc .orc-vs-col--good{
  grid-column:2;
  border-color:var(--orc-blue);
  background:var(--orc-blue-pale);
  box-shadow:0 14px 34px -14px rgba(13,23,41,.30),0 2px 6px rgba(13,23,41,.06);
}

.orc .orc-vs-h{
  grid-row:1;
  font-size:clamp(16px,1.45vw,19px);font-weight:800;letter-spacing:-.02em;line-height:1.3;
  color:var(--orc-slate);
  padding-bottom:15px;border-bottom:1px solid var(--orc-line);
}
.orc .orc-vs-col--good .orc-vs-h{color:var(--orc-blue);border-bottom-color:rgba(29,81,174,.3)}

.orc .orc-vs-list{grid-row:2 / span 7;display:grid;grid-template-rows:subgrid}
.orc .orc-vs-list li{
  display:grid;grid-template-columns:20px 1fr;column-gap:12px;row-gap:3px;
  align-content:start;
  padding:13px 0;border-bottom:1px solid var(--orc-line);
}
.orc .orc-vs-col--good .orc-vs-list li{border-bottom-color:rgba(29,81,174,.16)}
.orc .orc-vs-list li:last-child{border-bottom:0}
/* the × and the ✓ are drawn, not written: content is empty and the mark is a
   background image, so a screen reader announces the column heading and the
   bullet, never a stream of "times, times, times" */
.orc .orc-vs-list li::before{
  content:"";grid-column:1;grid-row:1;width:20px;height:20px;margin-top:1px;
  background-repeat:no-repeat;background-position:center;background-size:20px 20px;
}
.orc .orc-vs-col--bad .orc-vs-list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.2' fill='%23D4362D' fill-opacity='.10'/%3E%3Cpath d='M7.2 7.2l5.6 5.6M12.8 7.2l-5.6 5.6' fill='none' stroke='%23D4362D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.orc .orc-vs-col--good .orc-vs-list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.2' fill='%231D51AE' fill-opacity='.13'/%3E%3Cpath d='M5.9 10.4l2.8 2.8L14.1 7.7' fill='none' stroke='%231D51AE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.orc .orc-vs-list li b{grid-column:2;grid-row:1;display:block;font-weight:700;font-size:15px;line-height:1.45}
.orc .orc-vs-list li span{grid-column:2;grid-row:2;display:block;color:var(--orc-slate);font-size:14px;line-height:1.45}
.orc .orc-vs-col--bad .orc-vs-list li b{font-weight:600;color:var(--orc-slate)}

.orc .orc-vs-close{
  grid-row:9;margin-top:18px;padding-top:16px;
  border-top:2px solid var(--orc-line);
  font-weight:700;font-size:15.5px;line-height:1.45;color:var(--orc-slate);
}
.orc .orc-vs-col--good .orc-vs-close{border-top-color:var(--orc-blue);color:var(--orc-navy)}

/* No subgrid (pre-Chrome 117 / Safari 16): columns still render correctly
   side by side, the rows just stop pairing. Same as the old design. */
@supports not (grid-template-rows:subgrid){
  .orc .orc-vs{grid-template-rows:none;align-items:stretch}
  .orc .orc-vs-col{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column}
  .orc .orc-vs-list{display:block;grid-row:auto}
  .orc .orc-vs-close{margin-top:auto}
}

/* ════════ PILLARS ════════ */
.orc .orc-pillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--orc-line);
  border:1px solid var(--orc-line);margin-top:44px}
.orc .orc-pillar{background:var(--orc-paper);padding:clamp(24px,2.8vw,36px);position:relative}
.orc .orc-pillar-n{font-size:13px;font-weight:900;letter-spacing:.1em;color:var(--orc-blue);
  display:flex;align-items:center;gap:10px;margin-bottom:12px}
.orc .orc-pillar-n::after{content:"";flex:1;height:1px;background:var(--orc-line)}
.orc .orc-pillar h3{font-size:20px;font-weight:800;letter-spacing:-.022em;line-height:1.22;margin-bottom:18px}
.orc .orc-pillar .orc-ps{margin-bottom:16px}
.orc .orc-pillar .orc-ps p{font-size:15px;line-height:1.55;color:var(--orc-slate)}

/* ════════ ROADMAP ════════ */
.orc .orc-road{display:grid;grid-template-columns:repeat(5,1fr);margin-top:44px;
  border-top:2px solid rgba(255,255,255,.16)}
.orc .orc-road li{padding:26px 22px 0 0;position:relative}
.orc .orc-road li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;
  background:var(--orc-blue-2);border-radius:50%}
.orc .orc-road b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--orc-blue-2);margin-bottom:9px}
.orc .orc-road strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:6px}
.orc .orc-road span{font-size:14px;color:#9FADC2;line-height:1.45}

/* ════════ CTA BANDS ════════ */
.orc .orc-cta{background:var(--orc-blue-pale);border-top:1px solid rgba(29,81,174,.18);
  border-bottom:1px solid rgba(29,81,174,.18);text-align:center}
.orc .orc-cta .orc-wrap{padding-top:clamp(44px,5vw,66px);padding-bottom:clamp(44px,5vw,66px)}
.orc .orc-cta .orc-eyebrow{justify-content:center}
.orc .orc-cta h2{margin-bottom:14px}
.orc .orc-cta .orc-lead{max-width:600px;margin:0 auto 26px}

.orc .orc-close{background:var(--orc-navy);color:#fff}
.orc .orc-close-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,72px);align-items:end}
.orc .orc-close h2{color:#fff;margin-bottom:16px;max-width:15ch}
.orc .orc-close .orc-lead{margin-bottom:28px;max-width:460px}
.orc .orc-contact{border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
.orc .orc-contact dt{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orc-blue-2);margin-bottom:6px}
.orc .orc-contact dd{margin:0 0 18px;font-size:15.5px;color:#C6D2E2;line-height:1.5}
.orc .orc-contact dd:last-child{margin-bottom:0}
.orc .orc-contact a{color:#fff;font-weight:700}
.orc .orc-contact a:hover{color:var(--orc-blue-2)}

/* ════════ RESPONSIVE ════════ */
@media (max-width:1024px){
  .orc .orc-trust-grid{grid-template-columns:repeat(3,1fr)}
  .orc .orc-trust-item:nth-child(4){border-left:0}
  .orc .orc-trust-item:nth-child(n+4){border-top:1px solid rgba(255,255,255,.09)}
  .orc .orc-road{grid-template-columns:repeat(2,1fr);gap:0 20px}
  .orc .orc-road li{padding-bottom:22px}
}
@media (max-width:860px){
  .orc .orc-hero{background-position:70% center}
  .orc .orc-hero::before{background:linear-gradient(180deg,rgba(13,23,41,.97) 0%,rgba(13,23,41,.9) 55%,rgba(13,23,41,.78) 100%)}
  /* stack, left column first (source order), and the right column keeps its
     background, border and shadow so the winner is still obvious */
  .orc .orc-vs{grid-template-columns:1fr;grid-template-rows:none;gap:22px}
  .orc .orc-vs-col{grid-row:auto;grid-column:auto;grid-template-rows:none;display:block}
  .orc .orc-vs-list{display:block;grid-row:auto}
  .orc .orc-vs-close{margin-top:18px}
  .orc .orc-pillars{grid-template-columns:1fr}
  .orc .orc-close-grid{grid-template-columns:1fr;align-items:start}
}
@media (max-width:560px){
  .orc .orc-trust-grid{grid-template-columns:1fr 1fr}
  .orc .orc-trust-item{padding:22px 14px}
  .orc .orc-trust-item:nth-child(3){border-left:0}
  .orc .orc-trust-item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
  .orc .orc-road{grid-template-columns:1fr}
  .orc .orc-btn{width:100%;justify-content:center}
}

/* ════════ REDUCED MOTION ════════
   The carousel's four lines moved to carousel.html, next to the
   autoplay they switch off. */
@media (prefers-reduced-motion:reduce){
  .orc .orc-btn{transition:none}
}