/*
====================================================
THE FEATHER GUY - MAIN WEBSITE STYLES
====================================================
This file keeps the same luxury visual design, but the CSS
has been spaced out so it is easier to read and edit later.
====================================================
*/

* {
  margin:0;
  padding:0;
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  background:#050505;
  color:#fff;
  font-family:Montserrat, Arial, sans-serif;
  line-height:1.6;
  overflow-x:hidden
}

.container {
  width:min(92%, 1280px);
  margin:auto
}

a {
  color:inherit;
  text-decoration:none
}

img {
  max-width:100%;
  display:block
}

.topbar {
  background:#0b0b0b;
  color:#d7b87a;
  text-align:center;
  font-size:13px;
  letter-spacing:1.5px;
  padding:10px 16px
}

.header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(5, 5, 5, .94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(215, 184, 122, .18)
}

.nav {
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  font-family:'Cormorant Garamond', serif;
  font-size:38px;
  letter-spacing:1px;
  line-height:.9
}

.brand small {
  display:block;
  font-family:Montserrat, Arial, sans-serif;
  font-size:11px;
  color:#d7b87a;
  letter-spacing:3px;
  margin-top:8px
}

.menu {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.6px
}

.menu a {
  opacity:.92;
  transition:.25s
}

.menu a:hover, .menu .active {
  color:#d7b87a
}

.quote {
  border:1px solid #d7b87a;
  color:#f3dca5;
  padding:13px 18px
}

.quote:hover {
  background:#d7b87a;
  color:#111!important
}

.hero {
  min-height:760px;
  display:flex;
  align-items:center;
  background:linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .72) 43%, rgba(0, 0, 0, .15) 100%), var(--hero);
  background-size:cover;
  background-position:center;
  padding:90px 0
}

.hero.compact {
  min-height:430px
}

.eyebrow {
  color:#d7b87a;
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:13px;
  font-weight:600;
  margin-bottom:16px
}

.hero h1, .page-title {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(52px, 7vw, 98px);
  line-height:.95;
  font-weight:400;
  margin-bottom:28px
}

.hero p {
  font-size:19px;
  color:#eee;
  max-width:610px;
  margin-bottom:36px
}

.buttons {
  display:flex;
  gap:18px;
  flex-wrap:wrap
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#d7b87a;
  color:#111;
  padding:16px 26px;
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-weight:700;
  font-size:12px;
  transition:.25s;
  border:1px solid #d7b87a
}

.btn:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(215, 184, 122, .18)
}

.btn.outline {
  background:transparent;
  color:#fff;
  border-color:rgba(255, 255, 255, .55)
}

.btn.outline:hover {
  background:#fff;
  color:#111
}

.section {
  padding:90px 0
}

.dark {
  background:#070707
}

.cream {
  background:#f8f4ee;
  color:#111
}

.center {
  text-align:center
}

.section-head {
  max-width:760px;
  margin:0 auto 54px;
  text-align:center
}

.section-head h2 {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(40px, 5vw, 66px);
  font-weight:400;
  line-height:1.05
}

.section-head p {
  color:#d7b87a;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:12px;
  font-weight:600;
  margin-bottom:12px
}

.grid {
  display:grid;
  gap:24px
}

.cards {
  grid-template-columns:repeat(4, 1fr)
}

.card {
  background:#111;
  border:1px solid rgba(255, 255, 255, .1);
  overflow:hidden;
  transition:.3s
}

.card:hover {
  transform:translateY(-7px);
  border-color:rgba(215, 184, 122, .55)
}

.card img {
  height:330px;
  width:100%;
  object-fit:cover
}

.card-body {
  padding:24px;
  text-align:center
}

.card h3 {
  font-family:'Cormorant Garamond', serif;
  font-size:28px;
  line-height:1.05;
  margin-bottom:8px;
  color:#fff
}

.card p {
  color:#aaa;
  font-size:14px
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center
}

.split h2 {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(40px, 5vw, 66px);
  font-weight:400;
  line-height:1.05;
  margin-bottom:20px
}

.split p {
  color:#555;
  margin-bottom:16px
}

.split img {
  width:100%;
  height:520px;
  object-fit:cover
}

