/* Oddball Animal Works v31 — premium public brand experience */
:root{
  --oaw-ink:#151917;
  --oaw-ink-soft:#303833;
  --oaw-cream:#fffaf2;
  --oaw-sand:#ead8bf;
  --oaw-copper:#a64f21;
  --oaw-copper-bright:#d27b3d;
  --oaw-forest:#203d2d;
  --oaw-forest-2:#315b42;
  --oaw-gold:#dca358;
  --oaw-paper:#fffdf8;
  --oaw-line:rgba(99,67,39,.16);
  --oaw-shadow:0 35px 90px rgba(45,29,16,.17);
}
body{background:var(--oaw-cream);color:var(--oaw-ink)}
::selection{background:#d98c55;color:#fff}
.cursor-glow{position:fixed;z-index:0;width:430px;height:430px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(194,100,46,.11),transparent 67%);filter:blur(4px);transform:translate(-50%,-50%);opacity:0;transition:opacity .35s ease}
body.pointer-active .cursor-glow{opacity:1}
.site-shell{position:relative;z-index:1}
.wrap{width:min(1240px,calc(100% - 44px))}
.announcement{background:linear-gradient(90deg,#111714,#1f3d2d 55%,#121714);color:#f8e9d5;border-bottom:1px solid rgba(255,255,255,.08)}
.announcement a{color:#ffd4af}
.site-header{background:rgba(255,250,242,.82)!important;border-bottom:1px solid rgba(110,71,38,.1);transition:box-shadow .25s ease,background .25s ease}
.site-header.scrolled{background:rgba(255,250,242,.94)!important;box-shadow:0 14px 45px rgba(36,24,14,.1)}
.nav-wrap{min-height:82px}
.brand img{width:62px;height:62px;object-fit:contain;background:transparent!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 8px 13px rgba(60,35,16,.16))}
.brand strong{font-size:21px;letter-spacing:-.02em}
.brand small{color:var(--oaw-copper);letter-spacing:.11em}
.main-nav a{font-size:12px;letter-spacing:.01em}
.button{position:relative;overflow:hidden;border-color:var(--oaw-copper);background:linear-gradient(135deg,#8f3d18,#bf642c);border-radius:999px;padding:14px 22px;box-shadow:0 14px 30px rgba(148,62,21,.22)}
.button:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.25) 48%,transparent 80%);transform:translateX(-125%);transition:transform .55s ease}
.button:hover:before{transform:translateX(125%)}
.button:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(148,62,21,.28)}
.button-ghost{background:rgba(255,255,255,.55);border-color:rgba(91,59,30,.25);color:var(--oaw-ink);box-shadow:none;backdrop-filter:blur(10px)}
.button-light{background:#fff7eb;color:#55250e;border-color:#fff7eb;box-shadow:0 14px 35px rgba(0,0,0,.16)}
.button-glow{box-shadow:0 16px 38px rgba(175,74,25,.33),0 0 0 7px rgba(185,84,34,.08)}

/* Hero */
.hero.hero-v31{padding:76px 0 0;min-height:850px;overflow:hidden;background:
  radial-gradient(circle at 83% 18%,rgba(208,119,59,.22),transparent 29rem),
  radial-gradient(circle at 8% 82%,rgba(40,80,55,.17),transparent 31rem),
  linear-gradient(145deg,#fffaf2 0%,#f2e3cd 58%,#e5ccb0 100%)}
.hero.hero-v31:after{height:112px;background:var(--oaw-cream);clip-path:polygon(0 76%,100% 13%,100% 100%,0 100%)}
.hero-texture{position:absolute;inset:0;opacity:.22;background-image:
  linear-gradient(rgba(72,44,23,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(72,44,23,.035) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}
.hero-grid{grid-template-columns:1.04fr .96fr;gap:35px;min-height:600px}
.hero-copy{padding:30px 0 80px;position:relative;z-index:5}
.hero-badge-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:19px}
.hero-badge-row .kicker{margin:0}
.availability-dot{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid rgba(44,78,55,.18);background:rgba(255,255,255,.5);border-radius:999px;font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:#244b34}
.availability-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#4b9b5d;box-shadow:0 0 0 5px rgba(75,155,93,.12)}
.hero h1{font-size:clamp(56px,7.1vw,94px);line-height:.91;letter-spacing:-.06em;max-width:860px;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.hero h1 em{display:inline-block;color:var(--oaw-copper);font-style:italic;position:relative}
.hero h1 em:after{content:"";position:absolute;left:2%;right:1%;bottom:-8px;height:8px;background:url("data:image/svg+xml,%3Csvg width='500' height='12' viewBox='0 0 500 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 9C110 2 245 2 497 5' fill='none' stroke='%23b75d2a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.55}
.hero-lead{font-size:19px;line-height:1.72;color:#4c4741;max-width:720px;margin:34px 0 30px}
.hero-actions{gap:13px}
.hero-trust{margin-top:30px;gap:10px 20px}
.hero-trust span{background:rgba(255,255,255,.42);border:1px solid rgba(100,68,40,.1);padding:8px 11px;border-radius:999px}
.hero-signature{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:25px;font-family:Georgia,serif;font-style:italic;color:#6d5c4c;font-size:12px}
.hero-signature b{color:var(--oaw-copper)}
.hero-visual{min-height:590px;transform:translateY(-10px)}
.logo-stage{width:min(490px,88%);background:rgba(255,250,240,.82);box-shadow:0 45px 100px rgba(72,39,17,.24),inset 0 0 0 1px rgba(255,255,255,.8);border:0;backdrop-filter:blur(9px)}
.logo-stage:before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(158,74,30,.15)}
.logo-stage img{width:94%;background:transparent;border:0;filter:drop-shadow(0 15px 20px rgba(36,20,9,.15))}
.stage-ring{inset:-29px;border:1px dashed rgba(152,70,22,.29)}
.brand-halo{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.6),rgba(255,255,255,0) 65%);filter:blur(10px)}
.brand-halo i{position:absolute;border-radius:50%;border:1px solid rgba(143,75,34,.12)}
.brand-halo i:nth-child(1){inset:-7%}.brand-halo i:nth-child(2){inset:-14%}.brand-halo i:nth-child(3){inset:-23%}
.orbit-chip{position:absolute;z-index:6;min-width:145px;padding:10px 12px;border-radius:14px;background:rgba(255,253,247,.88);border:1px solid rgba(130,83,46,.16);box-shadow:0 18px 42px rgba(55,34,18,.14);backdrop-filter:blur(12px);display:grid;line-height:1.15}
.orbit-chip span{font-size:8px;font-weight:950;letter-spacing:.13em;text-transform:uppercase;color:var(--oaw-copper)}
.orbit-chip strong{font-size:11px;margin-top:4px}
.chip-one{top:8%;left:2%;transform:rotate(-5deg)}
.chip-two{top:26%;right:-2%;transform:rotate(4deg)}
.chip-three{bottom:5%;right:7%;transform:rotate(-3deg)}
.hero-v31 .floating-card{border-radius:16px;background:rgba(24,30,26,.92);border-color:rgba(255,255,255,.1);color:#fff;box-shadow:0 22px 48px rgba(18,22,19,.24)}
.hero-v31 .floating-card small{color:#b9b9b2}
.hero-v31 .floating-card>span{color:#ed9b62}
.hero-v31 .card-a{left:-2%;top:auto;bottom:11%}
.hero-v31 .card-b{right:-4%;bottom:30%}
.craft-ribbon{position:relative;z-index:4;width:calc(100% + 30px);margin-left:-15px;transform:rotate(-1.2deg);background:#202822;color:#f6e9d7;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(0,0,0,.22);overflow:hidden;box-shadow:0 15px 34px rgba(44,26,12,.14)}
.craft-ribbon>div{width:max-content;display:flex;align-items:center;gap:24px;padding:13px 0;animation:ribbonMove 28s linear infinite;font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.craft-ribbon>div:after{content:"Enclosure backdrops  ✦  Habitat pieces  ✦  Hides and bowls  ✦  Hammocks and soft goods  ✦  Unusual custom ideas  ✦";white-space:pre;color:#f6e9d7}
.craft-ribbon i{font-style:normal;color:#da7d40}
@keyframes ribbonMove{to{transform:translateX(-50%)}}
.quick-facts{margin-top:22px;border-radius:24px 24px 0 0;background:linear-gradient(125deg,#111714,#21382a 72%,#5a2c16);box-shadow:0 30px 70px rgba(25,28,28,.23)}
.quick-facts article{padding:25px 27px}
.quick-facts article>span{color:#eea16b}
.quick-facts strong{font-size:14px}
.quick-facts small{line-height:1.5}

/* Sections */
.section{padding:112px 0}
.section-heading h2,.fit-copy h2,.materials-copy h2,.about-copy h2,.faq-intro h2,.enquiry-aside h2{letter-spacing:-.05em}
.section-heading h2 em{color:var(--oaw-copper);font-weight:normal}
.services{background:
  radial-gradient(circle at 90% 10%,rgba(181,91,39,.08),transparent 25rem),
  var(--oaw-cream)}
.service-grid-v31{grid-template-columns:1.15fr .85fr .85fr;gap:18px}
.service-card{border-color:rgba(112,73,39,.13);border-radius:27px;background:rgba(255,253,248,.9);overflow:hidden}
.service-card:hover{transform:translateY(-7px);box-shadow:0 30px 70px rgba(59,36,18,.15);border-color:rgba(171,83,35,.3)}
.service-card.featured{grid-template-rows:300px auto}
.service-art{isolation:isolate}
.service-art:before{background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.rock-art{background:
  linear-gradient(140deg,rgba(255,255,255,.06),transparent),
  radial-gradient(circle at 30% 20%,#52665a,transparent 31%),
  linear-gradient(145deg,#18231d,#5b3a24 72%,#a15a2c)}
.habitat-art{background:linear-gradient(145deg,#273b31,#9b5b34)}
.fabric-art{background:linear-gradient(145deg,#5d3b34,#c48762)}
.odd-art{background:linear-gradient(145deg,#263e31,#8d7043)}
.service-art>span{font-family:Georgia,serif;color:#fff;font-size:76px;text-shadow:0 13px 27px rgba(0,0,0,.27)}
.art-glyph{letter-spacing:.12em;font-size:62px!important}
.art-lines{position:absolute;inset:0;background:
  repeating-radial-gradient(ellipse at 20% 110%,transparent 0 17px,rgba(255,255,255,.08) 18px 19px),
  linear-gradient(90deg,transparent,rgba(255,255,255,.04));mix-blend-mode:screen}
.service-copy{padding:25px}
.service-copy h3{font-size:27px;letter-spacing:-.025em}
.featured .service-copy h3{font-size:35px}
.service-copy p,.service-copy ul{font-size:13px;line-height:1.65}
.service-copy a{text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.service-copy a span{transition:transform .2s ease}.service-copy a:hover span{transform:translateX(4px)}

.materials-section{background:
  radial-gradient(circle at 20% 15%,rgba(209,124,66,.18),transparent 28rem),
  linear-gradient(145deg,#18231d,#20382a 65%,#4d2918);color:#fff;overflow:hidden}
.materials-section:before{content:"MATERIAL / METHOD / PURPOSE";position:absolute;right:-40px;top:22px;font:900 72px/1 system-ui;letter-spacing:.08em;color:rgba(255,255,255,.025);white-space:nowrap}
.materials-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:76px;align-items:center}
.materials-copy h2{font-family:Georgia,serif;font-size:clamp(42px,5.6vw,70px);line-height:.98;margin:0 0 22px}
.materials-copy>p{color:#c9cec9;font-size:16px;line-height:1.75}
.materials-note{border-left:3px solid #df8c52;padding-left:15px;font-size:12px!important;color:#aeb7b0!important;margin:25px 0}
.material-showcase{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:13px;min-height:500px}
.material-tile{position:relative;overflow:hidden;border-radius:25px;padding:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);display:flex;flex-direction:column;justify-content:space-between;backdrop-filter:blur(6px);transition:transform .25s ease,background .25s ease}
.material-tile:hover{transform:translateY(-5px) rotate(.4deg);background:rgba(255,255,255,.11)}
.material-tile:before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-80px;bottom:-90px;background:radial-gradient(circle,rgba(218,130,72,.28),transparent 70%)}
.material-tile>span{font-family:Georgia,serif;font-size:36px;color:#dc8d55;position:relative}
.material-tile small{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#dfab86;font-weight:900}
.material-tile strong{display:block;font-family:Georgia,serif;font-size:24px;line-height:1.12;margin-top:7px;max-width:330px}
.material-tile p{font-size:12px;color:#bfc6bf}
.tile-large{grid-row:1/3;background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.045))}
.tile-large>span{font-size:62px}
.tile-large strong{font-size:34px}
.tile-accent{background:linear-gradient(135deg,rgba(167,75,29,.62),rgba(221,130,70,.24))}

.fit-section{background:
  radial-gradient(circle at 95% 10%,rgba(255,255,255,.42),transparent 25rem),
  linear-gradient(145deg,#f0dfc8,#e6cfb2)}
.fit-grid{gap:90px}
.fit-list{background:rgba(255,253,247,.78);box-shadow:0 30px 75px rgba(78,48,22,.12);backdrop-filter:blur(8px)}
.fit-list>div{transition:transform .2s ease}.fit-list>div:hover{transform:translateX(7px)}
.process-section{background:
  radial-gradient(circle at 50% -20%,rgba(190,98,44,.17),transparent 28rem),
  #121714}
.process-line article>span{box-shadow:0 0 0 8px rgba(185,91,38,.08)}
.direction-section{background:#fffaf2}
.direction-card{box-shadow:0 20px 55px rgba(50,32,18,.09)}
.direction-card:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);pointer-events:none}
.about-section{background:
  radial-gradient(circle at 22% 35%,rgba(175,88,39,.1),transparent 25rem),
  linear-gradient(180deg,#f8eddf,#fffaf2)}
.about-logo{background:transparent!important;box-shadow:none!important;border:0!important}
.about-logo img{filter:drop-shadow(0 30px 35px rgba(72,41,19,.18))}
.faq-section{background:#f4e7d5}
.faq-list details{border-radius:18px;background:rgba(255,253,248,.82);box-shadow:0 13px 40px rgba(53,34,18,.06)}
.enquiry-section{background:
  radial-gradient(circle at 10% 10%,rgba(226,143,84,.12),transparent 25rem),
  radial-gradient(circle at 90% 85%,rgba(71,112,80,.14),transparent 28rem),
  linear-gradient(145deg,#111714,#1f3427 62%,#4e2816)}
.enquiry-aside h2{font-size:clamp(44px,5.5vw,68px)}
.enquiry-form{background:rgba(255,252,246,.97);border-radius:30px;box-shadow:0 45px 110px rgba(0,0,0,.34)}
.wizard-progress button.active i{box-shadow:0 0 0 7px rgba(167,75,31,.12)}
.field input,.field select,.field textarea{border-radius:13px;background:#fffdf9}
.file-drop{border-radius:18px;background:linear-gradient(135deg,#fffaf2,#f4e6d5)}
.site-footer{background:
  radial-gradient(circle at 80% 20%,rgba(170,76,31,.12),transparent 25rem),
  #101411}
.footer-brand img{width:96px;height:96px;object-fit:contain;background:transparent;border-radius:0;filter:drop-shadow(0 12px 18px rgba(0,0,0,.25))}

/* Reveal and polish */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.service-card.reveal:nth-child(2){transition-delay:.08s}.service-card.reveal:nth-child(3){transition-delay:.16s}.service-card.reveal:nth-child(4){transition-delay:.24s}
.magnetic{will-change:transform}

@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;text-align:center}.hero-copy{padding-bottom:10px}.hero-visual{order:-1;min-height:510px}.hero-badge-row,.hero-signature{justify-content:center}.orbit-chip{display:none}.hero-v31 .card-a{left:6%}.hero-v31 .card-b{right:6%}.service-grid-v31{grid-template-columns:1fr 1fr}.materials-grid{grid-template-columns:1fr;gap:45px}.material-showcase{min-height:430px}.materials-copy{text-align:center}.materials-note{max-width:720px;margin:25px auto}.fit-grid{gap:45px}
}
@media(max-width:720px){
  .wrap{width:min(100% - 24px,1240px)}.cursor-glow{display:none}.nav-wrap{min-height:72px}.brand img{width:52px;height:52px}.brand strong{font-size:17px}.brand small{font-size:7px}.hero.hero-v31{padding-top:34px;min-height:auto}.hero-grid{gap:0}.hero-visual{min-height:350px}.logo-stage{width:285px}.hero-v31 .floating-card{display:none}.hero-copy{padding:6px 0 60px}.hero-badge-row{margin-bottom:14px}.availability-dot{font-size:8px}.hero h1{font-size:clamp(45px,14vw,64px)}.hero-lead{font-size:15px;margin:28px 0 23px}.hero-signature{font-size:10px}.hero-trust span{width:100%;text-align:left}.craft-ribbon{margin-top:8px}.quick-facts{margin-top:15px}.section{padding:78px 0}.service-grid-v31{grid-template-columns:1fr}.service-card.featured{display:flex}.service-card.featured .service-art{min-height:230px}.materials-section:before{font-size:38px}.materials-grid{gap:34px}.materials-copy{text-align:left}.materials-copy h2{font-size:45px}.materials-note{margin-left:0}.material-showcase{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}.material-tile,.tile-large{grid-row:auto;min-height:180px}.tile-large strong{font-size:28px}.fit-grid{gap:30px}.enquiry-form{border-radius:22px}.footer-brand img{width:78px;height:78px}
}
@media(prefers-reduced-motion:reduce){
  .craft-ribbon>div{animation:none}.reveal{opacity:1;transform:none}.cursor-glow{display:none}.button:before{display:none}
}