@font-face{font-family:Manrope;src:url('assets/fonts/Manrope-wght.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600 800;font-display:swap}
:root{--ink:#171a18;--muted:#626a63;--paper:#f5f4ef;--white:#fffefa;--line:#d9dcd4;--green:#c6f36b;--deep:#202923;--orange:#e56b45;--max:1200px;--gutter:clamp(22px,5vw,76px);--radius:4px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:4px}::selection{background:var(--green);color:var(--ink)}.container{width:min(var(--max),calc(100% - 2*var(--gutter)));margin-inline:auto}.skip-link{position:absolute;left:12px;top:-60px;z-index:999;background:var(--green);color:var(--ink);padding:12px 16px}.skip-link:focus{top:12px}.site-header{position:sticky;top:0;z-index:100;background:rgba(245,244,239,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(23,26,24,.1)}.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}.nav__brand{font:800 14px/1 Manrope,sans-serif;letter-spacing:.1em;white-space:nowrap}.brand-mark{display:inline-grid;place-items:center;width:31px;height:31px;background:var(--green);margin-right:10px;font:800 14px Manrope;letter-spacing:-.08em}.nav__links{display:flex;align-items:center;gap:clamp(22px,3vw,44px);margin-left:auto}.nav__links a,.mobile-menu a{font-size:13px;font-weight:600;color:#414841;transition:color .2s}.nav__links a:hover,.mobile-menu a:hover{color:#5a7f1e}.nav__cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;padding:0 19px;background:var(--ink);color:white;font-size:13px;font-weight:600;border:1px solid var(--ink);transition:transform .2s var(--ease),background .2s,color .2s}.nav__cta:hover,.button:hover{transform:translateY(-2px);background:var(--green);color:var(--ink);border-color:var(--green)}.button--light{background:var(--green);color:var(--ink);border-color:var(--green)}.button--outline{background:transparent;color:var(--ink);border-color:#aeb5aa}.button--outline:hover{background:var(--ink);color:white;border-color:var(--ink)}.nav__menu-button{display:none;background:transparent;border:0;padding:10px;cursor:pointer}.nav__menu-button span{display:block;width:23px;height:2px;background:var(--ink);margin:5px}.mobile-menu{display:none}.eyebrow,.kicker{display:flex;align-items:center;gap:10px;font:700 10px/1.4 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#596257}.eyebrow:before,.kicker:before{content:"";display:block;width:22px;height:2px;background:var(--orange)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Manrope,Inter,sans-serif;letter-spacing:-.055em;line-height:1.04;font-weight:600}h1{font-size:clamp(48px,7.1vw,94px);max-width:980px;margin:24px 0 26px}h2{font-size:clamp(36px,5vw,64px);margin:18px 0 22px}h3{font-size:clamp(22px,2.5vw,30px);margin:0 0 14px}p{color:var(--muted)}.lead{font-size:clamp(17px,1.8vw,21px);line-height:1.65;max-width:640px}.hero{padding:clamp(76px,10vw,144px) 0 68px;overflow:hidden}.hero__topline{display:flex;justify-content:space-between;gap:24px;align-items:center}.hero__status{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#657061;display:flex;align-items:center;gap:9px}.hero__status:before{content:"";width:7px;height:7px;background:#76a73d;border-radius:50%;box-shadow:0 0 0 5px rgba(118,167,61,.14)}.hero h1 em{font-style:normal;color:#6c8d34}.hero__bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;margin-top:34px}.hero__bottom .lead{margin:0}.hero__actions{display:flex;gap:12px;flex-wrap:wrap}.hero__art{margin-top:74px;display:grid;grid-template-columns:1.3fr .7fr;gap:14px;align-items:stretch}.hero-frame{position:relative;overflow:hidden;background:#e0e4d9;min-height:300px;border:1px solid #d5d9cf}.hero-frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}.hero-frame:hover img{transform:scale(1.025)}.hero-frame--main{min-height:450px}.hero-frame--main:after{content:"SELECTED WORK / 01";position:absolute;left:22px;bottom:20px;padding:9px 12px;background:var(--green);font-size:10px;font-weight:700;letter-spacing:.12em}.hero-frame__label{position:absolute;left:20px;top:20px;background:var(--white);padding:8px 10px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-frame--side{display:flex;flex-direction:column;background:var(--deep);color:white;padding:clamp(24px,4vw,46px);justify-content:space-between}.hero-frame--side p{color:#c3cbc2}.hero-frame--side h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.06em}.hero-frame__index{font:700 11px Inter;letter-spacing:.15em;color:var(--green)}.hero-frame__arrow{align-self:flex-end;width:48px;height:48px;border:1px solid #586258;display:grid;place-items:center;font-size:22px}.section{padding:clamp(76px,10vw,130px) 0}.section--white{background:var(--white)}.section--dark{background:var(--deep);color:white}.section--dark p{color:#c0c9bf}.section-head{display:grid;grid-template-columns:.65fr 1.35fr;gap:30px;margin-bottom:54px}.section-head h2{margin:0;max-width:760px}.section-head__copy{max-width:500px}.section-head__copy p{margin:0}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 18px}.work-card{min-width:0}.work-card__image{display:block;position:relative;overflow:hidden;background:#e5e8df;aspect-ratio:1.35;border:1px solid #d9ddd4}.work-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.work-card__image:hover img{transform:scale(1.035)}.work-card__number{position:absolute;top:16px;left:16px;background:var(--white);padding:8px 10px;font-size:10px;font-weight:700;letter-spacing:.1em}.work-card__body{display:flex;justify-content:space-between;gap:22px;padding-top:18px}.work-card h3{font-size:clamp(24px,3vw,35px);margin:0 0 8px}.work-card p{margin:0;max-width:470px;font-size:14px}.work-card__meta{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#687266;white-space:nowrap;padding-top:7px}.text-link{display:inline-flex;align-items:center;gap:14px;font-size:13px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:5px;margin-top:16px}.text-link span{transition:transform .2s}.text-link:hover span{transform:translate(3px,-3px)}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #49544a;border-left:1px solid #49544a}.service{padding:28px 25px 32px;border-right:1px solid #49544a;border-bottom:1px solid #49544a;min-height:250px}.service__num{font-size:11px;color:var(--green);letter-spacing:.1em}.service h3{margin:34px 0 12px}.service p{font-size:14px;margin-bottom:0}.process-list{border-top:1px solid var(--line)}.process-row{display:grid;grid-template-columns:80px 1fr 1.1fr;gap:26px;padding:27px 0;border-bottom:1px solid var(--line);align-items:start}.process-row__num{font:600 13px Manrope;color:#798071;padding-top:5px}.process-row h3{margin:0;font-size:clamp(24px,3vw,36px)}.process-row p{max-width:470px;margin:0;font-size:14px}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}.about-note{border-left:3px solid var(--green);padding:4px 0 4px 22px;color:#d1d8ce;font-size:14px}.about-grid h2{max-width:480px}.about-grid .lead{max-width:650px}.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:30px;margin-top:38px;border-top:1px solid #49544a}.stats-strip strong{display:block;font:600 25px Manrope;color:var(--green);letter-spacing:-.04em}.stats-strip span{font-size:12px;color:#c0c9bf}.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:20px 0}.faq-list summary{cursor:pointer;font:600 18px Manrope;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";font:400 22px Inter}.faq-list details[open] summary:after{content:"−"}.faq-list details p{max-width:650px;font-size:14px;margin:15px 32px 0 0}.cta-band{padding:clamp(70px,9vw,112px) 0;background:var(--green)}.cta-band__inner{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}.cta-band h2{font-size:clamp(42px,6vw,76px);max-width:780px;margin:16px 0 12px}.cta-band p{color:#3e4c32;max-width:540px;margin:0}.site-footer{background:#171a18;color:white;padding:36px 0 28px}.footer-top{display:flex;justify-content:space-between;gap:32px;align-items:flex-start;padding-bottom:44px}.footer-top p{font-size:13px;color:#b9c0b7;max-width:360px;margin:14px 0 0}.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-size:12px;color:#d5dbd3}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:18px;border-top:1px solid #39413a;color:#929c91;font-size:11px}.page-hero{padding:clamp(70px,9vw,116px) 0 50px}.page-hero h1{max-width:960px}.page-hero__bottom{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:26px}.page-hero__bottom p{max-width:560px;margin:0}.filter-note{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#697267}.case-hero{padding:clamp(64px,9vw,116px) 0 50px}.case-meta{display:flex;gap:10px;flex-wrap:wrap}.case-meta span{border:1px solid var(--line);padding:7px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#596257}.case-hero h1{font-size:clamp(46px,7vw,84px);max-width:1000px}.case-hero__bottom{display:flex;align-items:end;justify-content:space-between;gap:32px}.case-hero__bottom .lead{max-width:650px;margin:0}.case-hero__actions{display:flex;gap:10px;flex-wrap:wrap}.case-image{padding-bottom:clamp(55px,8vw,100px)}.case-image img{width:100%;height:auto;border:1px solid var(--line)}.case-image--dark{background:#202923;padding:42px}.case-image--dark img{border:0}.case-split{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px}.case-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6a7566;display:flex;gap:12px}.case-label strong{color:var(--orange)}.case-copy h2{max-width:620px}.case-copy p{max-width:680px}.case-copy ul{padding-left:20px;color:#c6cec4}.case-copy li{padding:6px 0}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:34px}.workflow-step{background:#2d382f;padding:23px 18px;min-height:150px;border-top:3px solid var(--green)}.workflow-step span{font-size:10px;color:var(--green);letter-spacing:.12em}.workflow-step h3{font-size:19px;margin:20px 0 8px}.workflow-step p{font-size:12px;line-height:1.6;margin:0}.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}.case-gallery figure{margin:0}.case-gallery img{width:100%;border:1px solid var(--line)}.case-gallery figcaption{font-size:11px;color:var(--muted);margin-top:10px}.tech-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.tech-list span{padding:9px 12px;background:#e8eae2;font-size:12px;color:#303830}.notice{padding:22px 24px;background:#fff4dd;border-left:3px solid #d18a32;color:#5b492b;font-size:14px}.notice strong{display:block;margin-bottom:5px}.contact-wrap{padding:65px 0 100px}.contact-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px}.contact-aside{position:sticky;top:120px;align-self:start}.contact-aside h1{font-size:clamp(42px,5vw,66px)}.contact-aside p{font-size:14px}.form-panel{background:var(--white);border:1px solid var(--line);padding:clamp(22px,4vw,44px)}.form-panel .form-section{padding:0 0 28px;margin-bottom:28px;border-bottom:1px solid var(--line)}.form-panel .form-section:last-of-type{border-bottom:0}.form-panel label,.form-panel legend{font-size:12px;font-weight:600;display:block;margin-bottom:7px}.form-panel input,.form-panel textarea,.form-panel select{width:100%;padding:13px 14px;border:1px solid #cdd2c8;background:#fffefa;border-radius:0;color:var(--ink)}.form-panel textarea{min-height:120px;resize:vertical}.form-panel .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-panel .field--full{grid-column:1/-1}.form-panel .choice-group{display:grid;grid-template-columns:1fr 1fr;gap:9px}.form-panel .choice{display:flex;gap:8px;align-items:center;padding:11px;border:1px solid var(--line)}.form-panel .choice input{width:auto}.form-panel .choice label{margin:0;font-weight:400}.form-panel .form-error{display:none;padding:12px;background:#fff0ec;color:#8b3523;margin-bottom:20px}.form-panel .form-error.is-visible{display:block}.form-panel .form-submit{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.form-panel .form-submit p{font-size:11px;max-width:280px;margin:0}.legal-content{max-width:800px;margin:auto}.legal-content h1{font-size:clamp(42px,6vw,70px)}.legal-content h2{font-size:28px;margin-top:40px}.legal-content p,.legal-content li{font-size:14px}.reveal{opacity:1;transform:none}@media(min-width:1300px){.hero{padding-top:145px}}@media(max-width:800px){.nav{min-height:70px}.nav__links,.nav>.nav__cta{display:none}.nav__menu-button{display:block}.mobile-menu{display:block;position:fixed;inset:70px 0 0;background:var(--paper);padding:28px var(--gutter);transform:translateX(100%);transition:transform .25s var(--ease);visibility:hidden}.mobile-menu.is-open{transform:translateX(0);visibility:visible}.mobile-menu nav{display:flex;flex-direction:column}.mobile-menu a{font:600 26px Manrope;padding:18px 0;border-bottom:1px solid var(--line)}.hero__topline{align-items:flex-start;flex-direction:column}.hero__bottom,.section-head,.about-grid,.faq-grid,.case-split,.contact-layout{grid-template-columns:1fr}.hero__bottom{gap:24px}.hero__art{grid-template-columns:1fr;margin-top:45px}.hero-frame--main{min-height:320px}.hero-frame--side{min-height:250px}.section-head{gap:18px;margin-bottom:34px}.work-grid{gap:32px 12px}.work-card__body{display:block}.work-card__meta{margin-top:10px}.service-grid{grid-template-columns:1fr 1fr}.process-row{grid-template-columns:38px 1fr;gap:16px}.process-row p{grid-column:2}.about-grid,.faq-grid,.case-split,.contact-layout{gap:32px}.cta-band__inner{grid-template-columns:1fr;align-items:start}.footer-top{flex-direction:column}.case-hero__bottom,.page-hero__bottom{align-items:flex-start;flex-direction:column}.workflow{grid-template-columns:1fr 1fr}.contact-aside{position:static}.form-panel .form-grid{grid-template-columns:1fr}.form-panel .field--full{grid-column:auto}}@media(max-width:520px){h1{font-size:clamp(43px,12vw,60px)}h2{font-size:clamp(35px,10vw,47px)}.hero{padding-top:62px}.hero__actions{width:100%}.hero__actions .button{flex:1}.hero-frame--main{min-height:250px}.work-grid{grid-template-columns:1fr}.work-card__image{aspect-ratio:1.18}.service-grid{grid-template-columns:1fr}.service{min-height:0;padding:24px}.service h3{margin-top:22px}.stats-strip{grid-template-columns:1fr;gap:14px}.workflow{grid-template-columns:1fr}.case-gallery{grid-template-columns:1fr}.case-image--dark{padding:16px}.footer-bottom{flex-direction:column}.form-panel{padding:20px}.form-panel .choice-group{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Mobile layout hardening: prevent desktop navigation and grid overflow in embedded previews. */
@media (max-width: 800px) {
  .nav__links, .nav > .nav__cta { display: none !important; }
  .nav { width: calc(100% - 32px); gap: 12px; }
  .nav__brand { font-size: 12px; letter-spacing: .07em; }
  .brand-mark { flex: 0 0 31px; }
  .container { width: calc(100% - 32px); }
  .case-hero h1, .page-hero h1, .contact-aside h1 { font-size: clamp(38px, 10vw, 60px); line-height: 1.04; overflow-wrap: anywhere; }
  .case-hero__bottom, .case-hero__actions { min-width: 0; }
  .case-hero__actions .button { max-width: 100%; white-space: normal; }
  .case-split > *, .section-head > *, .about-grid > *, .faq-grid > * { min-width: 0; }
  .case-image img, .case-gallery img { width: 100%; height: auto; object-fit: contain; }
}
@media (max-width: 520px) {
  .case-meta { gap: 7px; }
  .case-meta span { font-size: 9px; }
  .case-hero { padding-top: 48px; }
  .case-hero h1 { font-size: clamp(36px, 10.5vw, 48px); }
  .case-hero__actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .case-hero__actions .button { width: 100%; }
  .workflow-step { min-width: 0; }
  .case-gallery { gap: 24px; }
}

/* MASH WEB STUDIO — CASE STUDY / MOBILE MENU REPAIR */
.site-header { isolation:isolate; }
.nav__menu-button { flex:0 0 auto; position:relative; z-index:120; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.mobile-menu { z-index:110; }
.case-image .container { width:min(1500px, calc(100% - 2 * var(--gutter))); }
.case-image img { display:block; width:100%; max-width:none; height:auto !important; max-height:none !important; object-fit:contain !important; object-position:center; }
.case-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.case-gallery figure { min-width:0; }
.case-gallery img { display:block; width:100%; height:auto !important; max-height:none !important; object-fit:contain !important; object-position:center; background:#f0f0ea; }
.case-gallery figure:last-child:nth-child(odd) { grid-column:1/-1; }
@media(max-width:800px) {
 .mobile-menu { inset:70px 0 0; height:calc(100dvh - 70px); overflow-y:auto; background:#f5f4ef !important; padding:22px max(24px, var(--gutter)); box-shadow:0 18px 30px rgba(0,0,0,.08); }
 .mobile-menu.is-open { transform:translateX(0); visibility:visible; }
 .mobile-menu nav { width:100%; gap:0; }
 .mobile-menu a { display:flex; align-items:center; min-height:62px; font-size:clamp(22px,6vw,30px); line-height:1.2; }
 .case-image .container { width:calc(100% - 24px); }
 .case-gallery { grid-template-columns:1fr; }
 .case-gallery figure:last-child:nth-child(odd) { grid-column:auto; }
}
@media(min-width:801px) { .mobile-menu { display:none !important; } }


/* FINAL PORTFOLIO IMAGE FIX — 30 Oct 2026
   Portfolio assets have different natural aspect ratios. Do not force them into
   a fixed-height/aspect-ratio frame: let the image set the card media height. */
.work-card > .work-card__image {
  display: block !important;
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: hidden;
  background: transparent !important;
  border: 1px solid #d9ddd4;
  line-height: 0;
}
.work-card > .work-card__image > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: unset !important;
  object-position: center;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: none !important;
}
.work-card > .work-card__image:hover > img,
.work-card > .work-card__image:focus-visible > img { transform: none !important; }
.work-card__number { z-index: 2; line-height: 1.4; }


/* FINAL FIX — portfolio previews show complete artwork without cropping */
.work-card__image {
  aspect-ratio: auto;
  height: auto;
  overflow: hidden;
  background: transparent;
  display: block;
}
.work-card__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.work-card__image:hover img {
  transform: none;
}

/* FINAL FIX — reliable full-screen mobile navigation layer */
@media (max-width: 800px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .mobile-menu {
    display: block;
    position: fixed;
    z-index: 999;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    padding: 24px var(--gutter) max(32px, env(safe-area-inset-bottom));
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform .25s var(--ease), opacity .2s ease, visibility .25s;
  }
  .mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-menu nav {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  .mobile-menu a {
    display: block;
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.25;
  }
  body.menu-open {
    overflow: hidden;
  }
}
@media (max-width: 520px) {
  .work-card__image {
    width: 100%;
  }
  .work-card__number {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
  }
}
