/*
Theme Name: Red Oak Labs
Theme URI: https://example.com/red-oak-labs
Author: Red Oak Labs
Description: A responsive advanced-materials WordPress theme for Red Oak Labs, featuring the approved logo suite, CNT/BNC product architecture, technology workflow, applications, company story, and inquiry form.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: red-oak-labs
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/


:root{
  --ink:#111111;
  --ink2:#202020;
  --paper:#fbfaf8;
  --cream:#f4eeea;
  --rose:#f3e6e3;
  --red:#bd111b;
  --red2:#e2383e;
  --red-dark:#8f0c14;
  --muted:#6a625e;
  --line:rgba(17,17,17,.10);
  --red-line:rgba(189,17,27,.28);
  --shadow:0 26px 80px rgba(39,20,18,.10);
  --shell:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.shell{width:min(var(--shell),calc(100% - 64px));margin:auto}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:.98;letter-spacing:-.045em}
h1{font-size:clamp(3.8rem,7.5vw,8rem);font-weight:600}
h2{font-size:clamp(2.5rem,5vw,5rem);font-weight:580}
h3{font-size:1.45rem}
p{color:var(--muted)}
.overline{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.17em;color:var(--red);
}
.overline>span{width:28px;height:1px;background:var(--red)}
.overline.light{color:#ff8b90}.overline.light>span{background:#ff8b90}
.button{
  min-height:50px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  border:1px solid var(--ink);font-size:.84rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em;
  transition:.25s ease;cursor:pointer;background:transparent;
}
.button:hover{transform:translateY(-2px)}
.button.primary{color:#fff;background:var(--red);border-color:var(--red);box-shadow:0 16px 36px rgba(189,17,27,.18)}
.button.primary:hover{background:var(--red-dark)}
.button.secondary{background:rgba(255,255,255,.55);border-color:rgba(17,17,17,.32)}
.button.ghost{border-color:rgba(17,17,17,.2);background:rgba(255,255,255,.65)}
.button.white-btn{background:#fff;border-color:#fff;color:var(--ink)}
.text-link{font-weight:750;color:var(--red);text-transform:uppercase;font-size:.78rem;letter-spacing:.1em}
.light-link{color:#fff}
.section{padding:112px 0}
.soft-section{background:var(--cream)}
.site-nav{
  position:sticky;top:0;z-index:100;background:rgba(251,250,248,.9);
  backdrop-filter:blur(16px);border-bottom:1px solid rgba(17,17,17,.06)
}
.nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand-lockup{display:flex;align-items:center;gap:12px;min-width:220px}
.brand-icon{width:52px;height:52px;display:grid;place-items:center;overflow:hidden}
.brand-icon img{width:74px;max-width:none}
.brand-type{display:flex;flex-direction:column;line-height:1}
.brand-type strong{font-size:.95rem;letter-spacing:.26em;font-weight:650}
.brand-type small{color:var(--red);letter-spacing:.52em;font-size:.55rem;margin-top:8px}
.desktop-links{display:flex;gap:34px;font-size:.82rem;font-weight:650;text-transform:uppercase;letter-spacing:.08em}
.desktop-links a{position:relative;padding:30px 0}
.desktop-links a:after{
  content:"";position:absolute;left:50%;bottom:19px;width:5px;height:5px;border-radius:50%;
  background:var(--red);opacity:0;transform:translateX(-50%);
}
.desktop-links a:hover:after,.desktop-links a.active:after{opacity:1}
.nav-actions{display:flex;align-items:center;gap:10px}
.small-btn{min-height:42px;padding:0 16px}
.mobile-toggle{display:none;border:0;background:transparent;font-size:1.5rem}
.mobile-menu{display:none}
.hero-home{overflow:hidden}
.hero-home-grid{min-height:720px;display:grid;grid-template-columns:.92fr 1.08fr;align-items:stretch}
.hero-copy{padding:100px 40px 78px 0;display:flex;flex-direction:column;justify-content:center}
.hero-copy h1{font-size:clamp(4rem,6.9vw,7.3rem);max-width:720px;margin:24px 0 26px}
.hero-copy h1 em{font-style:normal;color:var(--red);font-weight:600}
.hero-lede{font-size:1.13rem;max-width:650px;line-height:1.65}
.hero-actions{display:flex;gap:12px;margin-top:32px}
.hero-micro{margin-top:58px;display:flex;border-top:1px solid var(--line);padding-top:20px;gap:30px}
.hero-micro div{display:flex;gap:9px;align-items:center;font-size:.77rem}
.hero-micro b{color:var(--red);font-size:.67rem;letter-spacing:.12em}
.hero-micro span{color:#4f4945}
.hero-visual{position:relative;min-height:720px;overflow:hidden;background:var(--rose)}
.hero-photo{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03)}
.hero-visual:after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,250,248,.12),rgba(251,250,248,.0) 35%,rgba(189,17,27,.03))
}
.hero-logo-card{
  position:absolute;z-index:3;left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(420px,66%);aspect-ratio:1;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(4px);border-radius:50%;
}
.hero-logo-card img{width:104%;filter:drop-shadow(0 25px 40px rgba(96,15,15,.12))}
.visual-caption{
  position:absolute;z-index:4;bottom:28px;right:28px;padding:12px 16px;background:rgba(17,17,17,.82);color:#fff;
  display:flex;flex-direction:column;gap:2px;min-width:160px
}
.visual-caption span{font-size:.58rem;letter-spacing:.15em;color:#d9d0cc}.visual-caption b{font-size:.9rem;letter-spacing:.14em}
.molecule-lines span{position:absolute;z-index:2;background:rgba(255,255,255,.88);height:1px;transform-origin:left center}
.ml1{width:90px;left:13%;top:34%;transform:rotate(30deg)}.ml2{width:70px;left:17%;top:46%;transform:rotate(-33deg)}.ml3{width:96px;right:14%;top:60%;transform:rotate(28deg)}
.molecule-lines i{position:absolute;width:8px;height:8px;border:1px solid #fff;border-radius:50%;z-index:2}
.md1{left:12%;top:33%}.md2{left:22%;top:40%}.md3{right:21%;top:58%}.md4{right:12%;top:63%}
.principles{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.principle-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.principle-grid article{padding:28px 24px;border-right:1px solid var(--line);min-height:190px}
.principle-grid article:last-child{border-right:0}
.p-icon{width:48px;height:48px;border:1px dotted var(--red);border-radius:50%;display:grid;place-items:center;color:var(--red);font-size:1.45rem;margin-bottom:20px}
.principle-grid b{text-transform:uppercase;font-size:.75rem;letter-spacing:.06em}
.principle-grid p{font-size:.85rem;margin:8px 0 0}
.section-title-row{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:46px}
.section-title-row>div{max-width:760px}.section-title-row>p{max-width:430px;margin:0 0 7px}
.section-title-row h2{margin:16px 0 0}
.material-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.material-card{background:#fff;border:1px solid var(--line);transition:.28s ease;overflow:hidden}
.material-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(189,17,27,.22)}
.material-img{aspect-ratio:1.15/1;overflow:hidden;background:#eee}
.material-img img{width:100%;height:100%;object-fit:cover;transition:.5s ease}
.material-card:hover .material-img img{transform:scale(1.04)}
.material-card-body{padding:24px 24px 26px}
.card-index{font-size:.64rem;color:var(--red);letter-spacing:.14em;font-weight:800}
.material-card h3{font-size:1.35rem;margin:13px 0 10px;color:#b30e18;line-height:1.08}
.material-card p{font-size:.9rem;min-height:66px}
.card-link{display:inline-block;margin-top:20px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
.process-band{position:relative;overflow:hidden;background:#171717;color:#fff;padding:92px 0 86px}
.process-band:before{content:"";position:absolute;left:-80px;top:-60px;width:270px;height:270px;border:1px dotted rgba(226,56,62,.35);border-radius:50%}
.process-band:after{content:"";position:absolute;right:-110px;bottom:-130px;width:390px;height:390px;background:radial-gradient(circle,rgba(189,17,27,.18),transparent 62%)}
.process-heading{text-align:center;max-width:750px;margin:0 auto 58px}
.process-heading h2{margin:15px 0 16px}.process-heading p{color:#bdb5b1}
.process-steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr)}
.process-steps:before{content:"";position:absolute;top:62px;left:9%;right:9%;height:1px;background:linear-gradient(90deg,transparent,#a5242b 10%,#a5242b 90%,transparent)}
.process-step{text-align:center;position:relative;padding:0 15px}
.process-step>span{font-size:.6rem;color:#ce7377;letter-spacing:.15em}
.process-icon{margin:16px auto 20px;width:72px;height:72px;border:1px dotted #cf3d44;border-radius:50%;background:#171717;display:grid;place-items:center;color:#fff;font-size:1.5rem;position:relative;z-index:2}
.process-step h3{text-transform:uppercase;font-size:.82rem;letter-spacing:.05em;margin-bottom:9px}
.process-step p{font-size:.8rem;color:#bcb4b0}
.process-cta{text-align:center;margin-top:42px}
.nature-section{display:grid;grid-template-columns:1.1fr .9fr;min-height:620px;background:#f6f1ed}
.nature-copy{padding:90px max(60px,calc((100vw - var(--shell))/2)) 70px max(32px,calc((100vw - var(--shell))/2));position:relative;overflow:hidden}
.nature-copy h2{margin:18px 0 24px}.nature-copy p{max-width:620px;font-size:1.02rem;line-height:1.7}
.nature-copy .text-link{display:inline-block;margin-top:24px}
.nature-mark{position:absolute;width:270px;right:22px;bottom:10px;opacity:.95}
.nature-image{position:relative;overflow:hidden;min-height:620px}
.nature-image img{width:100%;height:100%;object-fit:cover}
.nature-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,12,8,.55))}
.nature-image-label{position:absolute;z-index:2;bottom:28px;left:28px;color:#fff;display:flex;flex-direction:column}
.nature-image-label span{font-size:.58rem;letter-spacing:.17em}.nature-image-label b{font-size:1rem;letter-spacing:.1em}
.client-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}
.client-grid h2{margin:18px 0}
.client-list{border-top:1px solid var(--line)}
.client-list>div{display:grid;grid-template-columns:60px 1fr 1.2fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.client-list span{color:var(--red);font-size:.67rem;letter-spacing:.12em;font-weight:800}
.client-list b{font-size:.92rem}.client-list p{font-size:.88rem;margin:0}
.cta-panel{background:var(--red);color:#fff;padding:68px 0}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:50px}
.cta-inner h2{font-size:clamp(2.3rem,4.6vw,4.8rem);max-width:850px;margin:18px 0 0}
.site-footer{background:#171717;color:#fff;padding:62px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.35fr .65fr .65fr 1fr;gap:42px}
.footer-brand .brand-type strong{color:#fff}.footer-note{font-size:.86rem;max-width:350px;color:#aaa19d;margin-top:18px}
.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:9px}
.footer-grid a{font-size:.82rem;color:#c9c1bd}.footer-grid a:hover{color:#fff}
.footer-kicker{font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;color:#ff777e;font-weight:800;margin-bottom:10px}
.footer-connect{border:1px solid #3b3b3b;padding:22px}.footer-connect p{font-size:.82rem;color:#aba39f}.footer-connect .button{margin-top:8px;color:#fff}
.footer-bottom{border-top:1px solid #333;margin-top:42px;padding-top:20px;display:flex;justify-content:space-between;font-size:.7rem;color:#8f8986}
.page-mast{padding:82px 0 92px;background:linear-gradient(90deg,#fbfaf8 55%,#f0e5e2 55%)}
.page-mast-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}
.page-mast h1{font-size:clamp(3.6rem,6.3vw,6.7rem);margin:20px 0 25px}
.page-mast p{font-size:1.04rem;max-width:680px}
.mast-visual{height:560px;position:relative;overflow:hidden;border:1px solid rgba(189,17,27,.16);box-shadow:var(--shadow)}
.mast-visual>img:first-child{width:100%;height:100%;object-fit:cover}
.mast-mark{position:absolute!important;width:56%!important;height:auto!important;object-fit:contain!important;left:22%;top:20%;filter:drop-shadow(0 18px 28px rgba(106,10,17,.18))}
.product-collage{height:560px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.product-collage img{width:100%;height:100%;object-fit:cover}
.product-collage img:first-child{grid-row:1/3}
.workflow-stack{border-top:1px solid var(--line)}
.workflow-stack article{display:grid;grid-template-columns:80px 1fr 120px;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}
.wf-num{font-size:.7rem;font-weight:800;color:var(--red);letter-spacing:.16em}
.workflow-stack span{font-size:.62rem;color:var(--red);letter-spacing:.15em;font-weight:800}
.workflow-stack h3{margin:8px 0 8px;font-size:1.65rem}
.workflow-stack p{margin:0;max-width:720px}
.wf-glyph{font-size:2.4rem;color:var(--red);text-align:center}
.image-strip{display:grid;grid-template-columns:repeat(3,1fr);height:410px}
.image-strip div{position:relative;overflow:hidden}
.image-strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.image-strip span{position:absolute;left:20px;bottom:20px;background:#111;color:#fff;padding:7px 10px;font-size:.62rem;letter-spacing:.15em}
.two-column{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}
.two-column h2{margin:18px 0}
.feature-list{border-top:1px solid var(--line)}
.feature-list article{padding:24px 0;border-bottom:1px solid var(--line)}
.feature-list b{font-size:1.1rem}.feature-list p{margin:7px 0 0}
.product-detail-section{padding-top:65px}
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:48px 0}
.product-detail.reverse .pd-image{order:2}
.pd-image{height:520px;overflow:hidden}
.pd-image img{width:100%;height:100%;object-fit:cover}
.pd-copy h2{margin:18px 0 24px}.pd-copy p{font-size:1rem;line-height:1.7}
.spec-pills{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0 28px}
.spec-pills span{border:1px solid var(--line);padding:8px 11px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;background:#fff}
.dark-panel{background:#171717;color:#fff}
.dark-title p{color:#b8b0ac}
.custom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#3c2b2b;border:1px solid #3c2b2b}
.custom-grid article{background:#171717;padding:30px;min-height:240px}
.custom-grid span{color:#ff777e;font-size:.64rem;letter-spacing:.14em}.custom-grid h3{margin-top:65px}.custom-grid p{color:#afa7a3}
.application-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.application-card{border:1px solid var(--line);background:#fff;overflow:hidden}
.application-card img{width:100%;height:260px;object-fit:cover}
.application-card>div{padding:24px}
.application-card span{font-size:.62rem;letter-spacing:.15em;color:var(--red);font-weight:800}
.application-card h3,.application-card h2{margin:12px 0 10px}
.feature-app{grid-column:span 2;display:grid;grid-template-columns:1.15fr .85fr}
.feature-app img{height:100%;min-height:430px}
.feature-app>div{display:flex;flex-direction:column;justify-content:flex-end;padding:34px}
.question-section{background:#f0e6e3}
.question-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.question-grid h2{margin:18px 0}
.question-box{border-left:1px solid var(--red);padding:18px 0 18px 40px}
.question-box p{font-size:1.5rem;line-height:1.45;color:#3f3936}.question-box .button{margin-top:24px}
.about-hero{padding:90px 0 100px}
.about-hero-grid{display:grid;grid-template-columns:1fr .8fr;gap:60px;align-items:center}
.about-hero h1{font-size:clamp(3.8rem,6.5vw,7rem);margin:20px 0 26px}
.about-hero p{font-size:1.08rem;max-width:720px}
.about-logo-stage{min-height:560px;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(189,17,27,.08),transparent 56%)}
.about-logo-stage img{width:76%;position:relative;z-index:2}
.orbit{position:absolute;border:1px dotted rgba(189,17,27,.28);border-radius:50%}
.o1{width:86%;height:86%}.o2{width:66%;height:66%}.o3{width:48%;height:48%}
.nature-story{display:grid;grid-template-columns:1fr 1fr;background:#171717;color:#fff}
.nature-story-image{min-height:640px}.nature-story-image img{width:100%;height:100%;object-fit:cover}
.nature-story-copy{padding:90px 7vw;display:flex;flex-direction:column;justify-content:center}
.nature-story-copy h2{margin:18px 0 26px}.nature-story-copy p{color:#c2bbb7;font-size:1rem;line-height:1.75}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.values-grid article{padding:28px;background:var(--paper);min-height:300px}
.values-grid span{font-size:.63rem;color:var(--red);font-weight:800;letter-spacing:.14em}
.values-grid h3{margin-top:90px}.values-grid p{font-size:.9rem}
.contact-hero{padding:88px 0 110px;background:linear-gradient(115deg,#fbfaf8 0%,#fbfaf8 48%,#efe2df 48%)}
.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}
.contact-copy h1{font-size:clamp(4rem,6.4vw,6.8rem);margin:20px 0 25px}
.contact-copy>p{font-size:1.06rem;max-width:570px}
.contact-art{margin-top:48px;border-top:1px solid var(--line);display:grid;grid-template-columns:180px 1fr;gap:30px;padding-top:25px}
.contact-art img{width:180px}.contact-art div{display:flex;flex-direction:column;gap:6px}
.contact-art b{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--red);margin-bottom:6px}
.contact-art span{font-size:.84rem;color:#5b5450}
.contact-form{background:#fff;padding:34px;border:1px solid rgba(17,17,17,.08);box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-heading{grid-column:1/-1;margin-bottom:14px}.form-heading span{font-size:.62rem;color:var(--red);letter-spacing:.14em;font-weight:800}.form-heading h2{font-size:2.3rem;margin:10px 0}
.contact-form label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:750;color:#403b38}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;margin-top:8px;border:1px solid #d8d1cd;background:#fbfaf8;padding:14px;color:#222;outline:none;min-height:50px
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--red)}
.contact-form textarea{min-height:160px;resize:vertical}
.contact-form .full{grid-column:1/-1}.form-button{grid-column:1/-1;margin-top:4px}.form-note{grid-column:1/-1;font-size:.75rem;margin:0}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}
@media(max-width:1050px){
  .shell{width:min(var(--shell),calc(100% - 40px))}
  .desktop-links{display:none}.mobile-toggle{display:block}.nav-actions .ghost{display:none}
  .mobile-menu.open{display:flex;flex-direction:column;padding:10px 20px 22px;border-top:1px solid var(--line);background:#fbfaf8}
  .mobile-menu a{padding:10px 0;text-transform:uppercase;font-size:.78rem;letter-spacing:.09em}
  .hero-home-grid,.page-mast-grid,.product-detail,.about-hero-grid,.contact-layout{grid-template-columns:1fr}
  .hero-copy{padding:70px 0}.hero-visual{min-height:570px}
  .principle-grid{grid-template-columns:repeat(3,1fr)}.principle-grid article:nth-child(3){border-right:0}
  .material-cards{grid-template-columns:1fr 1fr}
  .process-steps{grid-template-columns:repeat(3,1fr);gap:28px}.process-steps:before{display:none}
  .nature-section,.nature-story{grid-template-columns:1fr}.nature-image{min-height:470px}
  .client-grid,.two-column,.question-grid{grid-template-columns:1fr;gap:45px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .page-mast{background:#fbfaf8}.mast-visual{height:500px}
  .application-grid{grid-template-columns:1fr 1fr}.feature-app{grid-column:span 2}
  .values-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .shell{width:calc(100% - 28px)}
  .brand-lockup{min-width:0}.brand-type strong{font-size:.78rem}.brand-icon{width:44px;height:44px}
  .site-nav .nav-inner{height:70px}
  h1{font-size:3.8rem}h2{font-size:2.8rem}
  .hero-home-grid{min-height:0}.hero-copy h1{font-size:3.9rem}.hero-actions{flex-direction:column;align-items:stretch}
  .hero-micro{display:grid;gap:10px}.hero-visual{min-height:470px}
  .principle-grid{grid-template-columns:1fr 1fr}.principle-grid article{border-bottom:1px solid var(--line)}
  .material-cards{grid-template-columns:1fr}
  .section{padding:78px 0}.section-title-row{display:block}.section-title-row>p{margin-top:16px}
  .process-steps{grid-template-columns:1fr 1fr}.nature-copy{padding:70px 28px 230px}.nature-mark{width:230px;left:50%;transform:translateX(-50%)}
  .client-list>div{grid-template-columns:45px 1fr}.client-list p{grid-column:2}
  .cta-inner{display:block}.cta-inner .button{margin-top:28px}
  .footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}
  .workflow-stack article{grid-template-columns:45px 1fr}.wf-glyph{display:none}
  .image-strip{height:auto;grid-template-columns:1fr}.image-strip div{height:280px}
  .product-detail{gap:28px}.product-detail.reverse .pd-image{order:0}.pd-image{height:360px}
  .application-grid{grid-template-columns:1fr}.feature-app{grid-column:auto;display:block}.feature-app img{min-height:0;height:280px}
  .values-grid{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}.contact-form .full,.form-heading,.form-button,.form-note{grid-column:auto}
  .contact-art{grid-template-columns:110px 1fr}.contact-art img{width:110px}
}

/* ---------------------------------------------------------
   Mobile-first enhancements added in revision 2
   --------------------------------------------------------- */
