/*
Theme Name: Oodle A+ Bricks Child — Faithful
Theme URI: https://oodle.agency/
Description: Faithful, performance-first Bricks child theme for Oodle Agency. Preserves the original Oodle design language while rebuilding the frontend for carbon, Lighthouse, SEO/GEO and conversion performance.
Author: Oodle / Systematic
Template: bricks
Version: 0.3.0
Text Domain: oodle-faithful
*/

:root{
  --oo-black:#000;
  --oo-white:#fff;
  --oo-green:#56bf99;
  --oo-blue:#5068f2;
  --oo-gold:#f2b441;
  --oo-red:#f25252;
  --oo-wrap:1200px;
  --oo-gutter:clamp(20px,4vw,48px);
  --oo-radius:40px;
  --oo-body:"bilo",Arial,sans-serif;
  --oo-rig-fill:"rig-solid-bold-fill",Impact,sans-serif;
  --oo-rig-reverse:"rig-solid-bold-reverse",Impact,sans-serif;
}

html{background:var(--oo-black);color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--oo-black);color:var(--oo-white);font-family:var(--oo-body);font-weight:500}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.13em}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--oo-green);outline-offset:4px}
.oo-wrap{width:min(calc(100% - (2 * var(--oo-gutter))),var(--oo-wrap));margin-inline:auto}

/* Original Oodle typography */
.oo-title,.oo-rig-fill{font-family:var(--oo-rig-fill);font-weight:700;line-height:.95}
.oo-rig-reverse{font-family:var(--oo-rig-reverse);font-weight:700;line-height:.95;color:var(--oo-green)}
.oo-title{margin:0;font-size:clamp(5rem,8vw,8rem)}
.oo-title--green{color:var(--oo-green)}

