/* Circa OAK Case Study v1.0.4 — built on the OTS case study plugin (v2.9.1) */

/* Hawaiian characters (ā ē ī ō ū and ʻokina) from Lato 2.015, same subset as the OTS plugin.
   Used ONLY for those characters; everything else stays in Lato. */
@font-face{font-family:'CircaOakHaw';src:url('fonts/circa-haw-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-0101,U+0112-0113,U+012A-012B,U+014C-014D,U+016A-016B,U+02BB-02BC;}
@font-face{font-family:'CircaOakHaw';src:url('fonts/circa-haw-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-0101,U+0112-0113,U+012A-012B,U+014C-014D,U+016A-016B,U+02BB-02BC;}
@font-face{font-family:'CircaOakHaw';src:url('fonts/circa-haw-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-0101,U+0112-0113,U+012A-012B,U+014C-014D,U+016A-016B,U+02BB-02BC;}
@font-face{font-family:'CircaOakHaw';src:url('fonts/circa-haw-black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0100-0101,U+0112-0113,U+012A-012B,U+014C-014D,U+016A-016B,U+02BB-02BC;}
@font-face{font-family:'CircaOakHaw';src:url('fonts/circa-haw-normal-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-0101,U+0112-0113,U+012A-012B,U+014C-014D,U+016A-016B,U+02BB-02BC;}
.circa-oak-case-study,.circa-oak-case-study *{font-family:'CircaOakHaw','Lato',sans-serif!important;}

/* Transparent dark Circa nav over the hero — same treatment as the OTS page */
body.circa-oak-active #header-space{display:none!important;height:0!important;}
body.circa-oak-active #header-outer,
body.circa-oak-active #header-outer[data-transparent-header="true"],
body.circa-oak-active #header-outer[data-permanent-transparent="1"]{
  background:rgba(64,64,64,.78)!important;
  background-color:rgba(64,64,64,.78)!important;
  box-shadow:none!important;
  border-bottom:0!important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
body.circa-oak-active #header-outer.scrolled-down,
body.circa-oak-active #header-outer.detached{
  background:rgba(64,64,64,.94)!important;
  background-color:rgba(64,64,64,.94)!important;
}
body.circa-oak-active .container-wrap{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;}
body.circa-oak-active .main-content>.row{padding-top:0!important;padding-bottom:0!important;margin-bottom:0!important;}
body.circa-oak-active .main-content>.row>.wpb_row:last-child,
body.circa-oak-active .main-content>.row>.wpb_row:last-child .wpb_wrapper{margin-bottom:0!important;padding-bottom:0!important;}
body.circa-oak-active #footer-outer{margin-top:0!important;}

/* Isolated from Salient/WPBakery layout rules */
.circa-oak-case-study{
  position:relative;
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  padding:0!important;
  overflow:hidden;
  color:#444;
  line-height:1.4;
  background:#fff;
}
.circa-oak-case-study *{box-sizing:border-box}
.circa-oak-case-study section,
.circa-oak-case-study figure,
.circa-oak-case-study blockquote{margin:0}
.circa-oak-case-study h1,
.circa-oak-case-study h2,
.circa-oak-case-study p{margin:0!important;padding:0!important}
.circa-oak-case-study img,.circa-oak-case-study video{border:0;box-shadow:none;border-radius:0;max-width:none}
.circa-oak-case-study a{text-decoration:none!important}
.oak-wrap{width:100%;max-width:1240px;margin:0 auto!important;padding-left:clamp(20px,5vw,90px);padding-right:clamp(20px,5vw,90px)}

/* Shared type */
.oak-label{font-size:15px;line-height:1.3;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6a6a6a}
.circa-oak-case-study h2{font-size:clamp(32px,3.6vw,52px)!important;line-height:1.04!important;font-weight:900!important;text-transform:uppercase;letter-spacing:normal;color:#404040!important}
.circa-oak-case-study .oak-head p,
.circa-oak-case-study .oak-more p{font-size:20px!important;line-height:1.6!important;max-width:720px}
.oak-head{display:flex;flex-direction:column;gap:20px}
.circa-oak-case-study figcaption,.oak-caption{font-size:17px;line-height:1.45;color:#444}
.circa-oak-case-study figcaption strong,.oak-caption strong{font-weight:700;color:#404040}

/* Hero */
.oak-hero{position:relative;width:100%;overflow:hidden;background:#5f6b7e;margin-top:0!important}
.oak-hero>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 40%;display:block!important;margin:0!important;padding:0!important}
.oak-hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,20,.78) 0%,rgba(20,20,20,.45) 45%,rgba(20,20,20,.05) 80%)}
.oak-hero-inner{position:relative;width:100%;max-width:1400px;min-height:820px;margin:0 auto!important;padding:140px clamp(20px,5vw,90px) 96px;display:flex;flex-direction:column;justify-content:flex-end;gap:32px}
.oak-eyebrow{font-size:20px;font-weight:700;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.circa-oak-case-study .oak-hero h1{font-size:clamp(52px,8vw,124px)!important;line-height:.95!important;font-weight:900!important;text-transform:uppercase;letter-spacing:-.01em;color:#fff!important;max-width:1200px}
.oak-btn{display:inline-block;align-self:flex-start;color:#fff!important;border:2px solid rgba(255,255,255,.85);padding:16px 30px;font-size:15px;line-height:1.2;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:transparent}

/* Intro + meta */
.oak-intro{padding-top:120px;padding-bottom:110px;display:flex;flex-direction:column;gap:56px}
.circa-oak-case-study .oak-big-intro{font-size:clamp(28px,3.4vw,50px)!important;line-height:1.22!important;font-weight:300;color:#404040;max-width:1060px}
.oak-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;border-top:1px solid #ccc;padding-top:32px}
.oak-meta b,.oak-credits b{display:block;font-size:14px;line-height:1.3;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6a6a6a;margin:0 0 8px}
.oak-meta span{display:block;font-size:19px;line-height:1.45}

/* Dark and light bands */
.oak-dark{width:100%;background:#404040;color:#fff}
.oak-light{width:100%;background:#f4f4f4}

/* The problem */
.oak-problem{padding-top:120px;padding-bottom:130px;display:flex;flex-direction:column;gap:56px}
.circa-oak-case-study .oak-problem h2{font-size:clamp(36px,4.4vw,64px)!important;line-height:1.02!important;color:#fff!important}
.oak-fights{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px}
.oak-fight{border-top:4px solid #62CAE8;padding-top:28px;display:flex;flex-direction:column;gap:16px}
.oak-fight strong{font-size:24px;line-height:1.1;font-weight:900;text-transform:uppercase;color:#fff}
.oak-fight span{font-size:19px;line-height:1.5;color:#ddd}

/* Platform */
.oak-platform{padding-top:140px;padding-bottom:120px;display:flex;flex-direction:column;gap:28px}
.circa-oak-case-study .oak-platform h2{font-size:clamp(44px,6vw,92px)!important;line-height:.98!important}
.circa-oak-case-study .oak-platform>p{font-size:21px!important;line-height:1.6!important;max-width:720px}
.oak-billboard{margin-top:32px!important;display:flex;flex-direction:column;gap:16px}
.oak-billboard img{width:100%;aspect-ratio:1200/776;object-fit:cover;display:block}

/* 01 Less getting there */
.oak-ease{padding-top:130px;padding-bottom:130px;display:flex;flex-direction:column;gap:48px}
.oak-video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px 28px}
.oak-video-tile{display:flex;flex-direction:column;gap:14px;color:#444!important}
.oak-thumb{position:relative;display:block}
.oak-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.oak-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
.oak-video-tile:hover .oak-play,.oak-video-tile:focus-visible .oak-play{transform:scale(1.08)}
.oak-caption{display:block}

/* 02 More being there */
.oak-more{padding-top:140px;padding-bottom:60px;display:flex;flex-direction:column;gap:20px}
.oak-full{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin:0!important}
.oak-ads{padding-top:12px}
.oak-ad-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.oak-ad-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* Same idea, every destination */
.oak-dest{padding-top:120px;padding-bottom:140px;display:flex;flex-direction:column;gap:48px}
.circa-oak-case-study .oak-dest h2{font-size:clamp(30px,3.2vw,46px)!important;line-height:1.06!important}
.oak-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px}
.oak-two figure{display:flex;flex-direction:column;gap:14px}
.oak-two img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* Channels */
.oak-channels{padding-top:130px;padding-bottom:130px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:64px;align-items:center}
.oak-channels .oak-head{gap:24px}
.circa-oak-case-study .oak-channels .oak-head p{max-width:none}
.oak-channels>img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* Results + quote */
.oak-stats{padding-top:110px;padding-bottom:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:56px}
.oak-stat{border-top:4px solid #62CAE8;padding-top:28px;display:flex;flex-direction:column;gap:14px}
.oak-stat strong{display:block;font-size:clamp(80px,8vw,128px);font-weight:900;line-height:.9;color:#fff}
.oak-stat span{display:block;font-size:19px;line-height:1.45;color:#ddd}
.circa-oak-case-study .oak-results-note{width:100%;max-width:1240px;margin:0 auto!important;padding:0 clamp(20px,5vw,90px) 100px!important;color:#cfcfcf;font-size:17px!important;line-height:1.5!important}
/* v1.0.3: client quote moved up, right after the intro, on light gray */
.oak-quote{padding-top:110px;padding-bottom:110px}
.oak-quote-inner{position:relative;display:flex;flex-direction:column;gap:28px}
/* v1.0.4: five stars replace the blue rule; deeper brand blue for 3:1 contrast on #f4f4f4 */
.oak-rating{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.oak-stars{display:inline-flex;gap:4px;line-height:0}
.oak-stars svg{width:24px;height:24px;display:block;fill:#2A93B8}
.circa-oak-case-study .oak-rating-label{font-size:15px;line-height:1.3;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#555!important}
.circa-oak-case-study a.oak-rating-label{text-decoration:underline!important;text-underline-offset:3px}
.circa-oak-case-study a.oak-rating-label:hover{color:#404040!important}
.oak-quote blockquote{margin:0!important;padding:0!important;border:0!important;background:none!important;font-size:clamp(34px,4.2vw,62px)!important;line-height:1.15!important;font-weight:300;font-style:normal;max-width:1040px;color:#404040;quotes:none}
.oak-quote blockquote:before,.oak-quote blockquote:after{content:none!important;display:none!important}
.oak-quote-by{font-size:20px;line-height:1.5;font-style:italic;color:#555}

/* Credits */
.oak-credits{padding-top:80px;padding-bottom:120px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
.oak-credits b{color:#404040;margin-bottom:12px}
.circa-oak-case-study .oak-credits p{font-size:17px!important;line-height:1.75!important}

/* Next project — looping video, art held centered at the bottom */
.oak-next{position:relative;display:block;width:100%;height:clamp(400px,47.2vw,680px);overflow:hidden;background:#017DE9;margin:0!important;padding:0!important}
/* v1.0.2: the still sits under the video, framed identically, so the art shows even if the video is blocked */
.oak-next-still,.oak-next-video{position:absolute!important;inset:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:50% 100%!important;display:block!important;visibility:visible!important;opacity:1!important;margin:0!important;padding:0!important;border:0!important}
.oak-next-still{z-index:0}
.oak-next-video{z-index:1;background:transparent!important}
.oak-next-inner{z-index:2}
.oak-next-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(32px,4vw,56px) 20px 0;color:#fff;text-align:center}
.oak-next small{font-size:19px;line-height:1.2;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.oak-next strong{font-size:clamp(36px,5vw,64px);line-height:1;font-weight:900;text-transform:uppercase;color:#fff}

@media(max-width:700px){
  .oak-hero-inner{min-height:560px;padding-bottom:54px}
  .oak-intro{padding-top:80px;padding-bottom:80px}
  .oak-problem,.oak-platform,.oak-ease,.oak-dest,.oak-channels{padding-top:90px}
  .oak-problem,.oak-platform,.oak-ease,.oak-dest,.oak-channels{padding-bottom:90px}
  .oak-more{padding-top:90px}
  .oak-stats{padding-top:90px;gap:36px}
  .oak-quote{padding-top:80px;padding-bottom:80px}
}

/* Eliminate theme whitespace after the final project block. */
body.circa-oak-active .circa-oak-case-study{margin-bottom:0!important;}
body.circa-oak-active .circa-oak-case-study + *{margin-top:0!important;}