/* Organic Cart Studio 10.2
   Device-first premium layout and interaction refinements.
   Visual layer only: no content, routing, metadata or schema changes. */

:root{
  --ocs-fluid-gutter:clamp(16px,3.6vw,56px);
  --ocs-fluid-section:clamp(76px,9vw,150px);
  --ocs-label-green:#007a46;
  --ocs-label-green-dark:#72f6b5;
  --ocs-touch:48px;
}

html{overflow-x:clip;scroll-padding-top:110px}
body{min-width:320px;overflow-x:clip}
.site-main{width:100%;min-width:0}
.container{width:min(100%,var(--container));padding-inline:var(--ocs-fluid-gutter)}
.ocs-crafted-section{padding-block:var(--ocs-fluid-section)}
img,video,canvas{max-width:100%;height:auto}
iframe{border:0}
h1,h2,h3,h4{overflow-wrap:normal;text-wrap:balance}
p,li{overflow-wrap:anywhere;text-wrap:pretty}
button,a,input,textarea,select{touch-action:manipulation}
:focus-visible{outline:2px solid var(--craft-green);outline-offset:4px}

/* Stronger, more recognisably green micro-headings on light surfaces. */
.eyebrow,
.ocs-section-label,
.ocs-service-section-head small,
.ocs-case-grid small,
.ocs-case-cta>span,
.ocs-legacy-cta small,
.ocs-legacy-related-grid small,
.ocs-hero-kicker,
.ocs-home-copy-head>span,
.ocs-case-intro>span,
.svc-hero .eyebrow,
.page-hero .eyebrow,
.archive-hero .eyebrow{
  color:var(--ocs-label-green)!important;
  font-weight:650;
}
.ocs-process-section .ocs-section-label,
.ocs-process-section .ocs-section-count small,
.ocs-process-section .ocs-section-meter>span,
.site-footer .eyebrow,
.site-footer .ocs-section-label,
.ocs-legacy-cta small,
.ocs-case-cta>span,
.card--feature .eyebrow{
  color:var(--ocs-label-green-dark)!important;
}
.ocs-section-label::before,
.eyebrow:not(.eyebrow--num)::before{
  content:"";
  width:18px;
  height:1px;
  background:currentColor;
  flex:0 0 auto;
}
.eyebrow{display:inline-flex;align-items:center}
.eyebrow .dot{display:none}

/* Header: precise behaviour from compact phones to ultrawide screens. */
.site-header{padding-top:max(12px,env(safe-area-inset-top));transition:transform .42s var(--craft-ease),background .35s,border-color .35s}
.site-header .container{max-width:1540px}
.header-bar{min-width:0}
.header-brand{min-width:0;flex-shrink:0}
.header-brand img{display:block;max-width:140px!important;width:auto!important;height:auto!important;max-height:46px!important}
.desktop-navigation{overflow:visible}
.desktop-navigation .primary-menu{min-width:0;gap:clamp(12px,1.35vw,24px)}
.desktop-navigation a{font-size:clamp(.66rem,.65vw,.76rem)}
.header-cta,.menu-toggle{min-height:var(--ocs-touch)}
.header-cta{padding-inline:17px}
@media(max-width:1280px){
  .desktop-navigation .primary-menu{gap:13px}
  .desktop-navigation a{font-size:.64rem;letter-spacing:.065em}
  .header-cta{padding-inline:13px;font-size:.78rem}
}
@media(max-width:1040px){
  .desktop-navigation,.header-status,.header-cta{display:none!important}
  .menu-toggle{display:flex!important}
  .header-bar{grid-template-columns:minmax(0,1fr) auto!important}
}
@media(max-width:640px){
  .site-header{padding-top:max(8px,env(safe-area-inset-top))}
  .site-header .container{padding-inline:12px}
  .header-bar{min-height:58px!important;padding:8px 10px!important;background:rgba(241,238,228,.94);border:1px solid rgba(7,17,12,.13);box-shadow:0 10px 30px rgba(7,17,12,.08)}
  .site-header:not(.is-scrolled) .header-bar{background:rgba(241,238,228,.88);backdrop-filter:blur(16px)}
  .header-brand img{max-width:108px!important;max-height:38px!important}
  .menu-toggle{height:42px;min-height:42px;padding-inline:12px;font-size:.68rem}
}
@media(max-width:370px){
  .header-brand img{max-width:94px!important}
  .menu-toggle span{display:none}
  .menu-toggle{width:44px;padding:0;justify-content:center}
}

