.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */<div class="sc-hero" style="--sc-hero-image:url('/wp-content/uploads/hero.jpg');">
  <div class="sc-wrap">
    <div class="sc-eyebrow">Industrial photography studio</div>
    <h1 class="sc-h1">Documenting Industry. Clearly.</h1>
    <p class="sc-lead">Visual documentation for logistics, manufacturing, maritime and energy operations.</p>
    <div class="sc-actions">
      <a class="sc-btn sc-btn--primary" href="/projects">View Projects</a>
      <a class="sc-btn" href="/contact">Start a Project</a>
    </div>
  </div>
</div>

<section class="sc-section">
  <div class="sc-wrap">
    <h2 class="sc-h2">Selected Projects</h2>
    <p class="sc-sub">A selection of recent work in complex industrial environments.</p>

    <div class="sc-grid">
      <a class="sc-card" href="/projects/neptun-deep-platform-arrival">
        <img src="/wp-content/uploads/projects/neptun/cover.jpg" alt="Neptun Deep Platform Arrival">
        <div class="sc-card__overlay"></div>
        <div class="sc-card__meta">
          <h3 class="sc-card__title">Neptun Deep Platform Arrival</h3>
          <div class="sc-card__tag"><span class="sc-dot"></span> Energy · Maritime</div>
        </div>
      </a>

      <a class="sc-card" href="/projects/port-automotive-logistics">
        <img src="/wp-content/uploads/projects/port/cover.jpg" alt="Port Automotive Logistics">
        <div class="sc-card__overlay"></div>
        <div class="sc-card__meta">
          <h3 class="sc-card__title">Port Automotive Logistics</h3>
          <div class="sc-card__tag"><span class="sc-dot"></span> Logistics · Maritime</div>
        </div>
      </a>
    </div>
  </div>
</section>

<section class="sc-section">
  <div class="sc-wrap">
    <h2 class="sc-h2">Industries</h2>
    <p class="sc-sub">We work where operations are complex and clarity matters.</p>
    <div class="sc-actions">
      <span class="sc-btn">Logistics</span>
      <span class="sc-btn">Manufacturing</span>
      <span class="sc-btn">Energy</span>
      <span class="sc-btn">Maritime</span>
    </div>
  </div>
</section>

<section class="sc-section">
  <div class="sc-wrap">
    <div class="sc-cta">
      <h2 class="sc-h2">Planning a project?</h2>
      <p class="sc-sub">Send a short brief. We’ll confirm availability and propose a clear workflow.</p>
      <div class="sc-actions">
        <a class="sc-btn sc-btn--primary" href="/contact">Contact Studio Claro</a>
      </div>
    </div>
  </div>
</section>/* End custom CSS */