.benefits {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
  margin:34px 0
}

.benefit {
  border-left:1px solid #ddd;
  padding-left:18px
}

.benefit strong {
  display:block;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:12px;
  margin-bottom:6px
}

.benefit span {
  font-size:13px;
  color:#666
}

.gallery {
  grid-template-columns:repeat(5, 1fr)
}

.gallery img {
  height:235px;
  width:100%;
  object-fit:cover;
  border:1px solid rgba(255, 255, 255, .1)
}

.text-block {
  max-width:900px;
  margin:auto;
  color:#ddd;
  font-size:17px
}

.text-block h2 {
  font-family:'Cormorant Garamond', serif;
  font-size:48px;
  color:#fff;
  margin:34px 0 12px
}

.text-block ul {
  padding-left:22px;
  margin:18px 0
}

.info-grid {
  grid-template-columns:repeat(3, 1fr)
}

.info {
  background:#111;
  border:1px solid rgba(255, 255, 255, .1);
  padding:30px
}

.info h3 {
  font-family:'Cormorant Garamond', serif;
  font-size:30px;
  color:#fff;
  margin-bottom:8px
}

.info p, .info li {
  color:#aaa
}

.price-table {
  width:100%;
  border-collapse:collapse;
  background:#fff;
  color:#111;
  overflow:hidden
}

.price-table th, .price-table td {
  border:1px solid #eee;
  padding:14px;
  text-align:left
}

.price-table th {
  background:#111;
  color:#d7b87a;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:12px
}

.form {
  display:grid;
  gap:16px
}

.form input, .form textarea, .form select {
  width:100%;
  padding:15px;
  background:#111;
  border:1px solid rgba(255, 255, 255, .16);
  color:#fff;
  font:inherit
}

.form textarea {
  min-height:130px
}

.footer-cta {
  background:linear-gradient(90deg, #111, #050505);
  border-top:1px solid rgba(255, 255, 255, .08);
  border-bottom:1px solid rgba(255, 255, 255, .08);
  padding:64px 0
}

.footer-cta .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.footer-cta h2 {
  font-family:'Cormorant Garamond', serif;
  font-size:44px;
  font-weight:400
}

.footer-cta p {
  color:#bbb
}

.footer {
  background:#030303;
  padding:54px 0 24px;
  color:#999
}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.4fr;
  gap:36px;
  margin-bottom:36px
}

.footer h4 {
  color:#d7b87a;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:12px;
  margin-bottom:14px
}

.footer a, .footer p {
  display:block;
  color:#aaa;
  margin-bottom:8px;
  font-size:14px
}

.copy {
  text-align:center;
  border-top:1px solid rgba(255, 255, 255, .08);
  padding-top:20px;
  font-size:13px
}

@media(max-width:980px) {
  .menu {
  display:none
}

.nav {
  height:78px
}

.brand {
  font-size:30px
}

.hero {
  min-height:620px
}

.cards {
  grid-template-columns:repeat(2, 1fr)
}

.split {
  grid-template-columns:1fr
}

.gallery {
  grid-template-columns:repeat(2, 1fr)
}

.benefits, .info-grid {
  grid-template-columns:1fr 1fr
}

.footer-cta .container {
  display:block
}

.footer-grid {
  grid-template-columns:1fr 1fr
}

}

@media(max-width:620px) {
  .cards, .gallery, .benefits, .info-grid, .footer-grid {
  grid-template-columns:1fr
}

.hero h1, .page-title {
  font-size:48px
}

.section {
  padding:64px 0
}

.card img, .split img {
  height:310px
}

.topbar {
  font-size:11px
}

.footer-cta h2 {
  font-size:34px
}

}

/* =========================
   IN STOCK INVENTORY PAGE
========================= */

.notice-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-bottom:34px
}

.notice-card {
  background:#fff;
  border:1px solid #eadfcb;
  padding:24px;
  box-shadow:0 18px 45px rgba(0, 0, 0, .05)
}

.notice-card strong {
  display:block;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:12px;
  color:#a47c35;
  margin-bottom:8px
}

.notice-card span {
  display:block;
  color:#555;
  font-size:15px
}

.price-strip {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:20px
}

