/* DUTCH DESIGN AGENCY — industry.css
   Industry + location landing template (fashion/beauty/lifestyle,
   doha/riyadh/zurich): hero (serif-accent title + subtitle + 16:9 media) ->
   black Services (3 pillars: title + copy + service list -> hubs) -> black
   Selected Projects (4 cards) -> offwhite service grid (title + copy + get-in-
   contact) -> offwhite showcase (3 captioned images) -> Let's Talk -> clients
   marquee -> Insights (3 cards) -> footer.js start band.
   Loaded after base.css / nav.css / footer.css. */

/* ---- Hero --------------------------------------------------------------- */
.sec-head { padding: calc(var(--nav-h) + var(--s-md)) var(--gutter) var(--s-30); }
.sec-title { font-size: var(--fs-2xl); font-weight: 300; line-height: 1.02; }
.sec-title em, .sec-title .serif { font-family: var(--ff-serif); font-style: italic; }
.sec-subtitle { font-size: var(--fs-sm); line-height: 1.4; color: var(--grey); padding-top: var(--s-3xs); max-width: 80ch; }
.sec-hero { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dgrey); }
.sec-hero img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .sec-title { font-size: var(--fs-lg); } }

/* ---- Services (black, 3 pillars) ---------------------------------------- */
.sec-services { background: var(--black); color: var(--white); padding: var(--s-xl) 0; }
.sec-services .spread { display: flex; justify-content: space-between; margin-bottom: var(--s-md); }
.sec-services .eyebrow { color: var(--white); }
.sec-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md); }
.sec-pillar > a { display: inline-block; }
.sec-pillar h2 { font-size: var(--fs-sm); font-weight: 500; margin-bottom: 0.75rem; }
.sec-pillar-desc { font-size: var(--fs-xs); line-height: 1.6; color: var(--white); margin-bottom: var(--s-sm); }
.sec-pillar-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.5rem 0; border-top: var(--rule-light); font-size: var(--fs-xs);
}
.sec-pillar-list a:last-child { border-bottom: var(--rule-light); }
.sec-pillar-list img { width: 1rem; height: 1rem; transition: transform 0.3s var(--ease-out); }
.sec-pillar-list a:hover img { transform: translateX(0.35rem); }
@media (max-width: 767px) { .sec-pillars { grid-template-columns: 1fr; gap: var(--s-md); } }

/* ---- Selected projects (black, 4 cards) --------------------------------- */
.sec-projects { background: var(--black); color: var(--white); padding: 0 0 var(--s-xl); }
.sec-projects .spread { display: flex; justify-content: space-between; margin-bottom: 1.75rem; padding: var(--s-md) var(--gutter) 0; }
.sec-projects .eyebrow { color: var(--white); }
.sec-proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; padding: 0 var(--gutter); }
.sec-proj-card { display: block; color: var(--white); }
.sec-proj-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--dgrey); }
.sec-proj-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.sec-proj-card:hover .sec-proj-media img { transform: scale(1.03); }
.sec-proj-card h2 { font-size: var(--fs-xs); font-weight: 300; text-transform: uppercase; margin: 1rem 0 0.25rem; }
.sec-proj-card h3 { font-size: var(--fs-xs); font-weight: 300; line-height: 1.4; color: var(--grey); }
@media (max-width: 767px) { .sec-proj-grid { grid-template-columns: 1fr; } }

/* ---- Service grid (offwhite rows) --------------------------------------- */
.sec-grid { padding: var(--s-xl) var(--gutter) var(--s-md); }
.sec-grid-row {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-md);
  align-items: start; padding: var(--s-md) 0; border-top: var(--rule-dark);
}
.sec-grid-row:last-child { border-bottom: var(--rule-dark); }
.sec-grid-row h3 { font-size: var(--fs-lg); font-weight: 300; line-height: 1.05; }
.sec-grid-right { display: flex; flex-direction: column; gap: var(--s-sm); }
.sec-grid-right p { font-size: var(--fs-xs); line-height: 1.6; }
.sec-grid-more { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); align-self: flex-start; }
.sec-grid-more img { width: 1rem; height: 1rem; transition: transform 0.3s var(--ease-out); }
.sec-grid-more:hover img { transform: translateX(0.35rem); }
@media (max-width: 767px) { .sec-grid-row { grid-template-columns: 1fr; gap: var(--s-2xs); } .sec-grid-row h3 { font-size: var(--fs-md); } }

/* ---- Showcase (offwhite, 3 captioned images) ---------------------------- */
.sec-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; padding: var(--s-md) var(--gutter) var(--s-xl); }
.sec-shot-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: #e9e6df; }
.sec-shot-media img { width: 100%; height: 100%; object-fit: cover; }
.sec-shot .cat { font-size: var(--fs-2xs); text-transform: uppercase; color: var(--grey); margin: 1rem 0 0.25rem; }
.sec-shot h3 { font-size: var(--fs-xs); font-weight: 300; line-height: 1.4; }
@media (max-width: 767px) { .sec-showcase { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- Let's Talk (offwhite) ---------------------------------------------- */
.sec-cta { padding: var(--s-md) var(--gutter) var(--s-xl); }
.sec-cta-inner { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: var(--s-md); align-items: start; }
.sec-cta h2 { font-size: var(--fs-md); font-weight: 300; line-height: 1.05; }
.sec-cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: var(--s-sm); }
.sec-cta-info { font-size: var(--fs-2xs); line-height: 1.7; }
.sec-cta-info a:hover { color: var(--grey); }
.sec-cta-info .sec-cta-newbiz { margin-top: 1rem; }
.sec-cta-media { border-radius: var(--radius); overflow: hidden; background: #e9e6df; aspect-ratio: 1 / 1; max-width: 22rem; margin-left: auto; }
.sec-cta-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .sec-cta-inner { grid-template-columns: 1fr 1fr; } .sec-cta-media { grid-column: 1 / -1; aspect-ratio: 16 / 9; max-width: none; margin: 0; order: 3; } }
@media (max-width: 767px) { .sec-cta-inner { grid-template-columns: 1fr; } }

/* ---- Insights (black, 3 cards) ------------------------------------------ */
.sec-insights { background: var(--black); color: var(--white); padding: var(--s-xl) var(--gutter); }
.sec-insights .spread { display: flex; justify-content: space-between; margin-bottom: 1.75rem; }
.sec-insights .eyebrow { color: var(--white); }
.sec-ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.sec-ins-card { display: block; color: var(--white); }
.sec-ins-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--dgrey); }
.sec-ins-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.sec-ins-card:hover .sec-ins-media img { transform: scale(1.04); }
.sec-ins-cat { font-size: var(--fs-xs); margin: 1.4rem 0 0.4rem; color: var(--grey); }
.sec-ins-title { font-size: 1.5rem; font-weight: 300; line-height: 1.35; }
@media (max-width: 767px) { .sec-ins-grid { grid-template-columns: 1fr; } }