/* Full-screen menu: scroll-safe, notch-safe and usable in landscape. */
.mobile-menu{height:100dvh;min-height:100svh;overflow:hidden}
.ocs-menu-shell{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:calc(18px + env(safe-area-inset-top)) var(--ocs-fluid-gutter) calc(22px + env(safe-area-inset-bottom))}
.ocs-menu-grid{min-height:0}
.ocs-menu-primary-list>li>a{min-height:58px}
.ocs-menu-secondary a{display:block;margin-top:8px}
@media(max-width:760px){
  .ocs-menu-grid{align-content:start;padding:34px 0;gap:34px}
  .ocs-menu-primary-list>li>a{grid-template-columns:38px minmax(0,1fr) 20px;font-size:clamp(1.65rem,8.5vw,3.4rem)!important;padding-block:14px!important}
  .ocs-menu-primary-list .sub-menu{padding-left:38px!important}
  .ocs-menu-secondary{grid-template-columns:1fr;gap:24px}
  .ocs-menu-secondary nav{grid-template-columns:1fr 1fr}
  .ocs-menu-foot{gap:18px;align-items:flex-start;flex-direction:column}
}
@media(max-height:620px) and (orientation:landscape){
  .ocs-menu-shell{padding-top:12px;padding-bottom:12px}
  .ocs-menu-head{padding-bottom:10px}
  .ocs-menu-grid{grid-template-columns:1.25fr .75fr;padding:16px 0;gap:32px}
  .ocs-menu-primary-list>li>a{font-size:clamp(1.2rem,4.5vw,2.2rem)!important;padding-block:8px!important;min-height:42px}
  .ocs-menu-secondary{grid-template-columns:1fr;gap:15px}
  .ocs-menu-foot{padding-top:10px}
}

/* Loader scales properly on every screen without blocking slow devices too long. */
.ocs-loader{padding:max(18px,env(safe-area-inset-top)) var(--ocs-fluid-gutter) max(18px,env(safe-area-inset-bottom))}
.ocs-loader__mark>span{font-size:clamp(1.45rem,5vw,3rem)}
.ocs-loader__orbit{width:clamp(118px,20vw,174px);height:clamp(118px,20vw,174px)}
.ocs-loader__bottom strong{font-size:clamp(3rem,13vw,8rem)}
@media(max-width:560px){
  .ocs-loader__top span:last-child{display:none}
  .ocs-loader__bottom{grid-template-columns:auto 1fr!important;gap:14px!important}
  .ocs-loader__bottom strong{grid-column:1/-1!important}
}

