/* GIGATIK V117 | PHONE-ONLY STORYBOARD
   This sheet is loaded ONLY at <=700 CSS px through media= on index.html.
   Desktop CSS, original artwork, video backgrounds, and forms are untouched.
   Entire layout is confined to #build (FROM FRAGMENTED TO CONNECTED).
*/

@media screen and (max-width:700px){
  #build.fragmented-section{
    padding-top:20px !important;
    padding-bottom:28px !important;
  }
  #build .fragmented-wrap{
    width:calc(100% - 34px) !important;
    max-width:610px !important;
    margin:0 auto !important;
  }
  #build .fragmented-heading{
    display:block !important;
    padding:0 2px !important;
    margin:0 0 18px !important;
  }
  #build .fragmented-heading .section-code-title{
    margin:0 0 16px !important;
    font-size:clamp(.59rem,1.85vw,.72rem) !important;
    line-height:1.5 !important;
    letter-spacing:.13em !important;
    white-space:normal !important;
  }
  #build .fragmented-heading h2{
    margin:0 !important;
    max-width:580px !important;
    font-family:Caveat,cursive !important;
    font-size:clamp(2.3rem,9.7vw,3.55rem) !important;
    font-weight:700 !important;
    line-height:.99 !important;
    letter-spacing:-.027em !important;
    text-wrap:balance;
  }
  #build .fragmented-heading p{
    margin:14px 0 0 !important;
    max-width:530px !important;
    font-family:Caveat,cursive !important;
    font-size:clamp(1.1rem,4.8vw,1.42rem) !important;
    line-height:1.26 !important;
    color:#58636a !important;
    font-weight:500 !important;
  }
  #build .hybrid-art-stage{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  /* Only hide the original image on phones. No desktop CSS is touched. */
  #build .hybrid-art-stage .hybrid-art-mat{display:none !important;}
  #build .hybrid-art-stage .hybrid-mobile-art{
    display:block !important;
    position:relative !important;
    width:100% !important;
    max-width:610px !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
    opacity:1 !important;
  }
  #build .gk117-storyboard{
    position:relative;
    padding:11px;
    border:1px solid rgba(177,136,83,.42);
    background:linear-gradient(155deg,rgba(254,253,249,.93),rgba(243,239,230,.84));
    box-shadow:0 14px 26px rgba(17,38,56,.055),inset 0 0 0 4px rgba(255,255,255,.45);
    border-radius:3px;
    isolation:isolate;
  }
  #build .gk117-storyboard:before{
    content:"";
    position:absolute;
    inset:6px;
    border:1px solid rgba(177,136,83,.13);
    pointer-events:none;
    z-index:-1;
  }
  #build .gk117-chapter{
    position:relative;
    padding:13px 10px 10px;
    background:rgba(255,253,249,.65);
    border:1px solid rgba(171,133,86,.24);
    overflow:hidden;
  }
  #build .gk117-chapter-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:7px;
    min-height:17px;
    padding:0 2px 8px;
    border-bottom:1px solid rgba(16,38,59,.13);
  }
  #build .gk117-index{
    font:700 .64rem/1.25 "Space Grotesk",Arial,sans-serif;
    letter-spacing:.16em;
    color:#947148;
    white-space:nowrap;
  }
  #build .gk117-index i{
    display:inline-block;
    width:15px;height:1px;
    background:#b89a70;
    vertical-align:middle;
    margin:0 6px 3px 4px;
  }
  #build .gk117-keyword{
    font:600 clamp(.67rem,2.2vw,.8rem)/1.3 "Space Grotesk",Arial,sans-serif;
    color:#19354b;
    letter-spacing:.025em;
    text-align:right;
  }
  #build .gk117-illustration{
    display:block;
    width:100%;
    height:clamp(192px,53vw,280px);
    object-fit:contain;
    object-position:center center;
    margin:0 auto;
    mix-blend-mode:normal;
    filter:drop-shadow(0 7px 9px rgba(16,38,59,.065));
  }
  #build .gk117-automation{
    display:block;
    width:min(100%,340px);
    height:auto;
    margin:-4px auto 5px;
    object-fit:contain;
    filter:drop-shadow(0 3px 5px rgba(16,38,59,.035));
  }
  #build .gk117-chapter-caption{
    margin:0 !important;
    text-align:center;
    font:600 clamp(.78rem,2.8vw,.94rem)/1.3 "Space Grotesk",Arial,sans-serif !important;
    letter-spacing:.01em;
    color:#294255 !important;
  }
  #build .gk117-before .gk117-chapter-caption{color:#7a6756 !important;}
  #build .gk117-bridge{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:103px;
    padding:7px 0 5px;
    isolation:isolate;
  }
  #build .gk117-bridge-line{
    position:absolute;
    left:50%;
    top:0;
    width:1px;
    height:calc(50% - 31px);
    background:linear-gradient(180deg,rgba(177,136,83,.22),#b99057);
    z-index:-1;
  }
  #build .gk117-bridge-line:nth-of-type(3){
    top:calc(50% + 24px);
    height:calc(50% - 24px);
    background:linear-gradient(0deg,rgba(177,136,83,.22),#b99057);
  }
  #build .gk117-bridge-medallion{
    width:56px;height:56px;
    border:1px solid rgba(174,128,68,.52);
    outline:1px solid rgba(174,128,68,.19);
    outline-offset:4px;
    border-radius:50%;
    display:grid;place-items:center;
    padding:10px;
    background:radial-gradient(circle at 35% 22%,#fffefa,#eee4d2);
    box-shadow:0 7px 20px rgba(16,38,59,.12);
  }
  #build .gk117-bridge-medallion img{
    display:block;width:100%;height:100%;object-fit:contain;
  }
  #build .gk117-bridge-label{
    margin-top:8px;
    font:700 .55rem/1 "Space Grotesk",Arial,sans-serif;
    letter-spacing:.17em;
    color:#997647;
    text-align:center;
  }
  #build .gk117-closing{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:13px 0 0;
  }
  #build .gk117-closing span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(166,124,71,.55));}
  #build .gk117-closing span:last-child{transform:scaleX(-1);}
  #build .gk117-closing b{
    font:700 .57rem/1.3 "Space Grotesk",Arial,sans-serif;
    letter-spacing:.15em;
    color:#8f7658;
    text-align:center;
    white-space:nowrap;
  }
}
@media screen and (max-width:359px){
  #build .fragmented-wrap{width:calc(100% - 24px) !important;}
  #build .gk117-storyboard{padding:7px;}
  #build .gk117-chapter{padding:10px 7px 9px;}
  #build .gk117-keyword{font-size:.63rem;}
  #build .gk117-illustration{height:185px;}
  #build .gk117-closing b{font-size:.52rem;letter-spacing:.10em;}
}
@media screen and (prefers-reduced-motion:reduce){
  #build .gk117-storyboard *{animation:none!important;transition:none!important;}
}