@charset "utf-8";
/* INTERPRETATION SCALES FROM NAV, Pages: tools/manual/interpretation, career/measures
----------------------------------------------------------------------------------------------*/
.hero-measures {background:url("/career/Images/measures.webp");}
.hero-measures {
background-size: contain;
background-repeat:no-repeat; 
background-position:center bottom;
}
.interp-intro h2 {
margin: 0 0 .5rem;
color: var(--wowi-blue);
}
.interp-intro p {
max-width: 720px;
margin: 0 0 2em 0;
font-size: clamp(1.1rem, 2vw, 1.3rem);
line-height: 1.55;
color: var(--text-muted);
}
.interp-measure-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.25rem, 2vw, 2rem);
}
.interp-measure-card {
display: flex;
flex-direction: column;
gap: 2rem;
padding: clamp(1.75rem, 3vw, 2.25rem);
border-radius: 24px;
text-decoration: none;
min-height: 240px;
border: 1px solid var(--border-light);
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.interp-measure-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(0,0,0,.06);
}
.interp-measure-icon img {
width: 54px;
height: 54px;
object-fit: contain;
}
.interp-measure-content {
flex: 1;
}
.interp-measure-content h3 {
margin: 0 0 .75rem;
line-height: 1.2;
}
.interp-measure-content p {
margin: 0;
font-size: 1rem;
color: var(--text-muted);
}
.interp-measure-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
border-radius: 12px;
font-weight: 700;
letter-spacing: .01em;
transition:
background .18s ease,
color .18s ease,
border-color .18s ease;
}
.interp-cia-card {
background: var(--cia-blue-light);
border-color: rgba(51,102,153,.18);
}
.interp-cia-card .interp-measure-link {
border: 2px solid var(--cia-blue);
color: var(--cia-blue);
}
.interp-cia-card:hover .interp-measure-link {
background: var(--cia-blue);
color: #fff;
}
.interp-ctp-card {
background: var(--ctp-green-light);
border-color: rgba(141,199,116,.22);
}
.interp-ctp-card .interp-measure-link {
border: 2px solid var(--ctp-green);
color: #4F7441;
}
.interp-ctp-card:hover .interp-measure-link {
background: var(--ctp-green);
color: #fff;
}
.interp-jsi-card {
background: var(--jsi-purple-light);
border-color: rgba(92,81,118,.18);
}
.interp-jsi-card .interp-measure-link {
border: 2px solid var(--jsi-purple);
color: var(--jsi-purple);
}
.interp-jsi-card:hover .interp-measure-link {
background: var(--jsi-purple);
color: #fff;
}
.interp-reference {
margin-top: 3em;
padding: clamp(1.5rem, 4vw, 3rem) 0;
border-top: 1px solid var(--border-light);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
}
.interp-reference-copy {
max-width: 680px;
}
.interp-reference-copy h2 {
margin-bottom: .75rem;
color: var(--wowi-blue);
}
.interp-reference-copy p {
margin: 0;
color: var(--text-muted);
line-height: 1.6;
font-size: 1.05rem;
}
.interp-reference-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 190px;
min-height: 50px;
padding: 0 1.5rem;
border-radius: 12px;
border: 1px solid var(--border-light);
background: var(--neutral-lighter);
color: var(--wowi-blue);
text-decoration: none;
font-weight: 700;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease;
}
.interp-reference-btn:hover {
background: #EEF5F8;
border-color: #C7D8E2;
transform: translateY(-2px);
}
.interp-note {
padding-top:1.25em;
}
/* INTERPRETATION SCALES, Page: tools/manual/cia
----------------------------------------------------------------------------------------------*/