/* Hero: editorial impact with controlled dimensions and no device overflow. */
.ocs-crafted-hero{min-height:100svh;padding-top:clamp(132px,13vw,180px);padding-bottom:clamp(52px,7vw,86px)}
.ocs-crafted-hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr)!important;gap:clamp(38px,5vw,84px)!important;min-height:min(820px,calc(100svh - 220px));align-items:center!important}
.ocs-crafted-hero h1{font-size:clamp(3.7rem,6.7vw,7.65rem)!important;max-width:12ch!important;line-height:.87!important}
.ocs-crafted-hero__copy>p{max-width:660px;font-size:clamp(1rem,1.15vw,1.25rem)}
.ocs-hero-object{min-width:0;width:100%;max-width:650px;justify-self:end}
.ocs-hero-object__frame{min-height:clamp(500px,46vw,650px)!important;width:100%;overflow:hidden}
.ocs-hero-actions{flex-wrap:wrap}
.ocs-hero-actions .btn{min-height:52px}
.ocs-hero-proof-list{max-width:720px}
@media(min-width:1600px){
  :root{--container:1500px}
  .ocs-crafted-hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(520px,.82fr)!important}
  .ocs-hero-object{max-width:690px}
}
@media(max-width:1180px){
  .ocs-crafted-hero__grid{grid-template-columns:1fr!important;min-height:auto!important;gap:52px!important}
  .ocs-crafted-hero h1{max-width:13ch!important;font-size:clamp(4rem,9vw,7.2rem)!important}
  .ocs-hero-object{justify-self:stretch;max-width:900px;margin-inline:auto}
  .ocs-hero-object__frame{min-height:560px!important}
}
@media(max-width:760px){
  .ocs-crafted-hero{padding-top:132px;padding-bottom:58px}
  .ocs-hero-ribbon{top:78px;height:29px;font-size:.52rem}
  .ocs-hero-kicker{gap:18px;flex-wrap:wrap;font-size:.56rem}
  .ocs-crafted-hero h1{font-size:clamp(3.2rem,14.4vw,5.6rem)!important;line-height:.88!important;max-width:11.5ch!important;margin-top:24px}
  .ocs-crafted-hero__copy>p{font-size:1rem;line-height:1.65;margin-top:26px}
  .ocs-hero-actions{align-items:stretch;gap:10px;margin-top:28px}
  .ocs-hero-actions .btn{justify-content:center;flex:1 1 220px}
  .ocs-hero-actions>span{font-size:.68rem}
  .ocs-hero-proof-list{grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:26px}
  .ocs-hero-object__frame{min-height:470px!important;transform:none!important}
}
@media(max-width:480px){
  .ocs-crafted-hero h1{font-size:clamp(2.9rem,14.6vw,4.45rem)!important;max-width:10.8ch!important}
  .ocs-hero-proof-list{grid-template-columns:1fr}
  .ocs-hero-object__frame{min-height:410px!important}
  .ocs-hero-actions .btn{width:100%;flex-basis:100%}
}
@media(max-width:360px){
  .ocs-crafted-hero h1{font-size:2.75rem!important}
  .ocs-hero-object__frame{min-height:370px!important}
}

/* Global chapter heads: retain hierarchy but become naturally responsive. */
.ocs-section-head{grid-template-columns:minmax(64px,100px) minmax(0,1fr) minmax(160px,220px);gap:clamp(20px,3vw,42px);margin-bottom:clamp(48px,6vw,84px)}
.ocs-section-head h2{font-size:clamp(2.5rem,5vw,5.9rem);max-width:13ch}
.ocs-section-head p{font-size:clamp(.98rem,1vw,1.08rem)}
@media(max-width:960px){
  .ocs-section-head{grid-template-columns:64px minmax(0,1fr)}
  .ocs-section-meter{grid-column:2;max-width:360px}
  .ocs-section-head h2{font-size:clamp(2.55rem,8vw,5rem);max-width:15ch}
}
@media(max-width:600px){
  .ocs-crafted-section{padding-block:76px}
  .ocs-section-head{grid-template-columns:1fr;gap:17px;margin-bottom:42px}
  .ocs-section-count{display:flex;align-items:end;gap:9px}
  .ocs-section-count span{font-size:2.15rem}
  .ocs-section-count small{margin:0 0 2px}
  .ocs-section-meter{grid-column:1;width:100%;max-width:none;margin-top:5px}
  .ocs-section-head h2{font-size:clamp(2.35rem,11.5vw,4rem);max-width:none;margin-top:13px}
  .ocs-section-head p{margin-top:18px}
  .ocs-section-ghost{font-size:11rem!important}
}

