:root {
  --ink: #25352d;
  --forest: #334a3d;
  --deep: #1d3428;
  --moss: #71806b;
  --sage: #aeb9a2;
  --linen: #f3eee5;
  --cream: #faf7f1;
  --sand: #d8c49f;
  --ochre: #b68c52;
  --clay: #ae735f;
  --white: #fffdf9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--sand); color: var(--deep); }

.construction-notice { position: fixed; z-index: 70; inset: 0 0 auto; min-height: 38px; padding: 10px 22px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fffdf9; background: var(--clay); box-shadow: 0 4px 14px rgba(29,52,40,.16); font-size: 11px; letter-spacing: .3px; text-align: center; }
.construction-notice strong { font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; }
.construction-notice strong::after { content: '·'; margin-left: 10px; opacity: .65; }
.site-header {
  position: fixed; z-index: 50; top: 54px; left: 50%; transform: translateX(-50%);
  width: min(1240px, calc(100% - 40px)); height: 74px; padding: 0 18px 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid rgba(255,255,255,.34); border-radius: 100px;
  background: rgba(250,247,241,.88); backdrop-filter: blur(18px);
  box-shadow: 0 12px 36px rgba(28,47,36,.11);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 49px; height: 49px; padding: 3px; object-fit: contain; border-radius: 50%; background: white; }
.brand-mark { position: relative; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; color: var(--forest); background: #dfe5d8; }
.brand-mark svg:first-child { position: absolute; width: 30px; height: 30px; transform: rotate(-15deg); opacity: .72; }
.brand-mark svg:last-child { position: relative; width: 15px; height: 15px; transform: translate(6px, 4px); }
.brand strong { display: block; font: 500 27px/1 Georgia, serif; letter-spacing: -.8px; }
.brand small { display: block; margin-top: 3px; color: #6f786f; font-size: 8px; letter-spacing: 1.35px; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 30px; color: #4d5a52; font-size: 13px; }
.nav a { transition: color .2s ease; }
.nav a:hover { color: var(--clay); }
.nav-cta { padding: 13px 22px; border-radius: 100px; color: var(--white) !important; background: var(--forest); }
.menu-toggle { display: none; border: 0; background: transparent; }

.hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--forest); color: var(--white); }
.hero-image { position: absolute; inset: 0; background: linear-gradient(90deg, #304538 0%, transparent 64%), url('../assets/caniwild-hero.png') center/cover no-repeat; transform: scale(1.015); animation: heroBreath 12s ease-in-out infinite alternate; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,36,27,.89) 0%, rgba(28,48,37,.62) 41%, rgba(28,48,37,.08) 76%), linear-gradient(0deg, rgba(17,33,25,.48), transparent 50%); }
.hero-content { position: relative; z-index: 2; width: min(1240px, calc(100% - 80px)); margin: 0 auto; padding-top: clamp(180px, 24vh, 240px); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; }
.eyebrow > span { width: 34px; height: 1px; background: currentColor; opacity: .7; }
.hero h1, .display, .section-head h2, .approach h2, .djari h2, .about h2, .contact h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -3px; }
.hero h1 { margin: 0; font-size: clamp(76px, 9.5vw, 142px); line-height: .78; }
em { color: var(--sand); font-weight: 400; }
.hero-copy { max-width: 590px; margin: 42px 0 0; color: rgba(255,255,255,.82); font: 16px/1.8 Arial, sans-serif; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 17px 22px; border-radius: 100px; font-size: 12px; letter-spacing: .5px; transition: transform .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); }
.button svg, .line-link svg, .card-top svg { width: 18px; height: 18px; }
.button-light { color: var(--deep); background: var(--linen); }
.button-dark { color: white; background: var(--forest); }
.text-link { padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: 12px; }
.hero-note { position: absolute; z-index: 2; right: 5vw; bottom: 7vh; display: flex; align-items: center; gap: 14px; padding: 16px 22px; border: 1px solid rgba(255,255,255,.28); border-radius: 16px; background: rgba(37,53,45,.42); backdrop-filter: blur(10px); }
.hero-note > svg { width: 30px; color: var(--sand); }
.hero-note small, .hero-note strong, .hero-note span { display: block; }
.hero-note small { font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .6; }
.hero-note strong { margin: 3px 0; font: 24px/1 Georgia, serif; }
.hero-note span { font-size: 10px; opacity: .72; }
.scroll-cue { position: absolute; z-index: 2; left: 32px; bottom: 30px; display: flex; align-items: center; gap: 12px; transform: rotate(-90deg); transform-origin: left top; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; }
.scroll-cue i { display: block; width: 45px; height: 1px; background: rgba(255,255,255,.6); }
.hero-orbit { position: absolute; z-index: 1; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; }
.orbit-one { width: 420px; height: 420px; left: -220px; bottom: -80px; }
.orbit-two { width: 170px; height: 170px; right: -55px; top: 18%; }

.section { padding: 130px max(5vw, 32px); }
.intro { background: var(--linen); }
.intro-kicker, .section-head > div { display: flex; align-items: center; gap: 16px; }
.section-no { color: var(--clay); font: 13px Georgia, serif; }
.intro-kicker p, .section-head > div p, .label { margin: 0; color: #788078; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.intro-grid { display: grid; grid-template-columns: 1.25fr .65fr; gap: 12vw; align-items: end; margin-top: 54px; }
.display { max-width: 780px; margin: 0; font-size: clamp(54px, 6vw, 90px); line-height: .98; }
.intro-copy { color: #5a665e; font-size: 15px; line-height: 1.8; }
.intro-copy p:first-child { color: var(--ink); font-size: 18px; }
.line-link { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 13px 0; border-bottom: 1px solid #aeb5aa; color: var(--deep); font-size: 12px; }
.value-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 100px; border-top: 1px solid #d7d1c7; }
.value-row > div { min-height: 170px; padding: 32px 24px; border-right: 1px solid #d7d1c7; }
.value-row > div:first-child { padding-left: 0; }
.value-row > div:last-child { border-right: 0; }
.value-row svg, .round-icon { display: block; width: 28px; height: 28px; margin-bottom: 24px; color: var(--clay); }
.value-row strong, .value-row span { display: block; }
.value-row strong { font: 19px Georgia, serif; }
.value-row span:not(.round-icon) { margin-top: 8px; color: #758077; font-size: 12px; }

.offers { background: #f8f4ec; }
.section-head { display: grid; grid-template-columns: .6fr 1.2fr .6fr; gap: 5vw; align-items: end; }
.section-head h2 { margin: 0; font-size: clamp(50px, 5.2vw, 80px); line-height: .97; }
.section-head > p { margin: 0; color: #6e786f; font-size: 14px; line-height: 1.7; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 70px; }
.service-card { position: relative; min-height: 470px; padding: 28px; overflow: hidden; border-radius: 8px; color: white; transition: transform .35s ease, box-shadow .35s ease, opacity .7s ease !important; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(32,48,39,.14); }
.service-card.moss { background: #778575; }
.service-card.sand { color: var(--deep); background: #dbc7a4; }
.service-card.clay { background: #a9705c; }
.service-card.fern { background: #425d4b; }
.service-card::after { content: ''; position: absolute; width: 240px; height: 240px; right: -100px; top: 65px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025); }
.card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; font: 12px Georgia, serif; }
.card-top i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; }
.card-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; margin-top: 68px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.sand .card-icon { border-color: rgba(37,53,45,.35); }
.card-icon svg { width: 32px; }
.card-icon > span { font-size: 40px; }
.service-card h3 { position: relative; z-index: 1; margin: 52px 0 12px; font: 29px/1.1 Georgia, serif; }
.service-card p { position: relative; z-index: 1; margin: 0; font-size: 13px; line-height: 1.7; opacity: .82; }
.service-card small { position: absolute; z-index: 1; left: 28px; bottom: 28px; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .7; }

.approach { display: grid; grid-template-columns: 1fr 1fr; min-height: 880px; padding: 0; background: var(--deep); color: white; }
.approach-visual { position: relative; display: grid; place-items: center; overflow: hidden; background: #c8b38f; color: var(--deep); }
.rings { position: relative; display: grid; place-items: center; width: 520px; height: 520px; border: 1px solid rgba(37,53,45,.23); border-radius: 50%; }
.rings span { position: absolute; border: 1px solid rgba(37,53,45,.18); border-radius: 50%; }
.rings span:nth-child(1) { width: 390px; height: 390px; }
.rings span:nth-child(2) { width: 260px; height: 260px; }
.rings span:nth-child(3) { width: 130px; height: 130px; }
.rings svg { width: 70px; }
.approach-visual > p { position: absolute; left: 60px; bottom: 55px; margin: 0; font: italic 27px/1.3 Georgia, serif; }
.approach-content { padding: 110px 8vw 90px; }
.approach-content .label { display: inline-block; margin-left: 16px; color: rgba(255,255,255,.5); }
.approach h2 { margin: 62px 0 35px; font-size: clamp(54px, 5vw, 78px); line-height: .95; }
.large-copy { font: 22px/1.55 Georgia, serif; }
.approach-content > p.large-copy { color: rgba(255,255,255,.78); }
.approach ul { padding: 25px 0 0; margin: 40px 0 0; border-top: 1px solid rgba(255,255,255,.15); list-style: none; }
.approach li { display: grid; grid-template-columns: 50px 1fr; padding: 23px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.approach li > span { color: var(--sand); font: 12px Georgia, serif; }
.approach li strong { font: 20px Georgia, serif; }
.approach li p { margin: 6px 0 0; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.6; }

.djari { background: var(--linen); }
.djari-heading { display: grid; grid-template-columns: 50px 160px 1fr; align-items: start; }
.djari-heading > p { margin: 2px 0; color: #788078; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.djari h2 { margin: -10px 0 50px; font-size: clamp(62px, 7vw, 108px); line-height: .9; }
.djari-card { display: grid; grid-template-columns: .8fr 1.2fr; overflow: hidden; border-radius: 8px; background: #f9f6ef; }
.djari-silhouette { position: relative; min-height: 480px; display: grid; place-items: center; overflow: hidden; color: var(--linen); background: var(--clay); }
.djari-silhouette::before, .djari-silhouette::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.djari-silhouette::before { width: 420px; height: 420px; }
.djari-silhouette::after { width: 260px; height: 260px; }
.djari-silhouette svg { position: relative; z-index: 1; width: 110px; opacity: .9; }
.djari-silhouette span { position: absolute; left: 34px; bottom: 28px; font: italic 24px/1.3 Georgia, serif; }
.djari-text { padding: 70px 7vw; }
.djari-text .lead { margin-top: 0; font: 27px/1.45 Georgia, serif; }
.djari-text > p:not(.lead) { color: #68746b; font-size: 14px; line-height: 1.8; }
.djari-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 50px; padding-top: 25px; border-top: 1px solid #ded8cd; }
.djari-facts span { font: 15px Georgia, serif; }
.djari-facts small { display: block; margin-bottom: 8px; color: #8b918b; font: 8px Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }

.day { background: #f8f4ec; }
.day-path { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 90px; }
.day-path > div { position: relative; padding-right: 36px; }
.day-path span { display: block; margin-bottom: 22px; color: var(--clay); font: 12px Georgia, serif; }
.day-path i { position: relative; display: block; width: 100%; height: 1px; margin-bottom: 30px; background: #c8c5bc; }
.day-path i::before { content: ''; position: absolute; top: -5px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--forest); }
.day-path strong { font: 24px Georgia, serif; }
.day-path p { max-width: 220px; color: #6c776f; font-size: 12px; line-height: 1.7; }

.about { display: grid; grid-template-columns: 1.1fr .9fr; gap: 11vw; align-items: center; background: var(--sage); }
.about-copy .label { display: inline-block; margin-left: 15px; color: #57655b; }
.about h2 { margin: 45px 0 35px; font-size: clamp(54px, 5vw, 80px); line-height: .96; }
.about-copy > p:not(.label) { max-width: 680px; color: #435248; font-size: 14px; line-height: 1.8; }
.about-copy .large-copy { color: var(--deep) !important; font-size: 23px !important; }
.about .button { margin-top: 25px; }
.about-quote { position: relative; min-height: 490px; padding: 70px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: white; background: var(--forest); border-radius: 50% 50% 8px 8px; }
.about-quote::before { content: ''; position: absolute; width: 410px; height: 410px; left: 50%; top: -130px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.03); }
.about-quote svg { position: absolute; top: 100px; left: 50%; width: 85px; transform: translateX(-50%); color: var(--sand); }
.about-quote blockquote { position: relative; margin: 0; font: italic 34px/1.25 Georgia, serif; }
.about-quote span { margin-top: 20px; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .6; }

.contact { position: relative; overflow: hidden; color: white; background: var(--clay); }
.contact-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr .65fr; gap: 12vw; align-items: end; }
.contact h2 { margin: 38px 0 0; font-size: clamp(72px, 9vw, 134px); line-height: .82; }
.contact em { color: #ead8b7; }
.contact-copy p { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.8; }
.contact-copy .button { margin-top: 25px; }
.mail-link { display: block; width: max-content; margin-top: 24px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.55); font: 19px Georgia, serif; }
.contact-rings span { position: absolute; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.contact-rings span:nth-child(1) { width: 480px; height: 480px; right: -170px; top: -200px; }
.contact-rings span:nth-child(2) { width: 280px; height: 280px; right: -70px; top: -100px; }
.contact-rings svg { position: absolute; width: 50px; right: 80px; top: 55px; opacity: .15; }
.paw-symbol { display: grid; place-items: center; width: 30px; height: 30px; color: var(--sand); font-size: 18px; }
.paw-large { position: relative; z-index: 1; color: inherit; font-size: 58px; font-weight: 400; }
.contact-rings .paw-large { position: absolute; right: 80px; top: 55px; opacity: .15; }
.leaf-symbol { display: block; color: var(--sand); font-size: 48px; font-weight: 400; }
.about-quote > .leaf-symbol { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); }

.legal-page { min-height: 100vh; padding: 8vw; background: var(--linen); }
.legal-page main { width: min(820px, 100%); margin: 0 auto; padding: 70px; border-radius: 12px; background: var(--white); box-shadow: 0 18px 50px rgba(37,53,45,.08); }
.legal-page h1 { margin: 50px 0 25px; font: 52px/1 Georgia, serif; color: var(--deep); }
.legal-page p { color: #627067; line-height: 1.8; }
.legal-back { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid #aeb5aa; font-size: 13px; }

footer { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 40px; align-items: center; padding: 50px max(5vw, 32px) 28px; color: #c9d0c9; background: #17291f; }
.footer-brand .brand-logo { filter: grayscale(1); }
.footer-brand strong { color: white; }
footer > p { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .65; }
footer > div { display: flex; gap: 20px; font-size: 11px; }
footer > small { grid-column: 1 / -1; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.1); font-size: 9px; opacity: .5; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes heroBreath { from { transform: scale(1.015); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .site-header { top: 50px; width: calc(100% - 24px); }
  .menu-toggle { display: grid; gap: 6px; padding: 15px; }
  .menu-toggle span { display: block; width: 24px; height: 1px; background: var(--ink); }
  .nav { position: absolute; top: 82px; right: 0; width: min(360px, calc(100vw - 24px)); padding: 22px; flex-direction: column; align-items: stretch; gap: 0; border-radius: 18px; background: var(--linen); box-shadow: 0 20px 40px rgba(22,36,28,.18); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: .25s ease; }
  .nav.open { opacity: 1; pointer-events: auto; transform: none; }
  .nav a { padding: 14px; border-bottom: 1px solid #ddd7cc; }
  .nav-cta { margin-top: 10px; text-align: center; }
  .intro-grid, .approach, .about, .contact-inner { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: .4fr 1.2fr; }
  .section-head > p { grid-column: 2; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-visual { min-height: 620px; }
  .djari-card { grid-template-columns: 1fr; }
  .djari-silhouette { min-height: 370px; }
  .about-quote { min-height: 400px; }
  footer { grid-template-columns: 1fr auto; }
  footer > p { display: none; }
}

@media (max-width: 680px) {
  .site-header { height: 64px; padding-left: 14px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-logo { width: 42px; height: 42px; }
  .brand strong { font-size: 23px; }
  .brand small { display: none; }
  .hero { min-height: 880px; }
  .hero-image { background-position: 64% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(19,37,28,.9), rgba(27,48,36,.35)), linear-gradient(0deg, rgba(18,34,26,.65), transparent 70%); }
  .hero-content { width: calc(100% - 42px); padding-top: 170px; }
  .hero h1 { font-size: clamp(66px, 22vw, 95px); }
  .hero-copy { margin-top: 32px; font-size: 14px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-note { right: 20px; bottom: 28px; }
  .scroll-cue { display: none; }
  .section { padding: 90px 21px; }
  .intro-grid { gap: 35px; margin-top: 35px; }
  .display, .section-head h2, .approach h2, .djari h2, .about h2 { font-size: 48px; letter-spacing: -2px; }
  .value-row { grid-template-columns: 1fr 1fr; margin-top: 65px; }
  .value-row > div { padding: 25px 16px !important; border-bottom: 1px solid #d7d1c7; }
  .section-head { display: block; }
  .section-head h2 { margin-top: 35px; }
  .section-head > p { margin-top: 25px; }
  .service-grid { grid-template-columns: 1fr; margin-top: 45px; }
  .service-card { min-height: 440px; }
  .approach-visual { min-height: 500px; }
  .rings { width: 360px; height: 360px; }
  .rings span:nth-child(1) { width: 270px; height: 270px; }
  .rings span:nth-child(2) { width: 180px; height: 180px; }
  .rings span:nth-child(3) { width: 90px; height: 90px; }
  .approach-visual > p { left: 25px; bottom: 28px; }
  .approach-content { padding: 85px 21px; }
  .construction-notice { min-height: 42px; padding: 8px 14px; gap: 3px; flex-direction: column; font-size: 10px; line-height: 1.25; }
  .construction-notice strong::after { display: none; }
  .site-header { top: 54px; }
  .djari-heading { display: block; }
  .djari h2 { margin-top: 35px; }
  .djari-text { padding: 45px 25px; }
  .djari-text .lead { font-size: 23px; }
  .djari-facts { grid-template-columns: 1fr; gap: 22px; }
  .day-path { grid-template-columns: 1fr; gap: 35px; margin-top: 55px; }
  .about { gap: 65px; }
  .about-quote { padding: 40px; border-radius: 170px 170px 8px 8px; }
  .contact-inner { gap: 55px; }
  .contact h2 { font-size: 74px; }
  footer { grid-template-columns: 1fr; padding: 42px 21px 25px; }
  footer > div { flex-wrap: wrap; }
}