/* CIA ICONS, Page: tools/manual/cia - blue & green
------------------------------------------------------------------------------------*/
.public-service {background:url("/career/Images/cia/public-service.png")} 
.sciences {background:url("/career/Images/cia/sciences.png")} 
.engineering {background:url("/career/Images/cia/engineering.png")}
.business{background:url("/career/Images/cia/business.png")}
.managerial {background:url("/career/Images/cia/managerial.png")}
.arts {background:url("/career/Images/cia/arts.png")}
.media-design {background:url("/career/Images/cia/media-design.png")}
.admin {background:url("/career/Images/cia/admin.png")}
.sales {background:url("/career/Images/cia/sales.png")}
.service {background:url("/career/Images/cia/service.png")}
.outdoor{background:url("/career/Images/cia/outdoor.png")}
.processing {background:url("/career/Images/cia/processing.png")}
.machine {background:url("/career/Images/cia/machine.png")}
.bench-work {background:url("/career/Images/cia/bench-work.png")}
.structural-work {background:url("/career/Images/cia/structural-work.png")}
.mech-elec {background:url("/career/Images/cia/mech-elec.png")}
.extraction {background:url("/career/Images/cia/extraction.png")}

/* CTP, Pages: career/aptitudes & tools/manual/ctp
------------------------------------------------------------------------------------*/
.verbal {background:url("/report/images/ctp/verbal.png")} 
.numerical {background:url("/report/images/ctp/numerical.png")} 
.abstractions {background:url("/report/images/ctp/abstractions.png")}
.spatial {background:url("/report/images/ctp/spatial.png")}
.mechanical-electrical {background:url("/report/images/ctp/mechanical-electrical.png")}
.org-skill {background:url("/report/images/ctp/org-skill.png")}

/* JSI, Pages: career/work_styles & tools/manual/jsi
------------------------------------------------------------------------------------*/
.versatile {background:url("/report/images/jsi/versatile.png")} 
.repetitive{background:url("/report/images/jsi/repetitive.png")} 
.specific{background:url("/report/images/jsi/specific.png")}
.dominant {background:url("/report/images/jsi/dominant.png")}
.gregarious {background:url("/report/images/jsi/gregarious.png")}
.isolative {background:url("/report/images/jsi/isolative.png")}
.influencing {background:url("/report/images/jsi/influencing.png")} 
.controlled {background:url("/report/images/jsi/self-controlled.png")} 
.valuative {background:url("/report/images/jsi/valuative.png")}
.objective {background:url("/report/images/jsi/objective.png")}
.subjective {background:url("/report/images/jsi/subjective.png")}
.rigorous {background:url("/report/images/jsi/rigorous.png")}

.public-service, .sciences, .engineering, .business, .managerial, .arts, .media-design, .admin, .sales, .service, .outdoor, .processing, .machine, .bench-work, .structural-work, .mech-elec, .extraction, .verbal, .numerical, .abstractions, .spatial, .mechanical-electrical,.org-skill {background-repeat:no-repeat; background-size:contain;}

.verbal, .numerical, .abstractions, .spatial, .mechanical-electrical,.org-skill, .versatile, .repetitive, .specific, .dominant, .gregarious, .isolative, .influencing, .controlled, .valuative, .objective, .subjective, .rigorous {background-position: left center;}

.verbal, .numerical, .abstractions, .spatial, .mechanical-electrical, .org-skill {height:60px;}

/* Page: career/interests */
.measures-icon {background-position: left center; height:60px;}

.interp-icon {
width: 52px;
height: 52px;
flex-shrink: 0;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.scales-grid {
display: grid;
gap: 30px;
align-items: start;
}
.scales-interp-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
align-items: start;
}
.scale-interp {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(46,72,87,.05);
}
.scale-top {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
 gap: 18px;
align-items: center;
padding: 1.5em 2.125em 1.5em;
background: #fff;
}
.scale-top h3 {
margin: 0;
line-height: 1.1;
font-size: 1.75rem;
font-weight: 400;
color: #35404a;
}
.scale-top p {
margin: 8px 0 0;
font-size: 1.12rem;
line-height: 1.45;
color: #35404a;
max-width: 62ch;
}
.scale-body {
padding: 0 2em 0;
}
.scale-callout {
background: #f4f8fb;
border-left: 4px solid #8bbbd6;
padding: 16px 18px;
margin: 0 0 22px;
}
.scale-callout p {
font-size: 1.04rem;
line-height: 1.5;
}
.scale-content {
margin: 0 0 1em;
}
.scale-content h4 {
margin: 0 0 8px;
font-size: 1.05rem;
font-weight: 600;
color: var(--wowi-blue);
text-align: left;
}
.scale-content p {
margin: 0;
font-size: 1.04rem;
line-height: 1.55;
}
.scale-content ul {
margin: 0 0 1em 0;
padding-left: 22px;
list-style: disc;
}
.scale-content li {
margin: 0 0 7px;
font-size: 1.04rem;
line-height: 1.45;
}
.scale-onet {
margin-top: 0;
padding: 16px 24px 0;
border-top: 1px solid #dfe7ec;
font-size: 0.9rem;
line-height: 1.6;
color: #667680;
display: flex;
flex-wrap: wrap;
gap: .2rem .5rem;
}
.scale-onet strong {
font-weight: 600;
color: #667680;
}
.scale-onet a {
color: #35404a;
text-decoration: underline;
text-underline-offset: 2px;
}
.scale-onet .sep {
color: #9aa9b3;
}