/* Header: same compact black/white Oodle cue */
.oo-header{position:relative;z-index:999;background:#000;color:#fff}
.oo-header__inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.oo-header__logo{flex:0 0 auto}
.oo-header__logo p{margin:0}
.oo-logo{display:inline-block}
.oo-logo img{width:125px;height:auto}
.oo-header__nav{margin-left:auto}
.oo-header__nav .bricks-nav-menu>li>a{font-family:var(--oo-body);font-weight:500}
.oo-header__nav .bricks-nav-menu>li>a:hover{color:var(--oo-green)}

/* Hero: preserve the neon-sign cue without downloading the 1.46 MB MP4 */
.oo-hero{min-height:calc(100svh - 86px);position:relative;overflow:hidden;background:#000;display:flex;align-items:stretch}
.oo-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(86,191,153,.09),transparent 38%);pointer-events:none}
.oo-hero__inner{min-height:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.oo-hero__neon p,.oo-hero__scroll p{margin:0}
.oo-neon{font-family:var(--oo-rig-reverse);font-size:clamp(9rem,22vw,24rem);line-height:.75;color:var(--oo-green);transform:rotate(-4deg);filter:drop-shadow(0 0 7px rgba(86,191,153,.85)) drop-shadow(0 0 28px rgba(86,191,153,.4));opacity:.98}
.oo-neon span{text-shadow:0 0 1px #fff,0 0 5px var(--oo-green),0 0 16px var(--oo-green)}
.oo-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);width:72px;height:72px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;text-decoration:none;font-family:var(--oo-body);font-size:48px;line-height:1;transition:.2s ease}
.oo-scroll:hover{background:#fff;color:#000;transform:translateX(-50%) translateY(3px)}

/* Intro: copy and scale intentionally mirror the existing homepage */
.oo-intro{padding:clamp(80px,10vw,150px) 0 90px}
.oo-intro__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.oo-intro__h1{max-width:1100px;margin:0 0 70px;font-family:var(--oo-body);font-size:clamp(3rem,5.2vw,4rem);font-weight:500;line-height:1.2;color:#fff}
.oo-intro__lead{max-width:1080px;margin:0;font-size:clamp(2rem,3.2vw,2.5rem);line-height:1.3;color:#fff}
.oo-intro__h1 strong,.oo-intro__lead strong{font-weight:700}

/* Brands */
.oo-brands{padding:70px 0 80px}
.oo-brands__inner{text-align:center}
.oo-brands__title{margin-bottom:60px}
.oo-logo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 32px;align-items:center}
.oo-logo-grid__item{min-height:90px;display:flex;align-items:center;justify-content:center;padding:14px;opacity:.84;transition:opacity .2s ease,transform .2s ease}
.oo-logo-grid__item:hover{opacity:1;transform:translateY(-2px)}
.oo-logo-grid__item img{max-width:150px;max-height:70px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(3)}

/* Expertise: four large rounded image areas like the existing component */
.oo-expertise{padding:70px 0 110px}
.oo-expertise__heading{margin-bottom:45px}
.oo-expertise__overline{margin:0 0 4px;font-family:var(--oo-body);font-size:clamp(2.8rem,4.5vw,4rem);font-weight:700;color:#fff}
.oo-expertise__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:54px 28px}
.oo-expertise-card{position:relative;display:block;min-width:0;text-decoration:none}
.oo-expertise-card__media{position:relative;height:350px;overflow:hidden;border-radius:var(--oo-radius);background:#111}
.oo-expertise-card__media p{height:100%;margin:0}
.oo-expertise-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease}
.oo-expertise-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.82),transparent 55%);pointer-events:none}
.oo-expertise-card:hover .oo-expertise-card__media img{transform:scale(1.05);filter:brightness(.82)}
.oo-expertise-card__title{position:absolute;z-index:2;top:27px;left:30px;margin:0;font-family:var(--oo-body);font-size:clamp(2.5rem,4vw,3.25rem);font-weight:700;color:#fff}

/* Work: giant rounded project imagery and pill tags, but CSS scroll-snap replaces Swiper */
.oo-work{padding:80px 0 120px;overflow:hidden}
.oo-work__headline{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:50px}
.oo-words{min-width:8ch;font-family:var(--oo-rig-fill);font-size:clamp(5rem,9vw,8rem);line-height:.9;color:var(--oo-green);height:.95em;overflow:hidden;position:relative}
.oo-words span{display:block;position:absolute;right:0;top:0;opacity:0;animation:ooWords 12s infinite}
.oo-words span:nth-child(2){animation-delay:3s}.oo-words span:nth-child(3){animation-delay:6s}.oo-words span:nth-child(4){animation-delay:9s}
@keyframes ooWords{0%,2%{opacity:0;transform:translateY(.35em)}7%,20%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-.25em)}}
.oo-work__track{display:flex;gap:48px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(0px,calc((100vw - min(calc(100vw - (2 * var(--oo-gutter))),var(--oo-wrap)))/2)) 28px;scrollbar-width:thin;scrollbar-color:var(--oo-green) #111}
.oo-project{flex:0 0 min(75vw,900px);scroll-snap-align:center}
.oo-project__media{display:block;height:clamp(360px,58vw,600px);overflow:hidden;border-radius:var(--oo-radius);background:#111}
.oo-project__media p{height:100%;margin:0}
.oo-project__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.oo-project__media:hover img{transform:scale(1.04)}
.oo-project__meta{margin-top:22px}
.oo-project__title{margin:0;font-family:var(--oo-body);font-size:clamp(2.5rem,4vw,3.25rem);font-weight:700;color:#fff}
.oo-project__title a{text-decoration:none}
.oo-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.oo-pills span{border:2px solid #fff;border-radius:999px;padding:6px 16px;font-size:1.4rem;text-transform:uppercase;line-height:1.2}

/* Meet the Oodlers */
.oo-oodlers{padding:70px 0 120px}
.oo-oodlers__inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.oo-oodlers__copy{position:relative}
.oo-oodlers__top,.oo-oodlers__bottom{margin:0;font-size:clamp(6rem,10vw,9rem);text-align:left}
.oo-oodlers__bottom{margin-top:-.08em}
.oo-circle-link{display:grid;width:88px;height:88px;place-items:center;margin-top:30px;border:4px solid var(--oo-green);border-radius:50%;color:var(--oo-green);font-size:58px;text-decoration:none;transition:.2s ease}
.oo-circle-link:hover{background:var(--oo-green);color:#000;transform:translateX(3px)}
.oo-wave{font-size:clamp(10rem,22vw,22rem);line-height:1;text-align:center;filter:drop-shadow(0 0 25px rgba(86,191,153,.12));transform:rotate(-8deg)}

/* Testimonial: same quote personality without the carousel payload */
.oo-testimonial{padding:25px 0 90px}
.oo-testimonial__box{position:relative;padding:55px clamp(28px,5vw,70px);border-radius:var(--oo-radius);background:rgba(255,255,255,.08)}
.oo-quote-mark{position:absolute;left:24px;top:-28px;font-family:Georgia,serif;font-size:160px;line-height:1;color:var(--oo-red)}
.oo-testimonial__quote{position:relative;z-index:1;margin:0 auto;max-width:900px;font-family:var(--oo-body);font-size:clamp(2.3rem,4vw,3.5rem);font-weight:500;line-height:1.18;text-align:center;color:#fff}
.oo-testimonial__credit{margin:26px 0 0;text-align:center;font-size:1.8rem;font-weight:700}

/* Original get in / touch cue, now a lightweight contextual CTA rather than a site-wide form */
.oo-contact-cta{padding:80px 0 120px}
.oo-contact-cta__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.oo-contact-cta__top,.oo-contact-cta__bottom{margin:0;font-size:clamp(8rem,16vw,15rem);line-height:.76}
.oo-contact-cta__bottom{margin-top:.05em;color:var(--oo-gold)}
.oo-contact-cta__button{margin-top:55px!important;border:3px solid #fff!important;border-radius:999px!important;padding:12px 30px!important;background:#000!important;color:#fff!important;font-family:var(--oo-body)!important;font-size:2rem!important;font-weight:700!important;text-transform:uppercase!important;transition:.25s ease!important}
.oo-contact-cta__button:hover{background:var(--oo-gold)!important;border-color:var(--oo-gold)!important;color:#fff!important}

/* Footer */
.oo-footer{padding:60px 0 26px;border-top:1px solid rgba(255,255,255,.16);background:#000;color:#fff}
.oo-footer__top{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:start}
.oo-footer__brand{align-items:flex-start}
.oo-logo--footer img{width:100px}
.oo-footer__tagline{margin-top:10px;font-size:2rem;font-weight:700}
.oo-social{margin:24px 0 0;font-size:1.5rem}
.oo-footer__navwrap{display:flex;justify-content:flex-end}
.oo-footer__nav .bricks-nav-menu{justify-content:flex-end}
.oo-footer__legal{margin-top:50px;padding-top:25px;border-top:1px solid rgba(255,255,255,.13);font-size:1.35rem;line-height:1.65;text-align:right;color:rgba(255,255,255,.78)}

@media(max-width:991px){
 .oo-logo-grid{grid-template-columns:repeat(4,1fr)}
 .oo-work__headline{align-items:flex-start;flex-direction:column}.oo-words span{left:0;right:auto}
 .oo-project{flex-basis:85vw}
}
@media(max-width:767px){
 .oo-header__inner{min-height:72px}.oo-logo img{width:108px}.oo-hero{min-height:50svh}.oo-neon{font-size:clamp(8rem,35vw,14rem)}.oo-scroll{display:none}
 .oo-intro{padding:70px 0}.oo-intro__h1{font-size:3rem;margin-bottom:50px}.oo-intro__lead{font-size:2rem}
 .oo-logo-grid{grid-template-columns:repeat(2,1fr);gap:18px}.oo-logo-grid__item{min-height:72px}
 .oo-expertise__grid{grid-template-columns:1fr;gap:28px}.oo-expertise-card__media{height:300px}.oo-expertise-card__title{font-size:3rem}
 .oo-work{padding-top:50px}.oo-work__headline{margin-bottom:30px}.oo-words{font-size:5rem}.oo-project{flex-basis:88vw}.oo-project__media{height:300px}.oo-project__title{font-size:3rem}
 .oo-oodlers__inner{grid-template-columns:1fr;text-align:center}.oo-oodlers__top,.oo-oodlers__bottom{text-align:center;font-size:5rem}.oo-circle-link{margin-inline:auto;width:64px;height:64px;font-size:42px}.oo-wave{font-size:12rem}
 .oo-testimonial__quote{font-size:2.4rem}.oo-contact-cta__top,.oo-contact-cta__bottom{font-size:7rem}
 .oo-footer__top{grid-template-columns:1fr}.oo-footer__navwrap{justify-content:flex-start}.oo-footer__nav .bricks-nav-menu{justify-content:flex-start}.oo-footer__legal{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.oo-words{height:auto}.oo-words span{display:inline;position:static;opacity:1!important;animation:none!important;transform:none!important}.oo-words span:not(:last-child)::after{content:" / ";}.oo-expertise-card__media img,.oo-project__media img,.oo-logo-grid__item,.oo-scroll,.oo-circle-link{transition:none!important}}