/* =========================================================
       ROOT
    ========================================================= */

    :root {
      --bg: #f7f7f2;
      --ink: #050b0b;
      --muted: #5f6964;

      --orange: #ed592f;

      --science: #2c9b64;
      --science-dark: #135637;

      --food: #E55820;
      --food-light: #F47A4B;
      --food-dark: #F47A4B;

      --estate: #BA8C52;
      --estate-dark: #B08858;

      --line: rgba(201,214,221,0.4);

      --panel-radius: 30px;
      --image-radius: 28px;

      --ease: cubic-bezier(.2,.75,.2,1);

      --page-gap: clamp(24px, 3vw, 56px);
    }


    /* =========================================================
       RESET
    ========================================================= */

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    html,
    body,
    button,
    input,
    textarea,
    select,
    a,
    p,
    span,
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: "Inter", sans-serif;
    }

    body {
      margin: 0;

      min-height: 100vh;

      overflow-x: hidden;

      background: var(--bg);
      color: var(--ink);

      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
       
       background-image: url("fowm-bg1.png");
       background-repeat: no-repeat; 

	    /* Center the image horizontally and vertically */
	    background-position: center; 

	    /* Scale the image to completely fill the element without distorting */
	    background-size: cover; 

	    /* Optional: Keep background fixed in place while scrolling */
	    background-attachment: fixed; 
    }

    a {
      color: inherit;
    }


    /* =========================================================
       PAGE
    ========================================================= */

    .page {
      width: min(
        1840px,
        calc(100% - (var(--page-gap) * 2))
      );

      margin-inline: auto;
      min-height: 100vh;

    }


    /* =========================================================
       HEADER
       MORE SPACE BELOW
    ========================================================= */

    .site-header {
      width: 100%;

      display: flex;
      align-items: center;

      min-height: 112px;

      padding-top: 22px;

      /* More breathing room before hero */
      padding-bottom: 48px;

      position: relative;

      z-index: 20;
    }

    .brand {
      display: inline-flex;

      align-items: center;

      text-decoration: none;
    }

    .brand-logo {
      display: block;

      width: 68px;

      height: auto;

      object-fit: contain;

      transition:
        transform .3s var(--ease),
        opacity .3s ease;
    }

    .brand:hover
    .brand-logo {
      transform:
        translateY(-2px);

      opacity: .9;
    }


    /* =========================================================
       HERO
    ========================================================= */

    .hero {
      width: 100%;

      display: grid;

      grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

      /* column-gap:
        clamp(
          48px,
          5vw,
          96px
        ); */

      align-items: stretch;
      padding-bottom: 0px;
      
      
     
    }


    /* =========================================================
       HERO LEFT
    ========================================================= */

    .hero-left {
      min-width: 0;
      display: flex;
      align-items: flex-start;
     
    }
    
    .hero-left .txt {
      
       
      margin-top: 25px;
      color: #003B74;
      line-height: 1.42;
      letter-spacing: -.022em;
      font-weight: 400;
      font-size:
        clamp(
          1.36rem,
          1vw,
          1.2rem
        );
       
    }


    /* =========================================================
       HERO TITLE
    ========================================================= */

    .hero-title {
      margin: 0;
      margin-top:50px;
      color: #003B74;
      font-weight:800;
      font-size:
        clamp(
          5rem,
          4vw,
          4.25rem
        );

      line-height: 1.04;

      letter-spacing: -.055em;
   

		/* white-space: nowrap; */
      

    }

    .hero-title
    .word {
      display: block;
    }

    .hero-title .first-letter {
     color:#003B74;
    
    }


    /* =========================================================
       HERO RIGHT
    ========================================================= */

    .hero-right {
      min-width: 0;

      display: grid;

      grid-template-rows:
        minmax(0,1fr)
        auto;

      gap: 28px;

      align-self: stretch;

      padding-top: 0;

      padding-right: 2px;
    }


    /* =========================================================
       IMAGE PLACEHOLDER
    ========================================================= */

    .hero-image-placeholder {
      /*width: 100%;
      height: 100%;
      min-height: 0;*/
     
      height: 480px;
      overflow: hidden;
      
      display: flex;
      align-items: center;
      justify-content: center;
      
      border: none;
      border-radius: var(--image-radius);
      color: #003B74;

      font-size:
        clamp(
          1.55rem,
          2vw,
          2.35rem
        );

      font-weight: 800;
      letter-spacing: -.045em;
    }


    /* =========================================================
       REAL IMAGE VERSION
    ========================================================= */

    .hero-image {
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      border-radius:var(--image-radius);
    }

    .hero-image img {
      width: 100%;

      height: 100%;

      display: block;

      object-fit: cover;
    }


    /* =========================================================
       HERO DESCRIPTION
    ========================================================= */

    .hero-description {
      margin: 0;

      padding: 0;
    }

    .hero-description p {
      margin: 0;

      width: 100%;

      color: #003B74;
      
      line-height: 1.42;

      letter-spacing: -.022em;

      font-weight: 400;

      font-size:
        clamp(
          .96rem,
          1.02vw,
          1.1rem
        );

      
    }


    /* =========================================================
       BUSINESS SEGMENTS HEADING
       MORE SPACE ABOVE
    ========================================================= */

    .segments-heading {
      width: 100%;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 22px;
      text-align: center;
/* 
      margin:
        64px
        auto
        20px; */
        
     
    }

    .segments-heading p {
      margin-bottom:0px;

      color: #003B74;

      font-size:
        clamp(
          3rem,
          2.35vw,
          2.45rem
        );

      font-weight: 700;

      line-height: 1.3;

      letter-spacing: -.03em;

      white-space: nowrap;
    }

    .segments-line {
      display: block;

      width:
        clamp(
          48px,
          5vw,
          90px
        );

      height: 1px;

      flex:
        0 0
        clamp(
          48px,
          5vw,
          90px
        );

      background: #a9aca7;
    }


    /* =========================================================
       ACCORDION
    ========================================================= */

    .portal {
      width: 100%;

      height:
        min(
          590px,
          62vh
        );

      min-height: 500px;

      display: flex;

      gap: 14px;

      margin-bottom: 42px;
    }


    /* =========================================================
       PANEL
    ========================================================= */

    .panel {
      --accent: #777;
      --accent-dark: #333;

      --mouse-x: 50%;
      --mouse-y: 50%;

      position: relative;

      flex: 1 1 0;

      min-width: 0;

      overflow: hidden;

      isolation: isolate;

      cursor: pointer;

      border-radius:
        var(--panel-radius);

      color: #fff;

      transition:
        flex .8s var(--ease),
        transform .3s ease,
        filter .4s ease,
        box-shadow .4s ease;

      box-shadow:
        0 18px 48px
        rgba(36,43,37,.10),

        inset 0 0 0 1px
        rgba(255,255,255,.15);
    }

    .panel:hover {
      transform:
        translateY(-4px);
    }

    .panel.active {
      flex:
        2.5 1 0;

      box-shadow:
        0 28px 64px
        rgba(30,38,31,.16),

        inset 0 0 0 1px
        rgba(255,255,255,.20);
    }

    .portal.has-active
    .panel:not(.active) {
      filter:
        saturate(.78);
    }


    /* =========================================================
       CURSOR FOLLOW LIGHT
    ========================================================= */

    .panel::before {
      content: "";

      position: absolute;

      inset: 0;

      z-index: 2;

      pointer-events: none;

      border-radius: inherit;

      background:
        radial-gradient(
          circle 280px at
          var(--mouse-x)
          var(--mouse-y),

          rgba(255,255,255,.32) 0%,
          rgba(255,255,255,.18) 18%,
          rgba(255,255,255,.08) 36%,
          rgba(255,255,255,.025) 52%,
          rgba(255,255,255,0) 72%
        );

      opacity: 0;

      transition:
        opacity
        .28s
        ease;
    }

    .panel:hover::before {
      opacity: 1;
    }


    /* =========================================================
       LIFE SCIENCE
    ========================================================= */

    .panel-science {
      --accent:
        var(--science);

      --accent-dark:
        var(--science-dark);

      background:
        linear-gradient(
          135deg,
          #47b67b 0%,
          #2c9b64 55%,
          #278b59 100%
        );
    }


    /* =========================================================
       FOOD PROCESSING
    ========================================================= */

    .panel-food {
      --accent:
        var(--food);

      --accent-dark:
        var(--food-dark);

      background:
        linear-gradient(
          135deg,
          #F47A4B 0%,
          #EB642D 42%,
          #E55820 100%
        );
    }


    /* =========================================================
       REAL ESTATE
    ========================================================= */

    .panel-estate {
      --accent:
        var(--estate);

      --accent-dark:
        var(--estate-dark);

      background:
        linear-gradient(
          135deg,
          #D6A262,
          #B88A51
        );
    }


    /* =========================================================
       PANEL ART
    ========================================================= */

    .panel-art {
      position: absolute;

      inset: 0;

      z-index: 0;

      pointer-events: none;

      overflow: hidden;
    }

    .panel-art::before,
    .panel-art::after {
      content: "";

      position: absolute;
    }


    /* =========================================================
       LIFE SCIENCE ART
    ========================================================= */

    .panel-science
    .panel-art::before {
      width: 380px;

      height: 380px;

      top: -150px;

      right: -140px;

      border:
        45px solid
        rgba(255,255,255,.13);

      border-radius: 50%;
    }

    .panel-science
    .panel-art::after {
      width: 270px;

      height: 270px;

      left: -90px;

      bottom: -90px;

      border-radius:
        44% 56% 38% 62%;

      background:
        rgba(7,69,36,.18);

      transform:
        rotate(40deg);
    }


    /* =========================================================
       FOOD PROCESSING ART
       NO PERMANENT LIGHT CIRCLE
    ========================================================= */

    .panel-food
    .panel-art::before {
      width: 360px;

      height: 360px;

      top: 40px;

      right: -160px;

      border-radius:
        42% 58% 64% 36%;

      background:
        rgba(142,42,8,.13);

      transform:
        rotate(-25deg);
    }

    .panel-food
    .panel-art::after {
      width: 290px;

      height: 120px;

      left: -50px;

      bottom: 68px;

      border:
        34px solid
        rgba(255,255,255,.13);

      border-radius: 60%;

      transform:
        rotate(-16deg);
    }


    /* =========================================================
       REAL ESTATE ART
    ========================================================= */

    .panel-estate
    .panel-art::before {
      width: 360px;

      height: 520px;

      right: -120px;

      bottom: -190px;

      border:
        35px solid
        rgba(255,255,255,.12);

      transform:
        rotate(19deg);
    }

    .panel-estate
    .panel-art::after {
      width: 220px;

      height: 620px;

      left: 43%;

      top: -150px;

      background:
        rgba(255,255,255,.11);

      transform:
        rotate(28deg);
    }


    /* =========================================================
       PANEL CONTENT
    ========================================================= */

    .panel-content {
      position: absolute;

      inset: 0;

      display: flex;

      flex-direction: column;

      justify-content:
        space-between;

      padding:
        clamp(
          24px,
          2.2vw,
          34px
        );

      z-index: 4;
    }

    .panel-top {
      width: 100%;

      display: flex;

      align-items:
        flex-start;

      justify-content:
        space-between;

      gap: 18px;
    }


    /* =========================================================
       PANEL INDEX
    ========================================================= */

    .panel-index {
      width: 42px;

      height: 42px;

      min-width: 42px;

      min-height: 42px;

      flex:
        0 0 42px;

      display: grid;

      place-items: center;

      border:
        1px solid
        rgba(255,255,255,.30);

      border-radius: 50%;

      background:
        rgba(255,255,255,.11);

      backdrop-filter:
        blur(8px);

      font-size: .68rem;

      font-weight: 700;
    }


    /* =========================================================
       PANEL ARROW
    ========================================================= */

    .panel-symbol {
      width: 46px;

      height: 46px;

      min-width: 46px;

      min-height: 46px;

      max-width: 46px;

      max-height: 46px;

      flex:
        0 0 46px;

      aspect-ratio:
        1 / 1;

      display: grid;

      place-items: center;

      border:
        1px solid
        rgba(255,255,255,.42);

      border-radius: 50%;

      background:
        rgba(255,255,255,.10);

      backdrop-filter:
        blur(8px);

      transition:
        transform .4s var(--ease),
        background .3s ease;
    }

    .panel-symbol svg {
      display: block;

      width: 18px;

      height: 18px;

      min-width: 18px;

      min-height: 18px;

      fill: none;

      stroke:
        currentColor;

      stroke-width: 1.8;

      stroke-linecap:
        round;

      stroke-linejoin:
        round;
    }

    .panel:hover
    .panel-symbol {
      background:
        rgba(255,255,255,.16);
    }

    .panel:hover
    .panel-symbol,
    .panel.active
    .panel-symbol {
      transform:
        rotate(45deg);
    }

    .portal.has-active
    .panel:not(.active)
    .panel-symbol {
      width: 46px;

      height: 46px;

      min-width: 46px;

      min-height: 46px;

      max-width: 46px;

      max-height: 46px;

      flex:
        0 0 46px;

      aspect-ratio: 1;

      transform: none;
    }


    /* =========================================================
       PANEL BODY
    ========================================================= */

    .panel-main {
      width: 100%;

      min-width: 0;

      margin-top: auto;
    }

    .panel-category {
      margin:
        0
        0
        10px;

      color:
        rgba(255,255,255,.75);

      font-size: .64rem;

      line-height: 1.4;

      font-weight: 700;

      letter-spacing: .15em;

      text-transform:
        uppercase;
    }

    .panel-title {
      margin: 0;

      font-weight: 800;

      font-size:
        clamp(
          2rem,
          3vw,
          4.6rem
        );

      line-height: .96;

      letter-spacing: -.06em;

      transition:
        font-size
        .8s
        var(--ease);
    }

    .panel.active
    .panel-title {
      font-size:
        clamp(
          3rem,
          4.8vw,
          5.5rem
        );
    }

    .portal.has-active
    .panel:not(.active)
    .panel-title {
      font-size:
        clamp(
          1.5rem,
          2vw,
          2rem
        );
    }


    /* =========================================================
       EXPANDED CONTENT
    ========================================================= */

    .panel-extra {
      display: grid;

      grid-template-rows:
        0fr;

      opacity: 0;

      transition:
        grid-template-rows
        .6s
        var(--ease),

        opacity
        .3s
        ease,

        margin
        .6s
        var(--ease);
    }

    .panel.active
    .panel-extra {
      grid-template-rows:
        1fr;

      opacity: 1;
      margin-top: 24px;
    }

    .panel-extra-inner {
      overflow: hidden;
    }

    .portal.has-active
    .panel:not(.active)
    .panel-extra {
      display: none;
    }

    .panel-description {
      width:
        min(
          600px,
          92%
        );

      margin:
        0
        0
        24px;

      color:
        rgba(255,255,255,.86);

      font-size: 1.19rem;

      line-height: 1.2;
    }


    /* =========================================================
       CTA
    ========================================================= */

    .explore-btn {
      display:
        inline-flex;

      align-items: center;

      gap: 14px;

      padding:
        10px
        12px
        10px
        18px;

      background: #fff;

      border-radius:
        999px;

      color:
        var(--accent-dark);

      text-decoration: none;

      font-size: .77rem;

      font-weight: 700;

      transition:
        transform .25s ease,
        box-shadow .25s ease;
    }

    .explore-btn:hover {
      transform:
        translateY(-2px);

     /*  box-shadow:
        0 10px 28px
        rgba(0,0,0,.14); */
    }

    .explore-btn span {
      width: 35px;

      height: 35px;

      min-width: 35px;

      display: grid;

      place-items: center;

      border-radius: 50%;

      background:
        var(--accent);

      color: #fff;
    }

    .explore-btn svg {
      width: 15px;

      height: 15px;

      fill: none;

      stroke:
        currentColor;

      stroke-width: 2;

      stroke-linecap:
        round;

      stroke-linejoin:
        round;
    }


    /* =========================================================
       PANEL LINE
    ========================================================= */

    .panel-line {
      position: absolute;

      left: 32px;

      right: 32px;

      bottom: 19px;

      height: 1px;

      background:
        rgba(255,255,255,.18);
    }


    /* =========================================================
       FOOTER
    ========================================================= */

    .footer {
      width: 100%;

      min-height: 88px;

      display: flex;

      align-items: center;

      justify-content:
        space-between;

      gap: 30px;

      padding:
        20px
        0
        28px;

      border-top:
        1px solid
        var(--line);

      color:
        #003B74;

      font-size: .75rem;
    }


    /* =========================================================
       MEDIUM DESKTOP
    ========================================================= */

    @media (max-width: 1450px) {

      :root {
        --page-gap:
          clamp(
            22px,
            2.4vw,
            40px
          );
      }

      .site-header {
        min-height: 102px;
      }

      .hero {
        column-gap:
          clamp(
            40px,
            4vw,
            70px
          );
      }

      .hero-title {
        font-size:
          clamp(
            4.8rem,
            6.25vw,
            6.6rem
          );

        line-height: .94;
      }

      .hero-description p {
        font-size:
          clamp(
            .94rem,
            1.08vw,
            1.08rem
          );
      }

    }


    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 1100px) {

      :root {
        --page-gap: 24px;
      }

      .site-header {
        min-height: 96px;

        padding-top: 18px;

        padding-bottom: 38px;
      }

      .hero {
        grid-template-columns: 1fr;

        gap: 42px;

        padding-bottom: 48px;
      }

      .hero-title {
        max-width: 900px;

        font-size:
          clamp(
            4.4rem,
            9.5vw,
            7rem
          );

        line-height: .95;

        white-space: normal;
      }

      .hero-right {
        display: block;

        padding-top: 0;

        max-width: 850px;
      }

      .hero-image-placeholder {
        height: auto;

        min-height: 245px;

        aspect-ratio:
          2.4 / 1;
      }

      .hero-image {
        height: auto;
        aspect-ratio:
          2.4 / 1;
      }

      .hero-description {
        margin-top: 28px;
      }

      .segments-heading {
        margin-top: 26px;
      }

      .portal {
        min-height: 560px;
      }

    }
    
    
    .business_segment
    { font-size:1.2em; text-align:center;
 
    }
    
    
     .business_segment p
    { padding-bottom:2em;
 
    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 720px) {

      :root {
        --page-gap: 14px;
      }

      .site-header {
        min-height: 88px;

        padding:
          16px
          0
          32px;
      }

      .brand-logo {
        width: 56px;
      }

      .hero {
        gap: 30px;

        padding-bottom: 38px;
      }

      .hero-title {
        font-size:
          clamp(
            3.15rem,
            14vw,
            5rem
          );

        line-height: .97;

        letter-spacing:
          -.065em;
      }

      .hero-image-placeholder {
        height: auto;

        aspect-ratio:
          1.9 / 1;

        min-height: 175px;

        border-radius: 20px;

        font-size: 1.35rem;
      }

      .hero-image {
        height: auto;

        aspect-ratio:
          1.9 / 1;

        border-radius: 20px;
      }

      .hero-description {
        margin-top: 22px;
      }

      .hero-description p {
        font-size: .9rem;

        line-height: 1.62;

        letter-spacing:
          -.018em;
      }


      /* CURSOR GLOW OFF ON TOUCH */

      .panel::before {
        display: none;
      }


      /* SEGMENT INTRO */

      .segments-heading {
        gap: 10px;

        margin-top: 22px;

        margin-bottom: 22px;
      }

      .segments-heading p {
        max-width: 310px;

        white-space: normal;

        font-size: 1rem;
      }

      .segments-line {
        width: 25px;

        flex-basis: 25px;
      }


      /* VERTICAL ACCORDION */

      .portal {
        height: 720px;

        min-height: 720px;

        flex-direction: column;

        gap: 9px;
      }

      .panel {
        flex:
          1 1 0;

        border-radius: 24px;
      }

      .panel.active {
        flex:
          3.1 1 0;
      }

      .portal.has-active
      .panel:not(.active) {
        flex:
          .72 1 0;
      }

      .panel:hover {
        transform: none;
      }

      .panel-content {
        padding: 20px;
      }


      /* ARROWS */

      .panel-symbol,
      .portal.has-active
      .panel:not(.active)
      .panel-symbol {
        width: 38px;

        height: 38px;

        min-width: 38px;

        min-height: 38px;

        max-width: 38px;

        max-height: 38px;

        flex:
          0 0 38px;
      }

      .panel-symbol svg {
        width: 15px;

        height: 15px;
      }


      /* NUMBER */

      .panel-index {
        width: 34px;

        height: 34px;

        min-width: 34px;

        min-height: 34px;

        flex:
          0 0 34px;
      }


      /* PANEL TITLES */

      .panel-title,
      .portal.has-active
      .panel:not(.active)
      .panel-title {
        font-size: 1.65rem;
      }

      .panel.active
      .panel-title {
        font-size:
          clamp(
            2.6rem,
            11vw,
            4rem
          );
      }

      .panel-description {
        width: 100%;

        margin-bottom: 18px;

        font-size: .8rem;
      }


      /* COMPRESSED PANELS */

      .portal.has-active
      .panel:not(.active)
      .panel-main {
        position: absolute;

        left: 20px;

        bottom: 20px;
      }

      .portal.has-active
      .panel:not(.active)
      .panel-category {
        display: none;
      }

      .portal.has-active
      .panel:not(.active)
      .panel-top {
        position: absolute;

        top: 20px;

        right: 20px;

        width: auto;
      }

      .portal.has-active
      .panel:not(.active)
      .panel-index {
        display: none;
      }


      /* FOOTER */

      .footer {
        min-height: 100px;

        flex-direction: column;

        align-items:
          flex-start;

        justify-content: center;

        gap: 8px;
      }

    }


    /* =========================================================
       SMALL MOBILE
    ========================================================= */

    @media (max-width: 440px) {

      :root {
        --page-gap: 12px;
      }

      .hero-title {
        font-size:
          clamp(
            2.85rem,
            13.5vw,
            3.7rem
          );
      }

      .segments-heading p {
        font-size: .92rem;
      }

      .segments-line {
        width: 18px;

        flex-basis: 18px;
      }

    }


    /* =========================================================
       REDUCED MOTION
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation: none !important;

        transition: none !important;
      }

    }