/* INTERPRETATION (CTPs), Page: tools/manual/ctp
------------------------------------------------------------------------------*/
.guidance-grid {
margin:0;
display: grid;
gap: 30px;
}
.guidance-panel {
background: #fff;
border-radius: 22px;
padding: 40px 42px;
border: 1px solid #cdd8e3;
}
.guidance-label {
display: inline-flex;
align-items: center;
gap: 10px;
background: #eaf2fb;
color: #2e5f93;
padding: 10px 16px;
border-radius: 999px;
font-size: .95rem;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
}
.guidance-panel h3 {
margin: 24px 0 10px;
font-size: 2rem;
line-height: 1.2;
color: #23313d;
}
.scale-definition {
max-width: 720px;
margin: 0 0 1em 0;
font-size: 1.18rem;
line-height: 1.6;
color: #34495c;
}
.ctp-supports-box {
background: #f7fafc;
border: 1px solid #cfe0ee;
border-left: 5px solid var(--wowi-blue);
padding: 15px;
}
.ctp-areas-box {
margin: 28px 0 34px;
background: #f7fafc;
border: 1px solid #dbe5ef;
border-radius: 16px;
padding: 15px;
}
.ctp-supports-box h4, .ctp-areas-box h4, .ctp-interp-box h4 {
margin: 0 0 12px;
font-size: 1rem;
color: var(--wowi-blue);
letter-spacing: .03em;
text-transform: uppercase;
text-align: left;
font-weight:600;
}
.career-areas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0 18px;
margin-top: .5em;
}
.career-areas ul, .ctp-supports ul {
margin: 0;
padding-left: 18px;
}
.career-areas li, .ctp-supports li {
margin-bottom: 4px;
color: #495866;
list-style-type: disc;
font-size:1rem;
}
.ctp-interp-box {
margin: 28px 0 34px;
padding: 26px 30px;
background: #F6FAF6;
border-radius: 14px;
border: 1px solid var(--wowi-green);
}
.ctp-interp-box p, .ctp-areas-box p {
margin: 0 0 18px;
font-size: 1rem;
line-height: 1.25;
}
.ctp-interp-box p:last-child {
margin-bottom: 0;
}
.learning-link {
margin-top: 38px;
padding-top: 28px;
border-top: 1px solid #dde5ed;
}
.learning-link a {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-weight: 700;
color: var(--wowi-blue);
font-size: 1.08rem;
}
.learning-link a:hover {
text-decoration: underline;
}

