* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* padding/border no longer add to element width — saves a LOT of layout headaches */
}

body {
  background-color: #0E0E0E;
  color: #F5F1E8;
  font-family: 'century gothic';
}

h1, h2, h3, .logo-big {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 60px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.logo{
  text-align:center;
}
.logo-big {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}

.logo-small {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A227; /* the gold accent used everywhere in the design */
  margin-top: 2px;
}

header nav { display: flex; gap: 32px; }

header nav a {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D8D3C9;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
header nav a:hover { color: #C9A227; }



.header-btn {
  border: 1px solid #C9A227;
  color: #C9A227;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 17px 22px;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.header-btn:hover { background-color: #C9A227; color: #0E0E0E; }

.hero {
  position: relative;
  min-height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 80px;
  background-image:
    linear-gradient(90deg, rgba(14,14,14,0.95) 15%, rgba(14,14,14,0.55) 50%, rgba(14,14,14,0.15) 100%),
    url("images/hero.jpg");
  background-size: cover;
  background-position: center ;
}

.hero .sub {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: 70px;
  line-height: 1.05;
  max-width: 640px;
  margin-bottom: 20px;
}

.hero .description {
  max-width: 440px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: #B9B3A8;
  margin-bottom: 32px;
}

.hero-btns { display: flex; gap: 16px; }

.portfolio-btn {
  background-color: #C9A227;
  color: #0E0E0E;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 20px 26px;
  border-radius: 2px;
  transition: opacity 0.2s ease;
  font-weight:700;
}
.portfolio-btn:hover { opacity: 0.85; }

.contact-btn {
  border: 1px solid #F5F1E8;
  color: #F5F1E8;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  
  letter-spacing: 0.08em;
 font-weight:700;
  padding: 18px 26px;
  border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.contact-btn:hover { background-color: #F5F1E8; color: #0E0E0E; }

/* ============================================================
   SECOND SECTION — About Us
   ============================================================ */
.second-cont {
  display: flex;
  background-color: #161616;
}

.second-cont .left-side {
  flex: 1;
  min-height: 480px;
  position:relative;
  overflow:hidden;
}
/* Your <img src=""> is empty right now — this rule will apply
   correctly once you put a real path in the src attribute. */
.second-cont .left-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
   filter:brightness(0.65) saturate(0.85);
}
.second-cont .left-side::after {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: linear-gradient(
    to right,
    rgba(14,14,14,0) 55%,
    rgba(14,14,14,0.9) 100%
  )
}

.second-cont .right-side {
  flex: 1;
  padding: 70px 60px;
}

.right-text .sub {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 12px;
}
.right-text h2 {
  font-size: 35px;
  line-height: 1.25;
  max-width: 440px;
  margin-bottom: 18px;
}
.right-text .description {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: #B9B3A8;
  max-width: 440px;
  margin-bottom: 40px;
}

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

.block {
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* NOTE: your .block divs have no icon markup at all (no <i> tag).
   I'm deliberately NOT faking icons with CSS unicode codepoints
   here — I'd be guessing at exact codepoints from memory and could
   easily ship a broken glyph. The reliable fix is adding real
   Font Awesome <i> tags in the HTML (see the note below the code),
   then this rule just styles whatever icon you put there. */
.block i {
  display: block;
  font-size: 20px;
  color: #C9A227;
  margin-bottom: 14px;
}

.block-main {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.block-description {
  font-size: 15px;
  font-weight: 300;
  color: #8F887E;
  line-height: 1.6;
}

/* ============================================================
   THIRD SECTION — Portfolio intro
   ============================================================ */
.third-cont {
  text-align: center;
  padding: 80px 60px 60px;
}
.third-sub {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 10px;
}
.third-cont-text {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
/* the override mentioned above — turns the reused .portfolio-btn
   into an outlined style only when it's inside .third-cont */
.third-cont .portfolio-btn {
  display: inline-block;
  background-color: transparent;
  border: 1px solid #C9A227;
  color: #C9A227;
}
.third-cont .portfolio-btn:hover {
  background-color: #C9A227;
  color: #0E0E0E;
}
.work{
    display:flex;
    gap:25px;
 
  margin: 40px 0 36px;
}
.work img{
   object-fit:cover;  
    min-width:0;
  height: 480px;
  object-fit: cover;
  border-radius:8px;
  flex:1;

 
}

/* ============================================================
   FOURTH SECTION — Popular Styles
   ============================================================ */
.fourth-cont {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 60px 60px 80px;
  text-align: center;
}
/* .sub sits as a sibling of the six .styles-boxes rather than a
   separate wrapper, so I make it take the full row width to force
   the boxes onto their own line below it. */
.fourth-cont > .sub {
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 36px;
}

.styles-boxes {
  flex: 1;
  min-width: 140px;
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.styles-boxes:last-child { border-right: none; }

/* Same reasoning as .block above — style whatever icon you add,
   rather than guessing codepoints. */
.styles-boxes i {
  display: block;
  font-size: 30px;
  color: #C9A227;
  margin-bottom: 14px;
}

.style-main {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight:700;
}
.styles-boxes .description {
  font-size: 15px;
  font-weight: 300;
  color: #8F887E;
  line-height: 1.5;
}

/* ============================================================
   FIFTH SECTION — CTA
   ============================================================ */
.fifth-cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 70px 60px;
  background-color: #161616;
}

.left-fifth .sub {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 12px;
}
.left-fifth h3 {
  font-size: 30px;
  max-width: 420px;
  margin-bottom: 10px;
}
.fifth-cont-descr {
  font-size: 15px;
  font-weight: 300;
  color: #B9B3A8;
}

.right-fifth {
  flex-shrink: 0;
  min-width: 180px;
  min-height: 200px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
 
  background-size: cover;
  background-position: center;
}

.appointment-btn {
  background-color: #C9A227;
  color: #0E0E0E;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 2px;
  
}
.appointment-btn:hover{
    background-color:#B9B3A8;

}

/* ============================================================
   FOOTER
   Your footer HTML is minimal (just logo + one line of text), so
   this styles it as a clean simple footer — see note below about
   the fuller 4-column footer shown in the design.
   ============================================================ */
footer {
  background-color: #0E0E0E;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 40px 60px;
  text-align: center;
}
footer .logo-big { font-size: 22px; }
footer .logo-small { margin-bottom: 14px; }
.footer-txt {
  font-size: 12px;
  color: #8F887E;
  margin-top: 10px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  header, .hero, .third-cont, .fourth-cont, .fifth-cont, footer {
    padding-left: 24px;
    padding-right: 24px;
  }
  .second-cont, .fifth-cont {
    flex-direction: column;
  }
  .right-blocks {
    grid-template-columns: repeat(2, 1fr);
  }
  .fourth-cont {
    flex-direction: column;
  }
  .styles-boxes {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
  }
}
/* ============================================================
   ABOUT HERO — two-column layout: text left, photo right
   ============================================================ */
.hero-about {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 60px;
}

.left-about {
  flex: 1;
  max-width: 480px;
}

/* Your design shows "MORE THAN INK." and "IT'S ART." as two lines
   of the SAME visual heading, even though they're separate <h1>
   and <h2> tags in your HTML. Rather than fight that, I just style
   them identically as a pair — the browser doesn't care that
   they're different tag types, only that they look the same. */
.left-about h1,
.left-about h2 {
  font-size: 40px;
  line-height: 1.15;
  margin: 0;
}

/* The small gold dash under "IT'S ART" — generated with ::after
   instead of an <hr> or empty <div> in your HTML, since it's pure
   decoration with no content of its own. Keeping decoration in CSS
   (rather than adding markup for it) means your HTML stays about
   content, and this line will never accidentally get read aloud
   by a screen reader as if it meant something. */
.left-about h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  background-color: #C9A227;
  margin-top: 20px;
  margin-bottom: 24px;
}

.left-about .description {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: #B9B3A8;
  margin-bottom: 8px;
}

/* 4 icon+label items in a row. grid instead of flex here because
   grid's repeat() gives four EQUAL columns with one line of code —
   with flex you'd need flex:1 on every .about-box AND still handle
   wrapping yourself. Grid is just the right tool for "even columns." */
.about-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
  max-width: 460px;
}
.sub{
    color:#C9A227;
}
/* This targets an <i> icon tag inside .about-box — but your HTML
   doesn't have one yet (each .about-box only has a <p class="text">).
   I'm styling it now so it's ready the moment you add the markup;
   see the note below the code for exactly what to add and why. */
.about-box i {
  display: block;
  font-size: 35px;
  color: #C9A227;
  margin-bottom: 10px;
  
}

.about-box .text {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D8D3C9;
}

/* ============================================================
   RIGHT SIDE — studio photo with the "INK. TATTOO STUDIO"
   watermark overlaid on top
   ============================================================ */
.right-about {
  position: relative; /* anchors the ::before/::after text below */
  flex: 1;
  min-height: 660px;
  border-radius: 8px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(14,14,14,0.4), rgba(14,14,14,0.55)),
    url("images/about.jpg");
  background-size: cover;
  background-position: center;
  padding-bottom:100px;
}

/* Your <img src=""> has an empty source, which would otherwise show
   a small broken-image icon in the corner. Hiding it and using a CSS
   background-image instead (above) sidesteps that entirely. */
.right-about img {
  display: none;
}

/* I'm hardcoding "INK." / "TATTOO STUDIO" directly in the CSS via
   content: rather than asking you to add markup for it — unlike the
   about-box icons, this text isn't a guess about content you might
   want; it's your own studio name, which is already confirmed
   elsewhere in your HTML (the header logo). Safe to bake in. */
.right-about::before {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -130%);
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
  font-weight: 700;
  color: #F5F1E8;
}

.right-about::after {
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 20%);
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  letter-spacing: 0.35em;
  color: #F5F1E8;
}

/* ============================================================
   STATS ROW
   ============================================================ */
.second-about-cont {
  display: flex;
  justify-content: space-around;
  padding: 50px 60px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  
}

.plus-box .big-txt {
  font-family: 'Oswald', sans-serif;
  font-size: 69px;
  font-weight: 600;
  color: #C9A227;
  margin-bottom: 8px;
}

.plus-box .big-description {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B9B3A8;
}

@media (max-width: 900px) {
  .hero-about { flex-direction: column; padding: 40px 24px; }
  .left-about { max-width: 100%; }
  .about-boxes { grid-template-columns: repeat(2, 1fr); }
  .second-about-cont { flex-wrap: wrap; gap: 30px; padding: 40px 24px; }
}
.hero-portfolio {
 
  position: relative; /* not strictly required for background-image
                          itself, but good practice to add now in case
                          you later want to position anything else
                          (like a badge or icon) inside this section */
  text-align: center;
  padding: 150px 100px 140px;
  background-image:
    linear-gradient(rgba(14,14,14,0.75), rgba(14,14,14,0.85)),
    url("images/portfolio-hero.jpg");
  background-size: cover;
  background-position: center;
}


.portfolio-sub {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 12px;
}

.hero-portfolio h1 {
  font-size: 60px;
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

/* small centered underline beneath "PORTFOLIO" — same technique
   as the gold dash on the About page, just centered here instead
   of left-aligned, since ::after inherits text-align from its
   parent by default */
.hero-portfolio h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 3px;
  background-color: #C9A227;
}

.hero-portfolio .description {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #B9B3A8;
  max-width: 360px;
  margin: 0 auto;
}

.portfolio-grid {
  display: grid;
  
  grid-template-columns: repeat(5, 1fr);
  gap: 10px; /* the thin dark seams between photos in your design */
  padding: 0 60px;
}

.portfolio-grid img {
  width: 100%;
  height: 260px;
 border-radius:4px;  
  object-fit: cover; /* crops each photo to a uniform height without
                  distorting it, same reasoning as the earlier
                          gallery-row fix */
  filter: grayscale(15%) brightness(0.9); /* nudges the photos toward
                          the moody, slightly desaturated look in your
                          reference rather than raw full-color camera
                          shots */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.portfolio-grid img:hover {
  transform: scale(1.03);
  filter: grayscale(0%) brightness(1);
}
.portfolio-button {
  text-align: center; /* text-align centers inline and inline-flex
                          children — it works here specifically
                          because .appointment-btn is inline-flex,
                          not because of anything on the button itself */
  margin: 50px 0; /* moved your vertical spacing here instead */
}

.appointment-btn {
  background: transparent;
  border: 1px solid #C9A227;
  color: #C9A227;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 20px 35px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius:8px;
}
.appointment-btn:hover {
  background-color: #C9A227;
  color: #0E0E0E;
}

@media (max-width: 900px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-portfolio { padding: 50px 24px 20px; }
  .portfolio-filters, .load-more-wrap { padding-left: 24px; padding-right: 24px; }
  .portfolio-grid { padding: 0 24px; }
}

/* ============================================================
   PRICING HERO
   Same overlay technique as the Portfolio hero, but left-aligned
   text this time instead of centered — text-align isn't set on
   .pricing-text at all, which is intentional: it just inherits
   the page's natural left alignment, no rule needed.
   ============================================================ */
.pricing-hero {
  position: relative;
  padding: 170px 60px 140px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(14,14,14,0.55) 0%,
      rgba(14,14,14,0.85) 55%,
      #0E0E0E 85%
    ),
    url("images/pricing-hero.jpg");
  background-size: cover;
  background-position: center top;
  /* the gradient fades to a FULLY SOLID #0E0E0E (your page background
     color, not just a dark rgba) by 85% down the section — that's what
     makes the price cards below sit on what looks like plain page
     background instead of a visible photo edge, even though technically
     they're still inside this same section. */
}

.pricing-text h1 {
  font-size: 58px;
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
  margin-bottom: 14px;
}

.pricing-text h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 46px;
  height: 3px;
  background-color: #C9A227;
}

.pricing-text .description {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: #B9B3A8;
  max-width: 480px;
  margin-bottom: 50px;
}

/* ============================================================
   PRICE CARDS
   ============================================================ */
.pricing-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top:80px;
  margin-bottom:10px;
  
}

.price-box {
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 4px;
  padding: 160px 24px;
  text-align: center;
background-color:#0E0E0E;
}
.price-box:hover{
    transform: scale(1.04);
    cursor: pointer;
}



.price-box .main {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 16px;
  font-weight:700
}


/* .price-image is really just a row for "$" + the number, not an
   actual image — the class name is misleading but I'm working with
   what's in your HTML rather than renaming things without asking. */
.price-image {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 16px;
}

.price-icon {
  font-size: 20px;
  font-weight: 600;
  color: #F5F1E8;
  margin-top: 6px; /* nudges the "$" down to align with the number's
                        baseline instead of its top, since the number
                        below is set at a much larger font-size */
}

.price {
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #F5F1E8;
  line-height: 1;
}

.price-description {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #B9B3A8;
  width:100%;
  max-width:260px;
  margin:0 auto;
}

/* ============================================================
   HOURLY RATE BAR
   ============================================================ */
.pricing-second {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 20px 60px ;
  padding: 50px 32px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
}

/* Same situation as the price-box icons above: your screenshot shows
   a small circled "i" info icon before "Hourly rate", but there's no
   <i> tag for it in .secong-box-left. Styling it here so it's ready
   once you add: <i class="fa-regular fa-circle-info"></i> right
   before the <p class="bigger-text">. */
.secong-box-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.secong-box-left i {
  font-size: 20px;
  color: #C9A227;
  flex-shrink: 0; /* stops the icon from getting squeezed narrower if
                       the text next to it is long — flex items shrink
                       by default to fit the row, and a circular icon
                       looks distorted if that happens */
}

.bigger-text {
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  color: #F5F1E8;
  margin-bottom: 2px;
}
.secong-box-left .description {
  font-size: 15px;
  font-weight: 300;
  color: #8F887E;
}

.appointment-btn {
  background-color: #C9A227;
  color: #0E0E0E;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 2px;
  white-space: nowrap; /* keeps "Book a Consultation" on one line even
                            if the flex row above gets squeezed on
                            smaller screens */
}

/* ============================================================
   FOOTNOTE
   ============================================================ */
.under-desc {
  text-align: center;
  font-size: 15px;
  font-style: italic;
  color: #6E685F;
  padding: 24px 60px 60px;
}

@media (max-width: 900px) {
  .pricing-hero { padding: 50px 24px 30px; }
  .pricing-boxes { grid-template-columns: repeat(2, 1fr); }
  .pricing-second { margin: 40px 24px 0; flex-direction: column; align-items: flex-start; }
  .under-desc { padding: 20px 24px 50px; }
}
/* ============================================================
   CONTACT HERO — text/info left, form right
   Same two-column pattern as your About page, reused here for
   consistency across the site.
   ============================================================ */
.contact-hero {
  display: flex;
  gap: 60px;
  padding: 60px;
}

.left-contact {
  flex: 1;
  max-width: 460px;
}

.contact-hero h1 {
  font-size: 50px;
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
  margin-bottom: 10px;
}

/* same gold underline trick as the Portfolio/Pricing h1s — kept
   as its own rule here (not merged with those) because each page's
   h1 needs a DIFFERENT font-size, and ::after has no way to
   "inherit" a sibling rule's specific pixel value automatically */
.contact-hero h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 46px;
  height: 3px;
  background-color: #C9A227;
}