/* Old homepage copy and evidence grids. */
.ocs-home-copy-head,.ocs-case-intro{grid-template-columns:minmax(190px,.32fr) minmax(0,1fr);gap:clamp(30px,6vw,96px)}
.ocs-home-problem-grid,.ocs-home-proof-grid,.ocs-case-grid{min-width:0}
.ocs-home-problem-grid article,.ocs-home-proof-grid article,.ocs-case-grid article{min-width:0}
.ocs-home-proof-stats,.ocs-case-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){
  .ocs-home-copy-head,.ocs-case-intro{grid-template-columns:1fr;gap:24px}
  .ocs-case-intro p{grid-column:1}
  .ocs-home-proof-stats,.ocs-case-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .ocs-home-proof-stats,.ocs-case-stats{grid-template-columns:1fr}
}

/* Projects: cinematic desktop stack, robust tablet/mobile cards. */
.ocs-project-stack{gap:clamp(16px,2vw,26px)}
.ocs-project-card{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);min-height:clamp(560px,48vw,680px)}
.ocs-project-media{min-height:inherit}
.ocs-project-copy{min-width:0;padding:clamp(32px,4vw,54px)}
.ocs-project-copy h3{overflow-wrap:anywhere}
@media(max-width:1040px){
  .ocs-project-card{position:relative!important;top:auto!important;grid-template-columns:1fr;min-height:0;transform:none!important}
  .ocs-project-media{min-height:clamp(390px,62vw,560px)}
  .ocs-project-copy{padding:34px 30px}
  .ocs-project-copy dl{margin-top:34px}
}
@media(max-width:560px){
  .ocs-project-card{box-shadow:none}
  .ocs-project-media{min-height:360px;padding:20px}
  .ocs-project-media>span{font-size:clamp(3.2rem,19vw,6.2rem)}
  .ocs-project-copy{padding:28px 20px}
  .ocs-project-copy h3{font-size:clamp(2.25rem,12vw,3.6rem);margin-top:22px}
  .ocs-project-copy p{font-size:.98rem;margin-top:20px}
  .ocs-project-copy dl div{grid-template-columns:1fr;gap:5px}
  .ocs-project-art--shoe::before{width:170px;height:250px;right:7%}
  .ocs-project-art--shoe i{width:115px;right:13%}
}

/* Services: responsive sticky presentation with readable touch rows. */
.ocs-services-stage{grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:clamp(42px,5vw,72px)}
.ocs-services-visual{min-width:0}
.ocs-service-index-row{min-width:0;min-height:82px}
.ocs-service-index-row h3{overflow-wrap:anywhere}
@media(max-width:1020px){
  .ocs-services-stage{grid-template-columns:1fr;gap:36px}
  .ocs-services-visual{position:relative;top:auto;display:grid;grid-template-columns:minmax(230px,.7fr) minmax(0,1fr);gap:28px;align-items:center}
  .ocs-services-visual__top{grid-column:1/-1}
  .ocs-services-visual__canvas{height:240px;margin:0}
  .ocs-services-visual__copy{min-width:0}
}
@media(max-width:650px){
  .ocs-services-visual{grid-template-columns:1fr;padding:18px}
  .ocs-services-visual__canvas{height:220px}
  .ocs-service-index-row{grid-template-columns:42px minmax(0,1fr) 24px;gap:13px;padding:18px 0;min-height:76px}
  .ocs-service-index-row:hover,.ocs-service-index-row.is-active{padding-left:10px;padding-right:8px}
  .ocs-service-index-row h3{font-size:clamp(1.35rem,7vw,2rem)}
}