/* INTERPRETATION (JSIs), Page: tools/manual/jsi
------------------------------------------------------------------------------*/
.jsi-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.jsi-card {
background: #fff;
border: 1px solid var(--border-light);
border-radius: 22px;
padding: clamp(1.5rem, 4vw, 2.5rem);
box-shadow: 0 8px 24px rgba(46,72,87,.05);
}
.jsi-header {
margin: 0 0 1.25rem;
}
.jsi-icon {
background-position: left top;
background-repeat:no-repeat; 
margin: 0 0 12px;
}
.jsi-header h2 {
font-size: clamp(1.65rem, 4vw, 2.25rem);
line-height: 1.08;
margin: 0 0 10px;
color: var(--wowi-blue);
font-weight: 400;
}
.jsi-desc {
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
line-height: 1.45;
font-weight: 600;
margin: 0;
color: #394852;
max-width: 850px;
}
.range-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid var(--border-light);
margin-top: 18px;
border-radius: 14px;
overflow: hidden;
}
.range-cell {
padding: 18px;
border-right: 1px solid var(--border-light);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.range-cell:last-child {
border-right: 0;
}
.range-cell.neg {
background: var(--neutral-lighter);
}
.range-cell.mid {
background: #F8F6FA;
}
.range-cell.pos {
background: var(--neutral-lighter);
}
.score {
display: inline-block;
width: fit-content;
font-size: .95rem;
font-weight: 700;
background: #fff;
border: 1px solid #D6E2E8;
color: var(--wowi-blue);
border-radius: 999px;
padding: 5px 12px;
margin-bottom: 14px;
}
.range-cell p {
font-size: 1.05rem;
line-height: 1.35;
margin: 0;
}
.jsi-learning-note {
 position: relative;
margin-top: 32px;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 22px;
padding: clamp(1.5rem, 4vw, 2.5rem);
box-shadow: 0 8px 24px rgba(46,72,87,.05);
}
.jsi-learning-note h2 {
margin: 0 0 .75rem;
color: var(--wowi-blue);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 400;
}
.jsi-learning-note p {
margin: 0;
max-width: 85ch;
}

/* SCALE SUMMARY, Page:tools/manual/summary-of-scales
------------------------------------------------------------------------------*/
.scale-summary-head {
max-width: 760px;
margin-bottom: 1.75rem;
}
.scale-summary-label {
margin: 0 0 .5rem;
font-size: .82rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #6C7C86;
}
.scale-summary-head h2 {
margin: 0 0 .75rem;
font-family: "Roboto", Arial, sans-serif;
font-size: clamp(2rem, 3vw, 2.9rem);
line-height: 1.08;
font-weight: 400;
}
.scale-summary-cia .scale-summary-head h2 {
color: var(--cia-blue);
}
.scale-summary-jsi .scale-summary-head h2 {
color: var(--jsi-purple);
}
.scale-summary-ctp .scale-summary-head h2 {
color: var(--ctp-green);
}
.scale-summary-head h2 span {
color: #4f6470;
}
.scale-summary-head p:last-child {
margin: 0;
max-width: 720px;
font-size: 1.05rem;
line-height: 1.7;
color: #4f6470;
}
.scale-summary-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.scale-summary-card {
position: relative;
padding: 1.35rem 1.4rem 1.35rem 1.7rem;
border: 1px solid #D6E2E8;
border-radius: 20px;
background: #FAFBFC;
}
.scale-summary-card::before {
content: "";
position: absolute;
top: 1.35rem;
left: 0;
width: 5px;
height: 2.2rem;
border-radius: 999px;
}
.scale-summary-card.summary-blue::before {
background: var(--cia-blue);
}
.scale-summary-card.summary-green::before {
background: var(--ctp-green);
}
.scale-summary-card.summary-purple::before {
background: var(--jsi-purple);
}
.scale-summary-card h3 {
margin: 0 0 .9rem;
font-family: "Roboto", Arial, sans-serif;
font-size: 1.28rem;
line-height: 1.2;
font-weight: 400;
}
.scale-summary-card.summary-blue h3 {
color: var(--cia-blue);
}
.scale-summary-ctp .summary-green h3 {
color: var(--ctp-green);
}
.scale-summary-jsi .summary-purple h3 {
color: var(--jsi-purple);
}
.jsi-pairs {
display: grid;
gap: .85rem;
}
.jsi-pair {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: .85rem;
align-items: start;
}
.jsi-code {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: .05rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.65;
}
.jsi-pair p {
margin: 0;
font-size: 1rem;
line-height: 1.65;
color: #263943;
}
.profile-key-section {
background: #fff;
margin-bottom: 3em;
}
.profile-key-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.profile-key-card {
padding: clamp(1.5rem, 3vw, 2.25rem);
border: 1px solid #D6E2E8;
border-radius: 22px;
background: #FAFBFC;
}
.scale-summary-label h3{
font-size: clamp(1.35rem, 2vw, 1.7rem);
line-height: 1.2;
font-weight: 400;
}
.profile-key-card h3 {
margin: 0 0 .35rem;
font-family: "Roboto", Arial, sans-serif;
font-size: clamp(1.35rem, 2vw, 1.7rem);
line-height: 1.2;
font-weight: 400;
color: #2e4857;
}
.profile-key-card h4 {
margin: 0 0 1.15rem;
font-size: 1rem;
line-height: 1.4;
font-weight: 600;
color: #4f6470;
text-align: left;
}
.profile-key-card p {
margin: 0;
font-size: 1rem;
line-height: 1.75;
color: #263943;
}
.download-box {
margin-bottom: 2em;
padding: clamp(1rem, 3vw, 1.5rem);
text-align: center;
border: 1px solid #d8e2e7;
border-radius: 18px;
box-shadow: 0 10px 24px rgba(46,72,87,0.08);
}
.download-box h2 {
margin: 0 0 8px;
color: var(--wowi-blue);
font-size: 1.45rem;
}
.download-box p {
margin: 0 0 14px;
}
.download-box a {
color: var(--wowi-blue);
font-weight: 700;
text-decoration: underline;
}

/* =============================================================================
  MOBILE and SMALL TABLET
================================================================================ */
@media screen and (max-width:767px) {

.interp-measure-grid,
.scales-grid,
.scales-interp-grid,
.guidance-grid,
.jsi-grid,
.scale-summary-list,
.profile-key-grid {
grid-template-columns: 1fr;
}

.interp-reference {
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}

.interp-reference-btn {
width: 100%;
}

.scale-top {
grid-template-columns: 1fr;
gap: 12px;
padding: 1.35rem 1.35rem 1rem;
}

.scale-body {
padding: 0 1.35rem;
}

.scale-onet {
padding: 1rem 1.35rem 0;
}

.guidance-panel {
padding: 1.5rem;
}

.range-grid {
grid-template-columns: 1fr;
}

.range-cell {
border-right: 0;
border-bottom: 1px solid var(--border-light);
}

.range-cell:last-child {
border-bottom: 0;
}

.jsi-card,
.jsi-learning-note {
border-radius: 18px;
}
.jsi-icon {
width: 120px; 
height: 50px;
background-size: auto 50px;
}
.scale-summary-card {
padding: 1.25rem 1.25rem 1.25rem 1.5rem;
}

.jsi-pair {
grid-template-columns: 38px minmax(0, 1fr);
}
	
}

/* =============================================================================
  TABLET and UP
================================================================================ */
@media print, screen and (min-width:768px) {

.guidance-grid,
.jsi-grid,
.scales-interp-grid {
grid-template-columns: 1fr;
}
.jsi-icon {
width: 120px; 
height: 60px;
background-size: auto 60px;
}
	

.profile-key-grid,
.scale-summary-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
	
.interp-measure-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scales-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
	
}
/* =============================================================================
  DESKTOP
========================================================================== */ 
@media screen and (min-width:1366px) {

.jsi-grid,
.scales-interp-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
	
.scale-summary-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
	
.scales-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}	
.guidance-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}	
	
/* End Desktop
--------------------------------------------------------------------------------*/	
}

/* =============================================================================
  PRINT
================================================================================ */ 
@media print {

.interp-measure-card,
.scale-interp,
.guidance-panel,
.jsi-card,
.jsi-learning-note,
.scale-summary-card,
.profile-key-card,
.download-box {
box-shadow: none;
break-inside: avoid;
page-break-inside: avoid;
}

.interp-measure-card,
.interp-reference-btn,
.learning-link a,
.download-box a {
text-decoration: none;
}

.interp-measure-grid,
.scales-grid,
.scales-interp-grid,
.guidance-grid,
.jsi-grid,
.profile-key-grid {
gap: 18px;
}

.jsi-grid,
.scales-interp-grid,
.guidance-grid,
.profile-key-grid,
.scale-summary-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.range-grid {
break-inside: avoid;
page-break-inside: avoid;
}

.interp-measure-link,
.interp-reference-btn {
border-color: #999;
color: #000;
background: #fff;
}
/* End Print
----------------------------------------------------------------------------*/	
}