/* Bespoke fictional website concepts for the five Website Builds stories. */

/* Northline: architectural, restrained and image led. */
#ai-features .design-site{background:#10231d;color:#f2f2e9;border-color:#5c7468}
#ai-features .design-site__page{padding:0;gap:0;background:#10231d}
#ai-features .design-site__nav{padding:clamp(13px,2.1cqw,24px) clamp(18px,2.8cqw,32px);margin:0;color:#f5f4ec;border-bottom:1px solid #ffffff30;font-size:clamp(8px,1.1cqw,12px);letter-spacing:.09em}
#ai-features .design-site__nav strong{letter-spacing:.18em;font-size:clamp(15px,2.1cqw,23px)}
#ai-features .design-site__nav .design-site__dot{color:#c1ef9b}
#ai-features .design-site__nav b{color:#c1ef9b;font-weight:700}
#ai-features .design-site__hero{background:#10231d;grid-template-columns:46% 54%;min-height:0}
#ai-features .design-site__copy{position:relative;z-index:1;padding:clamp(17px,3.4cqw,42px);background:radial-gradient(circle at 8% 90%,#42624855,transparent 48%),#10231d}
#ai-features .design-site__copy small{color:#bfe6af;font-size:clamp(8px,1.1cqw,12px)}
#ai-features .design-site__copy h3{color:#f6f3e9;font-size:clamp(34px,6.3cqw,73px);margin:clamp(13px,2.6cqw,28px) 0}
#ai-features .design-site__copy h3 em{color:#bfe6af;font-weight:400}
#ai-features .design-site__copy p{color:#e2e9dc;font-size:clamp(10px,1.5cqw,16px);max-width:29ch}
#ai-features .design-site__copy b{background:#c1ef9b;color:#10231d;font-size:clamp(9px,1.2cqw,13px);letter-spacing:.04em}
#ai-features .design-site__hero>img{filter:saturate(.82) contrast(1.06);object-position:56% 50%}
#ai-features .design-site__projects{height:25%;padding:clamp(9px,1.4cqw,16px) clamp(18px,2.8cqw,32px);border-top:1px solid #ffffff30}
#ai-features .design-site__projects>span{color:#bfe6af;width:30%;font-size:clamp(7px,1.1cqw,11px)}
#ai-features .design-site__projects>div{gap:clamp(8px,1.2cqw,15px)}
#ai-features .design-site__projects figure{position:relative;overflow:hidden;margin:0;min-width:0}
#ai-features .design-site__projects figure::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#0d201bbd)}
#ai-features .design-site__projects img{width:100%;height:100%;object-fit:cover}
#ai-features .design-site__projects figcaption{position:absolute;z-index:1;left:7px;right:7px;bottom:5px;color:white;font-size:clamp(6px,.9cqw,10px);font-weight:800;letter-spacing:.06em}
#ai-features .design-site__projects figcaption b{float:right;font-size:.75em;font-weight:600}
#ai-features .design-ticket{background:#c1ef9b;color:#10231d;border-color:#e0ffc7;width:43%}
#ai-features .design-ticket small,#ai-features .design-ticket>span{color:#31593b}
#ai-features .design-ticket strong{font-size:clamp(17px,2.6cqw,30px);max-width:18ch}

