/* Social Fabric Apps: one stylesheet for index.html and 404.html */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/karla-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:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/young-serif-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:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/playfair-display-700-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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/poppins-600-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 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:#f5f0db;color:#1f2b2b;font-family:Karla,system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture{display:block;max-width:100%}
h1,h2,h3,p,ul{margin:0}
a{color:#2c5757;text-underline-offset:3px}
a:hover{color:#1d3d3d}
:focus-visible{outline:3px solid #d73e3a;outline-offset:3px;border-radius:6px}
.hero :focus-visible,.site-footer :focus-visible{outline-color:#f2bd3f}
.serif{font-family:'Young Serif',Georgia,serif;font-weight:400}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:12px;z-index:10;background:#2c5757;color:#f5f0db;padding:12px 18px;border-radius:999px;font-weight:600;text-decoration:none}
.skip-link:focus{left:12px}

/* ---------- Header ---------- */
.site-header{padding:18px clamp(20px,5vw,48px)}
.header-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#1f2b2b}
.brand img{width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 2px #2c5757}
.brand span{font-family:'Young Serif',Georgia,serif;font-size:1.25rem;line-height:1}
.nav-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px}
.nav-link{display:inline-block;padding:10px 0;font-weight:600;text-decoration:none;color:#2c5757}
.nav-link:hover{text-decoration:underline;text-decoration-color:#f2bd3f;text-decoration-thickness:3px}
.nav-pill{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;border:2px solid #2c5757;font-weight:600;text-decoration:none;color:#2c5757;transition:background .2s,color .2s}
.nav-pill:hover{background:#2c5757;color:#f5f0db}

/* ---------- Shared bits ---------- */
.sticker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#7bc1c6;color:#1f2b2b;font-size:0.875rem;font-weight:700;letter-spacing:0.06em;transform:rotate(-2deg)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:999px;font-weight:700;text-decoration:none}
.btn-outline{display:inline-flex;align-items:center;min-height:50px;padding:12px 24px;border-radius:999px;font-weight:700;text-decoration:none;transition:background .2s}
.section-title{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1.1}
.pill{padding:5px 12px;border-radius:999px;font-size:0.8125rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase}

/* ---------- Hero (full-bleed photo) ---------- */
.hero{position:relative;min-height:clamp(540px,84vh,860px);display:flex;align-items:flex-end;padding:clamp(40px,7vw,96px) clamp(20px,5vw,48px);overflow:hidden;background:#1f2b2b}
.hero-photo,.hero-photo img{position:absolute;inset:0;width:100%;height:100%}
.hero-photo img{object-fit:cover;object-position:center 40%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top, rgba(17,30,30,0.9) 0%, rgba(17,30,30,0.62) 45%, rgba(17,30,30,0.12) 100%)}
.hero-content{position:relative;max-width:1200px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero-title{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:clamp(2.5rem,6.6vw,5.5rem);line-height:1.04;letter-spacing:-0.01em;color:#f5f0db;max-width:15ch;text-wrap:balance}
.hero-title span{color:#f2bd3f}
.hero-lede{font-size:1.1875rem;line-height:1.55;color:#f5f0db;max-width:30rem;text-wrap:pretty}
.hero-btn{background:#f2bd3f;color:#1f2b2b;margin-top:6px;transition:transform .15s}
.hero-btn:hover{transform:translateY(-2px);color:#1f2b2b}
.hero-notes{display:flex;flex-direction:column;gap:6px}
.hero-notes p{font-size:0.9875rem;color:#f5f0db;text-wrap:pretty}
.hero-notes a{color:#f2bd3f;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
.hero-notes a:hover{color:#f5f0db}

/* ---------- Woven stripe bands ---------- */
.weave{height:14px;background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, #d73e3a 0 44px, #f2bd3f 44px 88px, #7bc1c6 88px 132px, #2c5757 132px 176px, #e8743b 176px 220px)}
.weave-end{background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, #d73e3a 0 44px, #f2bd3f 44px 88px, #7bc1c6 88px 132px, #f5f0db 132px 176px, #e8743b 176px 220px)}

/* ---------- Philosophy ---------- */
.philosophy{padding:clamp(64px,10vw,120px) clamp(20px,5vw,48px)}
.philosophy-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(40px,6vw,64px)}
.philosophy-row{display:flex;flex-wrap:wrap;gap:24px 64px}
.philosophy-head{flex:1 1 16rem}
.philosophy-head h2{color:#1f2b2b}
.philosophy-text{flex:2 1 30rem;display:flex;flex-direction:column;gap:22px;max-width:44rem}
.philosophy-text p{font-size:1.25rem;line-height:1.6;text-wrap:pretty}
.quote-block{position:relative;background:#2c5757;color:#f5f0db;border-radius:clamp(20px,3vw,32px);padding:clamp(36px,6vw,72px) clamp(28px,6vw,80px)}
.quote-star{position:absolute;top:clamp(14px,2vw,24px);right:clamp(18px,3vw,36px);color:#f2bd3f;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1;transform:rotate(12deg)}
.quote-block p{font-family:'Young Serif',Georgia,serif;font-size:clamp(1.6rem,3.6vw,2.75rem);line-height:1.22;max-width:30ch;text-wrap:balance}
.quote-block span:not(.quote-star){color:#f2bd3f}

/* ---------- Our apps ---------- */
.apps{padding:clamp(64px,10vw,120px) clamp(20px,5vw,48px);background:#ede4cc}
.apps-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(32px,5vw,56px)}
.apps-head{display:flex;flex-direction:column;gap:14px;max-width:40rem}
.apps-head p{font-size:1.1875rem;color:#2a3a3a;text-wrap:pretty}
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(24px,3vw,36px);align-items:stretch}
.app-card{display:flex;flex-direction:column;background:#fffcf3;border-radius:clamp(20px,2.6vw,28px);overflow:hidden;box-shadow:0 2px 0 rgba(44,87,87,0.12), 0 14px 30px rgba(44,87,87,0.12);transition:transform .25s,box-shadow .25s}
.app-card:hover{transform:translateY(-6px) rotate(-0.4deg);box-shadow:0 2px 0 rgba(44,87,87,0.12), 0 22px 40px rgba(44,87,87,0.18)}
.app-card-nodal:hover{transform:translateY(-6px) rotate(0.4deg)}
.app-art{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.app-art-cheers{background:#f5efdb}
.app-art-cheers img{width:100%;height:100%;object-fit:contain}
.app-art-nodal{background:#1a2f4a;padding:12%}
.app-art-nodal img{width:100%;height:auto}
.app-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(24px,4vw,40px)}
.app-titles{display:flex;flex-direction:column;gap:8px}
.app-titles h3{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.12}
.app-titles h3.app-title-cheers{font-family:'Playfair Display',Georgia,serif;font-weight:700}
.app-titles h3.app-title-nodal{font-family:Poppins,system-ui,sans-serif;font-weight:600;letter-spacing:-0.01em}
.app-tagline{font-size:1.125rem;font-weight:700}
.app-desc{color:#33403f;text-wrap:pretty}
.app-features{list-style:none;padding:20px 0 0;display:flex;flex-direction:column;gap:12px;border-top:2px dashed #ecdcc0;align-self:stretch}
.app-features li{display:flex;gap:14px;align-items:baseline}
.bullet{flex:none}
.bullet-diamond{width:9px;height:9px;transform:translateY(-2px) rotate(45deg);border-radius:2px}
.bullet-dot,.bullet-ring{width:10px;height:10px;border-radius:50%;transform:translateY(-1px)}
.bullet-ring{border-width:2.5px;border-style:solid}
.c-red{background:#d73e3a}
.c-yellow{background:#f2bd3f}
.c-teal{background:#7bc1c6}
.c-green{background:#2c5757}
.c-orange{background:#d4763f}
.c-navy{background:#1a2f4a}
.bullet-ring.c-navy{background:none;border-color:#1a2f4a}
.bullet-ring.c-orange{background:none;border-color:#d4763f}
.app-beta{margin-top:auto;align-self:stretch;display:flex;gap:12px;align-items:baseline;padding:14px 16px;border-radius:14px;background:#fbefe0;color:#33403f;font-size:0.9875rem;text-wrap:pretty}
.app-beta span:first-child{color:#d73e3a}
.app-actions{display:flex;flex-wrap:wrap;gap:12px}
.app-actions-nodal{margin-top:auto;padding-top:12px}

/* Cheers! colours */
.pill-cheers{background:#fbe1de;color:#9a2a26}
.tagline-cheers{color:#2c5757}
.btn-cheers{background:#d73e3a;color:#ffffff;box-shadow:0 4px 0 #9a2a26;transition:transform .15s,box-shadow .15s}
.btn-cheers:hover{transform:translateY(-2px);box-shadow:0 6px 0 #9a2a26;color:#ffffff}
.btn-outline-cheers{border:2px solid #b8322e;color:#b8322e}
.btn-outline-cheers:hover{background:#fbe1de;color:#9a2a26}

/* Nodal Care colours */
.pill-nodal{background:#fbe6d6;color:#8a4319}
.tagline-nodal{color:#1a2f4a}
.btn-nodal{background:#1a2f4a;color:#ffffff;box-shadow:0 4px 0 #0b1a2c;transition:transform .15s,box-shadow .15s}
.btn-nodal:hover{transform:translateY(-2px);box-shadow:0 6px 0 #0b1a2c;color:#ffffff}
.btn-outline-nodal{border:2px solid #1a2f4a;color:#1a2f4a}
.btn-outline-nodal:hover{background:#e6ebf2;color:#0f1f33}

/* ---------- Our story ---------- */
.story{padding:clamp(64px,10vw,120px) clamp(20px,5vw,48px);background:#f2bd3f}
.story-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(44px,6vw,72px)}
.story-intro{display:flex;flex-wrap:wrap;align-items:center;gap:28px clamp(32px,5vw,64px)}
.story-logo{flex:none;width:clamp(140px,18vw,200px);height:auto;border-radius:50%;transform:rotate(6deg);box-shadow:0 10px 24px rgba(31,43,43,0.2)}
.story-intro-text{flex:1 1 22rem;display:flex;flex-direction:column;gap:16px;max-width:40rem}
.story-intro-text h2{color:#1f2b2b}
.story-intro-text p{font-size:1.25rem;line-height:1.6;color:#1f2b2b;text-wrap:pretty}
.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(36px,5vw,56px);padding:0 clamp(0px,1.5vw,16px)}
.story-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:#fffcf3;border-radius:18px;padding:clamp(28px,4vw,40px);box-shadow:0 12px 28px rgba(31,43,43,0.16)}
.story-card-cheers{transform:rotate(-1.2deg)}
.story-card-nodal{transform:rotate(1.2deg)}
.tape{position:absolute;top:-12px;left:50%;width:96px;height:26px;margin-left:-48px;border-radius:2px}
.tape-teal{background:#7bc1c6;opacity:0.85;transform:rotate(-3deg)}
.tape-red{background:#d73e3a;opacity:0.75;transform:rotate(4deg)}
.story-text{font-size:1.125rem;line-height:1.6;text-wrap:pretty}
.story-quote{font-family:'Young Serif',Georgia,serif;font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.3;text-wrap:balance}
.story-quote-cheers{color:#2c5757}
.story-quote-nodal{color:#1a2f4a}

/* ---------- Footer ---------- */
.site-footer{background:#2c5757;color:#f5f0db;padding:clamp(56px,8vw,96px) clamp(20px,5vw,48px) 36px}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.footer-hello{display:flex;flex-direction:column;gap:12px}
.footer-hello h2{color:#f5f0db}
.footer-email{font-size:clamp(1.125rem,2.2vw,1.375rem);font-weight:700;color:#f2bd3f;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;word-break:break-word}
.footer-email:hover{color:#f5f0db}
.social-list{list-style:none;padding:0;display:flex;gap:12px}
.social-link{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:2px solid rgba(245,240,219,0.5);color:#f5f0db;transition:background .2s,color .2s,transform .2s}
.social-link:hover{background:#f2bd3f;border-color:#f2bd3f;color:#1f2b2b;transform:rotate(-8deg)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;padding-top:24px;border-top:1px solid rgba(245,240,219,0.25);font-size:0.9375rem}
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.sticker-gold{background:#f2bd3f;color:#1f2b2b;letter-spacing:normal}

/* ---------- 404 page ---------- */
.notfound{min-height:60vh;display:flex;align-items:center;padding:clamp(48px,8vw,96px) clamp(20px,5vw,48px)}
.notfound-inner{max-width:1200px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.notfound h1{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:clamp(2.5rem,6.6vw,5.5rem);line-height:1.04;letter-spacing:-0.01em;color:#1f2b2b;text-wrap:balance}
.notfound p.lede{font-size:1.1875rem;line-height:1.55;color:#33403f;max-width:30rem;text-wrap:pretty}
.notfound .btn{background:#2c5757;color:#f5f0db;box-shadow:0 4px 0 #1a3a3a;transition:transform .15s,box-shadow .15s}
.notfound .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #1a3a3a;color:#f5f0db}