/* Main page, institutional look (moshe 9:55 PM Oct 18 "make my site not look like an AI site"; task 2377aa0d).
   Loaded by index.html only, after styles.css (which carries the shared header + palette). No photos, no external hosts. */
.home-inst{background:#f6f4ef}
.h-main{flex:1 0 auto;width:100%;max-width:1280px;margin:0 auto;padding:32px 20px 40px;display:flex;align-items:center}
.h-grid{display:grid;grid-template-columns:1fr;gap:28px;width:100%}
.h-intro h1{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:2rem;line-height:1.15;color:#1c1a4a;margin:0 0 10px;padding-bottom:10px;border-bottom:2px solid #c9a24a;display:inline-block}
.h-lead{font-size:1.08rem;line-height:1.55;color:#33314a;margin:4px 0 22px;max-width:36em}
.h-actions{display:flex;flex-wrap:wrap;gap:12px}
.hbtn{display:inline-flex;align-items:center;justify-content:center;min-width:200px;padding:13px 22px;border-radius:4px;font-weight:700;font-size:1.02rem;text-decoration:none;line-height:1.2;border:1px solid #1c1a4a}
.hbtn-primary{background:#1c1a4a;color:#fff}
.hbtn-primary:hover{background:#2a2560;border-color:#2a2560}
.hbtn-secondary{background:#fff;color:#1c1a4a}
.hbtn-secondary:hover{background:#efedf6}
.hbtn:focus-visible{outline:3px solid #ffbf47;outline-offset:2px}
.home-inst .h-emerg{margin:26px 0 0;padding:12px 16px;background:#fff;border:1px solid #e4b4b4;border-left:4px solid #b3261e;border-radius:4px;color:#2b1a1a;font-size:1rem;line-height:1.45;max-width:36em}
.h-emerg b{display:block;color:#b3261e;font-size:.95rem;margin-bottom:1px}
.home-inst .h-emerg a{color:#b3261e;font-weight:800;white-space:nowrap}

.h-ways{background:#fff;border:1px solid #d9d3c4;border-top:3px solid #1c1a4a;border-radius:4px;padding:18px 20px 6px}
.h-ways h2{font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;font-weight:700;color:#1c1a4a;margin:0 0 6px}
.h-list{list-style:none;margin:0;padding:0}
.h-list li{box-shadow:none;display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid #e8e3d6;margin:0;background:none;border-radius:0;font-size:.97rem}
.h-list li:first-child{border-top:0}
.h-list li[hidden]{display:none}
.h-list .ic{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:#8a6d24;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h-k{display:block;color:#1c1a4a;font-size:1rem;margin-bottom:2px}
.h-k a{color:#1c1a4a}
.h-list p{margin:0;color:#3a3852;line-height:1.5}
.h-list p a{color:#1c1a4a;font-weight:700;overflow-wrap:anywhere}
.h-list .phonenote p a{white-space:nowrap;overflow-wrap:normal}
.h-list .tile-count{color:#6b6980;white-space:nowrap}

.home-inst .h-footer{flex:none;padding:0;margin-top:0;background:#fbf8f0;border-top:1px solid #e3d9bf;text-align:center}
.h-logos{display:flex;align-items:center;justify-content:center;gap:22px;max-width:820px;margin:0 auto;padding:22px 14px 20px}
.h-logos img{display:block;height:auto;flex:0 1 auto;min-width:0}
.h-logos .inst-a{width:70px}.h-logos .inst-main{width:84px}.h-logos .inst-b{width:100px}
.h-foot{background:#1c1a4a;color:rgba(255,255,255,.78);font-size:.86rem;border-top:2px solid #c9a24a}
.h-foot .in{max-width:1280px;margin:0 auto;padding:12px 24px;display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;align-items:center}
.h-foot b{font-family:"Frank Ruhl Libre","David Libre","David","Times New Roman",serif;color:#e0bd6a;font-weight:700;font-size:1.05rem}
.h-foot a{color:#fff;text-decoration:none;font-weight:600}
.h-foot a:hover{text-decoration:underline}

@media (min-width:860px){
  .h-main{padding:44px 20px 56px}
  .h-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:48px;align-items:start}
  .h-intro h1{font-size:2.4rem}
  .h-lead{font-size:1.15rem}
  .h-logos{gap:44px;padding:28px 20px 24px}
  .h-logos .inst-a{width:112px}.h-logos .inst-main{width:128px}.h-logos .inst-b{width:168px}
  .h-foot .in{justify-content:space-between}
}
@media (max-width:480px){
  .h-main{padding:24px 16px 32px}
  .h-actions{flex-direction:column}
  .hbtn{width:100%}
  .h-intro h1{font-size:1.75rem}
}

/* Full-window layout + big "Submit a ticket" box (moshe 9:10 AM Oct 19 "make it should fit full page", 9:11 AM "make a big submit a ticket box"; task 9f96341b).
   body is a full-height flex column (styles.css); .h-main grows and centers its content, the logo band + navy footer sit at the bottom of the window. */
.h-big{display:flex;align-items:center;gap:18px;width:100%;margin:0 0 14px;padding:22px 22px;background:#1c1a4a;color:#fff;text-decoration:none;border:1px solid #1c1a4a;border-bottom:3px solid #c9a24a;border-radius:5px;line-height:1.2}
.h-big:hover{background:#2a2560;border-color:#2a2560;border-bottom-color:#c9a24a}
.h-big:focus-visible{outline:3px solid #ffbf47;outline-offset:3px}
.h-big-ic{flex:none;width:40px;height:40px;fill:none;stroke:#e0bd6a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.h-big-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.h-big-title{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.55rem;color:#fff}
.h-big-sub{font-size:1rem;color:rgba(255,255,255,.82);line-height:1.4}
.h-big-arr{flex:none;width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.h-big:hover .h-big-arr{transform:translateX(3px)}
.h-actions .hbtn-secondary{min-width:220px}
@media (min-width:860px){
  .h-main{padding:40px 24px 44px}
  .h-grid{gap:56px}
  .h-big{padding:30px 30px;gap:22px}
  .h-big-ic{width:48px;height:48px}
  .h-big-title{font-size:1.9rem}
  .h-big-sub{font-size:1.08rem}
  .home-inst .h-emerg{margin-top:22px;max-width:none}
  .h-grid{align-items:center}
}
/* big screens: scale the page up so it doesn't look tiny on 1600-1920px */
@media (min-width:1400px){
  .h-grid{gap:72px}
  .h-intro h1{font-size:3rem;margin-bottom:14px}
  .h-lead{font-size:1.3rem;margin-bottom:26px;max-width:34em}
  .h-big{padding:38px 36px;gap:26px;margin-bottom:16px}
  .h-big-ic{width:56px;height:56px}
  .h-big-title{font-size:2.25rem}
  .h-big-sub{font-size:1.2rem}
  .h-big-arr{width:32px;height:32px}
  .hbtn{font-size:1.1rem;padding:15px 26px}
  .home-inst .h-emerg{font-size:1.1rem;padding:14px 18px;max-width:none}
  .h-emerg b{font-size:1.02rem}
  .h-ways{padding:24px 28px 10px}
  .h-ways h2{font-size:1.6rem;margin-bottom:8px}
  .h-list li{font-size:1.08rem;padding:18px 0;gap:16px}
  .h-k{font-size:1.12rem}
  .h-list .ic{width:24px;height:24px}
  .h-logos{gap:56px}
  .h-foot{font-size:.95rem}
}
/* short desktop windows (e.g. 1366x768): tighten so header, content and footer fit */
@media (min-width:860px) and (max-height:820px){
  .h-main{padding-top:26px;padding-bottom:28px}
  .h-logos{padding:16px 20px 14px}
  .h-logos .inst-a{width:84px}.h-logos .inst-main{width:96px}.h-logos .inst-b{width:126px}
  .h-lead{margin-bottom:18px}
  .h-big{padding:24px 26px}
  .home-inst .h-emerg{margin-top:16px}
}
@media (max-width:480px){
  .h-big{padding:18px 16px;gap:14px}
  .h-big-ic{width:34px;height:34px}
  .h-big-title{font-size:1.35rem}
  .h-big-sub{font-size:.95rem}
  .h-big-arr{width:22px;height:22px}
  .h-actions .hbtn-secondary{min-width:0}
}
@media (min-width:1800px){
  .h-main{max-width:1440px}
  .h-foot .in{max-width:1440px}
  .h-intro h1{font-size:3.4rem}
  .h-lead{font-size:1.42rem}
  .h-big{padding:44px 40px}
  .h-big-title{font-size:2.6rem}
  .h-big-sub{font-size:1.3rem}
  .h-ways h2{font-size:1.8rem}
  .h-list li{font-size:1.16rem}
  .h-k{font-size:1.22rem}
  .h-logos .inst-a{width:128px}.h-logos .inst-main{width:148px}.h-logos .inst-b{width:192px}
}

/* ---------- Org footer + bigger logos + full-width "Check my tickets / My desk" (moshe 9:21-9:22 AM Oct 19; task 9e795e0c) ---------- */
.h-actions .hbtn-secondary{width:100%;min-width:0;padding:15px 22px;border-width:2px;font-weight:800;font-size:1.08rem}
.h-big{margin-bottom:12px}
/* the navy footer holds the .org grid (styles.css); undo the old flex row */
.home-inst .h-foot .in{display:block}
/* logos: back to the 9f96341b size (moshe 9:42 AM Oct 19 "make the logos back smaller"; task ad47e44a) */
@media (min-width:860px){
  .h-actions .hbtn-secondary{padding:17px 26px;font-size:1.15rem}
}
@media (min-width:1400px){
  .h-actions .hbtn-secondary{padding:19px 28px;font-size:1.25rem}
}
@media (min-width:860px) and (max-height:960px){
  .h-main{padding-top:12px;padding-bottom:12px}
  .h-intro h1{margin-bottom:8px;padding-bottom:8px}
  .h-lead{margin-bottom:16px}
  .home-inst .h-emerg{margin-top:14px}
}
@media (min-width:860px) and (max-height:820px){
  .h-main{padding-top:16px;padding-bottom:16px}
  .h-actions .hbtn-secondary{padding:13px 24px}
}
@media (min-width:1400px) and (min-height:961px) and (max-height:1150px){
  .h-main{padding-top:18px;padding-bottom:18px}
}
.h-foot .org-name b{font-size:1.2rem}
@media (min-width:1400px){.h-foot .org-name b{font-size:1.35rem}}

/* Sign out next to My Desk (moshe 9:58 AM Oct 19; task 883332df): same row on desktop (My Desk stays the big primary one), full width below it on phones */
.h-actions.h-acts2{flex-wrap:nowrap}
.h-actions.h-acts2 .hbtn-secondary{flex:1 1 auto;width:auto}
.h-actions.h-acts2 .hbtn-out{flex:none;min-width:170px;padding-left:26px;padding-right:26px;border-width:1.5px;font-weight:600;font-size:1.02rem}
@media (max-width:640px){
  .h-actions.h-acts2{flex-direction:column;flex-wrap:nowrap}
  .h-actions.h-acts2 .hbtn-secondary,.h-actions.h-acts2 .hbtn-out{width:100%;min-width:0}
  .h-actions.h-acts2 .hbtn-out{padding-top:12px;padding-bottom:12px}
}

/* "Remote Support" card (moshe 9:08 PM Oct 29, task 240a2f9a): as big as the Submit card, but white with a navy line and gold edge,
   so the two read as a pair and Submit stays the main action. Opens krula.screenconnect.com in a new tab. */
.h-big.h-remote{background:#fff;color:#1c1a4a;border:1px solid #1c1a4a;border-bottom:3px solid #c9a24a;margin-top:14px}
.h-big.h-remote:hover{background:#f7f5ee;border-color:#1c1a4a;border-bottom-color:#c9a24a}
.h-big.h-remote .h-big-ic{stroke:#a8842f}
.h-big.h-remote .h-big-title{color:#1c1a4a}
.h-big.h-remote .h-big-sub{color:#4a4766}
.h-big.h-remote .h-big-arr{stroke:#1c1a4a;stroke-width:1.6}
.h-big.h-remote:hover .h-big-arr{transform:translate(2px,-2px)}

/* ---------- Organized home (moshe 10:09 PM Oct 29 "make this more organized"; task 948a1f8d) ----------
   Heading + intro on top; under it the left column is: two equal main cards side by side (Submit a ticket, Remote Support),
   one slim row of equal account buttons, the Emergency box — all on one 16px spacing scale (20px on big screens) and the same edges.
   Remote Support is the smaller card (moshe 10:10 PM "make the remote support smaller than submit a ticket"): narrower column, smaller icon and title.
   "Other ways to reach us" sits in the right column, its top level with the top of the two cards. */
.home-inst{--hs:16px}
.h-head h1{margin-bottom:10px}
.home-inst .h-lead{margin:4px 0 0}
.h-intro{display:flex;flex-direction:column;gap:var(--hs);min-width:0}
.h-pair{display:grid;grid-template-columns:1fr;gap:var(--hs)}
.home-inst .h-pair .h-big{margin:0;height:100%;position:relative}
.home-inst .h-big.h-remote{margin-top:0}
.home-inst .h-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--hs);flex-wrap:nowrap}
.home-inst .h-actions.h-acts2{flex-direction:row}
.home-inst .h-actions .hbtn{width:100%;min-width:0;padding:12px 16px;font-size:1rem;font-weight:700;border:1.5px solid #1c1a4a;background:#fff;color:#1c1a4a;gap:8px}
.home-inst .h-actions .hbtn:hover{background:#efedf6}
.home-inst .h-actions .hbtn-out{color:#3a3852;border-color:#9a97b3;font-weight:600}
.home-inst .h-actions .hbtn-out:hover{border-color:#1c1a4a;color:#1c1a4a}
.home-inst .h-intro .h-emerg{margin:0;max-width:none}
.h-ways{min-width:0}
@media (max-width:599px){
  .home-inst .h-lead{margin-bottom:4px}
}
@media (min-width:600px){
  .h-pair{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
  .home-inst .h-pair .h-big{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 22px 24px}
  .home-inst .h-pair .h-big-ic{width:40px;height:40px}
  .home-inst .h-pair .h-big-t{gap:6px;flex:0 0 auto}
  .home-inst .h-pair .h-big-title{font-size:1.45rem}
  .home-inst .h-pair .h-big-sub{font-size:.98rem}
  .home-inst .h-pair .h-big-arr{position:absolute;top:22px;inset-inline-end:20px;width:24px;height:24px}
}
@media (min-width:860px){
  .h-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"head ." "main ways";row-gap:24px;align-items:start}
  .h-head{grid-area:head}
  .h-intro{grid-area:main}
  .h-ways{grid-area:ways}
  .home-inst .h-pair .h-big{padding:26px 26px 28px}
  .home-inst .h-pair .h-big-ic{width:44px;height:44px}
  .home-inst .h-pair .h-big-title{font-size:1.6rem}
  .home-inst .h-pair .h-big-sub{font-size:1.02rem}
  .home-inst .h-pair .h-big-arr{top:26px;inset-inline-end:24px}
  .home-inst .h-actions .hbtn{padding:13px 18px;font-size:1.05rem}
}
@media (min-width:860px) and (max-height:960px){
  .h-grid{row-gap:18px}
}
@media (min-width:1400px){
  .home-inst{--hs:20px}
  .home-inst .h-lead{margin-bottom:0}
  .home-inst .h-pair .h-big{padding:30px 30px 32px;gap:16px}
  .home-inst .h-pair .h-big-ic{width:50px;height:50px}
  .home-inst .h-pair .h-big-title{font-size:1.9rem}
  .home-inst .h-pair .h-big-sub{font-size:1.12rem}
  .home-inst .h-pair .h-big-arr{top:30px;inset-inline-end:28px;width:28px;height:28px}
  .home-inst .h-actions .hbtn{padding:14px 20px;font-size:1.12rem}
}
@media (min-width:1800px){
  .home-inst .h-pair .h-big{padding:36px 36px 38px}
  .home-inst .h-pair .h-big-title{font-size:2.2rem}
  .home-inst .h-pair .h-big-sub{font-size:1.22rem}
}

/* Submit a ticket = the ONE big card; Remote Support = a small, quiet button under it (moshe 3:27 PM Oct 30, voice note:
   "I want it to be a lot smaller, smallest. Submit ticket is a daily-use thing and the remote support is used just from time to time,
   so I need it to be visible but not too much"). Replaces the equal-cards rules of 2:49 PM. Submit is no longer inside .h-pair,
   so it takes the full .h-big sizes above; the Remote line is smaller than the My Desk / Sign out buttons. */
.home-inst .h-intro>.h-submit{margin:0}
.h-rs-row{display:flex;justify-content:flex-end}
.h-rs{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 14px;border:1px solid #1c1a4a;border-radius:4px;background:#fff;color:#1c1a4a;font-size:.95rem;font-weight:600;line-height:1.2;text-decoration:none}
.h-rs:hover{background:#efedf6}
.h-rs:focus-visible{outline:3px solid #ffbf47;outline-offset:2px}
.h-rs-ic{flex:none;width:18px;height:18px;fill:none;stroke:#a8842f;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h-rs-arr{flex:none;width:13px;height:13px;fill:none;stroke:#1c1a4a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}


/* ---------- One column: Submit, one row of equal buttons, one contact box (moshe 3:35 PM Oct 30, voice note: "make it [Remote Support]
   the same size as My Desk, and put next to it Company Directory, and take off the whole Company Directory box on the right side,
   and put below, together with the Emergency, the email and the voicemail number"). The right "Other ways to reach us" box is gone;
   the page is one centered column. Row: My Desk | Sign out | Remote Support | Company Directory (signed out: Check my tickets |
   Remote Support | Company Directory), all the same size; 2 per row on phones. ---------- */
.home-inst .h-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:none;max-width:880px;margin:0 auto}
.home-inst .h-actions.h-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:12px}
.home-inst .h-actions.h-row:not(.h-row4)>.hbtn:first-child{grid-column:1/-1}
.home-inst .h-actions.h-row .hbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;min-height:76px;margin:0;padding:10px 8px;
  font-size:.95rem;font-weight:700;line-height:1.2;text-align:center;border:1.5px solid #1c1a4a;border-radius:4px;background:#fff;color:#1c1a4a;text-decoration:none}
.home-inst .h-actions.h-row .hbtn:hover{background:#efedf6;color:#1c1a4a;border-color:#1c1a4a}
.home-inst .h-actions.h-row:not(.h-row4)>.hbtn:first-child{flex-direction:row;min-height:52px;gap:8px}
.home-inst .h-actions.h-row .hbtn-out{color:#1c1a4a;font-weight:700}
.hb-ic{flex:none;width:22px;height:22px;fill:none;stroke:#a8842f;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h-contact{background:#fff;border:1px solid #dcd8cc;border-radius:5px;overflow:hidden}
.home-inst .h-contact .h-emerg{display:flex;align-items:flex-start;gap:12px;margin:0;max-width:none;padding:13px 16px;background:#fdf6f5;border:0;border-left:4px solid #b3261e;border-bottom:1px solid #ecd9d6;border-radius:0}
.h-contact .h-emerg .ic{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:#b3261e;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h-clist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
.h-clist li{display:flex;align-items:flex-start;gap:12px;padding:13px 16px 13px 20px;font-size:.95rem;line-height:1.45;color:#2b2a40}
.h-clist li+li{border-top:1px solid #ebe8df}
.h-clist .ic{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:#a8842f;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.h-clist .h-k{display:block;color:#1c1a4a;font-size:.98rem;margin-bottom:1px}
.h-clist p{margin:0}
.h-clist a{color:#1c1a4a;font-weight:700;text-decoration:underline;text-decoration-color:#c9a24a;text-underline-offset:2px;white-space:nowrap}
@media (min-width:700px){
  .home-inst .h-actions.h-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .home-inst .h-actions.h-row:not(.h-row4)>.hbtn:first-child{grid-column:auto}
  .home-inst .h-actions.h-row .hbtn,.home-inst .h-actions.h-row:not(.h-row4)>.hbtn:first-child{flex-direction:row;gap:9px;min-height:56px;padding:10px 12px;font-size:1.02rem}
  .h-clist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-clist li+li{border-top:0;border-left:1px solid #ebe8df}
}
@media (min-width:860px){
  .home-inst .h-grid{grid-template-areas:"head" "main";row-gap:22px}
  .home-inst .h-actions.h-row{gap:14px}
}
@media (min-width:1400px){
  .home-inst .h-grid{max-width:960px}
  .home-inst .h-actions.h-row{gap:16px}
  .home-inst .h-actions.h-row .hbtn,.home-inst .h-actions.h-row:not(.h-row4)>.hbtn:first-child{min-height:62px;font-size:1.1rem}
  .hb-ic{width:24px;height:24px}
  .home-inst .h-contact .h-emerg{font-size:1.08rem;padding:15px 20px}
  .h-clist li{font-size:1.04rem;padding:15px 20px 15px 24px}
  .h-clist .h-k{font-size:1.06rem}
}
@media (min-width:1800px){
  .home-inst .h-grid{max-width:1040px}
}

/* signed out (3 buttons): 3 equal tiles in one row on phones too */
@media (max-width:699px){
  .home-inst .h-actions.h-row:not(.h-row4){grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .home-inst .h-actions.h-row:not(.h-row4)>.hbtn,.home-inst .h-actions.h-row:not(.h-row4)>.hbtn:first-child{grid-column:auto;flex-direction:column;gap:6px;min-height:76px;padding:10px 6px;font-size:.9rem}
}