.price-strip span {
  background:#111;
  color:#eee;
  border:1px solid rgba(215, 184, 122, .4);
  padding:10px 13px;
  font-size:13px
}

.price-strip b {
  color:#d7b87a
}

.inventory-table-wrap {
  overflow-x:auto;
  border:1px solid rgba(215, 184, 122, .22);
  background:#0d0d0d;
  box-shadow:0 30px 80px rgba(0, 0, 0, .35)
}

.inventory-table {
  width:100%;
  min-width:1100px;
  border-collapse:collapse;
  color:#eee
}

.inventory-table th {
  background:#111;
  color:#d7b87a;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-size:12px;
  padding:15px;
  border-bottom:1px solid rgba(215, 184, 122, .35);
  text-align:left;
  position:sticky;
  top:0;
  z-index:1
}

.inventory-table td {
  border-bottom:1px solid rgba(255, 255, 255, .08);
  padding:13px 15px;
  vertical-align:middle
}

.inventory-table tr:hover {
  background:rgba(215, 184, 122, .06)
}

.inventory-table td:first-child {
  min-width:190px
}

.inventory-table img {
  width:92px;
  height:82px;
  object-fit:cover;
  border:1px solid rgba(255, 255, 255, .16);
  background:#222
}

.inventory-table small {
  color:#aaa
}

.compact-table td, .compact-table th {
  font-size:14px
}

@media(max-width:980px) {
  .notice-grid {
  grid-template-columns:1fr
}

.inventory-table th, .inventory-table td {
  padding:10px
}

}

/* =========================
   RENTAL PAGE PRODUCT LAYOUT
========================= */

.rental-note {
  max-width:980px;
  margin:0 auto 36px;
  background:linear-gradient(135deg, #111, #080808);
  border:1px solid rgba(215, 184, 122, .28);
  padding:28px;
  color:#ddd;
  text-align:center
}

.rental-note p {
  margin:0 0 12px
}

.rental-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px
}

.rental-card {
  background:#111;
  border:1px solid rgba(255, 255, 255, .11);
  overflow:hidden;
  transition:.3s
}

.rental-card:hover {
  transform:translateY(-6px);
  border-color:rgba(215, 184, 122, .55)
}

.rental-card img {
  width:100%;
  height:330px;
  object-fit:cover;
  background:#191919
}

.rental-card div {
  padding:24px
}

.rental-card h3 {
  font-family:'Cormorant Garamond', serif;
  font-size:30px;
  line-height:1.05;
  margin-bottom:10px
}

.rental-card p {
  color:#aaa;
  font-size:14px
}

.rental-card strong {
  display:inline-block;
  color:#d7b87a;
  margin-top:12px;
  letter-spacing:1px
}

.rental-card.wide {
  grid-column:span 1
}

.rental-card.wide img {
  height:360px;
  object-fit:contain;
  padding:18px;
  background:radial-gradient(circle, #252525, #050505)
}

/* =========================
   FEATHER COLOUR PAGE
========================= */

.colour-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px
}

.colour-card {
  background:#111;
  border:1px solid rgba(255, 255, 255, .1);
  overflow:hidden;
  transition:.3s
}

.colour-card:hover {
  transform:translateY(-6px);
  border-color:rgba(215, 184, 122, .55)
}

.colour-img {
  height:280px;
  background:radial-gradient(circle at center, #252525, #050505);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px
}

.colour-img img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(0, 0, 0, .45))
}

.colour-body {
  padding:22px;
  text-align:center
}

.colour-body h3 {
  font-family:'Cormorant Garamond', serif;
  font-size:30px;
  color:#fff;
  margin-bottom:8px
}

.colour-body p {
  color:#aaa;
  font-size:14px
}

.colour-note {
  color:#aaa;
  margin-top:34px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto
}

@media(max-width:980px) {
  .rental-grid {
  grid-template-columns:repeat(2, 1fr)
}

.colour-grid {
  grid-template-columns:repeat(2, 1fr)
}

}

@media(max-width:620px) {
  .rental-grid, .colour-grid {
  grid-template-columns:1fr
}

.rental-card img, .rental-card.wide img {
  height:290px
}

.colour-img {
  height:260px
}

}