/* Move Studio: a high contrast performance identity, adapted to every screen. */
#ai-features .responsive-device{background:#13251d;border-color:#554d62}
#ai-features .responsive-site{background:#11271f;color:#f5f8e9}
#ai-features .responsive-device--desktop .responsive-site{display:flex;flex-direction:column;padding:0}
#ai-features .responsive-site__nav{flex:none;margin:0;padding:clamp(9px,1.55cqw,17px) clamp(12px,2cqw,24px);background:#11271f;color:#f8ffe8;border-bottom:1px solid #d8ff6140;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(7px,1cqw,11px)}
#ai-features .responsive-site__nav strong{letter-spacing:-.035em;font-size:clamp(14px,2.2cqw,23px);font-weight:900}
#ai-features .responsive-site__nav strong span{color:#d8ff61;font-size:.5em;vertical-align:top;margin-left:2px}
#ai-features .responsive-site__nav>span b{display:inline-block;padding:7px 9px;background:#d8ff61;color:#13251d}
#ai-features .responsive-site__hero{flex:1;min-height:0;display:grid;grid-template-columns:45% 55%;gap:0;height:auto;margin:0;background:#d8ff61;color:#10261c}
#ai-features .responsive-site__hero>div{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(13px,2.7cqw,30px);min-width:0}
#ai-features .responsive-site__hero small,#ai-features .responsive-site__stack small{color:#274328;font-size:clamp(8px,1.2cqw,12px);letter-spacing:.11em;font-weight:900}
#ai-features .responsive-site__hero h3{color:#11271f;font-size:clamp(31px,5.9cqw,65px);font-weight:900;line-height:.85;letter-spacing:-.07em;margin:clamp(12px,2cqw,20px) 0;text-transform:uppercase}
#ai-features .responsive-site__hero h3 em,#ai-features .responsive-site__stack h3 em{font-style:normal;color:#36613a}
#ai-features .responsive-site__hero p{font-size:clamp(9px,1.25cqw,14px);font-weight:600;line-height:1.25;max-width:24ch}
#ai-features .responsive-site__hero b,#ai-features .responsive-site__stack b{display:inline-flex;align-items:center;gap:16px;background:#11271f;color:#f5f8e9;padding:clamp(8px,1.15cqw,12px) clamp(10px,1.5cqw,16px);font-size:clamp(9px,1.15cqw,12px);font-weight:900;letter-spacing:.04em}
#ai-features .responsive-site__hero b span{color:#d8ff61}
#ai-features .responsive-site__hero figure{position:relative;overflow:hidden;height:100%;margin:0;background:#173023}
#ai-features .responsive-site__hero figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#10261d25,transparent 45%),linear-gradient(transparent 72%,#10261db0)}
#ai-features .responsive-site__hero figure img{width:100%;height:100%;object-fit:cover;object-position:49% 48%;filter:saturate(1.2) contrast(1.05)}
#ai-features .responsive-site__hero figcaption{position:absolute;bottom:12px;left:13px;right:13px;z-index:1;color:#f3ffe2;font-size:clamp(7px,1cqw,11px);font-weight:900;letter-spacing:.09em}
#ai-features .responsive-site__tiles{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;border-top:1px solid #e1fcbb55;background:#11271f}
#ai-features .responsive-site__tiles span{background:none;border:0;border-right:1px solid #e1fcbb55;color:#f3ffe2;padding:clamp(8px,1.3cqw,15px);font-size:clamp(8px,1.1cqw,12px);letter-spacing:.07em}
#ai-features .responsive-site__tiles span b{float:right;color:#d8ff61}
#ai-features .responsive-device--tablet .responsive-site,#ai-features .responsive-device--phone .responsive-site{padding:0;border-radius:9px;display:flex;flex-direction:column}
#ai-features .responsive-device--tablet .responsive-site__nav,#ai-features .responsive-device--phone .responsive-site__nav{padding:clamp(9px,1.3cqw,14px);border-bottom:1px solid #d8ff6140}
#ai-features .responsive-device--tablet .responsive-site__nav strong,#ai-features .responsive-device--phone .responsive-site__nav strong{font-size:clamp(11px,1.55cqw,17px)}
#ai-features .responsive-site__stack{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-height:0;padding:clamp(12px,1.8cqw,20px)}
#ai-features .responsive-site__stack small{color:#d8ff61}
#ai-features .responsive-site__stack h3{color:#f4ffe0;font-size:clamp(21px,3.5cqw,38px);font-weight:900;line-height:.9;letter-spacing:-.07em;margin:clamp(9px,1.3cqw,14px) 0;text-transform:uppercase}
#ai-features .responsive-site__stack h3 em{color:#d8ff61}
#ai-features .responsive-site__stack img{width:100%;height:35%;min-height:0;flex:1;object-fit:cover;object-position:center 45%;margin:0 0 clamp(9px,1.2cqw,13px);filter:saturate(1.18) contrast(1.04)}
#ai-features .responsive-site__stack p{margin:0 0 10px;color:#f3ffe2;font-weight:700;font-size:clamp(9px,1.1cqw,12px)}
#ai-features .responsive-site__stack b{background:#d8ff61;color:#11271f;padding:8px 10px;font-size:clamp(8px,1.05cqw,11px)}
#ai-features .responsive-device--phone .responsive-site__stack{padding:clamp(9px,1.25cqw,14px)}
#ai-features .responsive-device--phone .responsive-site__stack h3{font-size:clamp(17px,2.5cqw,27px)}
#ai-features .responsive-device--phone .responsive-site__stack small{font-size:clamp(6px,.8cqw,9px)}
#ai-features .responsive-device--phone .responsive-site__stack p{font-size:clamp(7px,.9cqw,10px)}
#ai-features .responsive-device--phone .responsive-site__stack b{font-size:clamp(7px,.9cqw,10px)}