/* Process: desktop remains scroll-led, tablets and phones keep the narrative readable. */
.ocs-process-layout{grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:clamp(50px,7vw,100px)}
@media(max-width:1050px){
  .ocs-process-layout{grid-template-columns:1fr;gap:40px}
  .ocs-process-map__sticky{position:relative;top:auto;min-height:360px}
  .ocs-process-map__sticky>strong{font-size:5.5rem;margin-top:28px}
  .ocs-process-steps li{min-height:auto;padding:68px 0;opacity:1;transform:none!important}
}
@media(max-width:560px){
  .ocs-process-map__sticky{min-height:330px;padding:22px}
  .ocs-process-map__sticky>strong{font-size:4.4rem}
  .ocs-process-map__sticky h3{font-size:2rem;margin-top:24px}
  .ocs-process-steps li{grid-template-columns:46px minmax(0,1fr);gap:16px;padding:52px 0}
  .ocs-process-steps li>span{font-size:1.45rem}
  .ocs-process-steps h3{font-size:clamp(2.35rem,12vw,4rem)}
  .ocs-process-steps ul{gap:6px}
  .ocs-process-steps li li{padding:7px 9px;font-size:.56rem}
}

/* Benefit, proof and article grids stay composed at every breakpoint. */
.ocs-benefit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ocs-benefit-grid article{min-width:0}
@media(max-width:900px){.ocs-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .ocs-benefit-grid{grid-template-columns:1fr}
  .ocs-benefit-grid article{min-height:230px;padding:24px}
  .ocs-benefit-grid h3{margin-top:42px}
}
@media(hover:none){
  .ocs-benefit-grid article:hover{background:transparent;color:inherit;transform:none}
  .ocs-benefit-grid article:hover p{color:var(--craft-muted)}
}

/* Contact and forms: no clipped controls, accessible tap targets. */
.ocs-contact-layout,.ocs-contact-page-layout{grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:clamp(42px,6vw,82px)}
.ocs-contact-form-wrap,.ocs-contact-page-form{min-width:0}
.ocs-contact-form-wrap input,.ocs-contact-form-wrap textarea,.ocs-contact-form-wrap select,
.ocs-contact-page-form input,.ocs-contact-page-form textarea,.ocs-contact-page-form select{min-height:50px;font-size:16px!important}
.ocs-contact-form-wrap textarea,.ocs-contact-page-form textarea{min-height:150px;resize:vertical}
.ocs-contact-form-wrap button,.ocs-contact-form-wrap .ff-btn-submit,.ocs-contact-page-form button,.ocs-contact-page-form .ff-btn-submit{min-height:50px;min-width:150px}
@media(max-width:920px){
  .ocs-contact-layout,.ocs-contact-page-layout{grid-template-columns:1fr}
  .ocs-contact-page-copy{position:relative;top:auto}
}
@media(max-width:560px){
  .ocs-contact-form-wrap,.ocs-contact-page-form{padding:20px}
  .ocs-faqs summary{font-size:1.2rem;padding-block:19px}
}

/* Footer: impressive on desktop, efficient on mobile. */
.ocs-footer-cta{padding-block:clamp(74px,9vw,120px)}
.ocs-footer-cta h2{font-size:clamp(3.1rem,7.6vw,8.3rem);max-width:12ch}
.footer-grid{grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(150px,1fr));gap:clamp(30px,5vw,70px)}
@media(max-width:900px){.footer-grid{grid-template-columns:1.4fr 1fr;gap:42px}}
@media(max-width:560px){
  .ocs-footer-cta h2{font-size:clamp(2.8rem,15vw,4.8rem)}
  .ocs-footer-cta>div{align-items:stretch}
  .ocs-footer-cta .btn{justify-content:center;width:100%}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{display:grid!important;gap:10px;text-align:left}
}

