/* ============================================================= MOSS STONE STUDIO · 苔石印坊 — shared stylesheet Used by every page. Page-specific rules that would otherwise collide (testimonials, cta-bar, page-header, tiers, etc.) are scoped under the page class (e.g. .page-index, .page-faq). ============================================================= */ :root { --moss: #3B5240; --moss-light: #5C7A62; --moss-dark: #243429; --moss-pale: #8FAB91; --stone: #B8AA96; --stone-light: #EAE4D8; --stone-pale: #F5F1EA; --stone-dark: #7A6E5F; --ink: #1C1A16; --white: #FDFAF5; --accent: #8B6914; --accent-muted: #776028; } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; font-size:112%; } body { font-family:'Raleway',sans-serif; background:var(--stone-pale); color:var(--ink); overflow-x:hidden; } /* ── LINKS ── */ .inline-link { color:var(--moss-dark); text-decoration:none; border-bottom:1px solid rgba(59,82,64,0.4); padding-bottom:1px; transition:color 0.2s, border-color 0.2s; } .inline-link:hover { color:var(--moss); border-color:var(--moss); } .inline-link-light { color:rgba(253,250,245,0.85); text-decoration:none; border-bottom:1px solid rgba(253,250,245,0.4); padding-bottom:1px; transition:color 0.2s, border-color 0.2s; } .inline-link-light:hover { color:var(--white); border-color:var(--white); } /* ── NAV ── */ nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:0.9rem 3rem; display:flex; justify-content:space-between; align-items:center; background:rgba(245,241,234,0.93); backdrop-filter:blur(10px); border-bottom:1px solid rgba(184,170,150,0.25); transition:all 0.3s ease; gap:1.5rem; } .nav-brand { display:block; text-decoration:none; flex-shrink:0; line-height:0; } .nav-links { display:flex; gap:1.4rem; list-style:none; } .nav-links a { font-family:'Raleway',sans-serif; font-size:0.7rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink); text-decoration:none; transition:color 0.2s; } .nav-links a:hover, .nav-links a.active { color:var(--moss); } .nav-cta { font-family:'Raleway',sans-serif; font-size:0.7rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--white); background:var(--moss); border:none; padding:0.65rem 1.4rem; cursor:pointer; text-decoration:none; transition:background 0.2s; flex-shrink:0; } .nav-cta:hover { background:var(--moss-dark); } /* ── MOBILE NAV TOGGLE ── */ .nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; z-index:210; } .nav-toggle span { display:block; width:100%; height:1.5px; background:var(--ink); transition:transform 0.3s ease, opacity 0.3s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); } .mobile-nav-panel { position:fixed; top:0; left:0; right:0; bottom:0; z-index:200; background:var(--stone-pale); padding:6.5rem 3rem 3rem; overflow-y:auto; transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s; } .mobile-nav-panel.open { opacity:1; visibility:visible; transform:translateY(0); pointer-events:all; transition:opacity 0.28s ease, transform 0.28s ease; } .mobile-nav-links { list-style:none; display:flex; flex-direction:column; gap:0.3rem; margin-bottom:2.5rem; } .mobile-nav-links a { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:300; color:var(--ink); text-decoration:none; display:block; padding:0.5rem 0; border-bottom:1px solid rgba(184,170,150,0.3); transition:color 0.2s; } .mobile-nav-links a:hover, .mobile-nav-links a.active { color:var(--moss); } .mobile-nav-cta { display:inline-block; font-family:'Raleway',sans-serif; font-size:0.7rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--white); background:var(--moss); padding:0.9rem 1.6rem; text-decoration:none; } /* ── BUTTONS ── */ .btn-primary { font-family:'Raleway',sans-serif; font-size:0.7rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--white); background:var(--moss); border:none; padding:1rem 2rem; cursor:pointer; text-decoration:none; display:inline-block; transition:background 0.2s, transform 0.2s; } .btn-primary:hover { background:var(--moss-dark); transform:translateY(-1px); } .btn-secondary { font-family:'Raleway',sans-serif; font-size:0.7rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); background:transparent; border:1px solid rgba(184,170,150,0.45); padding:1rem 2rem; cursor:pointer; text-decoration:none; display:inline-block; transition:all 0.2s; } .btn-secondary:hover { border-color:var(--stone); color:var(--white); } .btn-outline-light { font-family:'Raleway',sans-serif; font-size:0.65rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--white); background:transparent; border:1px solid rgba(253,250,245,0.3); padding:0.85rem 1.5rem; text-decoration:none; display:inline-block; align-self:flex-start; transition:background 0.2s; } .btn-outline-light:hover { background:rgba(253,250,245,0.1); } .card-link { font-family:'Raleway',sans-serif; font-size:0.65rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--moss-dark); text-decoration:none; margin-top:0.5rem; display:inline-block; transition:color 0.2s; } .card-link:hover { color:var(--moss); } .btn-light { font-family:'Raleway',sans-serif; font-size:0.68rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--moss-dark); background:var(--stone-light); border:none; padding:1rem 2rem; cursor:pointer; text-decoration:none; display:inline-block; white-space:nowrap; transition:background 0.2s; } .btn-light:hover { background:var(--white); } /* ── SECTION COMMON ── */ section { padding:7rem 0; } .container { max-width:1200px; margin:0 auto; padding:0 3rem; } .section-label { font-family:'Raleway',sans-serif; font-size:0.62rem; font-weight:500; letter-spacing:0.38em; text-transform:uppercase; color:var(--moss); margin-bottom:1rem; } .section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.2rem,3.5vw,3.2rem); font-weight:300; line-height:1.2; color:var(--ink); margin-bottom:1.5rem; } .section-title em { font-style:normal; } .section-title .cjk { font-size:0.75em; } h2.section-title, h3.section-title { font-style:italic; } h2.section-title em, h3.section-title em { font-style:italic; } .section-body { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:300; line-height:1.9; color:rgba(28,26,22,0.72); max-width:65ch; } .section-body + .section-body { margin-top:1.2rem; } .subtle-cta { text-align:center; margin-top:3.5rem; } .subtle-cta a { font-family:'Raleway',sans-serif; font-size:0.68rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--moss-dark); text-decoration:none; border-bottom:1px solid var(--moss); padding-bottom:0.35rem; transition:color 0.2s, border-color 0.2s; } .subtle-cta a:hover { color:var(--moss); border-color:var(--moss-light); } /* ── ANIMATIONS ── */ @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } .reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease,transform 0.7s ease; } .reveal.visible { opacity:1; transform:none; } /* ── FOOTER ── */ footer { background:var(--ink); padding:4rem 0 2.5rem; border-top:1px solid rgba(184,170,150,0.08); } .footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:4rem; margin-bottom:4rem; max-width:1200px; margin-left:auto; margin-right:auto; padding:0 3rem; } .footer-brand-name { font-family:'Cinzel',serif; font-size:0.95rem; letter-spacing:0.2em; color:var(--white); margin-bottom:0.3rem; } .footer-brand-chinese { font-size:0.9rem; letter-spacing:0.3em; color:rgba(184,170,150,0.4); margin-bottom:0.8rem; display:block; } .footer-tagline { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1rem; color:rgba(184,170,150,0.45); line-height:1.7; max-width:28ch; } .footer-col-title { font-family:'Raleway',sans-serif; font-size:0.6rem; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--stone-dark); margin-bottom:1.2rem; } .footer-links { list-style:none; display:flex; flex-direction:column; gap:0.6rem; } .footer-links a { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:300; color:rgba(253,250,245,0.4); text-decoration:none; transition:color 0.2s; } .footer-links a:hover { color:var(--stone-light); } .footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid rgba(184,170,150,0.07); max-width:1200px; margin:0 auto; padding-left:3rem; padding-right:3rem; } .footer-copy { font-family:'Raleway',sans-serif; font-size:0.63rem; letter-spacing:0.1em; color:rgba(184,170,150,0.25); } .footer-seal { font-size:1.4rem; opacity:0.1; letter-spacing:0.2em; } /* ── LIGHTBOX — simple variant (lb-*), used on index/faq/press/workshops ── */ .lb-overlay { position:fixed; inset:0; background:rgba(20,18,14,0.92); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s ease; } .lb-overlay.open { opacity:1; pointer-events:all; } .lb-img-wrap { position:relative; max-width:90vw; max-height:88vh; display:flex; align-items:center; justify-content:center; } .lb-img-wrap img { max-width:90vw; max-height:88vh; object-fit:contain; display:block; } .lb-close { position:fixed; top:1.2rem; right:1.5rem; font-size:2rem; color:rgba(253,250,245,0.6); background:none; border:none; cursor:pointer; z-index:2001; line-height:1; transition:color 0.2s; } .lb-close:hover { color:#fff; } .lb-nav { position:fixed; top:50%; transform:translateY(-50%); font-size:2.8rem; color:rgba(253,250,245,0.45); background:none; border:none; cursor:pointer; z-index:2001; padding:1rem; line-height:1; transition:color 0.2s; } .lb-nav:hover { color:#fff; } .lb-prev { left:0; } .lb-next { right:0; } .lb-counter { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); font-family:'Raleway',sans-serif; font-size:0.6rem; letter-spacing:0.2em; color:rgba(253,250,245,0.3); } img[data-lb] { cursor:zoom-in; } /* ── LIGHTBOX — captioned variant (lightbox-*), used on commissions/exhibition ── */ .lightbox-overlay { position:fixed; inset:0; background:rgba(28,26,22,0.94); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.35s ease; } .lightbox-overlay.open { opacity:1; pointer-events:all; } .lightbox-inner { position:relative; max-width:85vw; max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:0.6rem; overflow-y:auto; padding-bottom:0.5rem; } .lightbox-img { max-width:100%; max-height:70vh; object-fit:contain; display:block; flex-shrink:0; } .lightbox-caption { font-family:'Cormorant Garamond',serif; font-size:0.9rem; font-style:italic; color:rgba(253,250,245,0.5); text-align:center; max-width:55ch; line-height:1.6; } .lightbox-counter { font-family:'Raleway',sans-serif; font-size:0.6rem; letter-spacing:0.2em; color:rgba(253,250,245,0.35); flex-shrink:0; margin-top:0.2rem; } .lightbox-close { position:fixed; top:1.5rem; right:2rem; font-size:2.2rem; color:rgba(253,250,245,0.55); background:none; border:none; cursor:pointer; line-height:1; transition:color 0.2s; z-index:2001; } .lightbox-close:hover { color:var(--white); } .lightbox-nav { position:fixed; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:rgba(253,250,245,0.5); font-size:3rem; line-height:1; transition:color 0.2s; z-index:2001; padding:1rem; } .lightbox-nav:hover { color:var(--white); } .lightbox-nav.lb-prev, .lightbox-nav.lb-next { background:none; } /* Grid items default to min-width:auto, which stops a 1fr column from ever shrinking below its content's intrinsic width — this is what was causing horizontal overflow/cut-off content once columns collapsed to a single column on mobile. Overriding to 0 lets text wrap normally. */ .footer-inner > *, .offerings-cards > *, .offerings-intro > *, .process-header > *, .process-steps > *, .about-grid > *, .form-layout > *, .workshops-grid > *, .workshop-tiers > *, .gallery-grid > *, .gifting-banner > *, .workshop-photo-row > *, .use-cases-grid > *, .photo-row > *, .media-grid > *, .faq-layout > *, .services-grid > *, .projects-grid > * { min-width: 0; } /* ── TESTIMONIAL CAROUSEL (shared — used on index, commissions, workshops) ── */ /* Testimonial block wrapper — carries the background fill so the "What people say" label shares it with the carousel */ .testimonial-block { padding:2.5rem 2rem; } .testimonial-block .section-label { text-align:center; margin:0; } .testimonial-block .testimonial-carousel { margin-top:1.5rem; padding:0; } .testimonial-carousel { position:relative; overflow:hidden; padding:2rem; margin-top:1.5rem; background:transparent; } .testimonial-carousel.dark { background:var(--moss-dark); } .tc-slides { position:relative; min-height:160px; } .tc-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.6s ease; text-align:center; padding:0 3rem; pointer-events:none; } .tc-slide.active { opacity:1; pointer-events:auto; position:relative; } .tc-quote { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:300; font-style:italic; line-height:1.8; max-width:58ch; margin:0 auto 1.2rem; } .testimonial-carousel.dark .tc-quote { color:rgba(253,250,245,0.9); } .testimonial-carousel:not(.dark) .tc-quote { color:var(--ink); } .tc-quote::before, .tc-quote::after { font-size:2.4rem; line-height:0; vertical-align:-0.35em; font-style:normal; opacity:0.85; } .testimonial-carousel.dark .tc-quote::before, .testimonial-carousel.dark .tc-quote::after { color:var(--stone-light); } .testimonial-carousel:not(.dark) .tc-quote::before, .testimonial-carousel:not(.dark) .tc-quote::after { color:var(--moss); } .tc-quote::before { content:'\201C'; margin-right:0.2em; } .tc-quote::after { content:'\201D'; margin-left:0.2em; } .tc-name { font-family:'Cormorant Garamond',serif; font-size:0.92rem; font-style:italic; opacity:0.85; } .testimonial-carousel.dark .tc-name { color:var(--stone-light); } .testimonial-carousel:not(.dark) .tc-name { color:var(--moss); } .tc-dots { display:flex; justify-content:center; gap:0.5rem; margin-top:1rem; } .tc-dot { width:6px; height:6px; border-radius:50%; border:none; cursor:pointer; padding:0; } .testimonial-carousel.dark .tc-dot { background:rgba(253,250,245,0.25); } .testimonial-carousel.dark .tc-dot.active { background:rgba(253,250,245,0.85); } .testimonial-carousel:not(.dark) .tc-dot { background:rgba(28,26,22,0.15); } .testimonial-carousel:not(.dark) .tc-dot.active { background:var(--moss); } .tc-more { text-align:center; margin-top:1.5rem; } .tc-more a { font-family:'Raleway',sans-serif; font-size:0.65rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid; padding-bottom:0.2rem; } .testimonial-carousel.dark .tc-more a { color:rgba(253,250,245,0.5); border-color:rgba(253,250,245,0.2); } .testimonial-carousel:not(.dark) .tc-more a { color:var(--moss-dark); border-color:var(--moss); } /* ── CTA BAR (shared — same light, bordered style on every page) ── */ .cta-bar { background:var(--white); padding:6rem 0; text-align:center; border-top:1px solid var(--stone); } .cta-bar h2 { font-family:'Cormorant Garamond',serif; font-size:2.5rem; font-weight:300; color:var(--ink); margin-bottom:0.8rem; font-style:normal; } .cta-bar p { font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-weight:300; color:rgba(28,26,22,0.6); margin-bottom:2rem; max-width:46ch; margin-left:auto; margin-right:auto; } /* ── SHARED RESPONSIVE ── */ @media (max-width:1024px) { nav { padding:0.8rem 2rem; } .container { padding:0 2rem; } .footer-inner { grid-template-columns:1fr 1fr; padding:0 2rem; } } @media (max-width:860px) { .nav-links { display:none; } .nav-toggle { display:flex; } } @media (max-width:640px) { .footer-inner { grid-template-columns:1fr; gap:2.5rem; } .footer-bottom { flex-direction:column; gap:1rem; align-items:flex-start; } .btn-light, .btn-primary, .btn-secondary { white-space:normal; } .testimonial-carousel { padding:1.5rem 1rem; } .tc-slide { padding:0 0.5rem; } .tc-quote { max-width:none; font-size:1.1rem; } } /* ============================================================= PAGE — INDEX ============================================================= */ .page-index #hero { min-height:100vh; display:grid; grid-template-columns:2fr 3fr; overflow:hidden; } .page-index .hero-left { background:var(--moss-dark); display:flex; flex-direction:column; justify-content:center; padding:8rem 5rem 6rem; position:relative; overflow:hidden; } .page-index .hero-left::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(ellipse at 20% 80%, rgba(91,122,98,0.2) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(59,82,64,0.3) 0%, transparent 50%); pointer-events:none; } .page-index .hero-left::after { content:'苔'; position:absolute; bottom:-3rem; right:-1rem; font-size:24rem; color:rgba(255,255,255,0.03); font-family:serif; pointer-events:none; line-height:1; } .page-index .hero-eyebrow { font-family:'Raleway',sans-serif; font-size:0.62rem; font-weight:500; letter-spacing:0.4em; text-transform:uppercase; color:var(--moss-light); margin-bottom:1.5rem; opacity:0; animation:fadeUp 0.8s 0.2s forwards; } .page-index .hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.8rem,4.5vw,4.8rem); font-weight:300; line-height:1.1; color:var(--white); margin-bottom:0.4rem; opacity:0; animation:fadeUp 0.8s 0.4s forwards; } .page-index .hero-title em { font-style:normal; color:var(--stone); } .page-index .hero-chinese { font-size:1.1rem; letter-spacing:0.4em; color:rgba(184,170,150,0.55); margin-bottom:2.5rem; opacity:0; animation:fadeUp 0.8s 0.55s forwards; font-weight:300; } .page-index .hero-desc { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:300; line-height:1.85; color:rgba(253,250,245,0.68); max-width:52ch; margin-bottom:3rem; opacity:0; animation:fadeUp 0.8s 0.65s forwards; } .page-index .hero-actions { display:flex; gap:1rem; flex-wrap:wrap; opacity:0; animation:fadeUp 0.8s 0.85s forwards; } .page-index .hero-right { position:relative; overflow:hidden; } .page-index .hero-carousel { position:absolute; inset:0; } .page-index .hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; } .page-index .hero-slide.active { opacity:1; } .page-index .hero-slide img { width:100%; height:100%; object-fit:cover; display:block; } .page-index .hero-dots { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); display:flex; gap:0.5rem; z-index:10; } .page-index .hero-dot { width:6px; height:6px; border-radius:50%; background:rgba(253,250,245,0.35); border:none; cursor:pointer; padding:0; transition:background 0.3s; } .page-index .hero-dot.active { background:rgba(253,250,245,0.85); } .page-index #gallery { background:var(--moss-dark); padding:7rem 0; } .page-index #gallery .section-label { color:var(--stone-dark); } .page-index #gallery .section-title { color:var(--white); } .page-index .gallery-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3.5rem; } .page-index .gallery-grid { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:auto auto; gap:0.8rem; } .page-index .gallery-item { position:relative; overflow:hidden; cursor:pointer; background:#1C2A1F; } .page-index .gallery-item:first-child { grid-row:span 2; } .page-index .gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; } .page-index .gallery-item:hover img { transform:scale(1.04); } .page-index #offerings { background:var(--stone-pale); } .page-index .offerings-intro { display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-bottom:5rem; align-items:end; } .page-index .offerings-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--stone); } .page-index .offering-card { background:var(--stone-pale); padding:3rem 2.5rem; position:relative; overflow:hidden; transition:background 0.3s; } .page-index .offering-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--moss); transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease; } .page-index .offering-card:hover { background:var(--white); } .page-index .offering-card:hover::before { transform:scaleX(1); } .page-index .offering-thumb { width:100%; height:180px; overflow:hidden; background:linear-gradient(160deg,#C8C0B0,#A89880); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; } .page-index .offering-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .page-index .offering-title { font-family:'Cinzel',serif; font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--moss-dark); margin-bottom:1rem; } .page-index .offering-desc { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:300; line-height:1.85; color:rgba(28,26,22,0.68); margin-bottom:1.5rem; } .page-index .offering-list { list-style:none; display:flex; flex-direction:column; gap:0.45rem; } .page-index .offering-list li { font-family:'Raleway',sans-serif; font-size:0.7rem; font-weight:400; letter-spacing:0.05em; color:var(--stone-dark); padding-left:1rem; position:relative; } .page-index .offering-list li::before { content:'—'; position:absolute; left:0; color:var(--moss); font-size:0.62rem; } .page-index .gifting-banner { margin-top:4rem; background:var(--moss-dark); display:grid; grid-template-columns:1fr 1fr; min-height:280px; } .page-index .gifting-banner-text { padding:2.5rem 3rem; display:flex; flex-direction:column; justify-content:center; } .page-index .gifting-banner-text .section-label { color:rgba(184,170,150,0.55); } .page-index .gifting-banner-text .section-title { color:var(--white); font-size:1.8rem; margin-bottom:0.5rem; } .page-index .gifting-banner-text p { font-family:'Cormorant Garamond',serif; font-size:1rem; color:rgba(253,250,245,0.6); line-height:1.75; max-width:50ch; } .page-index .workshop-hero-photo { width:100%; overflow:hidden; margin-bottom:2px; } .page-index .workshop-hero-photo img { width:100%; height:auto; display:block; } .page-index .workshop-photo-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:3rem; } .page-index .workshop-photo-row .workshop-photo-item { overflow:hidden; aspect-ratio:4/3; } .page-index .workshop-photo-row .workshop-photo-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; } .page-index .workshop-photo-row .workshop-photo-item:hover img { transform:scale(1.04); } .page-index #process { background:var(--stone-light); } .page-index .process-header { display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; margin-bottom:5rem; align-items:end; } .page-index .process-note { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.12rem; font-weight:300; line-height:1.9; color:rgba(28,26,22,0.58); border-left:2px solid var(--moss); padding-left:1.5rem; } .page-index .process-steps { display:grid; grid-template-columns:repeat(5,1fr); position:relative; } .page-index .process-steps::before { content:''; position:absolute; top:2.5rem; left:2.5rem; right:2.5rem; height:1px; background:var(--stone); } .page-index .process-step { padding:0 1.5rem 0 0; position:relative; } .page-index .step-number { width:5rem; height:5rem; border-radius:50%; background:var(--stone-pale); border:1px solid var(--stone); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:300; color:var(--moss); margin-bottom:1.5rem; position:relative; z-index:1; transition:all 0.3s; } .page-index .process-step:hover .step-number { background:var(--moss); color:var(--white); border-color:var(--moss); } .page-index .step-title { font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--moss-dark); margin-bottom:0.8rem; } .page-index .step-desc { font-family:'Cormorant Garamond',serif; font-size:0.93rem; font-weight:300; line-height:1.8; color:rgba(28,26,22,0.62); } .page-index .divider { display:flex; align-items:center; gap:1.5rem; margin:2rem 0; } .page-index .divider-line { flex:1; height:1px; background:var(--stone); opacity:0.5; } .page-index .divider-mark { font-family:serif; font-size:1rem; color:var(--moss); opacity:0.4; } .page-index #workshops { background:var(--white); } .page-index .workshops-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:5rem; align-items:center; } .page-index .workshop-cards { display:flex; flex-direction:column; gap:1px; background:var(--stone-light); } .page-index .workshop-card { background:var(--white); padding:2rem 2.5rem; display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:start; transition:background 0.3s; } .page-index .workshop-card:hover { background:var(--stone-pale); } .page-index .workshop-card-icon { font-size:1.4rem; margin-top:0.2rem; } .page-index .workshop-card-title { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--moss-dark); margin-bottom:0.5rem; } .page-index .workshop-card-desc { font-family:'Cormorant Garamond',serif; font-size:0.95rem; font-weight:300; line-height:1.8; color:rgba(28,26,22,0.62); } .page-index .coming-soon-badge { display:inline-block; font-family:'Raleway',sans-serif; font-size:0.57rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone-dark); border:1px solid var(--stone); padding:0.2rem 0.5rem; margin-top:0.5rem; } .page-index .workshop-tiers { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--stone); margin-bottom:3rem; } .page-index .workshop-tier { background:var(--white); padding:3rem 2.8rem; display:flex; flex-direction:column; position:relative; } .page-index .workshop-tier.featured { background:var(--moss-dark); } .page-index .tier-badge { font-family:'Raleway',sans-serif; font-size:0.58rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--moss); margin-bottom:1rem; } .page-index .workshop-tier.featured .tier-badge { color:var(--stone); } .page-index .tier-title { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:400; color:var(--ink); margin-bottom:0.4rem; } .page-index .workshop-tier.featured .tier-title { color:var(--white); } .page-index .tier-price { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:300; color:var(--moss-dark); margin-bottom:0.3rem; } .page-index .workshop-tier.featured .tier-price { color:var(--stone-light); } .page-index .tier-price span { font-family:'Raleway',sans-serif; font-size:0.65rem; letter-spacing:0.1em; color:var(--stone-dark); } .page-index .workshop-tier.featured .tier-price span { color:rgba(184,170,150,0.6); } .page-index .tier-meta { font-family:'Raleway',sans-serif; font-size:0.68rem; letter-spacing:0.08em; color:var(--stone-dark); margin-bottom:1.5rem; } .page-index .workshop-tier.featured .tier-meta { color:rgba(184,170,150,0.6); } .page-index .tier-desc { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:300; line-height:1.85; color:rgba(28,26,22,0.68); margin-bottom:1.5rem; flex-grow:1; } .page-index .workshop-tier.featured .tier-desc { color:rgba(253,250,245,0.7); } .page-index .tier-list { list-style:none; display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.8rem; } .page-index .tier-list li { font-family:'Raleway',sans-serif; font-size:0.78rem; font-weight:400; color:var(--stone-dark); padding-left:1.1rem; position:relative; } .page-index .tier-list li::before { content:'—'; position:absolute; left:0; color:var(--moss); } .page-index .workshop-tier.featured .tier-list li { color:rgba(253,250,245,0.65); } .page-index .workshop-tier.featured .tier-list li::before { color:var(--stone); } .page-index .tier-note { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.85rem; color:rgba(28,26,22,0.45); margin-top:-0.6rem; margin-bottom:1.5rem; } .page-index .workshop-tier.featured .tier-note { color:rgba(184,170,150,0.5); } .page-index #about { background:var(--stone-pale); } .page-index .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; } .page-index .about-image-area { position:relative; overflow:hidden; } .page-index .about-image-area::after { content:''; position:absolute; top:1.5rem; left:1.5rem; right:-1.5rem; bottom:-1.5rem; border:1px solid var(--stone); z-index:-1; } .page-index .about-image-area img { width:100%; height:auto; display:block; } .page-index .about-tagline { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.05rem; color:var(--moss); margin-bottom:2rem; } .page-index .about-body { font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-weight:300; line-height:1.9; color:rgba(28,26,22,0.7); margin-bottom:2rem; } .page-index #notify { background:var(--moss); padding:3.5rem 0; } .page-index #talks { background:var(--stone-light); padding:5rem 0; } .page-index #enquiry { background:var(--moss-dark); } .page-index #enquiry .section-label { color:var(--stone-dark); } .page-index #enquiry .section-title { color:var(--white); } .page-index .form-layout { display:block; margin-top:3rem; } .page-index .form-detail-item { display:flex; gap:0.6rem; align-items:flex-start; } .page-index .form-detail-dot { width:6px; height:6px; border-radius:50%; background:var(--moss-light); margin-top:0.45rem; flex-shrink:0; } .page-index .form-detail-text { font-family:'Cormorant Garamond',serif; font-size:0.97rem; font-weight:300; line-height:1.75; color:rgba(253,250,245,0.45); } .page-index .form-details { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem 2rem; margin-bottom:2.5rem; } .page-index form { display:flex; flex-direction:column; gap:1.2rem; } .page-index .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .page-index .form-group { display:flex; flex-direction:column; gap:0.4rem; } .page-index label { font-family:'Raleway',sans-serif; font-size:0.6rem; font-weight:500; letter-spacing:0.25em; text-transform:uppercase; color:var(--stone-dark); } .page-index input, .page-index select, .page-index textarea { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:300; background:rgba(255,255,255,0.05); border:1px solid rgba(184,170,150,0.18); color:var(--white); padding:0.85rem 1rem; outline:none; transition:border-color 0.2s; width:100%; appearance:none; } .page-index input::placeholder, .page-index textarea::placeholder { color:rgba(184,170,150,0.28); } .page-index input:focus, .page-index select:focus, .page-index textarea:focus { border-color:rgba(91,122,98,0.6); } .page-index select option { background:var(--moss-dark); color:var(--white); } .page-index textarea { resize:vertical; min-height:120px; } .page-index .form-submit { display:flex; gap:1rem; align-items:center; margin-top:0.5rem; } .page-index .form-note { font-family:'Cormorant Garamond',serif; font-size:0.85rem; font-style:italic; color:rgba(184,170,150,0.3); } @media (max-width:1024px) { .page-index #hero { grid-template-columns:1fr; } .page-index .hero-right { display:none; } .page-index .hero-left { padding:8rem 2.5rem 5rem; } .page-index .offerings-intro { grid-template-columns:1fr; gap:2rem; } .page-index .offerings-cards { grid-template-columns:1fr; } .page-index .process-header { grid-template-columns:1fr; gap:2rem; } .page-index .process-steps { grid-template-columns:1fr 1fr; gap:2.5rem; } .page-index .process-steps::before { display:none; } .page-index .about-grid { grid-template-columns:1fr; } .page-index .about-image-area { max-height:400px; overflow:hidden; } .page-index .form-layout { grid-template-columns:1fr; gap:3rem; } .page-index .workshops-grid { grid-template-columns:1fr; } .page-index .workshop-tiers { grid-template-columns:1fr; } .page-index #workshops .reveal[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; } .page-index #exhibition-teaser .reveal { grid-template-columns:1fr !important; } .page-index .workshop-photo-row { grid-template-columns:1fr 1fr; } } @media (max-width:640px) { .page-index .process-steps { grid-template-columns:1fr; } .page-index .form-row { grid-template-columns:1fr; } .page-index .gallery-header { flex-direction:column; align-items:flex-start; gap:1.2rem; } .page-index .gallery-grid { grid-template-columns:1fr; } .page-index .gallery-item:first-child { grid-row:auto; } .page-index .gifting-banner { grid-template-columns:1fr; } .page-index .gifting-banner > div:first-child { aspect-ratio:3/2; height:auto; } .page-index #notify .container > div { grid-template-columns:1fr !important; } .page-index #notify form { min-width:unset !important; flex-direction:column; } .page-index .workshop-photo-row { grid-template-columns:1fr; } .page-index .offering-thumb { height:200px; } .page-index .workshop-tiers { grid-template-columns:1fr; } .page-index #workshops .reveal[style*="grid"] { grid-template-columns:1fr !important; } } /* ============================================================= PAGE — COMMISSIONS ============================================================= */ .page-commissions .page-header { padding:11rem 0 5rem; background:var(--moss-dark); } .page-commissions .page-header .section-label { color:var(--stone-dark); } .page-commissions .page-header .section-title { color:var(--white); } .page-commissions .page-header .section-body { color:rgba(253,250,245,0.6); margin-top:0.5rem; } .page-commissions .types-section { padding:6.5rem 0; background:var(--white); } .page-commissions .types-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem 2rem; margin-top:3.5rem; } .page-commissions .type-card { text-decoration:none; color:inherit; display:block; flex:0 0 calc((100% - 4rem) / 3); } .page-commissions .type-card-link { text-decoration:none; color:inherit; display:block; } .page-commissions .type-card-img { aspect-ratio:4/5; overflow:hidden; background:var(--stone-light); margin-bottom:1.2rem; } .page-commissions .type-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; } .page-commissions .type-card:hover .type-card-img img { transform:scale(1.04); } .page-commissions .type-card-title { font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss-dark); margin-bottom:0.6rem; } .page-commissions .type-card-desc { font-family:'Cormorant Garamond',serif; font-size:0.98rem; font-weight:300; line-height:1.7; color:rgba(28,26,22,0.65); margin-bottom:0.6rem; } .page-commissions .gallery-kicker { padding:5rem 0 0; text-align:center; } .page-commissions .commission-carousel-wrap { position:relative; overflow:hidden; padding:2.5rem 0 5rem; background:var(--stone-pale); } .page-commissions .commission-carousel { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:3rem; gap:1.5rem; padding:0 3rem 2rem; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; } .page-commissions .commission-carousel::-webkit-scrollbar { height:4px; } .page-commissions .commission-carousel::-webkit-scrollbar-track { background:var(--stone-light); } .page-commissions .commission-carousel::-webkit-scrollbar-thumb { background:var(--stone); } .page-commissions .cc-item { flex:0 0 auto; width:340px; scroll-snap-align:start; cursor:pointer; } .page-commissions .cc-item-img { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--stone-light); } .page-commissions .cc-item-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s; } .page-commissions .cc-item:hover .cc-item-img img { transform:scale(1.03); } .page-commissions .cc-caption { margin-top:0.8rem; font-family:'Cormorant Garamond',serif; font-weight:300; font-size:0.92rem; line-height:1.6; color:rgba(28,26,22,0.6); } .page-commissions .cc-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(253,250,245,0.85); border:none; cursor:pointer; width:44px; height:44px; border-radius:50%; font-size:1.4rem; display:flex; align-items:center; justify-content:center; z-index:5; transition:background 0.2s; color:var(--ink); } .page-commissions .cc-nav:hover { background:var(--white); } .page-commissions .cc-prev { left:1rem; } .page-commissions .cc-next { right:1rem; } .page-commissions .wedding-banner { grid-template-columns:1fr 1fr; } .page-commissions .process-section { padding:6.5rem 0; background:var(--white); } .page-commissions .process-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--stone); margin-top:3.5rem; } .page-commissions .process-step { background:var(--stone-pale); padding:2.5rem 2rem; } .page-commissions .process-step:nth-child(even) { background:var(--white); } .page-commissions .process-step-num { width:3.5rem; height:3.5rem; border-radius:50%; background:var(--stone-light); border:1px solid var(--stone); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--moss); margin-bottom:1.2rem; } .page-commissions .process-step-title { font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--moss-dark); margin-bottom:0.7rem; } .page-commissions .process-step-body { font-family:'Cormorant Garamond',serif; font-size:0.95rem; font-weight:300; line-height:1.85; color:rgba(28,26,22,0.65); } .page-commissions .testimonials-section { padding:7rem 0; background:var(--stone-light); } @media (max-width:1024px) { .page-commissions .page-header .container { grid-template-columns:1fr !important; } .page-commissions .type-card { flex-basis: calc((100% - 2rem) / 2); } .page-commissions .process-steps { grid-template-columns:1fr; } } @media (max-width:640px) { .page-commissions .type-card { flex-basis: 100%; } .page-commissions .wedding-banner { grid-template-columns:1fr; } .page-commissions .wedding-banner-img { aspect-ratio:3/2; } .page-commissions .commission-carousel { padding-left:3.5rem; scroll-padding-left:3.5rem; } } /* ============================================================= PAGE — WORKSHOPS (Experiences) ============================================================= */ .page-workshops .page-header { padding:11rem 0 5rem; background:var(--moss-dark); } .page-workshops .group-photo { background:var(--stone-light); text-align:center; padding:2.5rem 0; } .page-workshops .group-photo img { max-width:900px; width:100%; height:auto; display:inline-block; } .page-workshops .photo-row { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--stone); } .page-workshops .photo-item { overflow:hidden; aspect-ratio:4/3; } .page-workshops .photo-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s; } .page-workshops .photo-item:hover img { transform:scale(1.04); } .page-workshops .use-cases { padding:6rem 0; } .page-workshops .use-cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--stone); margin-top:3.5rem; } .page-workshops .use-case { background:var(--stone-pale); padding:2.5rem 2rem; } .page-workshops .use-case-title { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:400; color:var(--ink); margin-bottom:0.8rem; } .page-workshops .use-case-body { font-family:'Cormorant Garamond',serif; font-size:0.95rem; font-weight:300; line-height:1.85; color:rgba(28,26,22,0.65); } .page-workshops .tiers-section { padding:6rem 0; background:var(--white); } .page-workshops .workshop-tiers { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--stone); margin-top:3.5rem; } .page-workshops .workshop-tier { background:var(--white); padding:3rem 2.8rem; display:flex; flex-direction:column; } .page-workshops .workshop-tier.featured { background:var(--moss-dark); } .page-workshops .tier-title { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:400; color:var(--ink); margin-bottom:0.4rem; } .page-workshops .workshop-tier.featured .tier-title { color:var(--white); } .page-workshops .tier-price { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:300; color:var(--moss-dark); margin-bottom:0.3rem; } .page-workshops .workshop-tier.featured .tier-price { color:var(--stone-light); } .page-workshops .tier-price span { font-family:'Raleway',sans-serif; font-size:0.65rem; letter-spacing:0.1em; color:var(--stone-dark); } .page-workshops .workshop-tier.featured .tier-price span { color:rgba(184,170,150,0.6); } .page-workshops .tier-meta { font-family:'Raleway',sans-serif; font-size:0.68rem; letter-spacing:0.08em; color:var(--stone-dark); margin-bottom:1.5rem; } .page-workshops .workshop-tier.featured .tier-meta { color:rgba(184,170,150,0.6); } .page-workshops .tier-desc { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:300; line-height:1.85; color:rgba(28,26,22,0.68); margin-bottom:1.5rem; } .page-workshops .workshop-tier.featured .tier-desc { color:rgba(253,250,245,0.7); } .page-workshops .tier-list { list-style:none; display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.8rem; } .page-workshops .tier-list li { font-family:'Raleway',sans-serif; font-size:0.78rem; color:var(--stone-dark); padding-left:1.1rem; position:relative; } .page-workshops .tier-list li::before { content:'—'; position:absolute; left:0; color:var(--moss); } .page-workshops .workshop-tier.featured .tier-list li { color:rgba(253,250,245,0.65); } .page-workshops .workshop-tier.featured .tier-list li::before { color:var(--stone); } .page-workshops .tier-note { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.9rem; color:rgba(28,26,22,0.45); margin-top:-0.6rem; margin-bottom:1.5rem; } /* Gold-accented note variant */ .tier-note.accent { color:var(--accent-muted); } .tier-note.accent .inline-link { color:var(--accent-muted); border-color:rgba(139,105,20,0.45); } .tier-note.accent .inline-link:hover { color:var(--moss-dark); border-color:var(--moss-dark); } .page-workshops .workshop-tier > .btn-primary, .page-workshops .workshop-tier > .btn-light { margin-top:auto; } .page-workshops .workshop-tier.featured .tier-note { color:rgba(184,170,150,0.5); } .page-workshops .testimonials-section { background:var(--stone-light); padding:5rem 0; } @media (max-width:1024px) { .page-workshops .page-header .container { grid-template-columns:1fr !important; } .page-workshops .use-cases-grid { grid-template-columns:1fr; } .page-workshops .workshop-tiers { grid-template-columns:1fr; } } @media (max-width:640px) { .page-workshops .photo-row { grid-template-columns:1fr; } } /* ============================================================= PAGE — EXHIBITION ============================================================= */ .page-exhibition .page-header { padding:11rem 0 5rem; background:var(--moss-dark); } .page-exhibition .ex-header { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; } .page-exhibition .page-header .section-label { color:var(--stone-dark); } .page-exhibition .page-header .section-title { color:var(--white); } .page-exhibition .page-header .section-body { color:rgba(253,250,245,0.6); } .page-exhibition .exhibition-meta { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.05rem; color:rgba(184,170,150,0.7); margin-top:1.2rem; } .page-exhibition .ex-gallery { padding:6rem 0; } .page-exhibition .ex-grid { columns:3; column-gap:1.4rem; } .page-exhibition .ex-item-wrap { break-inside:avoid; margin-bottom:1.4rem; cursor:pointer; } .page-exhibition .ex-item { overflow:hidden; background:#E8E4DC; position:relative; } .page-exhibition .ex-item img { width:100%; height:auto; display:block; transition:transform 0.5s ease; } .page-exhibition .ex-item-wrap:hover .ex-item img { transform:scale(1.02); } .page-exhibition .ex-caption { font-family:'Cormorant Garamond',serif; font-size:0.9rem; font-weight:300; line-height:1.6; color:rgba(28,26,22,0.55); margin-top:0.6rem; } .page-exhibition .ex-statement { background:var(--stone-light); padding:6rem 0; } .page-exhibition .ex-statement .container { max-width:800px; text-align:center; } .page-exhibition .ex-statement p { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:300; font-style:italic; line-height:1.85; color:rgba(28,26,22,0.7); } .page-exhibition .ex-cta { padding:6rem 0; text-align:center; } .page-exhibition .ex-statement .cta-eyebrow { font-family:'Raleway',sans-serif; font-size:0.65rem; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--moss); font-style:normal; margin-bottom:1rem; } .page-exhibition .ex-statement .cta-title { font-size:1.3rem; margin-bottom:1rem; } @media (max-width:1024px) { .page-exhibition .ex-grid { columns:2; } .page-exhibition .ex-header { gap:3rem; } } @media (max-width:860px) { .page-exhibition .ex-header { grid-template-columns:1fr; gap:2.5rem; } } @media (max-width:640px) { .page-exhibition .ex-grid { columns:1; } .page-exhibition .ex-header { gap:2rem; } .page-exhibition .page-header { padding:8rem 0 3rem; } .page-exhibition .ex-item img { width:100%; height:auto; max-height:80vh; object-fit:contain; display:block; } .page-exhibition .ex-item { background:#E8E4DC; } .page-exhibition .ex-item-wrap { cursor:default; } } /* ============================================================= PAGE — PRESS ============================================================= */ .page-press .page-header { padding:10rem 0 5rem; } .page-press .media-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding:10rem 0 6rem; align-items:start; } .page-press .media-card { background:var(--white); display:flex; flex-direction:column; transition:transform 0.3s ease, box-shadow 0.3s ease; } .page-press .media-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(28,26,22,0.1); } .page-press .media-screenshot { width:100%; background:var(--stone-light); overflow:hidden; position:relative; } .page-press .media-screenshot a { display:block; text-decoration:none; } .page-press .media-screenshot img { width:100%; height:auto; display:block; } .page-press .media-body { padding:2rem 2.5rem 2.5rem; display:flex; flex-direction:column; flex-grow:1; } .page-press .media-pub { font-family:'Raleway',sans-serif; font-size:0.6rem; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--moss); margin-bottom:0.6rem; } .page-press .media-title { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:400; color:var(--ink); line-height:1.35; margin-bottom:1rem; } .page-press .media-excerpt { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:300; font-style:italic; line-height:1.85; color:rgba(28,26,22,0.65); margin-bottom:1.5rem; flex-grow:1; } .page-press .media-link { font-family:'Raleway',sans-serif; font-size:0.65rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--moss-dark); text-decoration:none; display:inline-flex; align-items:center; gap:0.4rem; margin-top:auto; transition:gap 0.2s; } .page-press .media-link:hover { gap:0.7rem; color:var(--moss); } .page-press .media-link::after { content:'→'; } @media (max-width:1024px) { .page-press .media-grid { grid-template-columns:1fr; } } /* ============================================================= PAGE — FAQ ============================================================= */ .page-faq .container { max-width:900px; } .page-faq .page-header { padding:11rem 0 4rem; background:var(--stone-light); text-align:center; } .page-faq .page-header .section-body { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:300; line-height:1.85; color:rgba(28,26,22,0.65); max-width:55ch; margin:0 auto; } .page-faq .faq-wrap { padding:5rem 0 7rem; } .page-faq .faq-container { max-width:1180px; margin:0 auto; padding:0 3rem; } .page-faq .faq-layout { display:grid; grid-template-columns:230px 1fr; gap:5rem; align-items:start; } .page-faq .faq-sidebar { position:sticky; top:7rem; } .page-faq .faq-sidebar-title { font-family:'Raleway',sans-serif; font-size:0.6rem; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--stone-dark); margin-bottom:1.2rem; } .page-faq .faq-sidebar-links { list-style:none; display:flex; flex-direction:column; gap:0.1rem; border-left:1px solid rgba(184,170,150,0.4); } .page-faq .faq-sidebar-links a { display:block; font-family:'Cormorant Garamond',serif; font-size:1.02rem; font-weight:300; color:rgba(28,26,22,0.6); text-decoration:none; padding:0.55rem 0 0.55rem 1.1rem; border-left:2px solid transparent; margin-left:-1px; transition:color 0.2s, border-color 0.2s; } .page-faq .faq-sidebar-links a:hover, .page-faq .faq-sidebar-links a.active { color:var(--moss-dark); border-left-color:var(--moss); } .page-faq .faq-content { max-width:700px; } .page-faq .faq-group { margin-bottom:3.5rem; scroll-margin-top:7rem; } .page-faq .faq-group-title { font-family:'Cinzel',serif; font-size:0.78rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--moss-dark); margin-bottom:1.8rem; padding-bottom:0.8rem; border-bottom:1px solid var(--stone); } .page-faq .faq-item { padding:1.6rem 0; border-bottom:1px solid rgba(184,170,150,0.35); } .page-faq .faq-q { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:500; color:var(--ink); margin-bottom:0.7rem; } .page-faq .faq-a { font-family:'Cormorant Garamond',serif; font-size:1.02rem; font-weight:300; line-height:1.85; color:rgba(28,26,22,0.68); max-width:65ch; } .page-faq .faq-a strong { color:var(--moss-dark); font-weight:500; } .page-faq .faq-callout { background:var(--moss-dark); padding:3rem; text-align:center; margin-top:1rem; } .page-faq .faq-callout p { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:300; color:var(--white); margin-bottom:1.5rem; line-height:1.6; } @media (max-width:1024px) { .page-faq .faq-container { padding:0 2rem; } .page-faq .faq-layout { grid-template-columns:1fr; gap:2.5rem; } .page-faq .faq-sidebar { position:static; } .page-faq .faq-sidebar-links { display:flex; flex-direction:row; flex-wrap:wrap; gap:0.5rem 1.5rem; border-left:none; padding-bottom:1.5rem; border-bottom:1px solid rgba(184,170,150,0.4); } .page-faq .faq-sidebar-links a { padding:0; border-left:none; } .page-faq .faq-content { max-width:100%; } } /* ============================================================= PAGE — PROGRAMMES ============================================================= */ .page-programmes .page-header { padding:11rem 0 5rem; background:var(--moss-dark); } .page-programmes .services-section { padding:6.5rem 0; background:var(--white); } .page-programmes .services-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1.8rem; margin-top:3.5rem; } .page-programmes .service-card { overflow:hidden; } .page-programmes .service-img { aspect-ratio:4/5; overflow:hidden; background:var(--stone-light); margin-bottom:1.1rem; } .page-programmes .service-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s; } .page-programmes .service-card:hover .service-img img { transform:scale(1.04); } .page-programmes .service-title { font-family:'Cinzel',serif; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--moss-dark); margin-bottom:0.5rem; } .page-programmes .service-body { font-family:'Cormorant Garamond',serif; font-size:0.92rem; font-weight:300; font-style:italic; line-height:1.6; color:rgba(28,26,22,0.6); } .page-programmes .logos-section { background:var(--stone-light); padding:5rem 0; } .page-programmes .logos-row { display:flex; flex-wrap:wrap; gap:3rem; align-items:center; justify-content:center; margin-top:2.5rem; } .page-programmes .why-section { background:var(--moss-dark); padding:6.5rem 0; text-align:center; } .page-programmes .why-section .container { max-width:760px; } .page-programmes .why-section .section-label { color:var(--stone-dark); } .page-programmes .why-section .section-title { color:var(--white); } .page-programmes .why-section p.section-body { color:rgba(253,250,245,0.68); margin:0 auto; font-size:1.15rem; } @media (max-width:1024px) { .page-programmes .page-header .container { grid-template-columns:1fr !important; } .page-programmes .services-grid { grid-template-columns:1fr 1fr 1fr; } } @media (max-width:640px) { .page-programmes .services-grid { grid-template-columns:1fr 1fr; } } /* ============================================================= VERY NARROW SCREENS (≤420px) — placed last so it wins the cascade over the page-specific 1024px overrides above. ============================================================= */ @media (max-width:420px) { nav { padding:0.7rem 1.1rem; gap:0.6rem; } .nav-brand img { height:64px !important; } .nav-cta { font-size:0.6rem; padding:0.55rem 0.8rem; letter-spacing:0.1em; } .container { padding:0 1.25rem; } .page-index .hero-left { padding:7rem 1.5rem 4rem; } .page-index .hero-actions { flex-direction:column; align-items:flex-start; } .page-index .hero-actions .btn-primary, .page-index .hero-actions .btn-secondary { width:100%; text-align:center; } }