/* ==========================================================
   index.css — Home page ONLY  (style.css loads first)
   ==========================================================

   Sections:
   1. Hero (shapes + h1 + subtitle)
   2. Hero image (photo + red bottom bar)
   3. Service tags
   4. Case story panels (white bg + red bg)
   5. Open calendar quote
   ========================================================== */

/* ── 1. HERO ─────────────────────────────────────────────── 
   Screenshot (hero.jpg):
   · White background, plenty of vertical space
   · 6 floating coloured shapes scattered (exact positions below)
   · H1: large bold "Adorable stories. Consistent growth. / 
         Strategies that scale."
   · Subtitle: small grey "We mean it, and we did it well"
   ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
  text-align: center;
  overflow: hidden;
  min-height: 360px;

  display: flex;
  align-items: center;
}
/* Shapes container */
.hero-shapes .shape{
  transform:none;
}
/* Override shared .shape positions for hero specifically */
.hero-shapes .sh-blob { top: -50px; left: calc(50% - 340px); }

.hero-shapes .sh-cp { top: 150px; left: calc(50% - 310px); }

.hero-shapes .sh-sq { top: 60px; left: calc(50% - 380px); }

.hero-shapes .sh-tri { top: -60px; left: calc(50% + 260px); }

.hero-shapes .sh-cg { top: 60px; left: calc(50% + 340px); }

.hero-shapes .sh-dia { top: 160px; left: calc(50% + 270px); }

.hero-content {
  position: relative;
z-index: 2;
  max-width: 700px;
  margin-inline: auto;
  padding-inline: var(--px);
  
}
.hero-h1 {
  font-size: 34px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: .85rem;
}
.hero-sub {
  font-size: 20px;
  font-weight: 600;
  color: var(--black);
}

/* ── 2. HERO IMAGE SECTION ───────────────────────────────── 
   Screenshot (hero-image-section.jpg):
   · White bg on left & right sides (container padding)
   · Photo is full width within container
   · THICK RED BAR at bottom — spans full viewport width,
     sits behind the bottom edge of the image
   ──────────────────────────────────────────────────────── */
.hero-img-section {
  position: relative;
  padding-bottom: 0;
}

.hero-img-section::after {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.hero-img-section::after {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 580;
  background: var(--red);
}

@media (max-width:640px){

  
.hero-img-section::after{
  aspect-ratio:1440/750;
}

}

.hero-img-wrap {
  width: 100%;
  padding-left: 80px;
  padding-right: 80px;
  margin-bottom: 0;
}

@media (max-width:640px){

.hero-img-wrap{
  padding-left:16px;
  padding-right:16px;
}

}

.hero-img-wrap img {
  width: 100%;
  aspect-ratio: 1280 / 720;
  object-fit: cover;
  display: block;
}

/* ── 3. SERVICE TAGS ─────────────────────────────────────── 
   Screenshot (services.jpg):
   · 2 rows, centred
   · Row 1: outdoor  [corporate]  social  [digital-marketing]
   · Row 2: indoor  [retail]  user experience  [exhibition]
   · [] = bold red, others = normal black weight
   · Generous gap between items, comfortable line height
   ──────────────────────────────────────────────────────── */
.tags-section {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.tags-wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0px 16px;
  max-width:550px;
  margin-inline:auto;
}
.tag {
   font-size: 24px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: .01em;
}
.tag-red {
  color: var(--red);
  font-weight: 700;
}

/* ── 4. CASE STORY PANELS ────────────────────────────────── 
   Two panels stacked, no gap between them.

   PANEL A — white background (case_study_1.jpg):
   · Left: thin column with vertical line + "CASE STUDY" rotated text
   · Right: photo fills available width (container-padded right side)
   · "Read more" white-bg box sits absolute bottom-right on photo

   PANEL B — red background (case_study_2.jpg):
   · Same left label treatment (but label lighter colour)
   · Photo is centred with padding all sides
   · "Read more" white box same position
   ──────────────────────────────────────────────────────── */
.case-panels { background: var(--white); }
.case-panel  { position: relative; }

.case-panel-inner{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:clamp(260px,55vw,580px);
}

/* Left label column */
.case-label-col{
  position:absolute;
  left:32px;
  top:50%;
  transform:translateY(-50%);
  width:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
  z-index:2;
}
.case-label-line {
  width: 1px;
  height: 28px;
  background: currentColor;
  opacity: .4;
}
.case-label-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 10px;
}
/* Photo column */
.case-photo-col{
  width:100%;
  position:relative;
  overflow:hidden;
}

/* PANEL A — white bg */
.case-panel-white {
  background: var(--white);
}
.case-panel-white .case-photo-col {
  padding: 0;
}
.case-panel-white .case-label-text { color: var(--grey-text); }

/* PANEL B — red bg */
.case-panel-red {
  background: var(--red);
}
.case-panel-red .case-photo-col {
  padding: 0;
}
.case-panel-red .case-label-text { color: rgba(255,255,255,.6); }
.case-panel-red .case-label-line { background: rgba(255,255,255,.4); opacity: 1; }

/* The actual photo */
.case-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Read more" white box — bottom right of photo area */
.case-readmore {
  position: absolute;
  bottom: clamp(1.5rem, 3vw, 3rem);
  right: var(--px);
  background: var(--white);
  color: var(--black);
  font-size: .82rem;
  font-weight: 600;
  padding: .55rem 1.2rem;
  letter-spacing: .02em;
  transition: background .2s, color .2s;
  z-index: 2;
}
.case-readmore:hover { background: var(--black); color: var(--white); }

/* ── 5. OPEN CALENDAR QUOTE ──────────────────────────────── 
   Screenshot (services-1.jpg bottom area):
   · White bg, generous vertical padding
   · Bold black paragraph, centred, no title above it
   · ~700px max-width
   ──────────────────────────────────────────────────────── */
.open-cal {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}
.open-cal-text {
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  color: var(--black);
  line-height: 1.65;
  max-width: 550px;
  margin-inline: auto;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .case-label-col{
  left:0px;
}
  .case-label-col { width: 38px; }
  .case-label-text { font-size: .54rem; letter-spacing: .16em; }
  .hero-img-wrap img { max-height: 360px; }
}
@media (max-width: 520px) {

.hero-content {
  padding-left: 20px;
  padding-right: 20px;
}

  .hero-h1 br {
  display: none;
}
   .hero-h1 { font-size: 1.75rem; }
  .case-label-col { width: 30px; }

  .case-panel-white .case-photo-col,
  .case-panel-red .case-photo-col {
    padding-inline: 0;
  }

  .hero-img-section::after { height: 80px; }
}

@media (max-width: 900px){

.hero-img-section::after { height: 150px; }

  .hero-shapes .shape{
  transform: scale(0.8);
  transform-origin: center;
}

.hero-shapes .sh-blob { top: -40px; left: 5%; }

.hero-shapes .sh-sq { top: -80px; left: 47%; }

.hero-shapes .sh-tri { top: -40px; left: 85%; }

.hero-shapes .sh-cp { top: 120px; left: 5%; }

.hero-shapes .sh-cg {
  top: auto;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-shapes .sh-dia { top: 120px; left: 85%; }

}