.left-contact .description {
  font-size: 15px;
  font-weight: 300;
  color: #B9B3A8;
  line-height: 1.7;
  margin-bottom: 36px;
}

.contact-box {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Each .contact row is icon + (label stacked above value). flex-start
   instead of center for align-items, because the address entry wraps
   onto 3 lines while the others are single-line — center would look
   fine for the short ones but would vertically misalign the icon
   next to a multi-line address specifically. flex-start keeps every
   icon level with the TOP line regardless of how tall the text gets. */
.contact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Styling this now even though the <i> tag doesn't exist in your
   HTML yet — see the note below the code for exactly what to add.
   Once you add it, this rule makes it instantly match: gold color,
   fixed size so all 4 icons line up regardless of which Font Awesome
   icon you pick (a wide one like the map pin vs a narrow one like
   the envelope would otherwise sit at slightly different visual
   widths). */
.contact i {
  font-size: 16px;
  color: #C9A227;
  width: 20px;
  margin-top: 3px;
  text-align: center;
}

.big-contact {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 4px;
}

.contact-address {
  font-size: 15px;
  font-weight: 300;
  color: #D8D3C9;
  line-height: 1.5;
}

/* ============================================================
   CONTACT FORM
   Your design shows outlined fields on the dark background —
   NOT a white card like your reference had for a different site.
   So instead of a background-color + box-shadow card wrapper
   (which is what a light-theme form usually gets), each input
   just gets its own subtle border, and the form itself stays
   transparent to let the page's dark background show through.
   ============================================================ */
.right-contact {
  flex: 1;
}

.right-contact form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Name + Email need to sit side by side per your screenshot, but
   your HTML doesn't wrap them in a shared row div — rather than
   asking you to add one, :nth-child targets the 1st and 2nd
   .form-group directly and turns THIS PAIR into its own mini flex
   row, without touching the HTML at all. */
.right-contact form > .form-group:nth-child(1),
.right-contact form > .form-group:nth-child(2) {
  display: inline-flex;
  flex-direction: column;
  width: calc(50% - 9px); /* half the row minus half the 18px gap,
                              so the two boxes plus the gap between
                              them add up to exactly 100% */
}

/* Wrapping the first two .form-groups so they sit on one visual
   row requires a flex container around THEM specifically — but
   again, no extra div exists for that in your HTML. Targeting the
   form itself with flex-wrap achieves the same effect: the first
   two items are set to ~50% width above, so they wrap onto one
   row together, then the next .form-group (100%-width, no override)
   naturally drops to its own new row below. */
.right-contact form {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.form-label {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8F887E;
  margin-bottom: 8px;
  display: block;
}

.form-input {
  width: 70%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 14px 16px;
  color: #F5F1E8;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease;
}

/* Focus state matters more on a dark form than a light one — with
   no visible background change on click, the ONLY feedback a user
   gets that they're in the right field is the border color, so
   this isn't just decorative, it's the primary usability cue here. */
.form-input:focus {
  border-color: #C9A227;
}

.form-input::placeholder {
  color: #6E685F;
}

textarea.form-input {
  min-height: 100px;
  resize: none; /* stops users dragging the box into a weird shape
                    that could overflow the form's fixed-width column */
}

.form-submit {
  align-self: flex-start; /* without this, the button (a flex child
                              of the form) would stretch to the FULL
                              form width by default, since flex items
                              stretch to fill the cross-axis unless
                              told otherwise */
  background-color: #C9A227;
  color: #0E0E0E;
  border: none;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.form-submit:hover { opacity: 0.85; }

/* ============================================================
   MAP + STUDIO HOURS ROW
   ============================================================ */
.second-contact {
  display: flex;
  margin-top: 20px;
  margin-bottom:80px;
}

.left-second-contact {
  flex: 1;
  height: 340px;
}

.left-second-contact iframe {
  width: 80%;
  height: 100%;
  border: none;
  display: block;
  /* Google's embed map is bright by default and would look jarring
     dropped into an all-black page. This filter combo is a common
     trick for faking a "dark mode" map from a normal light embed:
     grayscale removes the map's own colors, invert flips light
     areas to dark (roads/land go dark, water/labels go light),
     and contrast pulls it back from the slightly washed-out look
     that grayscale+invert alone tends to produce. */
  filter: grayscale(1) invert(0.9) contrast(0.85);
}

.right-second-contact {
  width: 500px;
  flex-shrink: 0; /* prevents this sidebar from getting squeezed
                       narrower if the map content pushes on it —
                       without this, flex would treat 300px as just
                       a suggestion, not a floor */
  background-color: #0E0E0E;
  border-left: 1px solid rgba(255,255,255,0.08);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right:100px;

}

.right-second-contact .sub {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 20px;

}

.days-hours {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.days-hours:last-child { border-bottom: none; }

.days-hours .days {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #D8D3C9;
}
.days-hours .hours {
  font-size: 15px;
  color: #8F887E;
}

@media (max-width: 900px) {
  .contact-hero { flex-direction: column; padding: 40px 24px; }
  .left-contact { max-width: 100%; }
  .right-contact form > .form-group:nth-child(1),
  .right-contact form > .form-group:nth-child(2) {
    width: 100%; /* stacks Name/Email back into one column each
                     on narrow screens instead of squeezing two
                     half-width fields into a phone-width form */
  }
  .second-contact { flex-direction: column; }
  .right-second-contact {
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

header {
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 20px 24px;
}
header nav {
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* .right-about has min-height:660px with no mobile override — once
   .hero-about stacks to a single column, that's a lot of empty
   photo space on a phone screen. */
.right-about {
  min-height: 320px;
  padding-bottom: 0;
}
/* ============================================================
   HOME HERO
   min-height:900px + h1 at 70px are desktop-scale values; on a
   phone this would push most of the page below the fold before
   any content is visible.
   ============================================================ */
.hero {
  min-height: 70vh;
}
.hero h1 {
  font-size: 40px; /* was 70px */
  max-width: 100%;
}
.hero .description {
  max-width: 100%;
}
.hero-btns {
  flex-direction: column;
}

/* ============================================================
   RECENT WORK GALLERY
   5 images at flex:1 would squeeze to roughly 60-70px wide each
   on a phone screen — nowhere near enough to see any detail in a
   tattoo photo. 2-column grid keeps them recognizable.
   ============================================================ */
.work {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-left:30px;
}
.work img {
  width: 100%;   /* add this */
  height: 200px;
  object-fit: cover;
}
.third-cont {
  padding: 50px 24px 40px;
}
.work-last {
  grid-column: 1 / -1; /* spans both columns instead of sitting in
                            just the first one */
  width: 50%;           /* keeps it visually the same size as its
                            siblings instead of stretching edge to
                            edge across the full row */
  margin: 0 auto;        /* centers it within that spanned row */
}
.price-box {
  padding: 48px 24px;
}
}