/* Service pages: stable statistics, process rows and long-form copy on all devices. */
.ocs-service-detail .container,.ocs-legacy-service .container{padding-inline:var(--ocs-fluid-gutter)!important}
.ocs-legacy-stat-grid,.ocs-metric-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important}
.ocs-legacy-stat-grid article,.ocs-metric-grid .card{min-width:0!important}
.ocs-legacy-process-list li,.ocs-legacy-included-list li{min-width:0}
.ocs-comparison-scroll{max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.ocs-comparison-scroll::after{content:"Swipe to compare →";display:none;padding:10px 0;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ocs-label-green)}
@media(max-width:900px){
  .ocs-legacy-stat-grid,.ocs-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ocs-comparison-scroll::after{display:block}
}
@media(max-width:520px){
  .ocs-legacy-stat-grid,.ocs-metric-grid{grid-template-columns:1fr!important}
  .ocs-service-section-head h2{font-size:clamp(2.2rem,11vw,3.7rem)}
  .ocs-legacy-process-list li{grid-template-columns:40px minmax(0,1fr);gap:13px}
  .ocs-legacy-included-list li{grid-template-columns:34px minmax(0,1fr);gap:11px}
  .ocs-legacy-cta>div{display:grid;grid-template-columns:1fr}
  .ocs-legacy-cta .btn{justify-content:center;width:100%}
}

/* Pricing and case studies: predictable card geometry. */
.ocs-page-pricing .pricing-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important}
.ocs-page-pricing .addons-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important}
.ocs-case-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.ocs-case-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ocs-case-stats{grid-template-columns:1fr}.ocs-case-cta .btn{width:100%;justify-content:center}}

/* Articles and archives: centered reading, wide media, no horizontal bleed. */
.single-post .post-hero{overflow:hidden}
.single-post .post-hero__inner{padding-inline:var(--ocs-fluid-gutter)!important}
.single-post .post-hero h1{font-size:clamp(3rem,7vw,8.4rem);overflow-wrap:anywhere}
.single-post .post-cover{width:min(1280px,calc(100% - (var(--ocs-fluid-gutter) * 2)))!important}
.single-post .ocs-single-content-shell{padding-inline:var(--ocs-fluid-gutter)!important}
.single-post .single-post-wrap{max-width:940px!important}
.single-post .single-post-wrap>figure,
.single-post .single-post-wrap>table,
.single-post .single-post-wrap>.wp-block-table,
.single-post .single-post-wrap>.wp-block-image,
.single-post .single-post-wrap>.wp-block-gallery{max-width:calc(100vw - (var(--ocs-fluid-gutter) * 2))!important}
@media(max-width:720px){
  .single-post .post-hero h1{font-size:clamp(2.65rem,12vw,4.8rem)}
  .single-post .post-cover{width:calc(100% - 24px)!important;margin-top:34px!important}
  .single-post .post-hero__kicker{gap:10px}
  .single-post .post-hero .meta{font-size:.68rem;line-height:1.5}
}
.blog-grid,.archive-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

/* Landscape phones and short tablets: avoid excessive pinned layouts. */
@media(max-height:720px) and (min-width:700px){
  .ocs-crafted-hero{min-height:auto}
  .ocs-crafted-hero__grid{min-height:auto}
  .ocs-project-card,.ocs-process-map__sticky,.ocs-services-visual{position:relative!important;top:auto!important}
  .ocs-process-steps li{min-height:auto;padding-block:64px}
}

/* Hover polish is only applied to devices that actually hover. */
@media(hover:hover) and (pointer:fine){
  .ocs-project-card,.ocs-services-visual,.ocs-contact-form-wrap,.ocs-contact-page-form{transition:box-shadow .6s var(--craft-ease),transform .6s var(--craft-ease)}
  .ocs-services-visual:hover,.ocs-contact-form-wrap:hover,.ocs-contact-page-form:hover{transform:translateY(-4px);box-shadow:18px 18px 0 rgba(7,17,12,.07)}
  .ocs-project-copy button:hover,.ocs-inline-link:hover{color:var(--ocs-label-green)}
}

/* Low-bandwidth and reduced-motion devices retain the complete layout without cost. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ocs-project-card,.ocs-hero-object__frame{transform:none!important}
}