/* Form & Grain: warm editorial identity across copy, enquiry and launch previews. */
#ai-features .message-after,#ai-features .conversion-site,#ai-features .launch-stage__site{border-color:#a87963;background:#f6eee4;color:#382119}
#ai-features .message-after__page,#ai-features .conversion-site__page,#ai-features .launch-stage__site-page{background:#f6eee4}
#ai-features .message-after__nav,#ai-features .conversion-site__nav{background:#f7efe4;border-bottom:1px solid #9d665e4d;color:#43261f;font-weight:900;letter-spacing:.09em}
#ai-features .message-after__nav strong,#ai-features .conversion-site__nav{font-size:clamp(11px,1.6cqw,17px)}
#ai-features .message-after__nav strong span{font-size:.6em;vertical-align:top}
#ai-features .message-after__nav i,#ai-features .conversion-site__nav i{color:#bd583b;font-style:normal}
#ai-features .message-after__nav b{background:#44291f;color:#fff7ea;padding:6px 8px}
#ai-features .message-after__page>img{top:15%;height:79%;width:60%;object-position:50% 50%;filter:saturate(.85) contrast(1.08)}
#ai-features .message-after__page::after{background:linear-gradient(90deg,#f6eee4 13%,#f6eee4f5 37%,transparent 80%)}
#ai-features .message-after__body{width:70%}
#ai-features .message-after__body small,#ai-features .conversion-site__content small{color:#a44b34}
#ai-features .message-after__body h3,#ai-features .conversion-site__content h3,#ai-features .launch-stage__site-page h3{color:#43251e;font-family:Georgia,serif;letter-spacing:-.075em}
#ai-features .message-after__body h3 em,#ai-features .conversion-site__content h3 em,#ai-features .launch-stage__site-page h3 em{color:#b95437;font-weight:400}
#ai-features .message-after__body p,#ai-features .conversion-site__content p{color:#4f382e;line-height:1.34}
#ai-features .message-after__body b,#ai-features .conversion-site__content b,#ai-features .launch-stage__site-page b{background:#b95437;color:white;letter-spacing:.04em}
#ai-features .message-after__index,#ai-features .conversion-site__index{position:absolute;z-index:2;bottom:0;left:0;right:0;padding:clamp(7px,1cqw,11px) clamp(12px,1.8cqw,20px);background:#452820;color:#f7e9d8;font-size:clamp(7px,1cqw,11px);font-weight:800;letter-spacing:.1em}
#ai-features .message-before{background:#302523;border-color:#aa6658}
#ai-features .message-arrow{background:#bd583b;color:#fff4e4}
#ai-features .conversion-site__page>img{filter:saturate(.85) contrast(1.06)}
#ai-features .conversion-site__page::after{background:linear-gradient(90deg,#f6eee4 5%,#f6eee4f5 36%,transparent 84%)}
#ai-features .conversion-site__content{width:70%}
#ai-features .conversion-lead{background:#bd583b;border-color:#e29873}
#ai-features .conversion-lead__spark{background:#ffe1a8;color:#552b20}
#ai-features .conversion-lead footer{color:#ffeba7}
#ai-features .launch-stage{background:linear-gradient(145deg,#51362d,#2b211e);border-color:#b97861}
#ai-features .launch-stage__site-page>img{filter:saturate(.83) contrast(1.06)}
#ai-features .launch-stage__site-page::after{background:linear-gradient(90deg,#f6eee4 3%,#f6eee4eb 42%,transparent 87%)}
#ai-features .launch-stage__side{background:#4b3028;border-color:#b26e55}
#ai-features .launch-stage__side small,#ai-features .launch-stage__side h3 em,#ai-features .launch-stage__footer b{color:#ffd891}
#ai-features .launch-stage__header strong,#ai-features .launch-stage__side li::before{background:#ffd891;color:#43251e}

@media(max-width:520px){
 #ai-features .design-site__nav{padding:9px 11px}
 #ai-features .design-site__nav strong{font-size:11px}
 #ai-features .design-site__nav>span{font-size:5px}
 #ai-features .design-site__copy{padding:9px}
 #ai-features .design-site__copy h3{font-size:25px}
 #ai-features .design-site__copy p{font-size:8px}
 #ai-features .design-site__projects{padding:6px 9px}
 #ai-features .design-site__projects>span{font-size:6px}
 #ai-features .design-site__projects figcaption{font-size:5px}
 #ai-features .design-site__projects figcaption b{display:none}
 #ai-features .responsive-site__nav{padding:7px}
 #ai-features .responsive-site__nav strong{font-size:11px}
 #ai-features .responsive-site__nav>span{font-size:5px}
 #ai-features .responsive-site__nav>span b{padding:4px}
 #ai-features .responsive-site__hero>div{padding:8px}
 #ai-features .responsive-site__hero h3{font-size:21px;margin:7px 0}
 #ai-features .responsive-site__hero p{font-size:7px;margin-bottom:7px}
 #ai-features .responsive-site__hero b{font-size:6px;padding:6px}
 #ai-features .responsive-site__tiles span{font-size:5px;padding:6px}
 #ai-features .responsive-site__hero figcaption{font-size:6px;bottom:7px;left:7px}
 #ai-features .responsive-device--tablet .responsive-site__nav strong,#ai-features .responsive-device--phone .responsive-site__nav strong{font-size:8px}
 #ai-features .responsive-site__stack{padding:7px}
 #ai-features .responsive-site__stack h3{font-size:17px}
 #ai-features .responsive-device--phone .responsive-site__stack h3{font-size:14px}
 #ai-features .responsive-site__stack p,#ai-features .responsive-site__stack b{font-size:6px}
 #ai-features .message-after__nav strong,#ai-features .conversion-site__nav{font-size:8px}
 #ai-features .message-after__body h3,#ai-features .conversion-site__content h3{font-size:23px}
}