/* KYND FUEL | Sage Atmosphere / 06
   Visually-led design refinement of Colour Balance 05.
   Based exclusively on the brand-approved core and extended palette.
   The signature Sage #8AA57A is deliberately prominent; supporting
   colours are assigned a narrative role rather than tiled arbitrarily.
   No images, copy, category secrets, form handling or original SVGs replaced.
*/
:root{
 --forest:#2F4A35;
 --pistachio:#DDE8CC;
 --soft-oat:#E8DFD0;
 --butter:#FFF1C6;
 --deep-teal:#245A5A;
 --rose-clay:#B76E5C;
 --turmeric:#E2A93B;
 --tamarind:#8A3F2B;
}
/* Quiet but confident brand signature in the header. */
.site-header{
 background:var(--ivory);
 border-bottom:1px solid rgba(47,74,53,.18);
}
.site-header:after{
 content:'';position:absolute;bottom:-2px;left:clamp(22px,5vw,84px);
 width:52px;height:3px;border-radius:3px;background:var(--sage)
}
.nav-invite{
 background:var(--forest);color:var(--ivory);
 box-shadow:0 7px 18px rgba(47,74,53,.11)
}
.nav-invite:hover{background:var(--deep-teal)}
/* Hero: Ivory as gallery space; sage is an immediate recognisable anchor.
   Buttercream creates light without a fake grain or photography overlay. */
.hero{
 background:radial-gradient(ellipse at 50% 48%,rgba(255,241,198,.46),transparent 58%),var(--ivory);
}
.hero:after{opacity:.035}
.hero-arc-sage{
 background:var(--sage);
 width:580px;height:460px;top:-195px;right:-165px;
 opacity:.90;
 border-radius:43% 57% 52% 48% / 53% 55% 45% 47%;
 transform:rotate(15deg);
}
.hero-arc-blue{
 background:var(--blue);opacity:.54;
 width:285px;height:355px;top:42%;left:-215px;
}
.overline strong{color:var(--forest)}
.overline-rule{background:var(--sage);height:2px;opacity:1}
.hero-tagline{color:var(--ink)}
.highlight{
 background:var(--saffron);height:.094em;
 transform:rotate(-1.6deg);
 box-shadow:0 3px 0 rgba(226,169,59,.18);
}
.pill-cacao{background:var(--forest);color:var(--ivory);box-shadow:0 8px 24px rgba(47,74,53,.17)}
.pill-cacao:hover{background:var(--deep-teal)}
.quiet-link{border-bottom-color:var(--sage)}
.under-cta span{color:var(--saffron)}
.hero-photo{
 background-image:linear-gradient(to bottom,rgba(47,74,53,.08),rgba(28,28,28,.38)),url('assets/first-serve-field.jpg');
 border-bottom:5px solid var(--sage);
}
.hero-photo-label strong{color:var(--ivory)}
/* Sensory palate cleanser: sage, pale pistachio and structural dividers. */
.principles{
 background:linear-gradient(100deg,var(--pistachio) 0%,var(--ivory) 90%);
 border-bottom:1px solid rgba(47,74,53,.20);
}
.principles>div:not(:last-child){border-right-color:rgba(47,74,53,.23)}
.symbol{color:var(--forest)}
.symbol-circle{color:var(--tamarind)}
.symbol-arrow{color:var(--deep-teal)}
/* Warm, appetising editorial middle. Rose Clay as a whisper, not a block. */
.idea{
 background:radial-gradient(ellipse at 90% 0%,rgba(183,110,92,.11),transparent 45%),
 linear-gradient(135deg,var(--ivory) 0%,var(--soft-oat) 100%);
}
.idea:before{
 background:var(--rose-clay);right:-290px;top:-265px;
 width:480px;height:480px;opacity:.09;
}
.section-meta>span:first-child{color:var(--forest)}
.idea h2 em{color:var(--tamarind)}
.idea-copy{border-left:3px solid var(--sage)}
.idea-copy .small-signature{color:var(--forest)}
/* Cool cinematic contrast. Deep teal feels more modern than a dark brown slab.
   Actual pitch photography is the only image used. */
