/* Grit & Agency textures
   Section backgrounds with depth, built from the brand mark: the open concentric rings of the G,
   a fine paper grain and a soft dot screen. Pure CSS and inline SVG, no image files.
   Load after styles.css. Works in WordPress as Additional CSS or a child-theme stylesheet.

   .band--texture   Deep teal band, white text. For one statement per page.
   .band--rings     Pale teal band with faint rings. A quieter break for long sections.
   .statement       Large one-line pull quote inside .band--texture.
*/

:root{
  /* white grain */
  --tx-grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* dark grain */
  --tx-grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the G: six open rings, gap facing right like the mark, innermost in coral */
  --tx-rings-on-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke-linecap='round' transform='rotate(-20 400 400)'%3E%3Ccircle cx='400' cy='400' r='388' stroke='%23fff' stroke-opacity='.10' stroke-width='10' pathLength='100' stroke-dasharray='85 15'/%3E%3Ccircle cx='400' cy='400' r='340' stroke='%23fff' stroke-opacity='.08' stroke-width='10' pathLength='100' stroke-dasharray='84 16'/%3E%3Ccircle cx='400' cy='400' r='292' stroke='%23fff' stroke-opacity='.10' stroke-width='10' pathLength='100' stroke-dasharray='83 17'/%3E%3Ccircle cx='400' cy='400' r='244' stroke='%23fff' stroke-opacity='.07' stroke-width='10' pathLength='100' stroke-dasharray='82 18'/%3E%3Ccircle cx='400' cy='400' r='196' stroke='%23fff' stroke-opacity='.09' stroke-width='10' pathLength='100' stroke-dasharray='80 20'/%3E%3Ccircle cx='400' cy='400' r='148' stroke='%23FF7F61' stroke-opacity='.55' stroke-width='10' pathLength='100' stroke-dasharray='78 22'/%3E%3C/g%3E%3C/svg%3E");
  --tx-rings-on-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke-linecap='round' transform='rotate(-20 400 400)'%3E%3Ccircle cx='400' cy='400' r='388' stroke='%2300A8A8' stroke-opacity='.16' stroke-width='8' pathLength='100' stroke-dasharray='85 15'/%3E%3Ccircle cx='400' cy='400' r='340' stroke='%2300A8A8' stroke-opacity='.12' stroke-width='8' pathLength='100' stroke-dasharray='84 16'/%3E%3Ccircle cx='400' cy='400' r='292' stroke='%2300A8A8' stroke-opacity='.15' stroke-width='8' pathLength='100' stroke-dasharray='83 17'/%3E%3Ccircle cx='400' cy='400' r='244' stroke='%2300A8A8' stroke-opacity='.10' stroke-width='8' pathLength='100' stroke-dasharray='82 18'/%3E%3Ccircle cx='400' cy='400' r='196' stroke='%23FF7F61' stroke-opacity='.30' stroke-width='8' pathLength='100' stroke-dasharray='80 20'/%3E%3C/g%3E%3C/svg%3E");
  /* dot screens */
  --tx-dots-light:radial-gradient(rgba(255,255,255,.075) 1.1px, transparent 1.5px);
  --tx-dots-dark:radial-gradient(rgba(0,112,111,.07) 1.1px, transparent 1.5px);
}

/* Deep teal statement band */
.band--texture{
  position:relative; overflow:hidden; isolation:isolate;
  color:#fff;
  background-color:var(--teal-ink, #00706F);
  background-image:
    var(--tx-grain-light),
    var(--tx-rings-on-dark),
    var(--tx-rings-on-dark),
    var(--tx-dots-light),
    radial-gradient(120% 90% at 0% 0%, rgba(0,168,168,.55), transparent 60%),
    linear-gradient(160deg, #00807F 0%, #00605F 100%);
  background-size: 240px 240px, 760px 760px, 300px 300px, 8px 8px, auto, auto;
  background-position: 0 0, right -260px center, left -120px top -150px, 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat;
}
.band--texture h2,.band--texture h3,.band--texture p,.band--texture li,.band--texture strong{color:#fff}
.band--texture .label{color:#fff; opacity:.85}
.band--texture .lines i{background:var(--coral, #FF7F61)}
.band--texture a:not(.btn){color:#fff; text-decoration-color:var(--coral, #FF7F61)}

/* Pale ring band, for a quieter break */
.band--rings{
  position:relative; overflow:hidden;
  background-color:var(--teal-wash, #E3F4F3);
  background-image:
    var(--tx-grain-dark),
    var(--tx-rings-on-light),
    var(--tx-dots-dark);
  background-size: 240px 240px, 820px 820px, 9px 9px;
  background-position: 0 0, right -430px top -430px, 0 0;
  background-repeat: repeat, no-repeat, repeat;
}

/* Pull-quote statement */
.statement{padding-block:clamp(72px, 9vw, 128px)}
.statement .wrap{max-width:min(var(--max, 1180px), 62rem)}
.statement-text{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3.4rem); line-height:1.14;
  letter-spacing:-.01em; margin:14px 0 18px; text-wrap:balance;
}
.statement-text em{
  font-style:normal;
  background-image:linear-gradient(var(--coral, #FF7F61), var(--coral, #FF7F61));
  background-size:100% .12em; background-repeat:no-repeat; background-position:0 92%;
}
.statement-by{font-size:var(--t-body, 1.125rem); opacity:.92; margin:0}

@media (max-width:820px){
  .band--texture{
    background-size: 240px 240px, 520px 520px, 220px 220px, 8px 8px, auto, auto;
    background-position: 0 0, right -280px bottom -200px, left -110px top -120px, 0 0, 0 0, 0 0;
  }
  .band--rings{background-size:240px 240px, 560px 560px, 9px 9px; background-position:0 0, right -330px top -330px, 0 0}
}
@media print{.band--texture,.band--rings{background-image:none}}

/* Layout helpers added with the organizations page */
.weeks--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.weeks--three .week:nth-child(1)::before{width:33%}
.weeks--three .week:nth-child(2)::before{width:66%}
.weeks--three .week:nth-child(3)::before{width:100%;background:linear-gradient(90deg,var(--teal) 75%,var(--coral) 75%)}
.demo--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.demo-card--warn{background:var(--coral-wash, #FFEDE6)}
@media (max-width:980px){.weeks--three,.demo--three{grid-template-columns:1fr}}