/* Tasking Studio — shared styles for every page.
   Page sections keep the inline styles from the Claude Design export (the
   design is the spec). This file holds what inline styles can't express:
   fonts, hover states, responsive nav, and the shared header/footer. */

/* ---- Fonts --------------------------------------------------------------
   Google's unicode-range subsets, self-hosted. Browsers download only the
   subsets a page's text needs, so in practice just the two latin files. */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-greek-ext.woff2) format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-greek.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Base (from the export's global style block) ----------------------- */

*{box-sizing:border-box}
body{margin:0;background:#ffffff;color:#000000;font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#269246}
a:hover{color:#1d7237}
img{max-width:100%}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:#000;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip-link:focus{top:12px;color:#fff}

/* ---- Buttons and links used inside page sections ----------------------- */

.btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px;font-size:16px;font-weight:600;border-radius:8px;text-decoration:none}
.btn-primary{background:#269246;color:#ffffff}
.btn-primary:hover{background:#1d7237;color:#ffffff}
.btn-outline{border:1px solid #000000;color:#000000}
.btn-outline:hover{background:#000000;color:#ffffff}

.cap-link{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:600;letter-spacing:-0.02em;color:#000;text-decoration:none;padding:10px 0;border-bottom:1px solid #f0f0f0}
.cap-link:hover{color:#269246}

/* Hover states from the design's style-hover attribute. The elements keep
   their inline styles, so these need !important to win. */
.h-btn-primary:hover{background:#1d7237 !important;color:#ffffff !important}
.h-btn-outline:hover{background:#000000 !important;color:#ffffff !important}
.h-green:hover{color:#269246 !important}
.h-border-green:hover{border-color:#269246 !important}
.h-bg-sand:hover{background:#f7f6f3 !important}

/* Three Instagram embeds. The export used a fixed 3-column grid, which
   leaves ~110px-wide embeds on a phone; this stacks them on small screens. */
.embed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:24px}

/* ---- Header / nav ------------------------------------------------------ */

.site-header{position:sticky;top:0;z-index:80;background:#ffffff;border-bottom:1px solid #e5e5e5;font-family:Inter,system-ui,sans-serif}
.site-header__bar{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,32px);height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:baseline;gap:7px;text-decoration:none;color:#000}
.brand:hover{color:#000}
.brand__name{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;letter-spacing:-0.03em;white-space:nowrap}
.brand__dot{width:7px;height:7px;border-radius:50%;background:#269246;display:block}

.nav-desktop{display:flex;align-items:center;gap:28px}
.nav-link{font-size:15px;font-weight:500;color:#000;text-decoration:none;white-space:nowrap}
.nav-link:hover{color:#269246}

.nav-services{position:relative;display:flex;align-items:center;height:76px}
.nav-services__btn{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;font-family:Inter,sans-serif;font-size:15px;font-weight:500;color:#000;cursor:pointer}
.nav-services__btn:hover{color:#269246}
.nav-services__caret{font-size:10px;color:#aaaaaa}
/* Opens on hover (mouse) and focus-within (keyboard, and a tap on touch). */
.nav-services__menu{display:none;position:absolute;top:76px;left:-24px;background:#ffffff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,0.07);padding:28px;grid-template-columns:1fr 1fr;gap:6px 40px;width:560px}
.nav-services:hover .nav-services__menu,
.nav-services:focus-within .nav-services__menu{display:grid}
.nav-services__label{grid-column:1 / -1;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#269246;margin-bottom:8px}
.nav-services__item{font-size:15px;font-weight:500;color:#000;text-decoration:none;padding:9px 0}
.nav-services__item:hover{color:#269246}
.nav-services__foot{grid-column:1 / -1;border-top:1px solid #e5e5e5;margin-top:14px;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.nav-services__note{font-size:14px;line-height:22px;color:#666666;max-width:320px}
.nav-services__cta{font-size:14px;font-weight:600;color:#269246;text-decoration:none;white-space:nowrap}

.nav-cta{display:inline-flex;align-items:center;height:44px;padding:0 20px;background:#269246;color:#ffffff;font-size:15px;font-weight:600;border-radius:8px;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:#1d7237;color:#ffffff}

/* Mobile menu: <details>/<summary>, so it opens and closes without JS. */
.nav-mobile{display:none}
.nav-mobile summary{list-style:none;cursor:pointer}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile__toggle{width:48px;height:48px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 0 0 12px}
.nav-mobile__line{display:block;width:24px;height:2px;background:#000}
.nav-mobile__line--short{width:16px;background:#269246}
.nav-mobile__panel{position:absolute;top:100%;left:0;right:0;border-top:1px solid #e5e5e5;background:#ffffff;padding:8px 20px 32px;max-height:calc(100vh - 76px);overflow:auto}
.nav-mobile__link{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:600;letter-spacing:-0.02em;color:#000;text-decoration:none;padding:14px 0;border-bottom:1px solid #f0f0f0}
.nav-mobile__link:hover{color:#000}
.nav-mobile__services > summary{display:flex;align-items:center;justify-content:space-between}
.nav-mobile__caret{font-size:14px;color:#269246}
.nav-mobile__sub{display:flex;flex-direction:column;padding:6px 0 10px 2px;border-bottom:1px solid #f0f0f0}
.nav-mobile__sublink{font-size:17px;font-weight:500;color:#333;text-decoration:none;padding:12px 0}
.nav-mobile__cta{display:flex;align-items:center;justify-content:center;height:54px;margin-top:24px;background:#269246;color:#ffffff;font-size:16px;font-weight:600;border-radius:8px;text-decoration:none}
.nav-mobile__cta:hover{color:#ffffff}

/* Same breakpoint as the design's runtime logic: mobile below 1000px. */
@media (max-width:999.98px){
  .nav-desktop{display:none}
  .nav-mobile{display:block}
}

/* ---- Footer ------------------------------------------------------------ */

.site-footer{background:#000000;color:#ffffff;font-family:Inter,system-ui,sans-serif;padding:clamp(64px,8vw,96px) 0 32px}
.site-footer__inner{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(40px,5vw,64px);padding-bottom:clamp(48px,6vw,72px)}
.site-footer__intro{min-width:260px}
.site-footer__brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:26px;letter-spacing:-0.03em;display:flex;align-items:baseline;gap:8px}
.site-footer__dot{width:8px;height:8px;border-radius:50%;background:#269246;display:block}
.site-footer__tagline{margin:20px 0 0;font-size:16px;line-height:26px;color:#aaaaaa;max-width:320px}
.site-footer__tagline span{color:#ffffff}
.site-footer__cta{display:inline-flex;align-items:center;gap:8px;margin-top:28px;height:48px;padding:0 22px;background:#269246;color:#ffffff;font-size:15px;font-weight:600;border-radius:8px;text-decoration:none}
.site-footer__cta:hover{background:#1d7237;color:#ffffff}
.site-footer__heading{font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#269246;margin-bottom:20px}
.site-footer__links{display:flex;flex-direction:column;gap:12px}
.site-footer__link{font-size:15px;color:#ffffff;text-decoration:none}
.site-footer__link:hover{color:#269246}
.site-footer__text{margin:0 0 18px;font-size:15px;line-height:24px;color:#aaaaaa;max-width:260px}
.site-footer__contact{display:flex;flex-direction:column;gap:14px}
.site-footer__email{word-break:break-word}
.site-footer__social{display:flex;align-items:center;gap:10px}
.site-footer__social svg{flex:none}
.site-footer__muted{color:#aaaaaa}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,0.14);padding-top:24px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.site-footer__bottom span{font-size:14px;color:#aaaaaa}
.h-lift:hover{opacity:1 !important;transform:translateY(-1px)}
.h-green-underline:hover{color:#269246 !important;border-bottom-color:#269246 !important}
.h-bg-grey:hover{background:#e5e5e5 !important}