
/* Riso-style ink texture: intentionally imperfect, lightly speckled, and matte. */
:root{
  --riso-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='.48'/%3E%3C/svg%3E");
}

:root{
  --ink:#10131a;
  --paper:#e7e9e6;
  --paper2:#e1e5e7;
  --blue:#2d67e8;
  --baby:#bfe7ff;
  --purple:#705493;
  --lavender:#a58fb7;
  --orange:#e4692d;
  --green:#00a95c;
  --red:#d85a66;
  --deep-magenta:#713f55;
  --charcoal:#242832;
  --muted:#4f5867;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.73' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.53'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height:1.48;
  overflow-x:hidden;
}

/* Grain exists only on paper sections, never over the cloud photograph. */
.paper{
  background-image:
    linear-gradient(rgba(220,228,238,.94),rgba(220,228,238,.94)),
    var(--noise);
  background-blend-mode:normal,multiply;
  background-size:auto,180px 180px;
}
.services{background-color:#dce4ee}
.process{background-color:#d2dbe6}
.about{background-color:#ddd5df}
.contact{background-color:#cfd8e4}

.site-header{
  position:sticky;top:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 4vw;
  background:rgba(220,228,238,.95);
  border-bottom:1px solid var(--ink);
  backdrop-filter:blur(8px)
}
.brand{font-size:.84rem;font-weight:500;letter-spacing:-.015em;text-decoration:none;color:var(--ink)}
.brand span{font-weight:400;color:#636b78}
nav{display:flex;gap:25px;align-items:center}
nav a{font-size:.68rem;letter-spacing:.05em;text-decoration:none;color:var(--ink);font-weight:500}
.nav-contact{border-bottom:2px solid var(--blue);padding-bottom:2px}

/* HERO — intentionally spare */
.hero{
  position:relative;
  min-height:calc(78vh + 210px);
  overflow:hidden;
  background:#121827;
  border-bottom:0
}
.hero-image{
  position:absolute;inset:0;
  background:url('clouds.jpg') center 38%/cover no-repeat;
  filter:contrast(1.04) brightness(.90) saturate(1.08) hue-rotate(-4deg)
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,10,24,.72) 0%,rgba(16,38,92,.34) 49%,rgba(44,104,222,.10) 100%)
}
.hero-content{
  position:relative;z-index:2;
  min-height:calc(78vh + 210px);
  padding:8vw 6vw 7.5vw;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  max-width:1040px
}
.kicker,.section-label{
  margin:0 0 17px;
  text-transform:uppercase;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.095em
}
.kicker{color:#edf0ff}
.hero h1{
  margin:0;
  color:white;
  font-size:clamp(2.8rem,5.55vw,5.7rem);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.032em
}
.lead{max-width:735px;margin:28px 0 24px;color:#edf0fa;font-size:1rem}
/* COMMON */
.section{padding:7vw 6vw}
.section-title-wrap{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:8vw;
  align-items:end;
  margin-bottom:40px
}
.section h2,.approach h2,.about h2,.contact h2{
  margin:0;
  font-size:clamp(2rem,3.65vw,3.85rem);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:400
}
.section-title-wrap p{margin:0;color:var(--muted);max-width:570px}

/* TUTORING AREAS — six-square editorial grid */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink);
  border-left:1px solid var(--ink)
}
.service-card{
  min-height:245px;
  padding:23px;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:#dce4ee
}
.service-card span{
  display:block;
  font-size:.64rem;
  letter-spacing:.075em;
  color:#565e6a
}
.service-card h3{
  margin:38px 0 12px;
  font-size:1.28rem;
  line-height:1.05;
  font-weight:400;
  letter-spacing:-.018em
}
.service-card p{
  margin:0;
  max-width:350px;
  color:#48505d
}
.card-blue{background:#cbd9ed}
.card-purple{background:#d8cde0}
.card-orange{background:#e4c8b6}
.card-green{background:#7acb87}
.card-charcoal{background:#292d36;color:#f4f0e9}
.card-purple-bottom{background:#b5a2c8}

/* Albers section: simple, architectural, not decorative */
.albers-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:380px;
  border-top:0;
  border-bottom:0
}
.albers-frame{
  display:grid;
  place-items:center;
  position:relative;
  min-height:380px;
  border-right:1px solid var(--ink);
  overflow:hidden
}





.albers-text{padding:6vw;display:flex;flex-direction:column;justify-content:center}
.albers-text p:last-child{max-width:620px;color:#4e5663;font-size:1.02rem}

/* APPROACH — lines live here, not on the clouds */
.approach{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  min-height:650px;
  background:#111318;
  color:white;
  border-bottom:0
}
.approach-art{
  min-height:650px;
  background:url('approach-new.jpg') center/cover no-repeat;
  filter:saturate(1.02) contrast(1.02) brightness(1.02)
}
.approach-copy{
  position:relative;
  overflow:hidden;
  padding:6.7vw 5.3vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#6f7897
}
.approach-rules{
  position:absolute;
  inset:0;
  opacity:.14;
  background-image:var(--noise);
  background-size:155px 155px;
  mix-blend-mode:multiply
}
.approach-copy>*:not(.approach-rules){position:relative;z-index:1}
.approach-label{color:var(--baby)}
.approach h2{color:white;margin-bottom:27px}
.approach p{max-width:720px;color:#e3e7ef;font-size:.97rem}

/* PROCESS */
.process-list{border-top:1px solid var(--ink);margin-top:12px}
.process-list article{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:26px;
  padding:26px 0;
  border-bottom:1px solid var(--ink);
  max-width:1070px
}
.num{
  width:42px;height:42px;
  display:grid;place-items:center;
  color:white;
  font-size:.65rem;
  background:var(--orange)
}
.process-list article:nth-child(2) .num{background:var(--blue)}
.process-list article:nth-child(3) .num{background:var(--purple)}
.process-list h3{margin:0 0 8px;font-size:1.24rem;line-height:1.05;font-weight:400;letter-spacing:-.016em}
.process-list p{margin:0;color:#4e5663;max-width:720px}

/* QUALIFICATIONS adjacent to ABOUT */
.qualification-band{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  width:calc(100% - 8vw);
  margin:0 4vw;
  border:0;
  background:#cfd8e3
}
.qualification-band div{padding:18px 22px;border-right:1px solid var(--ink)}
.qualification-band div:last-child{border-right:0}
.qualification-band strong{display:block;font-size:1.27rem;line-height:1;font-weight:500;letter-spacing:-.025em}
.qualification-band span{display:block;margin-top:7px;font-size:.60rem;letter-spacing:.065em;color:#4e5663}

/* ABOUT — portrait uses the photo's natural 3:4 proportion */
.about{
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:8vw;
  padding:7.5vw 6vw 8vw;
  border-bottom:1px solid var(--ink)
}
.portrait-column{width:min(100%,520px);align-self:start}
.portrait-image{
  aspect-ratio:3/4;
  width:100%;
  background:
    linear-gradient(rgba(84,120,196,.12),rgba(84,120,196,.12)),
    url('portrait.jpg') center center/cover no-repeat;
  filter:grayscale(1) contrast(1.03) brightness(1.07) sepia(.04) hue-rotate(188deg) saturate(1.38);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink)
}
.portrait-meta{
  display:flex;
  justify-content:space-between;
  padding-top:9px;
  font-size:.60rem;
  letter-spacing:.07em;
  color:#514858
}
.about-copy{max-width:800px;padding-top:2vw}
.about-copy p{color:#4c4f59;font-size:.98rem}

/* CONTACT */
.contact{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:9vw;
  border-top:1px solid var(--ink)
}
.contact-copy p{color:#48505d;max-width:550px}






.contact form{border-top:1px solid var(--ink);padding-top:21px}
.contact label{display:block;margin-bottom:20px;text-transform:uppercase;font-size:.67rem;letter-spacing:.06em;font-weight:500}
.contact input,.contact textarea{
  width:100%;
  padding:10px 0;
  border:0;
  border-bottom:1px solid var(--ink);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font:inherit
}
.contact input:focus,.contact textarea:focus{outline:none;border-bottom:2px solid var(--blue)}
.editorial-submit{
  margin-top:5px;
  padding:0 0 5px;
  border:0;
  border-bottom:1px solid var(--ink);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:.70rem;
  letter-spacing:.05em;
  font-weight:500;
  cursor:pointer
}
.tiny{font-size:.67rem!important;color:#5b6371!important}

footer{
  display:flex;
  justify-content:space-between;
  padding:19px 4vw;
  background:#111318;
  color:#f2f3f6;
  font-size:.65rem;
  letter-spacing:.06em
}

@media(max-width:900px){
  nav{display:none}
  .brand span{display:none}
  .section-title-wrap,.albers-section,.approach,.about,.contact{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr 1fr}
  .albers-frame{border-right:0;border-bottom:1px solid var(--ink)}
  .approach-art{min-height:430px}
  .qualification-band{grid-template-columns:1fr 1fr;width:calc(100% - 10vw);margin-left:5vw;margin-right:5vw}
  .portrait-column{width:min(100%,600px)}
  footer{flex-direction:column;gap:18px}
}
@media(max-width:650px){
  .hero h1{font-size:clamp(2.7rem,12vw,4.4rem)}
  .service-grid{grid-template-columns:1fr}
  .hero-content{padding-left:5vw;padding-right:5vw}
  .section,.contact,.about{padding-left:5vw;padding-right:5vw}
  .process-list article{grid-template-columns:55px 1fr}
  .qualification-band{grid-template-columns:1fr;width:calc(100% - 10vw);margin-left:5vw;margin-right:5vw}
  .qualification-band div{border-right:0;border-bottom:1px solid var(--ink)}
}

/* Version G — slightly stronger matte film grain across the paper surfaces */
.paper{
  position:relative;
  isolation:isolate;
}
.paper::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.026;
  background-image:var(--noise);
  background-size:112px 112px;
  mix-blend-mode:multiply;
}
.paper > *{
  position:relative;
  z-index:1;
}

.card-charcoal span,.card-charcoal p{color:#e8e7e2}
.card-charcoal h3{color:#ffffff}

.service-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--riso-noise);
  background-size:150px 150px;
  opacity:.075;
  mix-blend-mode:multiply;
}
.service-card::after{display:none;}












.paper{
  background-image:
    linear-gradient(rgba(220,228,238,.93),rgba(220,228,238,.93)),
    var(--noise),
    var(--riso-noise);
  background-blend-mode:normal,multiply,multiply;
}
.paper::after{
  opacity:.030;
  background-image:var(--riso-noise);
  background-size:132px 132px;
}

.service-grid,
.albers-section,
.contact form{
  border-color:#16181d;
}
.service-card{
  border-color:#16181d;
}

/* Version I — section separation by alternating cool blue-gray paper tones,
   not horizontal black divider rules. */
.services{
  background-color:#dce4ee;
}
.albers-section{
  background-color:#cfd9e5;
}
.process{
  background-color:#d7e0ea;
}
.qualification-band{
  background-color:#c8d3e0;
}
.about{
  background-color:#d9e0e8;
}
.contact{
  background-color:#cdd7e4;
}
.services,
.albers-section,
.process,
.about,
.contact{
  background-image:
    linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),
    var(--noise),
    var(--riso-noise);
  background-blend-mode:normal,multiply,multiply;
}

/* Contrasting registration bars across all six tutoring squares.
   Each pairing is intentionally different. */
.card-blue{box-shadow:inset 0 6px 0 var(--red);}
.card-purple{box-shadow:inset 0 6px 0 var(--green);}
.card-orange{box-shadow:inset 0 6px 0 var(--blue);}
.card-green{box-shadow:inset 0 6px 0 var(--deep-magenta);}
.card-charcoal{box-shadow:inset 0 6px 0 var(--orange);}
.card-purple-bottom{box-shadow:inset 0 6px 0 #f1eee8;}

/* Slightly more Riso character in the support tiles. */
.service-card::before{
  opacity:.10;
}
.service-card::after{
  inset:5px;
  border-top:1px solid rgba(255,255,255,.42);
  border-left:1px solid rgba(255,255,255,.30);
}

/* Language / Form / Meaning — disciplined Josef Albers-style construction. */
.albers-frame{
  display:grid;
  place-items:center;
  position:relative;
  min-height:400px;
  overflow:hidden;
  background-color:#cbd6e3;
  border-right:0;
}










/* Contact mosaic — varied block ratios, keeping a disciplined editorial grid. */










.albers-section{
  border-top:0!important;
  border-bottom:0!important;
}
.approach{
  border-top:0!important;
  border-bottom:0!important;
}
.about{
  border-top:0!important;
  border-bottom:0!important;
}
.contact{
  border-top:0!important;
}
.hero{
  border-bottom:0!important;
}

.qualification-band{
  border:1px solid rgba(255,255,255,.55)!important;
}
.qualification-band div{
  border-right:1px solid rgba(16,19,26,.34);
}

.contact form{
  border-top:1px solid rgba(16,19,26,.35);
}

/* Version J — widened registration bands on support boxes 04 and 06 */
.card-green{box-shadow:inset 0 10px 0 #73505f;}          /* green + brown-magenta */
.card-purple-bottom{box-shadow:inset 0 10px 0 #d9493f;} /* lavender + warm red */

/* Brighter New Directions-inspired paper field:
   cool off-whites alternate instead of dark blue-gray blocks. */
.services{
  background-color:#e9ebe8!important;
}
.albers-section{
  background-color:#dfe5e8!important;
}
.process{
  background-color:#ecece7!important;
}
.qualification-band{
  background-color:#e2e5e4!important;
}
.about{
  background-color:#e8e4e2!important;
}
.contact{
  background-color:#e6e9e8!important;
}
.services,
.albers-section,
.process,
.about,
.contact{
  background-image:
    linear-gradient(rgba(250,249,244,.28),rgba(250,249,244,.28)),
    var(--noise),
    var(--riso-noise)!important;
  background-blend-mode:normal,multiply,multiply!important;
}

/* Alternate Contact composition — more like a small editorial color study. */










/* Credentials now run full width, with no side gaps or outer frame.
   Separation comes from subtle paper-tone shifts rather than borders. */
.qualification-band{
  width:100%!important;
  margin:0!important;
  border:0!important;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:transparent!important;
}
.qualification-band div{
  border:0!important;
  padding:20px 24px;
}
.qualification-band div:nth-child(1){background:#ecece7;}
.qualification-band div:nth-child(2){background:#e3e7e7;}
.qualification-band div:nth-child(3){background:#f0eee7;}
.qualification-band div:nth-child(4){background:#dfe4e7;}

@media(max-width:900px){
  .qualification-band{
    width:100%!important;
    margin:0!important;
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:650px){
  .qualification-band{
    width:100%!important;
    margin:0!important;
    grid-template-columns:1fr!important;
  }
}

body{
  background:#e8eae7!important;
}

/* Version K — stronger alternating editorial paper rhythm */
.services{
  background-color:#eceeea!important;
}
.albers-section{
  background-color:#dfe4e5!important;
}
.process{
  background-color:#f0eee8!important;
}
.qualification-band{
  background-color:#e1e5e4!important;
}
.about{
  background-color:#ece8e5!important;
}
.contact{
  background-color:#dde3e6!important;
}

/* Six support cards: all have a clear base tint + vibrant contrasting registration slit */
.card-blue{
  background:#cfdcf4!important;
  box-shadow:inset 0 7px 0 var(--red)!important;
}
.card-purple{
  background:#ddd0e5!important;
  box-shadow:inset 0 7px 0 var(--green)!important;
}
.card-orange{
  background:#ead5c0!important;
  box-shadow:inset 0 7px 0 var(--blue)!important;
}
.card-green{
  background:#cfe5d5!important;
  box-shadow:inset 0 10px 0 var(--deep-magenta)!important;
}
.card-charcoal{
  background:#343841!important;
  color:#f3f1ea!important;
  box-shadow:inset 0 7px 0 var(--orange)!important;
}
.card-purple-bottom{
  background:#d5c8df!important;
  box-shadow:inset 0 10px 0 var(--red)!important;
}
.card-charcoal span,
.card-charcoal p,
.card-charcoal h3{
  color:#f3f1ea!important;
}

/* Language / Form / Meaning — new modular Albers-inspired composition */
.albers-layout-k{
  position:relative;
  min-height:410px;
  background:#d8dfe3;
  overflow:hidden;
}
.albers-k-block{
  position:absolute;
  overflow:hidden;
}
.albers-k-block::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--riso-noise);
  background-size:128px 128px;
  opacity:.09;
  mix-blend-mode:multiply;
}
.ak-blue{
  left:10%;
  top:13%;
  width:38%;
  height:66%;
  background:var(--blue);
}
.ak-green{
  left:49%;
  top:13%;
  width:23%;
  height:41%;
  background:var(--green);
}
.ak-purple{
  left:49%;
  top:55%;
  width:23%;
  height:24%;
  background:var(--purple);
}
.ak-pinkred{
  left:73%;
  top:13%;
  width:17%;
  height:27%;
  background:var(--red);
}
.ak-orange{
  left:73%;
  top:41%;
  width:17%;
  height:38%;
  background:var(--orange);
}
.ak-magenta{
  left:16%;
  bottom:6%;
  width:23%;
  height:7%;
  background:var(--deep-magenta);
}

/* Contact mosaic — revised proportions */
.contact-mosaic{
  display:grid;
  grid-template-columns:58px 34px 76px 48px;
  grid-template-rows:46px 54px 36px;
  gap:6px;
  width:max-content;
  margin-top:36px;
}
.mosaic-block{
  position:relative;
  display:block;
  overflow:hidden;
}
.mosaic-block::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--riso-noise);
  background-size:122px 122px;
  opacity:.07;
  mix-blend-mode:multiply;
}
.mb-blue{
  grid-column:1 / span 2;
  grid-row:1 / span 2;
  background:var(--blue);
}
.mb-green{
  grid-column:3;
  grid-row:1;
  background:var(--green);
}
.mb-purple{
  grid-column:4;
  grid-row:1 / span 2;
  background:var(--purple);
}
.mb-red{
  grid-column:2 / span 2;
  grid-row:3;
  background:var(--red);
}
.mb-orange{
  grid-column:3;
  grid-row:2;
  background:var(--orange);
}
.mb-charcoal{
  grid-column:1;
  grid-row:3;
  background:var(--charcoal);
}

.process-list article:nth-child(1) .num{background:var(--red)!important}
.process-list article:nth-child(2) .num{background:var(--blue)!important}
.process-list article:nth-child(3) .num{background:var(--purple)!important}

.approach-copy{
  background:#737b99!important;
}
.approach-rules{
  opacity:.065!important;
  background-image:var(--riso-noise)!important;
  background-size:165px 165px!important;
  mix-blend-mode:multiply!important;
}
.approach-label{
  color:#d3ecff!important;
}
.approach h2{
  color:#fbfaf7!important;
}
.approach p{
  color:#f1f1ef!important;
}

.qualification-band div{
  position:relative;
  overflow:hidden;
}
.qualification-band div::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:var(--riso-noise);
  background-size:145px 145px;
  opacity:.018;
  mix-blend-mode:multiply;
}
.qualification-band div:nth-child(1){background:#eeeee9!important;}
.qualification-band div:nth-child(2){background:#e1e6e7!important;}
.qualification-band div:nth-child(3){background:#f2efe8!important;}
.qualification-band div:nth-child(4){background:#dce2e6!important;}

.nav-contact{border-bottom-color:var(--blue)!important}
.hero-links a:hover,
.editorial-submit:hover{
  color:var(--blue)!important;
  border-bottom-color:var(--blue)!important;
}

/* Version L — match Language / Form / Meaning panel grain to site paper */
.albers-frame{
  background-color:#dfe4e5!important;
  background-image:
    linear-gradient(rgba(250,249,244,.22),rgba(250,249,244,.22)),
    var(--noise),
    var(--riso-noise)!important;
  background-blend-mode:normal,multiply,multiply!important;
}

/* Clear alternating paper tones for Sections 03 and 04 */
.process{
  background-color:#f1efe9!important; /* warm off-white */
  background-image:
    linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),
    var(--noise),
    var(--riso-noise)!important;
  background-blend-mode:normal,multiply,multiply!important;
}
.about{
  background-color:#dce3e7!important; /* cool gray-blue */
  background-image:
    linear-gradient(rgba(248,249,250,.08),rgba(248,249,250,.08)),
    var(--noise),
    var(--riso-noise)!important;
  background-blend-mode:normal,multiply,multiply!important;
}

/* Credential strip — distinct alternating gray/off-white cells */
.qualification-band{
  background:transparent!important;
}
.qualification-band div{
  position:relative;
  overflow:hidden;
  background-image:none!important;
}
.qualification-band div:nth-child(1){
  background-color:#f0eee8!important;
}
.qualification-band div:nth-child(2){
  background-color:#dde3e6!important;
}
.qualification-band div:nth-child(3){
  background-color:#e9e7e1!important;
}
.qualification-band div:nth-child(4){
  background-color:#d4dde3!important;
}
.qualification-band div::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:var(--riso-noise);
  background-size:145px 145px;
  opacity:.022!important;
  mix-blend-mode:multiply;
}

/* Version M — uniform Language / Form / Meaning paper field */
.albers-section,
.albers-text,
.albers-frame{
  background-color:#dfe4e5!important;
  background-image:
    linear-gradient(rgba(250,249,244,.22),rgba(250,249,244,.22)),
    var(--noise),
    var(--riso-noise)!important;
  background-blend-mode:normal,multiply,multiply!important;
}

/* Ensure cards 05 and 06 read as true colored fields with registration slits */
.card-charcoal{
  background:#4a4d58!important;
  box-shadow:inset 0 8px 0 var(--orange)!important;
}
.card-purple-bottom{
  background:#c9b7d6!important;
  box-shadow:inset 0 8px 0 var(--red)!important;
}
.card-charcoal span,
.card-charcoal h3,
.card-charcoal p{
  color:#f4f1eb!important;
}

/* Credentials retain lighter grain than the main paper, but now visibly textured */
.qualification-band div::after{
  opacity:.036!important;
  background-image:var(--riso-noise)!important;
  background-size:138px 138px!important;
  mix-blend-mode:multiply!important;
}

/* VERSION N — definitive fixes for tutoring cards 05 and 06.
   These selectors match the actual HTML classes. */
.card-literature{
  background:#d6c9df!important;
  box-shadow:inset 0 8px 0 var(--red)!important;
  color:var(--ink)!important;
}
.card-literature span,
.card-literature h3,
.card-literature p{
  color:var(--ink)!important;
}
.card-homework{
  background:#cfd9e1!important;
  box-shadow:inset 0 8px 0 var(--green)!important;
  color:var(--ink)!important;
}
.card-homework span,
.card-homework h3,
.card-homework p{
  color:var(--ink)!important;
}

/* Slight Riso texture directly on 05 and 06 as well. */
.card-literature::before,
.card-homework::before{
  opacity:.095!important;
  background-image:var(--riso-noise)!important;
  background-size:145px 145px!important;
}

/* VERSION N — credential grain applied directly to each credential cell. */
.qualification-band div:nth-child(1){
  background-color:#f0eee8!important;
  background-image:
    linear-gradient(rgba(240,238,232,.94),rgba(240,238,232,.94)),
    var(--riso-noise)!important;
  background-size:auto,132px 132px!important;
  background-blend-mode:normal,multiply!important;
}
.qualification-band div:nth-child(2){
  background-color:#dde3e6!important;
  background-image:
    linear-gradient(rgba(221,227,230,.94),rgba(221,227,230,.94)),
    var(--riso-noise)!important;
  background-size:auto,132px 132px!important;
  background-blend-mode:normal,multiply!important;
}
.qualification-band div:nth-child(3){
  background-color:#e9e7e1!important;
  background-image:
    linear-gradient(rgba(233,231,225,.94),rgba(233,231,225,.94)),
    var(--riso-noise)!important;
  background-size:auto,132px 132px!important;
  background-blend-mode:normal,multiply!important;
}
.qualification-band div:nth-child(4){
  background-color:#d4dde3!important;
  background-image:
    linear-gradient(rgba(212,221,227,.94),rgba(212,221,227,.94)),
    var(--riso-noise)!important;
  background-size:auto,132px 132px!important;
  background-blend-mode:normal,multiply!important;
}

/* Keep the pseudo grain too, but lighter so it supplements rather than obscures. */
.qualification-band div::after{
  opacity:.028!important;
  background-image:var(--riso-noise)!important;
  background-size:120px 120px!important;
  mix-blend-mode:multiply!important;
}

/* VERSION O — definitive credential grain fix.
   Previous versions placed the grain under a nearly opaque color wash.
   Here, the Riso texture is the top background layer on each credential cell. */
.qualification-band div{
  position:relative!important;
  overflow:hidden!important;
  background-blend-mode:multiply!important;
}
.qualification-band div:nth-child(1){
  background-color:#f0eee8!important;
  background-image:var(--riso-noise)!important;
  background-size:118px 118px!important;
}
.qualification-band div:nth-child(2){
  background-color:#dde3e6!important;
  background-image:var(--riso-noise)!important;
  background-size:118px 118px!important;
}
.qualification-band div:nth-child(3){
  background-color:#e9e7e1!important;
  background-image:var(--riso-noise)!important;
  background-size:118px 118px!important;
}
.qualification-band div:nth-child(4){
  background-color:#d4dde3!important;
  background-image:var(--riso-noise)!important;
  background-size:118px 118px!important;
}
/* Keep credential text clean above the textured paper. */
.qualification-band div strong,
.qualification-band div span{
  position:relative;
  z-index:2;
}
/* Disable older pseudo-element grain layers so they cannot cancel or muddy the direct texture. */
.qualification-band div::after{
  display:none!important;
}


/* Production contact form feedback */
.bot-field{position:absolute!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;height:1px!important;width:1px!important;margin:-1px!important;padding:0!important;border:0!important;}
.form-status{min-height:1.4em;margin:16px 0 0;font-size:.78rem;letter-spacing:.015em;}
.form-status.success{color:#176b42;}
.form-status.error{color:#9a2f36;}
.editorial-submit:disabled{opacity:.55;cursor:wait;}


/* Final contact details */
.contact-direct{
  margin:0 0 24px;
  font-size:.72rem;
  letter-spacing:.035em;
}
.contact-direct a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(16,19,26,.45);
  padding-bottom:2px;
}
.contact-direct a:hover,
.contact-direct a:focus-visible{
  color:var(--blue);
  border-bottom-color:var(--blue);
}
.contact-direct span{
  margin:0 8px;
  color:#5b6371;
}


/* Authoritative final: keep direct-contact links in the form column, above the form rule. */
.contact-form-column{min-width:0;}
.contact-form-column .contact-direct{margin:0 0 24px;}