.field,.field-content{background:var(--deep-teal);color:var(--ivory)}
.field-content{
 background:radial-gradient(circle at 100% 0%,rgba(138,165,122,.24),transparent 43%),var(--deep-teal);
}
.field-content:before{
 background:var(--sage);opacity:.10;right:-235px;top:-170px;
}
.field-issue{color:var(--pistachio)}
.field-issue:before{background:var(--saffron)}
.field-circle{color:var(--turmeric)}
.field-link{border-bottom:2px solid var(--turmeric)}
.field-link:hover{color:var(--butter)}
.field-image{box-shadow:inset -1px 0 0 rgba(246,242,234,.18)}
/* A golden moment — almost edible, never highlighter yellow. */
.invite-intro{
 background:linear-gradient(145deg,var(--ivory) 2%,rgba(255,241,198,.77) 100%);
 position:relative;overflow:hidden;
}
.invite-intro:before{
 content:'';position:absolute;right:-175px;bottom:-230px;
 width:440px;height:440px;border-radius:48% 52% 60% 40%;
 background:var(--sage);opacity:.09;pointer-events:none;
}
.invite-intro>*{position:relative}
.invite-grid h2 em{color:var(--tamarind)}
.benefit-row>div{border-top:2px solid var(--sage)}
.benefit-row>div:nth-child(2){border-top-color:var(--tamarind)}
.benefit-row>div:nth-child(3){border-top-color:var(--deep-teal)}
.benefit-row>div>span{color:var(--forest)}
/* Signature conversion moment: official Sage (no teal or brown full-section).
   The Butter Cream-to-Ivory form is tactile paper; Saffron owns the action. */
.join{
 background:radial-gradient(circle at 95% 20%,rgba(221,232,204,.24),transparent 42%),var(--sage);
 color:var(--ink);
}
.join:before{
 background:var(--pistachio);opacity:.26;
 top:-155px;right:-165px;width:340px;height:340px;
}
.join-shape{
 background:var(--blue);opacity:.20;
 width:490px;height:490px;left:-255px;bottom:-365px;
}
.section-stamp{color:var(--forest)}
.join h2 em{
 color:var(--forest);
 text-decoration-color:var(--saffron);
 text-decoration-thickness:.115em;
 text-underline-offset:.13em;
}
.join-note{border-top-color:rgba(47,74,53,.40)}
.signup-wrap{
 background:linear-gradient(130deg,var(--ivory),#FFF1C6 225%);
 border:1px solid rgba(47,74,53,.24);
 box-shadow:0 28px 58px rgba(47,74,53,.17);
}
.form-top strong{color:var(--forest)}
.fields>input{background:var(--ivory);border-color:rgba(47,74,53,.33)}
.fields>input:focus{border-color:var(--forest)}
.interest label input:checked+span{
 background:var(--pistachio);color:var(--forest);border-color:var(--forest)
}
.submit{
 background:var(--saffron);color:var(--ink);
 box-shadow:0 9px 19px rgba(107,78,61,.13);
}
.submit:hover{background:var(--forest);color:var(--ivory)}
.footer{background:var(--ivory);border-top:4px solid var(--pistachio)}
/* Motion belongs in response to real interaction, not constant animation. */
.pill,.submit,.nav-invite{transition:transform .26s cubic-bezier(.2,.75,.3,1),background-color .26s,box-shadow .26s}
.pill:hover,.submit:hover,.nav-invite:hover{transform:translateY(-3px);box-shadow:0 13px 27px rgba(47,74,53,.19)}
@media(max-width:780px){
 .hero{
 background:radial-gradient(ellipse at 50% 43%,rgba(255,241,198,.42),transparent 59%),var(--ivory)
 }
 .hero-arc-sage{width:330px;height:280px;right:-205px;top:-142px;opacity:.88}
 .hero-arc-blue{width:170px;height:210px;left:-135px;top:34%;opacity:.39}
 .hero-photo{border-bottom-width:4px}
 .principles{background:linear-gradient(115deg,var(--pistachio),var(--ivory))}
 .idea{background:linear-gradient(145deg,var(--ivory),var(--soft-oat))}
 .idea:before{right:-275px;top:-225px;width:350px;height:350px}
 .field-content{background:radial-gradient(circle at 115% -10%,rgba(138,165,122,.20),transparent 55%),var(--deep-teal)}
 .join{background:var(--sage)}
 .join:before{opacity:.16}
 .join-shape{opacity:.13}
}
@media(prefers-reduced-motion:reduce){
 .pill,.submit,.nav-invite{transition:none}
 .pill:hover,.submit:hover,.nav-invite:hover{transform:none}
}