html, body { overflow-x: hidden; }
img, svg, canvas { max-width: 100%; height: auto; }
body { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

.mobile-only { display: none; }

@media (max-width: 900px) {
  :root{
    --shell: 1000px;
  }

  .site-nav{
    top: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .nav-inner{
    gap: 12px;
  }

  .brand-lockup{
    gap: 10px;
  }

  .brand-type strong{
    letter-spacing: .18em;
  }

  .brand-type small{
    letter-spacing: .34em;
  }

  .mobile-toggle{
    width: 44px;
    height: 44px;
    border: 1px solid rgba(17,17,17,.12);
    border-radius: 999px;
    display: grid;
    place-items: center;
    line-height: 1;
    font-size: 1.2rem;
    background: rgba(255,255,255,.82);
  }

  .mobile-menu{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: rgba(251,250,248,.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(17,17,17,.08);
    box-shadow: 0 24px 50px rgba(0,0,0,.08);
  }

  .mobile-menu.open{
    display: flex;
    flex-direction: column;
    padding: 10px 20px 20px;
  }

  .mobile-menu a{
    min-height: 48px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(17,17,17,.06);
  }

  .mobile-menu a:last-child{
    border-bottom: 0;
  }

  .hero-home-grid{
    gap: 0;
  }

  .hero-copy{
    padding: 56px 0 28px;
  }

  .hero-copy h1{
    font-size: clamp(3rem, 10vw, 4.6rem);
    line-height: .95;
  }

  .hero-lede{
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero-micro{
    gap: 12px;
    margin-top: 34px;
  }

  .hero-micro div{
    padding: 10px 0;
  }

  .hero-visual{
    min-height: 420px;
  }

  .hero-logo-card{
    width: min(320px, 78%);
  }

  .visual-caption{
    right: 14px;
    left: 14px;
    bottom: 14px;
    min-width: 0;
  }

  .section,
  .page-mast,
  .contact-hero,
  .about-hero{
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section-title-row{
    gap: 18px;
    margin-bottom: 28px;
  }

  .section-title-row h2{
    line-height: 1.02;
  }

  .principle-grid article,
  .material-card-body,
  .custom-grid article,
  .values-grid article{
    padding: 22px;
  }

  .process-band{
    padding: 72px 0 64px;
  }

  .process-steps{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .process-step{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    padding: 18px 16px 20px;
    border-radius: 20px;
  }

  .process-icon{
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
  }

  .material-cards,
  .application-grid,
  .custom-grid,
  .values-grid{
    gap: 14px;
  }

  .client-list > div{
    gap: 14px;
  }

  .client-list b{
    display: block;
    margin-bottom: 6px;
  }

  .page-mast-grid{
    gap: 28px;
  }

  .page-mast h1,
  .about-hero h1,
  .contact-copy h1{
    font-size: clamp(2.8rem, 9vw, 4.5rem);
    line-height: .98;
  }

  .mast-visual{
    height: 360px;
  }

  .product-collage{
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
  }

  .product-collage img:first-child{
    grid-row: span 2;
  }

  .workflow-stack article{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 0;
  }

  .wf-num{
    font-size: .7rem;
  }

  .wf-glyph{
    display: none;
  }

  .two-column,
  .client-grid,
  .question-grid,
  .contact-layout,
  .about-hero-grid,
  .page-mast-grid,
  .product-detail,
  .nature-section,
  .nature-story{
    gap: 28px;
  }

  .pd-image{
    height: 300px;
  }

  .spec-pills span{
    font-size: .68rem;
  }

  .feature-app{
    display: block;
  }

  .feature-app img{
    min-height: 0;
    height: 240px;
  }

  .question-box{
    padding-left: 22px;
  }

  .question-box p{
    font-size: 1.18rem;
  }

  .about-logo-stage{
    min-height: 320px;
  }

  .nature-copy{
    padding-bottom: 160px;
  }

  .nature-mark{
    width: 190px;
    right: 50%;
    transform: translateX(50%);
    bottom: 18px;
  }

  .contact-art{
    grid-template-columns: 92px 1fr;
    gap: 16px;
  }

  .contact-art img{
    width: 92px;
  }

  .contact-form{
    padding: 20px;
    border-radius: 18px;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    min-height: 52px;
    border-radius: 12px;
  }

  .button{
    min-height: 52px;
    width: auto;
  }

  .cta-inner{
    align-items: flex-start;
  }

  .footer-grid{
    gap: 26px;
  }

  .footer-bottom{
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 640px) {
  .shell{
    width: calc(100% - 24px);
  }

  .desktop-links{
    display: none;
  }

  .nav-inner{
    height: 68px;
  }

  .brand-type strong{
    font-size: .76rem;
    letter-spacing: .16em;
  }

  .brand-type small{
    font-size: .5rem;
    margin-top: 6px;
    letter-spacing: .28em;
  }

  .hero-copy{
    padding-top: 40px;
  }

  .hero-copy h1{
    font-size: clamp(2.6rem, 11vw, 3.8rem);
  }

  .hero-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button{
    width: 100%;
  }

  .hero-micro{
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 12px;
  }

  .hero-visual{
    min-height: 340px;
    border-radius: 18px;
    margin-bottom: 6px;
  }

  .hero-logo-card{
    width: min(240px, 72%);
  }

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

  .principle-grid article{
    min-height: 0;
    border-right: 0 !important;
  }

  .material-cards,
  .application-grid,
  .custom-grid,
  .values-grid{
    grid-template-columns: 1fr !important;
  }

  .process-heading,
  .section-title-row > div,
  .section-title-row > p{
    max-width: none;
  }

  .nature-section,
  .nature-story{
    min-height: 0;
  }

  .nature-copy{
    padding: 56px 20px 150px;
  }

  .nature-image,
  .nature-story-image{
    min-height: 260px;
  }

  .client-list > div{
    grid-template-columns: 1fr;
  }

  .client-list p{
    grid-column: auto;
  }

  .page-mast{
    padding-top: 54px;
    padding-bottom: 56px;
  }

  .mast-visual{
    height: 260px;
    border-radius: 18px;
  }

  .product-collage{
    grid-auto-rows: 130px;
    gap: 8px;
  }

  .image-strip div{
    height: 220px;
  }

  .product-detail{
    padding: 26px 0;
  }

  .pd-image{
    height: 240px;
    border-radius: 18px;
    overflow: hidden;
  }

  .question-box{
    padding-left: 16px;
  }

  .question-box p{
    font-size: 1.02rem;
  }

  .about-logo-stage img{
    width: 86%;
  }

  .contact-layout{
    gap: 24px;
  }

  .contact-form{
    grid-template-columns: 1fr;
  }

  .form-heading h2{
    font-size: 1.8rem;
  }

  .footer-brand{
    min-width: 0;
  }

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

  .footer-bottom{
    display: grid;
    gap: 6px;
  }

  .mobile-only{
    display: inline-flex;
  }

  .mobile-sticky-cta{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .mobile-sticky-cta .button{
    width: 100%;
    max-width: 420px;
    pointer-events: auto;
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
  }
}


/* Exact Red Oak Labs logo-suite assets */
.suite-brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.suite-brand img{
  display:block;
  width:230px;
  height:auto;
  max-width:none;
}
.site-nav .suite-brand{ min-width:242px; }
.footer-brand.suite-brand img{ width:248px; }
.hero-logo-card img{
  width:92%;
  height:auto;
  object-fit:contain;
}
.about-logo-stage > img,
.contact-art > img{
  object-fit:contain;
}
@media(max-width:900px){
  .site-nav .suite-brand{ min-width:0; }
  .site-nav .suite-brand img{ width:190px; }
}
@media(max-width:640px){
  .site-nav .suite-brand img{ width:164px; }
  .footer-brand.suite-brand img{ width:210px; }
}



/* WordPress integration */
.admin-bar .site-nav { top: 32px; }
.wp-caption, .wp-caption-text, .gallery-caption { max-width: 100%; }
.alignwide { width: min(1400px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; }
.screen-reader-text {
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal!important;
}
.red-oak-wp-content { padding: 72px 0; }
.red-oak-wp-content .entry-content { max-width: 820px; margin: 0 auto; }
.red-oak-wp-content .entry-content > * + * { margin-top: 1.2em; }
.contact-status {
  grid-column: 1 / -1;
  padding: 13px 15px;
  border: 1px solid rgba(17,17,17,.12);
  background: #fbfaf8;
  font-size: .86rem;
}
.contact-status.success { border-color: rgba(28,128,66,.35); color: #155f31; }
.contact-status.error { border-color: rgba(189,17,27,.35); color: #8f0c14; }
.contact-form .hp-field {
  position:absolute!important; left:-10000px!important; top:auto!important;
  width:1px!important; height:1px!important; overflow:hidden!important;
}
@media (max-width: 782px) {
  .admin-bar .site-nav { top: 46px; }
}

/* ==========================================================
   HQ media + approved Red Oak Labs logo framework
   ========================================================== */

.hero-logo-card,
.mast-mark {
  display: none !important;
}

.hero-visual,
.material-img,
.pd-image,
.mast-visual,
.product-collage,
.application-card,
.nature-image,
.nature-story-image,
.image-strip > div {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-photo,
.material-img img,
.pd-image img,
.mast-visual > img:first-child,
.product-collage img,
.application-card img,
.nature-image img,
.nature-story-image img,
.image-strip img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  image-rendering: auto;
}

/* Use only the clean right-hand science artwork from the HQ hero file. */
.hero-photo,
.mast-visual > img:first-child {
  object-position: 94% 50%;
  filter: none !important;
}

/* Remove image zooming that can soften raster photos on hover. */
.material-card:hover .material-img img {
  transform: none !important;
}
.material-card .material-img img {
  transition: opacity .22s ease;
}
.material-card:hover .material-img img {
  opacity: .97;
}

/* Approved logo-suite framework: maintain intended scale and no overlap. */
.site-nav .suite-brand img,
.footer-brand.suite-brand img,
.about-logo-stage > img,
.contact-art > img,
.nature-mark {
  image-rendering: auto;
  backface-visibility: hidden;
}
.site-nav .suite-brand,
.footer-brand.suite-brand,
.about-logo-stage,
.contact-art,
.nature-brand-detail {
  isolation: isolate;
}

/* Place the approved icon in normal flow instead of floating over copy. */
.nature-brand-detail {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.nature-brand-detail .nature-mark {
  position: static !important;
  width: 94px !important;
  height: auto !important;
  transform: none !important;
  opacity: 1 !important;
}
.nature-brand-detail span {
  max-width: 220px;
  color: #5d5652;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  line-height: 1.45;
}

/* Homepage contact block. */
.home-contact-strip {
  padding: 78px 0;
  background: #f4eeea;
  border-top: 1px solid rgba(17,17,17,.08);
}
.home-contact-inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 70px;
  align-items: center;
}
.home-contact-inner h2 {
  margin: 18px 0 0;
  font-size: clamp(2.2rem,4vw,4.2rem);
}
.home-contact-details {
  border-left: 1px solid rgba(189,17,27,.35);
  padding-left: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.home-contact-details > span,
.direct-contact-email > span {
  color: #bd111b;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .66rem;
  font-weight: 800;
}
.home-email-link,
.direct-contact-email a,
.footer-email-address {
  overflow-wrap: anywhere;
  font-weight: 650;
}
.home-email-link {
  color: #111;
  font-size: clamp(1.3rem,2.2vw,2rem);
}
.direct-contact-email {
  margin-top: 28px;
  padding: 18px 0 18px 20px;
  border-left: 2px solid #bd111b;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.direct-contact-email a {
  color: #111;
  font-size: 1.12rem;
}
.footer-email-address {
  color: #fff !important;
  font-size: .9rem !important;
  margin: 4px 0 8px;
}

/* Keep content and controls above decorative geometry. */
.hero-copy,
.nature-copy,
.contact-copy,
.pd-copy,
.application-card > div,
.material-card-body {
  position: relative;
  z-index: 3;
}

@media(max-width:900px){
  .home-contact-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .home-contact-details {
    padding-left: 22px;
  }
}
@media(max-width:640px){
  .hero-photo,
  .mast-visual > img:first-child {
    object-position: 96% 50%;
  }
  .home-contact-strip {
    padding: 58px 0;
  }
}