@import url('https://use.typekit.net/ieo8gsa.css');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Mulish:wght@300;400;600;700;800&display=swap');

:root{
  --blue:#0095eb; --blue-dk:#007cc3; --blue-deep:#0a4f7a;
  --amber:#ffb100; --amber-dk:#f1a903;
  --ink:#292929; --ink-2:#1f1f1f; --body:#484848; --grey:#929292;
  --line:#e6e6e6; --wash:#f6f8fa; --white:#fff;
  --cond:'trade-gothic-next-condensed','Oswald','Arial Narrow',sans-serif;
  --sans:'proxima-nova','Mulish',Helvetica,Arial,sans-serif;
  --max:1180px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
figure{margin:0}
figcaption{margin:0}
a{color:var(--blue-dk);text-decoration:none}
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.005em;margin:0;line-height:1.02}
p{margin:0 0 18px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.btn{display:inline-block;box-sizing:border-box;max-width:100%;height:40px;text-align:center;white-space:nowrap;
  font-family:var(--cond);font-weight:400;font-size:16px;line-height:16px;letter-spacing:.96px;text-transform:uppercase;
  padding:12px 50px;border-radius:60px;border:0;cursor:pointer;margin:0 10px 15px 0}
.btn-amber{background:var(--amber);color:var(--ink-2)}
.btn-amber:hover{background:var(--amber-dk)}
.btn-line{border:1px solid var(--line);color:var(--ink);border-radius:60px;padding:11px 49px}
.btn-line:hover{border-color:var(--blue);color:var(--blue-dk)}
.kicker{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-dk);margin-bottom:18px}
.sec{padding:84px 0}
.sec-centred{background:#fcfcfc;text-align:center}
.sec-centred .icon-lead{width:54px;margin:0 auto 24px}
.sec-centred h2.big{font-weight:300;margin:0 0 15px;font-size:48px;line-height:52px}
.sec-centred h2.big strong{font-weight:800}
.sec-centred .stand{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#484848;
  max-width:600px;margin:20px auto}
.sec-centred .body-c{font-family:var(--sans);font-size:16px;line-height:17.6px;font-weight:400;color:#707070;
  max-width:none;margin:0 auto 15px}
.sec-centred .body-c a{color:var(--amber-dk);font-weight:600}
.sec-centred .body-c a:hover{color:var(--ink)}
/* home services band - measured off the live page */
.svc-divider{height:16px;background:#449bf5}
.sec-services{background:#5ebbfd;padding:90px 0 200px;position:relative;overflow:hidden}
.sec-services::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100px;background:#fff;
  clip-path:polygon(0 100%,100% 0,100% 100%)}
.svc-home-in{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  position:relative;z-index:2}
.svc-home-btns{padding:138px 1% 0;font-size:16px;line-height:17.6px}
.svc-home-btns .pill{height:56px;padding:20px 25px;margin:0 10px 15px 0;border:0;line-height:16px;overflow:hidden}
.svc-home-copy{padding:0 1%;margin-bottom:40px}
.svc-home-copy h2{font-family:var(--cond);font-size:48px;line-height:52px;font-weight:300;letter-spacing:.96px;
  text-transform:uppercase;color:#1f1f1f;margin:0 0 15px}
.svc-home-copy h2 strong{font-weight:800}
.svc-home-copy p{font-family:'soleil',var(--sans);font-size:16px;line-height:23px;font-weight:700;color:#484848;
  max-width:400px;margin:67.8px 0 15px}
.svc-home-copy .pill{margin:10px 0 0;padding:12px 50px;border:0;line-height:16px}
@media (max-width:959px){
  .svc-home-in{grid-template-columns:minmax(0,1fr)}
  .svc-home-btns{padding:30px 4% 0;order:2}
  .svc-home-copy{padding:0 4%}
  .svc-home-copy p{margin:20px 0 15px;max-width:none}
  .sec-services{padding:60px 0 120px}
}

/* ============ HEADER + NEW MENU ============ */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s}
.hdr.stuck{box-shadow:0 6px 24px rgba(20,32,40,.09)}
.hdr-in{max-width:1380px;margin:0 auto;padding:0 13px;height:121px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:48px;width:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav > a,.nav .has-sub > a{font-family:var(--sans);font-weight:400;font-size:16px;letter-spacing:normal;text-transform:uppercase;color:#484848;background:none;border:0;padding:10px 24px;border-radius:40px;cursor:pointer;position:relative}
.nav > a:hover,.nav .has-sub > a:hover{color:var(--blue-dk)}
.nav > a.on{background:var(--amber);color:#fff}
.nav .cta{margin-left:0}
.nav .cta:hover{color:var(--blue-dk)}
.has-sub{position:relative;display:inline-block}
.has-sub > a::after{content:"";display:inline-block;margin-left:7px;width:5px;height:5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.5}
.navsub{position:absolute;left:0;top:100%;padding-top:10px;min-width:226px;display:none;z-index:70}
.has-sub:hover .navsub,.has-sub:focus-within .navsub{display:block}
.sub::before{content:"";position:absolute;left:0;right:0;top:0;height:10px}
.navsub > a{display:block;background:#fff;border-left:1px solid var(--line);border-right:1px solid var(--line);
  padding:11px 20px;font-family:var(--sans);font-size:15px;letter-spacing:normal;text-transform:uppercase;color:#484848}
.navsub > a:first-child{border-top:1px solid var(--line);border-radius:3px 3px 0 0}
.navsub > a:last-child{border-bottom:1px solid var(--line);border-radius:0 0 3px 3px;box-shadow:0 16px 34px rgba(20,32,40,.14)}
.navsub > a:hover{background:var(--wash);color:var(--blue-dk)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* ============ HERO (measured off the live homepage) ============ */
.hero{
  background-image:url("/img/flycast-home-page-bgr.svg");
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:cover;
  padding:150px 0 350px;
}
.hero-in{max-width:1380px;margin:0 auto;padding:0 13px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.hero .kicker{font-family:var(--cond);font-size:14px;line-height:15.4px;font-weight:400;letter-spacing:1.4px;
  text-transform:uppercase;color:#1f1f1f;margin:0}
.hero h1{font-family:var(--cond);font-size:42px;line-height:40px;letter-spacing:.84px;font-weight:400;
  text-transform:uppercase;color:#1f1f1f;margin:18px 0 0}
.hero h1 strong{font-weight:800}
.hero .sub{font-family:var(--sans);font-size:16px;line-height:17.6px;font-weight:400;color:#484848;margin:16px 0 0}
.hero .btn-amber{margin-top:36px}
@media(max-width:1100px){
  .hero h1{font-size:36px;line-height:35px}
}
@media(max-width:767px){
  .hero{padding:44px 0 calc(48.5vw + 24px);background-size:contain;background-position:50% 100%;background-color:#66c1fe}
  .hero-in{grid-template-columns:1fr;gap:0}
  .hero-in > div[aria-hidden]{display:none}
}
/* ============ GENERIC BLOCKS ============ */
h2.big{font-family:var(--cond);font-size:48px;line-height:52px;font-weight:300;letter-spacing:.96px;
  text-transform:uppercase;color:#1f1f1f;margin:0 0 15px}
h2.big strong{font-weight:800}
h2.big span{color:var(--blue)}
.icon-lead{width:120px;margin-bottom:22px}
.sec-plain{background:#fff}
.feature{display:grid;gap:60px;align-items:center}
.feature-l{grid-template-columns:1.06fr .94fr}
.feature-r{grid-template-columns:.94fr 1.06fr}
.feature-art img{width:100%;max-width:430px;margin:0 auto}
.sec-icon{width:46px;height:auto;margin-bottom:24px}
.feature h2.big{font-weight:300;margin:0 0 15px}
.feature h2.big strong{font-weight:800}
.feature .stand{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#484848;margin:0 0 15px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.twocol p{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#707070;margin:0 0 15px}
.twocol b{color:var(--ink)}
.twocol a{color:var(--amber-dk);font-weight:600}
@media(max-width:940px){.feature-l,.feature-r{grid-template-columns:1fr}.feature-r .feature-art{order:2}.twocol{grid-template-columns:1fr;gap:0}.twocol p{margin-bottom:18px}}

/* service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);border-radius:5px;padding:30px 28px 32px;background:#fff;transition:.18s;display:block;color:inherit}
.card:hover{border-color:#bfe2f8;box-shadow:0 14px 34px rgba(20,60,90,.09);transform:translateY(-2px)}
.card img{width:104px;height:104px;object-fit:contain;margin-bottom:20px}
.card h3{font-size:24px;margin-bottom:8px}
.card p{font-size:15.5px;line-height:1.62;color:var(--body);margin:0}
.card .more{font-family:var(--cond);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-dk);margin-top:14px;display:inline-block}

/* blue band */
.band .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* attract band — full-bleed brand artwork with its own diagonal */
/* measured: margin -250px, padding 350/100, bg 0% 0% cover, height 824 */
.attract{background-image:url("/img/want-to-get-more-leads-blue-bgr.svg");background-position:0% 0%;
  background-size:cover;background-repeat:no-repeat;padding:350px 0 100px;margin-top:-250px;position:relative;z-index:2}
.attract-in{width:100%;max-width:1380px;margin:0 auto;padding:0 13px}
.attract h2{color:#fff;font-family:var(--cond);font-weight:400;font-size:48px;line-height:52px;letter-spacing:.96px;text-transform:uppercase;margin:0}
.attract h2 strong{font-weight:800}
.attract p{color:#fff;font-family:var(--sans);font-size:16px;line-height:24px;margin:20px 0 34px;font-weight:400}
.attract .btns{display:flex;gap:12px;flex-wrap:wrap}
.attract .btn{margin-top:4px}
.attract-rule{height:60px;background:#3590f7}

.casestudy-art img{border-radius:4px;box-shadow:0 18px 40px rgba(20,50,75,.18);max-width:520px}

/* light contact band */
.contactband{background:#cfeafd;padding:50px 0 10px}
.cb-in{max-width:1380px;margin:0 auto;padding:0 13px;display:grid;grid-template-columns:1fr 2fr;gap:28px;align-items:start}
.cb-icon{width:328px;max-width:100%;margin-bottom:40px}
.contactband h3{color:#1f1f1f;font-family:var(--cond);font-weight:400;font-size:48px;line-height:52px;letter-spacing:.96px;text-transform:uppercase;padding-top:62px}
.contactband h3 strong{font-weight:800}
.contactband .tel{color:#e20027}

/* footer */
/* -- site footer (measured off the live footer at 1440) -- */
.ftr{background:#fff;padding:70px 0;position:relative;border-top:0;color:#292929}
.ftr-in{width:1380px;max-width:100%;margin:0 auto;display:flex;align-items:flex-start}
.ftr-col{margin:0 1%}
.ftr-brand{width:31.3333%;padding-top:15px}
/* the live footer carries 45px of empty space below the copyright, left over from the
   WordPress widget system; kept so page heights match the live site exactly */
.ftr-main{width:64.6667%;padding:15px 0 45px}
.ftr-logo-link{display:block;width:300px;max-width:100%}
.ftr-logo{width:300px;height:57.6px;max-width:100%;display:block}
.ftr-contact{margin-top:19.6px;font-family:var(--cond);font-size:16px;line-height:20.6px;letter-spacing:.96px;
  text-transform:uppercase;color:#292929}
.ftr-contact a{color:#292929}
.ftr-contact a:hover{color:#717171}
.ftr-row{display:flex;align-items:flex-start}
.ftr-half{width:48%;margin:0 1%}
.slog{font-family:var(--cond);font-weight:800;font-size:32px;line-height:40px;letter-spacing:.64px;
  text-transform:uppercase;color:#292929;display:block}
.slog i{color:#ffb100;font-style:normal}
.ftr-socialcol{text-align:right}
.ftr-socialbox{display:inline-block;text-align:left}
.ftr-socialbox .jc{font-family:'soleil',var(--sans);font-size:10px;line-height:14.375px;font-weight:400;color:#707070;
  margin:15px 0 10px 10px}
.ftr-socialbox a{margin:0 10px;display:inline-block;line-height:0}
.ftr-socialbox img{display:inline-block;max-width:none}
.ftr-foot{margin:0 1%}
.ftr-rule{width:100%;height:0;box-sizing:content-box;border:1px solid #ed9e79;margin:20px 0}
.ftr-btm{font-family:'soleil',var(--sans);font-size:10px;line-height:17.6px;font-weight:400;color:#707070}
.ftr-btm a{color:#707070}
.ftr-btm a:hover{color:#292929}
.ftr-top-btn{position:absolute;right:75px;bottom:20px;width:42px;height:42px;border-radius:60px;display:flex;
  align-items:center;justify-content:center;color:#292929}
.ftr-top-btn svg{width:24px;height:24px}
@media (max-width:959px){
  .ftr-in{flex-direction:column}
  .ftr-col{width:auto;margin:0 3%}
  .ftr-brand{width:auto}
  .ftr-main{width:auto;padding-top:30px}
}
@media (max-width:767px){
  .ftr{padding:50px 0}
  .ftr-row{flex-direction:column}
  .ftr-half{width:auto;margin:0}
  .ftr-socialcol{text-align:left;margin-top:20px}
  .ftr-socialbox .jc{margin-left:0}
  .ftr-socialbox a{margin:0 20px 0 0}
  .ftr-foot{margin:0}
  .slog{font-size:26px;line-height:32px}
  .ftr-top-btn{right:20px}
}
@media(max-width:1100px){.contactband h3{font-size:36px;line-height:40px;padding-top:30px}.cb-icon{width:240px}}
@media(max-width:767px){.cb-in{grid-template-columns:1fr;gap:18px}.contactband h3{padding-top:0;font-size:30px;line-height:34px}.cb-icon{width:190px}}

/* ============ HUB PAGE (measured off /hub/) ============ */
.hub-hero{background-image:url("/img/hub/hub-page-header.svg");background-size:cover;background-position:50% 100%;
  background-repeat:no-repeat;padding:150px 0 200px}
.hub-hero-copy{max-width:450px}
.hub-hero .tg48{margin:0}
.hub-hero p{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#fff;margin:18px 0 0}

.hub-about{background:#fff;padding:90px 0 50px}
.hub-about-in{max-width:1380px;margin:0 auto;padding:0 13px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.hub-about .lead{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#484848;max-width:550px;margin:0 0 20px}
.hub-about .body{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#707070;max-width:550px;margin:0 0 26px}
.hub-btns{display:grid;grid-template-columns:250px 250px;gap:14px}
.hub-btns a{box-sizing:border-box;height:40px;background:var(--amber);color:#292929;border-radius:60px;padding:12px;text-align:center;
  font-family:var(--cond);font-size:16px;font-weight:400;letter-spacing:.96px;line-height:16px;text-transform:uppercase}
.hub-btns a:hover{background:var(--amber-dk);color:#292929}

.hub-rule-thin{height:16px;background:#d15026}
.hub-rule-thick{height:60px;background:#fd8659}

.hub-q{background:#fd8c5e;padding:90px 0 200px;position:relative}
.hub-q::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:100px;
  background-image:url("/img/triangle-deco-bottom-wide.svg");
  background-size:auto;background-position:0% 100%;background-repeat:no-repeat}
.hub-q-in{max-width:1380px;margin:0 auto;padding:0 13px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;position:relative;z-index:2}
.hub-q-art{display:flex;justify-content:center}
.hub-q-art img{width:374px;max-width:100%}
.hub-form{margin-top:26px;display:grid;gap:25px;max-width:666px}
.hub-form input,.hub-form select,.hub-form textarea{height:56px;border:0;border-radius:4px;background:#f6f6f6;
  padding:0 20px;font-family:var(--sans);font-size:15px;color:#292929;width:100%}
.hub-form input::placeholder{color:#8a8a8a;text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.hub-form .req{font-family:var(--sans);font-size:13px;color:#7a2d14;margin:0}
.hub-form button{box-sizing:border-box;width:auto;height:56px;border:0;border-radius:60px;background:var(--amber);color:#292929;cursor:pointer;
  font-family:var(--cond);font-size:16px;font-weight:400;line-height:16px;letter-spacing:.96px;text-transform:uppercase;
  padding:12px 50px;white-space:nowrap;justify-self:start}
.hub-form button:hover{background:var(--amber-dk)}

.hub-art{background:#fff;padding:10px 0 0}
.hub-hero .hub-2col{padding-bottom:70px}
.hub-art-in{max-width:1380px;margin:0 auto;padding:0 27px}
.hub-art h2{text-align:center;margin-bottom:46px}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:27px}
.hub-card{position:relative}
.hub-card img{width:100%;aspect-ratio:424/296;object-fit:cover;display:block;margin-bottom:15px}
.hub-card h3{font-family:var(--cond);font-size:24px;line-height:26.4px;font-weight:400;text-transform:none;
  letter-spacing:.48px;color:#1f1f1f;margin:0 0 15px}
.hub-card h3 strong{font-weight:800}
.hub-card h3 a{color:#1f1f1f}
.hub-card h3 a:hover{color:var(--blue-dk)}
.hub-card .sub{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#484848;margin:0 0 15px}
.hub-card p{font-family:var(--sans);font-size:16px;line-height:24px;color:#484848;margin:0 0 15px}
.hub-card .more{font-family:var(--cond);font-size:16px;line-height:30px;letter-spacing:.96px;text-transform:uppercase;color:#292929}
.hub-card .more:hover{color:var(--amber-dk)}
.hub-more{text-align:center;padding:46px 0 0}
.hub-more .pill{width:250px;padding:12px}

.hub-contact{background-image:url("/img/hub/hub-free-audit-image.svg");background-size:cover;background-position:0% 0%;
  background-repeat:no-repeat;background-color:#fff;padding:200px 0 100px}
.hub-contact-in{max-width:1380px;margin:0 auto;padding:0 13px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.hub-contact .tg48{margin:0 0 18px}
.hub-contact .caps{font-family:var(--cond);font-size:16px;line-height:22px;letter-spacing:1.4px;text-transform:uppercase;
  color:#1f1f1f;max-width:385px;margin:0 0 20px}
.hub-contact .body{font-family:var(--sans);font-size:16px;line-height:24px;color:#707070;max-width:420px;margin:0}
.hub-contact .hub-form{margin-top:0;grid-template-columns:1fr 1fr;gap:25px}
.hub-contact .hub-form .full{grid-column:1 / -1}
.hub-contact .hub-form textarea{height:120px;padding:16px 20px;resize:vertical;line-height:1.5}

.hub-band{background:#ffe6dc}
.hub-band .cb-icon{width:192px;margin-bottom:40px}
.hub-band h3{padding-top:44px}

@media(max-width:1100px){
  .hub-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  .hub-hero{padding:44px 0 calc(34.86vw + 24px);background-size:contain;background-position:50% 100%;background-color:#ff8c5f}
  .hub-hero .hub-2col{grid-template-columns:1fr}
  .hub-hero .hub-2col > div:first-child{display:none}
  .hub-hero-copy{max-width:none}
  .hub-about-in,.hub-q-in,.hub-contact-in{grid-template-columns:1fr}
  .hub-btns{grid-template-columns:1fr}
  .hub-grid{grid-template-columns:1fr}
  .hub-q{padding:60px 0 100px}
  .hub-contact{padding:46vw 0 60px}
  .hub-contact .hub-form{grid-template-columns:1fr}
}

/* ---- free resources (only the Twitter guide survives the clear-out) ---- */
.res-hero{background-image:url("/img/hub/hub-page-header.svg");background-size:cover;background-position:50% 100%;
  background-repeat:no-repeat;padding:150px 0 200px}
@media(max-width:767px){.res-hero{padding:44px 0 calc(34.86vw + 24px);background-size:contain;background-position:50% 100%;background-color:#ff8c5f}
  .res-hero .hub-2col{grid-template-columns:1fr}.res-hero .hub-2col > div:first-child{display:none}}

/* ============ ABOUT PAGE (measured off /about/) ============ */
.ab-hero{background-image:url("/img/about/about-header-bgr.svg");background-size:cover;background-position:50% 100%;
  background-repeat:no-repeat;padding:150px 0 200px}
.ab-hero-copy{max-width:450px}
.ab-hero .tg48{margin:0}
h1.tg48,h1.svc-title,h1.pf-h{margin-top:0}
.ab-hero p{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#1f1f1f;margin:18px 0 0}
.ab-hero p .tail{font-size:16px;line-height:24px;font-weight:400;color:#fff}

.ab-what{background:#fff;padding:90px 0 50px}
.ab-what-in{max-width:1380px;margin:0 auto;padding:0 13px;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
.ab-what-art{display:flex;justify-content:center}
.ab-what .ab-icon{width:328px;max-width:100%}
.ab-what p{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#484848;max-width:420px;margin:20px 0 26px}

.ab-rule-thin{height:16px;background:#f73866}
.ab-rule-thick{height:60px;background:#e6002c}

.ab-red{background:#cb0a38;padding:90px 0 200px;position:relative}
/* live: 100px tall, bottom:-1px, artwork at NATURAL size (2000x185), anchored left-bottom.
   The box is shorter than the artwork, so the top 85px of it is clipped - that is the shape. */
.ab-red::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:100px;
  background-image:url("/img/triangle-deco-bottom-wide.svg");
  background-size:auto;background-position:0% 100%;background-repeat:no-repeat}
.ab-red-in{max-width:1380px;margin:0 auto;padding:0 13px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.ab-red .tg48{color:#1f1f1f}
.ab-red .lead{font-family:var(--sans);font-size:16px;line-height:23px;font-weight:700;color:#fff;max-width:550px;margin:18px 0 15px}
.ab-red .body{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#fff;max-width:550px;margin:0}
.ab-red a[href^="http"]{color:var(--amber);font-weight:inherit}
.ab-red a[href^="http"]:hover{color:#fff;text-decoration:underline}
.ab-svcbtns{display:flex;flex-wrap:wrap;gap:0;padding-top:138px;align-content:flex-start}
.ab-svcbtns a{background:var(--amber);color:#292929;border-radius:60px;padding:20px 25px;margin:0 10px 15px 0;
  font-family:var(--cond);font-size:16px;font-weight:400;letter-spacing:.96px;line-height:16px;white-space:nowrap}
.ab-svcbtns a:hover{background:var(--amber-dk);color:#292929}

.ab-cards{background:#fff;padding:10px 0 0}
.ab-cards-in{max-width:1380px;margin:0 auto;padding:0 13px;column-count:2;column-gap:68px}
.ab-card{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:46px;max-width:622px}
.ab-card img{height:57px;width:auto;margin-bottom:22px}
.ab-card h3{font-family:var(--cond);font-size:36px;line-height:48px;font-weight:400;text-transform:uppercase;color:#1f1f1f;margin:0}
.ab-card .sep{height:1px;background:#ed9e79;max-width:450px;margin:5px 0 15px}
.ab-card .b{font-family:var(--sans);font-size:16px;line-height:22px;font-weight:700;color:#484848;max-width:450px;margin:0 0 15px}
.ab-card p{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#707070;max-width:450px;margin:0 0 15px}

.ab-attract{background-image:url("/img/about/about-us-triangled.svg");background-size:cover;background-position:0% 0%;
  background-repeat:no-repeat;background-color:#fff;padding:350px 0 100px}
.ab-attract-in{max-width:1380px;margin:0 auto;padding:0 13px}
.ab-attract .tg48{color:#fff;margin:0}
.ab-attract p{font-family:var(--sans);font-size:16px;line-height:24px;color:#fff;margin:20px 0 34px}
.ab-attract .btns{display:flex;gap:12px;flex-wrap:wrap}
.ab-attract .btn{margin-top:4px}

.ab-cs{background:#fff;padding:90px 0 50px}
.ab-cs-in{max-width:1380px;margin:0 auto;padding:0 13px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.ab-cs-art img{width:100%;max-width:555px}
.ab-cs-copy{padding-top:10%}
.ab-cs-copy p{font-family:var(--sans);font-size:16px;line-height:22px;font-weight:700;color:#484848;max-width:350px;margin:24px 0 26px}

.ab-band{background:#fed2dd}
@media(max-width:1100px){
  .ab-red-in,.ab-cs-in{grid-template-columns:1fr}
  .ab-svcbtns{padding-top:24px}
  .ab-cards-in{column-count:1}
  .ab-cs-copy{padding-top:24px}
}
@media(max-width:767px){
  .ab-hero{padding:44px 0 calc(34.86vw + 24px);background-size:contain;background-position:50% 100%;background-color:#fe6692}
  .ab-hero .ab-2col{grid-template-columns:1fr}
  .ab-hero .ab-2col > div:first-child{display:none}
  .ab-hero-copy{max-width:none}
  .ab-red{padding:60px 0 80px}
  .ab-attract{padding:46vw 0 60px}
}

/* ============ SERVICE TEMPLATE (measured off the live pages) ============ */
.svc-wrap{max-width:1380px;margin:0 auto;padding:0 13px}
.svc-2col{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
.tg48{font-family:var(--cond);font-size:48px;line-height:52px;font-weight:400;letter-spacing:.96px;text-transform:uppercase;color:#1f1f1f}
.tg48 strong,.tg48.hvy{font-weight:800}
.pill{display:inline-block;box-sizing:border-box;max-width:100%;height:40px;text-align:center;white-space:nowrap;
  background:var(--amber);color:#292929;border-radius:60px;padding:12px 50px;margin:0 10px 15px 0;text-transform:uppercase;
  font-family:var(--cond);font-size:16px;font-weight:400;letter-spacing:.96px;line-height:16px}
.pill:hover{background:var(--amber-dk);color:#292929}

.svc-hero{background-position:50% 100%;background-size:cover;background-repeat:no-repeat;padding:150px 0 200px}
.svc-title{font-family:var(--cond);font-size:48px;line-height:52px;font-weight:400;letter-spacing:.96px;text-transform:uppercase;color:#1f1f1f}
.svc-title strong{font-weight:800}
.svc-hero-copy{max-width:500px;text-align:left}
.svc-intro{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#fff;max-width:380px;margin:24px 0 0}

.svc-what{background:#fff;padding:90px 0 50px}
.svc-lead{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#484848;max-width:420px;margin:24px 0 26px}
.svc-lead a{color:var(--amber-dk);font-weight:700}
.svc-lead .tail{display:block;font-size:16px;line-height:24px;font-weight:400;color:#707070;margin-top:10px}

.svc-feat{background:#fff;padding:10px 0 0}
.svc-masonry{column-count:2;column-gap:68px}
.svc-blk{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin-bottom:40px;max-width:622px}
.svc-blk h3{font-family:var(--cond);font-size:36px;line-height:48px;font-weight:300;letter-spacing:.72px;
  text-transform:uppercase;color:#1f1f1f;margin:0 0 15px}
.svc-blk h3 strong{font-weight:600}
.svc-blk .sep{height:1px;background:#ed9e79;max-width:450px;margin:5px 0 15px}
.svc-blk .b{font-family:var(--sans);font-size:16px;line-height:23px;font-weight:700;color:#484848;max-width:450px;margin:0 0 15px}
.svc-blk p{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#707070;max-width:450px;margin:0 0 15px}

.svc-cs{background:#fff;padding:90px 0 50px}
.svc-cs-art img{width:100%;max-width:555px;height:auto}
.svc-cs-copy{padding-top:10%}
.svc-cs-p{font-family:var(--sans);font-size:16px;line-height:22px;font-weight:700;color:#484848;max-width:350px;margin:24px 0 26px}

.svc-band{background:#fed2dd;padding:50px 0 10px}
.svc-band .tel{color:#e20027}
.svc-band-in{display:grid;grid-template-columns:1fr 2fr;gap:28px;align-items:start}
.svc-band-icon img{width:328px;max-width:100%;margin-bottom:40px}
.svc-band-copy{padding-top:62px}

@media(max-width:1180px){
  .svc-masonry{column-gap:44px}
}
/* Live breakpoint is 767px (Betheme tablet). Below it the hero keeps its type size:
   artwork switches to contain along the bottom and the copy stacks above it.
   Bottom padding on the live page measures 26% of viewport width at every size. */
@media(max-width:1000px){
  .svc-masonry{column-count:1}
  .svc-cs-copy{padding-top:26px}
}
@media(max-width:767px){
  .svc-hero{
    background-color:#f871cf;
    background-size:contain;
    background-position:50% 100%;
    padding:35px 0 calc(34.86vw + 24px);
  }
  .svc-hero .svc-2col{grid-template-columns:1fr}
  .svc-hero .svc-2col > div:first-child{display:none}
  .svc-hero-copy{max-width:none}
  .svc-wrap{padding:0 33px}
  .svc-2col{grid-template-columns:1fr}
  .svc-what .svc-2col > div:first-child{display:none}
  .svc-what-copy{max-width:none}
  .svc-band-in{grid-template-columns:1fr;gap:20px}
  .svc-band-icon img{width:200px}
  .svc-band-copy{padding-top:0}
}
@media(max-width:560px){
  .svc-title,.tg48{font-size:36px;line-height:40px}
  .svc-blk h3{font-size:30px;line-height:34px}
}

/* ============ PROFILE ============ */
.pf-top{background:#fcfcfc;padding:70px 0;border-bottom:1px solid var(--line)}
.pf-top-in{display:flex;gap:54px;align-items:center}
.pf-shot{width:230px;height:230px;border-radius:50%;flex-shrink:0}
.pf-h{font-family:var(--cond);font-size:clamp(32px,3.8vw,48px);font-weight:400;text-transform:uppercase;line-height:1.05;color:var(--ink-2)}
.pf-h strong{font-weight:700}
.pf-lead{font-size:20px;font-weight:700;line-height:1.5;color:#484848;max-width:460px;margin:16px 0 0}
.pf-body{padding:70px 0}
.pf-body .wrap{max-width:898px}
.pf-icon{width:54px;margin-bottom:22px}
.pf-h2{font-family:var(--cond);font-size:clamp(28px,3.1vw,36px);font-weight:400;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}
.pf-h2 strong{font-weight:700}
.pf-stand{font-size:16px;font-weight:700;color:#484848;line-height:1.6;margin-bottom:20px}
.pf-body p{font-size:16px;line-height:24px;color:#707070;margin:0 0 15px}
.pf-arts{background:#fcfcfc;padding:70px 0;border-top:1px solid var(--line)}
.pf-artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:27px;margin-top:30px}
.pf-art{position:relative}
.pf-art img{width:100%;aspect-ratio:424/296;object-fit:cover;display:block;margin-bottom:15px}
.pf-art h3{font-family:var(--cond);font-size:24px;line-height:26.4px;font-weight:400;letter-spacing:.48px;
  text-transform:none;color:#1f1f1f;margin:0 0 15px}
.pf-art h3 strong{font-weight:800}
.pf-art .sub{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#484848;margin:0 0 15px}
.pf-art p{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#484848;margin:0 0 15px}
.pf-art .more{font-family:var(--cond);font-size:16px;line-height:30px;letter-spacing:.96px;text-transform:uppercase;color:#292929}
.pf-art .more:hover{color:var(--amber-dk)}
@media(max-width:900px){.pf-top-in{flex-direction:column;text-align:center}.pf-artgrid{grid-template-columns:1fr}}

/* ============ BLOG (index + single) ============ */
/* geometry measured off https://www.flycastmedia.co.uk/blog/ at 1440px:
   wrap 1380, posts column two-third, .post-item 750 wide, sidebar column 270 at x=955 */
.blogwrap{max-width:1380px;margin:0 auto;padding:0 9px;display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0;align-items:start}
.blogmain{min-width:0;max-width:750px}
.blogside{width:270px}

/* -- index hero: same artwork and rhythm as the hub header -- */
.blog-hero{background-image:url("/img/blog/hub-page-header.svg");background-repeat:no-repeat;
  background-position:50% 100%;background-size:cover;padding:200px 0}
.blog-hero-in{max-width:1380px;margin:0 auto;padding:0 13px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.blog-hero-copy{max-width:450px;margin-bottom:40px}
.blog-hero h1{font-family:var(--cond);font-size:48px;line-height:52px;font-weight:400;letter-spacing:.96px;
  text-transform:uppercase;color:#1f1f1f;margin:0 0 34px}
.blog-hero h1 strong{font-weight:800}
.blog-hero p{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#fff;max-width:380px;margin:0 0 15px}
.blog-hero p span{font-size:16px;font-weight:400}

/* -- index listing -- */
.blog-list{background:#fff;padding:90px 0 40px}
.post-item{position:relative;max-width:750px;padding:0 0 30px;margin:0 0 15px;border-bottom:2px solid #ccc}
.post-item .post-desc{padding:20px 0 0}
/* the live theme hides .date_label on every post listing - no dates anywhere */
.date_label,.post-item .date_label,.hub-card .d,.pf-art .d{display:none}
.post-item h2{font-family:var(--sans);font-size:30px;line-height:33px;font-weight:300;letter-spacing:normal;
  text-transform:none;color:#1f1f1f;margin:0 0 15px}
.post-item h2 a{font-family:var(--cond);font-size:36px;line-height:36px;font-weight:300;letter-spacing:.72px;
  text-transform:uppercase;color:#1f1f1f}
.post-item h2 a:hover{color:#717171}
.post-item h2 strong{font-weight:800}
.post-item .post-excerpt{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#484848;
  letter-spacing:normal;text-transform:none}
.post-item .post-excerpt .sub{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#484848;
  margin:0 0 15px;letter-spacing:normal;text-transform:none}
.post-item .post-excerpt p{font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;
  color:inherit;margin:0 0 15px}
.post-item .post-footer{margin:0 -30px;padding:7px 15px}
.post-item .post-links{padding:0 0 0 17.8px}
.post-item .post-links i{display:none}
@media (max-width:767px){.post-item .post-footer{margin:0;padding:7px 0}.post-item .post-links{padding:0}}
.post-links{padding:7px 0}
.post-links svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px;fill:#292929}
.post-more{font-family:var(--cond);font-size:16px;line-height:30px;font-weight:400;letter-spacing:.96px;
  text-transform:uppercase;color:#292929}
.post-more:after{content:'>';font-size:20px;margin-left:5px}
.post-more:hover{color:#717171}

/* -- index closing bands -- */
.blog-cta{background-color:#fff;background-image:url("/img/blog/hub-articles-bottom-bgr.svg");background-repeat:no-repeat;
  background-position:0% 0%;background-size:cover;padding:350px 0 100px}
.blog-cta-in{max-width:1380px;margin:0 auto;padding:0 13px 55px}
.blog-cta .tg48{color:#fff;margin:0 0 20px}
.blog-cta p{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#fff;margin:0 0 40px}
.blog-pager{max-width:750px;text-align:center;padding:20px 0 24.6px}
.blog-pager .pill,.catpager .pill{margin:0}
.blog-pager .pill{padding:12px 50px;border:0;cursor:pointer;line-height:16px}
.blog-pager svg{width:14px;height:14px;fill:#292929;vertical-align:-2px;margin-right:6px}
.blog-rule{height:60px;background:#f96833}
.blog-band{background:#fadaf1}

/* -- sidebar widgets (SIGN UP above RECENT POSTS, exactly as on the live site) -- */
.w{margin:0 0 10px;padding:0 0 10px}
.blogside .w h3{font-family:var(--cond);font-size:36px;line-height:38px;font-weight:600;letter-spacing:.72px;
  text-transform:uppercase;color:#1f1f1f;margin:0 0 15px}
.blogside .w h3 strong,.blogside .w h3 b{font-weight:800}
.blogside .w .up16{font-family:var(--cond);font-size:16px;line-height:19.2px;font-weight:400;letter-spacing:.96px;
  text-transform:uppercase;color:#484848;margin:0 0 15px}
.blogside .w .reg{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#707070;margin:0 0 15px}
.w-divider{height:2px;background:#ccc;margin:0 0 10px}
.blogside .w-guides,.blogside .w-recent{list-style:none;margin:0;padding:0}
.blogside .w-guides li{padding:10px 0;margin:0;list-style:none}
.blogside .w-recent li{margin:0 0 10px;padding:0;list-style:none}
.w-guides a{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#707070}
.w-guides a:hover{color:#1f1f1f}
.w-audit{text-align:center}
.w-audit{text-align:center;padding:0}
.w-audit .pill{padding:12px 10px 12px 20px;border:0;line-height:16px;margin:0 0 15px}
/* every form posts to Web3Forms, which emails office@flycastmedia.co.uk */
.botcheck{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-msg{font-family:var(--sans);font-size:15px;line-height:22px;margin:10px 0 0;min-height:22px}
.form-msg.ok{color:#1b7d3f}
.form-msg.err{color:#c0392b}
form.sending button{opacity:.6;pointer-events:none}
.w-form{padding:0 5px}
.w-form input{box-sizing:border-box;width:100%;height:56px;margin:0 0 12px;padding:12px;border:1px solid #e6e6e6;
  border-radius:10px;background:#f7f7f7;font-family:var(--cond);font-size:16px;font-weight:400;color:#292929}
.w-form input::placeholder{color:#8a8a8a}
.w-form button{box-sizing:border-box;width:100%;height:40px;padding:12px 15px;border:0;border-radius:60px;
  background:var(--amber);color:#1f1f1f;cursor:pointer;
  font-family:var(--cond);font-size:16px;font-weight:400;line-height:16px;letter-spacing:.96px;text-transform:uppercase}
.w-form button:hover{background:var(--amber-dk)}
.w-recent{list-style:none;margin:0;padding:0}
.w-recent li{margin:0 0 10px}
.w-recent a{display:block;padding:5px 0}
.w-recent h6{font-family:var(--sans);font-size:16px;line-height:17.6px;font-weight:400;letter-spacing:0;
  text-transform:lowercase;color:#707070;margin:0 0 3px;padding:0 0 3px}
.w-recent h6::first-letter{text-transform:uppercase}
.w-recent h6 strong{font-weight:700}
.w-recent a:hover h6{color:#292929}

/* -- single post -- */
.post-hero{background:#1b2229 center bottom/cover no-repeat;position:relative;padding:200px 0;text-align:center}
.post-hero-in{max-width:1380px;margin:0 auto;padding:0 44px 78px}
.post-hero h1{font-family:var(--cond);color:#fff;font-size:48px;line-height:52px;font-weight:400;letter-spacing:.96px;
  text-transform:uppercase;margin:0 0 15px}
.post-hero h1 strong{font-weight:800}
.post-hero .standfirst{font-family:'soleil',var(--sans);color:#fff;font-weight:700;font-size:16px;line-height:23px;
  max-width:520px;margin:20px auto}
.post-hero .sharelbl{font-family:var(--sans);color:#fff;font-size:16px;line-height:17.6px;font-weight:400;margin:0 0 15px}
.share{display:flex;gap:6px;justify-content:center}
.share a{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.share svg{width:32px;height:32px;fill:#ed9e79}
.share a:hover svg{fill:var(--amber)}
.postbody{background:#fff;padding:90px 0 0}
.postbody .blogmain{max-width:748px}
.postbody h2{font-family:var(--sans);font-size:30px;line-height:33px;font-weight:300;letter-spacing:normal;
  text-transform:none;color:#1f1f1f;margin:0 0 15px}
.postbody h2>strong{font-weight:700;color:#484848;line-height:inherit}
/* the article's own opening heading keeps the condensed uppercase style */
.postbody h2.headingTG36pxCondensedBold,.postbody h2.headingTG36pxCondensedRegular,
.postbody h2.headingTG36pxCondensedHeavy{font-family:var(--cond);font-size:36px;line-height:36px;
  font-weight:600;letter-spacing:.72px;text-transform:uppercase;color:#1f1f1f}
.postbody h2.headingTG36pxCondensedBold strong,.postbody h2.headingTG36pxCondensedBold span,
.postbody h2.headingTG36pxCondensedRegular strong,.postbody h2.headingTG36pxCondensedRegular span{
  font-weight:800;line-height:28.8px;color:inherit}
.postbody p{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#707070;margin:0 0 15px}
.postbody ul{list-style:disc outside;margin:0 0 15px 30px;padding:0}
.postbody li{font-family:var(--sans);font-size:16px;line-height:17.6px;font-weight:400;color:#707070;margin:0 0 10px}
.postbody li strong{color:#484848}
.tldr-lead{font-family:var(--sans);font-size:16px;line-height:24px;color:#707070;margin:0 0 15px}
.tldr-lead strong{color:#484848}
.tldr-list{list-style:disc outside;margin:0 0 15px 30px;padding:0}
.post-foot-share{margin:0 0 30px}
.post-foot-share .sharelbl{font-family:var(--sans);font-size:16px;line-height:17.6px;color:#1f1f1f;margin:0 0 15px}
.post-foot-share .share{justify-content:flex-start}
.authorbox{border-top:1px solid var(--line);margin-top:24px;padding-top:26px}
.authorbox .lbl{font-family:var(--cond);font-size:16px;letter-spacing:.96px;text-transform:uppercase;color:#1f1f1f;margin-bottom:8px}
.authorbox p{font-size:16px;line-height:24px;color:#707070;margin:0}
.authorbox a{color:var(--blue-dk);font-weight:600}
.post-band{background:#f9f9f9}
.post-band .cb-icon{width:192px;margin-bottom:40px}
.post-band h3{padding-top:44px}
@media(max-width:1060px){
  .blogwrap{grid-template-columns:1fr;gap:48px}
  .blogside{width:100%;max-width:520px}
}
@media(max-width:767px){
  .blog-hero{padding:44px 0 calc(34.86vw + 24px);background-size:contain;background-position:50% 100%;background-color:#ff8c5f}
  .blog-hero-in{grid-template-columns:1fr}
  .blog-hero-in > div:first-child{display:none}
  .blog-hero-copy{max-width:none}
  .blog-cta{padding:46vw 0 60px}
  .post-hero{padding:120px 0}
  .post-hero-in{padding:0 20px}
  .post-item h2{font-size:30px;line-height:30px}
}


/* ============ BETHEME CONTENT CLASSES ============
   The 90 article bodies are reproduced from the live pages with their own
   markup intact, so the utility classes of the theme are implemented here rather
   than rewritten. Values measured off flycastmedia.co.uk at 1440px. */
.headingTG48pxCondensedRegular{font-family:var(--cond);font-size:48px;line-height:52px;font-weight:400;
  letter-spacing:.96px;text-transform:uppercase}
.headingTG48pxCondensedHeavy{font-family:var(--cond);font-size:48px;line-height:52px;font-weight:800;
  letter-spacing:.96px;text-transform:uppercase}
.headingTG36pxCondensedRegular{font-family:var(--cond);font-size:36px;line-height:48px;font-weight:400;
  letter-spacing:.72px;text-transform:uppercase}
.headingTG36pxCondensedBold{font-family:var(--cond);font-size:36px;line-height:48px;font-weight:600;
  letter-spacing:.72px;text-transform:uppercase}
.headingTG36pxCondensedHeavy{font-family:var(--cond);font-size:36px;line-height:48px;
  font-weight:800;letter-spacing:.72px;text-transform:uppercase}
.headingTG36pxHeavy{font-family:trade-gothic-next,var(--cond);font-size:36px;line-height:48px;
  font-weight:800;letter-spacing:.72px;text-transform:uppercase}
.narrowLineHeight,h1.narrowLineHeight>.headingTG36pxCondensedHeavy,
h2.narrowLineHeight>.headingTG36pxCondensedHeavy{line-height:.8}
.proximaNova20pxBold{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700}
.proximaNova16pxRegular{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400}
.soleil16pxBold{font-family:'soleil',var(--sans);font-size:16px;line-height:23px;font-weight:700}
.soleil16pxNormal{font-family:'soleil',var(--sans);font-size:16px;line-height:17.6px;font-weight:400}
.uppercase16px{font-family:var(--cond);font-size:16px;line-height:19.2px;font-weight:400;letter-spacing:.96px;
  text-transform:uppercase}
.color-white{color:#fff}
.color-1f1f1f,.color-1F1F1F{color:#1f1f1f}
.color-484848{color:#484848}
.color-707070{color:#707070}
.max-width-380px{max-width:380px}
.max-width-420px{max-width:420px}
.max-width-450px{max-width:450px}
.border-separator{display:block;width:100%;max-width:450px;height:1px;background:#ed9e79;margin:5px 0 15px}
.max-width-480px{max-width:480px}
.max-width-520px-centered{max-width:520px;margin-left:auto;margin-right:auto}
.lighterColorP p{color:#707070}
.noanchor{color:inherit;cursor:default}
.image_frame,.image_wrapper{display:block;margin:0 0 15px}
.image_frame img,.scale-with-grid{max-width:100%;height:auto;display:block}
/* the Betheme button, used inside article bodies */
.postbody .button,.postbody a.button{display:inline-block;box-sizing:border-box;height:40px;white-space:normal;position:relative;overflow:hidden;
  background:var(--amber);color:#292929;border-radius:60px;padding:12px 50px;margin:0 10px 15px 0;text-align:center;
  font-family:var(--cond);font-size:16px;line-height:16px;font-weight:400;letter-spacing:.96px;text-transform:none}
.postbody .button_label{font-family:var(--cond);font-size:16px;line-height:16px;font-weight:400;letter-spacing:.96px;
  text-transform:uppercase;color:#292929}
.postbody .button:hover{background:var(--amber-dk)}
/* article furniture */
.postbody h3{font-family:var(--sans);font-size:20px;line-height:22px;font-weight:300;color:#1f1f1f;margin:0 0 15px;
  text-transform:none;letter-spacing:normal}
.postbody h3>strong{font-weight:700;color:#484848}
.postbody h4{font-family:var(--sans);font-size:21px;line-height:23.1px;font-weight:500;color:#1f1f1f;margin:0 0 15px;
  text-transform:none;letter-spacing:normal}
.postbody h4>strong{font-weight:700;color:#484848}
.postbody a{color:#0f7fc4}
.postbody a:hover{color:var(--amber-dk)}
.postbody ol{margin:0 0 15px 30px;padding:0}
.postbody ol li{list-style:decimal}
.postbody table{width:100%;border-collapse:collapse;margin:0 0 20px;font-family:var(--sans);font-size:15px;line-height:21px}
.postbody th,.postbody td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;color:#484848}
.postbody th{background:var(--wash);font-weight:700;color:#1f1f1f}
.postbody hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.postbody iframe{max-width:100%;border:0;margin:0 0 20px}
.postbody figure{margin:0 0 20px}
.postbody figure img{width:100%;height:auto;display:block}
.postbody .share{justify-content:flex-start;margin:0 0 20px}
/* FAQ accordions used by a handful of the longer guides */
.postbody .dropdown{border-bottom:1px solid var(--line)}
.postbody .dropdown-header{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:700;color:#1f1f1f;
  padding:14px 30px 14px 0;cursor:pointer;position:relative}
.postbody .dropdown-header::after{content:"+";position:absolute;right:6px;top:12px;font-size:20px;color:var(--amber-dk)}
.postbody .dropdown-header.open::after{content:"\2013"}
.postbody .dropdown-content{display:none;padding:0 0 10px}
.postbody .dropdown-content.open{display:block}
.postbody .toc{background:var(--wash);padding:20px 24px 6px;margin:0 0 20px}
.postbody .toc ol{margin:0 0 0 20px}
.postbody .toc li{margin-bottom:8px}
@media(max-width:767px){
  /* long CTA labels and wide comparison tables must not push the page sideways */
  .btn,.pill,.postbody .button,.postbody a.button{height:auto;padding:12px 24px;line-height:20px;overflow:visible}
  .postbody .button_label{line-height:20px}
  .postbody table{display:block;overflow-x:auto;max-width:100%}
  .postbody,.postbody a,.postbody h2,.postbody h3,.post-hero h1{overflow-wrap:anywhere;word-break:break-word}
  .postbody iframe{max-width:100%}
}


/* ============ CASE STUDIES (the Betheme / Muffin Builder grid) ============
   The twelve case study pages are reproduced from the live pages with their
   own section markup intact, so the Muffin Builder grid is implemented here.
   Column maths measured off /portfolios/financial-website-design-case-study/
   at 1440px: wrap = fraction of the 1380 container, column = fraction minus
   2%, with a 1% side margin and the 40px bottom margin every column carries. */
.cspage .section{position:relative}
/* background-video sections (MDD, AFTT, Serverspace). Measured off
   /portfolios/serverspace/: the video is laid over the section at 100% width
   and its natural ratio, anchored top-left and clipped by the section, with a
   60% black mask above it and the content on z-index 10. */
.cspage .section.has-video{overflow:hidden}
.cspage .section_video{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1}
.cspage .section_video video{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:block;
  object-fit:cover;object-position:center top}
.cspage .section_video .mask{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;background:transparent}
.cspage .darkVideoOverlay .section_video .mask{background:rgba(0,0,0,.6)}
.cspage .section.has-video .section_wrapper{position:relative;z-index:10}
.cspage .section:after,.cspage .section_wrapper:after,.cspage .mcb-wrap-inner:after,
.cspage .clearfix:after{content:"";display:table;clear:both}
.cspage .section_wrapper{max-width:1380px;margin:0 auto}
/* the site-wide .wrap container would otherwise clamp these to 1180px */
.cspage .wrap.mcb-wrap{float:left;width:100%;max-width:none;margin:0;padding:0}
.cspage .wrap.mcb-wrap.one-second{width:50%}
.cspage .wrap.mcb-wrap.one-third{width:33.3333%}
.cspage .wrap.mcb-wrap.two-third{width:66.6667%}
.cspage .wrap.mcb-wrap.three-fourth{width:75%}
.cspage .wrap.mcb-wrap.one-fourth{width:25%}
.cspage .mcb-column{float:left;margin:0 1% 40px;width:98%}
.cspage .mcb-column.one-second{width:48%}
.cspage .mcb-column.one-third{width:31.3333%}
.cspage .mcb-column.two-third{width:64.6667%}
.cspage .mcb-column.three-fourth{width:73%}
.cspage .mcb-column.one-fourth{width:23%}
.cspage .column-margin-30px{margin-bottom:30px}
.cspage .column_attr{font-family:var(--sans);font-size:16px;line-height:17.6px;color:#484848}
.cspage .column_attr p{margin:0 0 15px}
.cspage .align_center,.cspage .aligncenter{text-align:center}
.cspage .align_right{text-align:right}
.cspage .bg-cover{background-size:cover}
.cspage .column_placeholder .placeholder{height:17.6px}
.cspage .equalHeightCols{min-height:0}
.cspage .portfolioColTitle{font-family:var(--cond);font-size:24px;line-height:26.4px;font-weight:600;
  letter-spacing:.48px;text-transform:uppercase;color:#1f1f1f;margin:0 0 15px}
.cspage p.max-width-350px,.cspage .max-width-350px{max-width:350px;margin:0 0 15px}
.cspage p.max-width-460px-centered,.cspage .max-width-460px-centered{max-width:460px;margin:20px auto;text-align:center}
.cspage p.max-width-520px-centered,.cspage .max-width-520px-centered{max-width:520px;margin:20px auto;text-align:center}
.cspage p.max-width-380px,.cspage .max-width-380px{max-width:380px}
.cspage p.max-width-420px,.cspage .max-width-420px{max-width:420px}
.cspage p.max-width-450px,.cspage .max-width-450px{max-width:450px}
.cspage .image_frame{display:inline-block;max-width:100%;margin:0;text-align:center}
.cspage .image_frame.aligncenter{display:block;width:100%;text-align:center}
/* kill the inline baseline gap that would otherwise add 15px under every image column */
.cspage .column_image{line-height:0}
.ty{background:#f6f6f6;padding:110px 0 120px}
.ty-in{max-width:780px;margin:0 auto;padding:0 24px;text-align:center}
.ty-tick{width:92px;height:92px;margin:0 auto 28px;border-radius:50%;background:var(--amber);
  display:flex;align-items:center;justify-content:center}
.ty-tick svg{width:54px;height:54px;fill:none;stroke:#292929;stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round}
.ty-tick circle{stroke:none}
.ty h1{margin:0 0 20px}
.ty-lead{font-family:var(--sans);font-size:20px;line-height:30px;color:#484848;margin:0 0 14px}
.ty-note{font-family:var(--sans);font-size:17px;line-height:26px;color:#707070;margin:0 0 34px}
.ty-note a{color:#292929;font-weight:700}
.ty-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
@media(max-width:600px){ .ty{padding:70px 0 80px} .ty-btns{flex-direction:column;align-items:stretch} }
/* Theme utility classes used by the pages rebuilt from the live site,
   taken from flycastmedia.co.uk and scoped to the Betheme pages. */
.cspage .equal-height-wrap .mcb-wrap .mcb-wrap-inner{position: relative; float: left; width: 100%;}
.cspage .equal-height-wrap .mcb-wrap.valign-middle .mcb-wrap-inner{top: 50%; transform: translateY(-50%);}
.cspage .equal-height-wrap .mcb-wrap.valign-bottom .mcb-wrap-inner{top: 100%; transform: translateY(-100%);}
.cspage .one-sixth.mcb-wrap{width: 16.666%;}
.cspage .one-fifth.mcb-wrap{width: 20%;}
.cspage .three-fifth.mcb-wrap{width: 60%;}
.cspage .one-sixth.column{width: 14.666%;}
.cspage .one-fifth.column{width: 18%;}
.cspage .three-fifth.column{width: 58%;}
.cspage .no-margin-h .column{margin-left: 0px; margin-right: 0px;}
.cspage .no-margin-h .one-sixth.column{width: 16.666%;}
.cspage .no-margin-h .one-fifth.column{width: 20%;}
.cspage .no-margin-h .one-fourth.column{width: 25%;}
.cspage .no-margin-h .one-third.column{width: 33.333%;}
.cspage .no-margin-h .two-fifth.column{width: 40%;}
.cspage .no-margin-h .one-second.column{width: 50%;}
.cspage .no-margin-h .three-fifth.column{width: 60%;}
.cspage .no-margin-h .two-third.column{width: 66.666%;}
.cspage .no-margin-h .three-fourth.column{width: 75%;}
.cspage .no-margin-h .four-fifth.column{width: 80%;}
.cspage .no-margin-h .five-sixth.column{width: 83.333%;}
.cspage .no-margin-h .one.column{width: 100%;}
.cspage .column-margin-50px .column{margin-bottom: 50px !important;}
.cspage .column-margin-50px.column{margin-bottom: 50px !important;}
.cspage .equal-height .column .column_attr{height: 100%; box-sizing: border-box;}
.cspage .column_attr.align_left{text-align: left;}
.cspage .section.no-margin .column,.cspage .section.no-margin-v .column{margin-bottom: 0px;}
.cspage .mfn-rev-slider input{display: inline-block;}
.cspage .photo2 .image_frame .image_wrapper .mask,.cspage .photo2 .image_frame .image_wrapper .image_links{display: none;}
.cspage .photo2 .button-love{position: absolute; right: 25px; top: 25px; padding: 4px 13px; border-radius: 20px; background-color: rgb(39, 39, 39); z-index: 2;}
.cspage .hide-love .button-love{display: none !important;}
.cspage .button_align.align_center{text-align: center;}
.cspage .button_align.align_right{text-align: right;}
.cspage .image_frame:not(.no_link) .image_wrapper img:not(.ls-l){margin-bottom: -15px !important;}
.cspage .image_frame .image_wrapper .image_links{width: 100%; height: 60px; position: absolute; left: 0px; bottom: -60px; z-index: 4; overflow: hidden;}
.cspage .image_frame .image_wrapper .image_links a{display: block; font-size: 25px; line-height: 60px; width: 100%; text-align: center;}
.cspage .image_frame .image_wrapper .image_links.double a{width: 50%; display: block; float: left;}
.cspage .image_frame .image_wrapper .image_links.double a:first-child{box-shadow: rgba(255, 255, 255, 0.2) -1px 0px 0px 0px inset;}
.cspage .image_frame .image_wrapper .image_links.triple a{width: 33%; display: block; float: left; box-shadow: rgba(255, 255, 255, 0.2) -1px 0px 0px 0px inset;}
.cspage .image_frame .image_wrapper .image_links.triple a:last-child{box-shadow: 0px 0px 0px; width: 34%;}
.cspage .image_frame.no_border{border-width: 0px;}
.cspage .image_frame .image_wrapper .image_links a{transition: 0.1s ease-in-out;}
.cspage .if-overlay .image_frame .image_wrapper .image_links{opacity: 0; width: 60px; height: 60px; bottom: auto; top: 50%; left: 50%; z-index: 4; margin-top: -30px; margin-left: -30px; transform: scale(0);}
.cspage .if-overlay .image_frame .image_wrapper .image_links.double{width: 120px; margin-left: -60px;}
.cspage .if-zoom .image_frame .image_wrapper .image_links{display: none;}
.cspage .if-disable .image_frame .image_wrapper .image_links{display: none;}
.cspage .hover_color.align_left{text-align: left;}
.cspage .mfn_heading.align_left{text-align: left;}
.cspage .mcb-section.bg-contain,.cspage .mcb-wrap.bg-contain,.cspage .column_attr.bg-contain{background-size: contain;}
.cspage .image_frame:not(.no_link) .image_wrapper div.jp-jplayer > img{margin-bottom: 0px !important; opacity: 1 !important; transform: scale(1) !important;}
@media only screen and (min-width: 768px) and (max-width: 959px){.cspage .photo2.col-3 .button-love{top: 15px; right: 15px;}}
@media only screen and (min-width: 768px){.cspage .section.full-width:not(.no-margin-h) .wrap .wpcf7-form .one.column{width: 98%; margin-left: 1%; margin-right: 1%;}}
@media only screen and (max-width: 767px){.cspage .column_attr.mobile_align_left{text-align: left;}}
@media only screen and (max-width: 767px){.cspage .column_attr.mobile_align_center{text-align: center;}}
@media only screen and (max-width: 767px){.cspage .equal-height-wrap .mcb-wrap{height: auto !important;}}
@media only screen and (max-width: 767px){.cspage .equal-height-wrap .mcb-wrap .mcb-wrap-inner{top: 0px !important; transform: none !important;}}
.cspage .column_column ul,.cspage .column_column ol,.cspage .the_content_wrapper ul,.cspage .the_content_wrapper ol{color: rgb(72, 72, 72);}
.cspage .image_frame .image_wrapper .image_links a{color: rgb(255, 255, 255);}
.cspage .color-292929{color: rgb(41, 41, 41) !important;}
.cspage .color-yellow{color: rgb(255, 177, 0) !important;}
.cspage .headingTG16pxCondensedHeavy{font-size: 16px !important; line-height: 18px !important; font-weight: 800 !important;}
.cspage .headingTG24pxCondensedRegular{line-height: 26px !important; font-size: 24px !important;}
.cspage .soleil14pxLight{font-size: 14px !important; color: rgb(152, 152, 152) !important; font-weight: 300 !important;}
.cspage .soleil20pxBold{font-size: 20px; font-weight: 700 !important;}
.cspage .soleil20pxRegular{font-size: 20px;}
.cspage .soleil20pxLight{font-size: 20px; font-weight: 300 !important;}
.cspage .sectionHead{width: 100%; background: rgb(226, 60, 100); padding: 10px; margin-bottom: 0px !important;}
.cspage .sectionHead *{color: white !important;}
.cspage .sectionBody{background: rgb(241, 241, 241); padding: 10px;}
.cspage .max-width-745px-centered{max-width: 745px; margin: 20px auto;}
.cspage .max-width-600px{max-width: 600px;}
.cspage .max-width-375px{max-width: 375px;}
.cspage .larger-inline-buttons-columns .column,.cspage .larger-inline-buttons-columns .columns{margin: 0px 0.75% 7px;}
.cspage .showOnMobile{display: none;}
.cspage .flycastTop5 .entry-title a{font-family: trade-gothic-next-condensed, sans-serif !important; text-transform: uppercase !important; font-size: 36px !important; letter-spacing: 0.02em !important; line-height: 48px !important;}
.cspage .flycastTop5 .entry-title a strong,.cspage .flycastTop5 .entry-title a b{font-family: trade-gothic-next-condensed, sans-serif !important; font-weight: 800 !important;}
.cspage .no-margin-bottom{margin-bottom: 0px !important;}
.cspage .margin-bottom-10px{margin-bottom: 10px !important;}
.cspage .equal-height-icons .image_wrapper{vertical-align: bottom; display: inline-flex; height: 52px !important;}
.cspage .landing-page-slider .headingTG48pxCondensedRegular{font-size: 2.5vw !important; line-height: 1.15 !important;}
.cspage .landing-page-slider .soleil20pxLight{font-size: 1.2vw; line-height: 1.4 !important;}
.cspage .form-with-labels .nf-field-label,.cspage .form-with-labels .nf-field-label label{font-family: trade-gothic-next-condensed, sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; line-height: 18px !important; font-size: 16px !important; font-weight: 400 !important; display: inline-block !important; color: rgb(41, 41, 41) !important;}
@media screen and (min-width: 1240px){.cspage .landing-page-slider .headingTG48pxCondensedRegular{font-size: 43px !important; line-height: 1.1 !important;}}
@media screen and (min-width: 1240px){.cspage .landing-page-slider .soleil20pxLight{font-size: 20px; line-height: 1.1 !important;}}
@media screen and (min-width: 1240px){.cspage .larger-inline-buttons .mcb-wrap-inner .one{display: inline-block; margin: 0px 1% 20px; width: 98% !important;}}
@media screen and (max-width: 1239px){.cspage .larger-inline-buttons .mcb-wrap-inner .one{display: inline-block; margin: 0px 1% 20px; width: 98% !important;}}
@media screen and (max-width: 992px){.cspage .customContactPageButtons .smallerFontMobile{padding: 12px 25px;}}
@media screen and (max-width: 992px){.cspage .larger-inline-buttons{width: 100% !important;}}
@media screen and (max-width: 992px){.cspage .textCenterOnMobile{text-align: center !important;}}
@media screen and (max-width: 992px){.cspage .larger-inline-buttons{padding-top: 0px !important;}}
@media screen and (max-width: 992px){.cspage .leftAlignMobile *,.cspage .leftAlignMobile .button_align.align_center{text-align: left;}}
@media screen and (max-width: 992px){.cspage .showOnMobile{display: inline-block;}}
@media screen and (max-width: 992px){.cspage .hideOnMobile{display: none !important;}}
@media screen and (max-width: 992px){.cspage .tinyPaddingBottomMobile{padding-bottom: 30px !important;}}
@media screen and (max-width: 992px){.cspage .paddinTop50pxMobile{padding-top: 50px !important;}}
@media screen and (max-width: 992px){.cspage .paddinTop100pxMobile{padding-top: 100px !important;}}
@media screen and (min-width: 992px) and (max-width: 1239px){.cspage .larger-inline-buttons .one-third{min-height: 55px;}}
@media screen and (max-width: 767px){.cspage .larger-inline-buttons .mcb-wrap-inner .one{display: block; width: 98%;}}
@media screen and (max-width: 767px){.cspage .page-id-11 .soleil16pxRegular.color-707070.max-width-380px{color: white !important;}}
@media screen and (max-width: 767px){.cspage .landingPageIntroSlide{background: url("/img/posts/2020_11_landing-page-top.svg") center bottom / contain no-repeat, linear-gradient(90deg, rgb(225, 59, 99) 0%, rgb(226, 60, 100) 56%, rgb(236, 63, 103) 67%, rgb(230, 60, 99) 100%) !important; padding-top: 35px !important; padding-bottom: 35vw !important;}}
@media screen and (max-width: 767px){.cspage .servicesPageIntroSlide{background: url("/img/posts/2020_10_services-us-header-bgr.svg") center bottom / contain no-repeat, linear-gradient(90deg, rgb(233, 97, 192) 0%, rgb(237, 121, 204) 56%, rgb(238, 134, 209) 67%, rgb(238, 134, 210) 100%) !important; padding-top: 35px !important; padding-bottom: 25vw !important;}}
@media screen and (max-width: 767px){.cspage .googleAdsPPCPageIntroSlide{background: url("/img/posts/2020_10_google-ads-PPC-header.svg") center bottom / contain no-repeat, linear-gradient(90deg, rgb(247, 111, 207) 0%, rgb(246, 111, 206) 56%, rgb(246, 111, 207) 67%, rgb(246, 111, 206) 100%) !important; padding-top: 35px !important; padding-bottom: calc(34.86vw + 24px) !important;}}
@media screen and (max-width: 767px){.cspage .localSEOPageIntroSlide{background: url("/img/posts/2020_10_local-seo-header.svg") center bottom / contain no-repeat, linear-gradient(90deg, rgb(247, 111, 207) 0%, rgb(246, 111, 206) 56%, rgb(246, 111, 207) 67%, rgb(246, 111, 206) 100%) !important; padding-top: 35px !important; padding-bottom: calc(34.86vw + 24px) !important;}}
@media screen and (max-width: 767px){.cspage .socialPageIntroSlide{background: url("/img/posts/2020_10_social-ppc-header.svg") center bottom / contain no-repeat, linear-gradient(90deg, rgb(247, 111, 207) 0%, rgb(246, 111, 206) 56%, rgb(246, 111, 207) 67%, rgb(246, 111, 206) 100%) !important; padding-top: 35px !important; padding-bottom: calc(34.86vw + 24px) !important;}}
@media screen and (max-width: 767px){.cspage .socialMediaAgencyPageIntroSlide{background: url("/img/posts/2020_10_social-media-header.svg") center bottom / contain no-repeat, linear-gradient(90deg, rgb(247, 111, 207) 0%, rgb(246, 111, 206) 56%, rgb(246, 111, 207) 67%, rgb(246, 111, 206) 100%) !important; padding-top: 35px !important; padding-bottom: calc(34.86vw + 24px) !important;}}
@media screen and (max-width: 767px){.cspage .agencyPartnersPageIntroSlide{background: url("/img/posts/2020_10_partner-agencies-header.svg") center bottom / contain no-repeat, linear-gradient(90deg, rgb(247, 111, 207) 0%, rgb(246, 111, 206) 56%, rgb(246, 111, 207) 67%, rgb(246, 111, 206) 100%) !important; padding-top: 35px !important; padding-bottom: calc(34.86vw + 24px) !important;}}
.cspage .column_column ul,.cspage .column_column ol,.cspage .the_content_wrapper ul,.cspage .the_content_wrapper ol{color: rgb(112, 112, 112) !important;}
.cspage .nf-form-cont .one-sixth{width: 14.5299%;}
/* --- the rest, transcribed from the live stylesheet --- */
.cspage .soleil14pxRegular,.cspage .soleil16pxRegular,.cspage .soleil16pxBold,
.cspage .soleil20pxLight,.cspage .soleil20pxRegular,.cspage .soleil20pxBold,.cspage .soleil10pxRegular{
  font-size:16px;font-family:soleil,var(--sans);line-height:1.4375}
.cspage .soleil20pxLight,.cspage .soleil20pxRegular,.cspage .soleil20pxBold{font-size:20px}
.cspage .soleil20pxLight{font-weight:300}
.cspage .soleil20pxBold,.cspage .soleil16pxBold{font-weight:700}
.cspage .soleil14pxRegular,.cspage .soleil10pxRegular{font-size:14px}
.cspage .soleil14pxLight{font-size:14px;color:#989898;font-weight:300}
.cspage .max-width-850px{max-width:850px}
.cspage .mcb-section.bg-contain,.cspage .mcb-wrap.bg-contain,.cspage .column_attr.bg-contain{background-size:contain}
.cspage .larger-inline-buttons-columns .column{margin:0 .75% 7px}
.cspage .larger-inline-buttons .button:not(.normal-button){padding:20px 25px;height:auto}
.cspage .showOnMobile{display:none}
@media screen and (min-width:1240px){
  .cspage .larger-inline-buttons .button:not(.normal-button) .button_label{width:100%;display:block;text-align:center}
  .cspage .larger-inline-buttons .button:not(.normal-button){width:auto}
}
@media only screen and (max-width:767px){
  .cspage .column_attr.mobile_align_center{text-align:center}
  .cspage .column_attr.mobile_align_left{text-align:left}
}
@media screen and (max-width:992px){
  .cspage .textCenterOnMobile{text-align:center !important}
  .cspage .hideOnMobile{display:none !important}
  .cspage .showOnMobile{display:inline-block}
  .cspage .paddinTop50pxMobile{padding-top:50px !important}
  .cspage .paddinTop100pxMobile{padding-top:100px !important}
  .cspage .tinyPaddingBottomMobile{padding-bottom:30px !important}
}

/* ---------- the contact pages, lifted from the live stylesheet ---------- */
/* The Betheme defaults for the plain-HTML pages (/legal/, /process/, /locations/).
   :where() keeps these at element-level weight so each page keeps its own utility classes
   (headingTG48px..., proximaNova20pxBold and the rest) still win, exactly as they
   do on the live site. */
:where(#page-betheme .column_attr) h1{font:400 48px/52.8px proxima-nova,Mulish,Helvetica,Arial,sans-serif;color:#1f1f1f;margin:0 0 15px;letter-spacing:normal;text-transform:none}
:where(#page-betheme .column_attr) h2{font:300 30px/33px proxima-nova,Mulish,Helvetica,Arial,sans-serif;color:#1f1f1f;margin:0 0 15px;letter-spacing:normal;text-transform:none}
:where(#page-betheme .column_attr) h3{font:300 20px/22px proxima-nova,Mulish,Helvetica,Arial,sans-serif;color:#1f1f1f;margin:0 0 15px;letter-spacing:normal;text-transform:none}
:where(#page-betheme .column_attr) h4{font:500 21px/23.1px proxima-nova,Mulish,Helvetica,Arial,sans-serif;color:#1f1f1f;margin:0 0 15px;letter-spacing:normal;text-transform:none}
:where(#page-betheme .column_attr) h5{font:700 15px/16.5px proxima-nova,Mulish,Helvetica,Arial,sans-serif;color:#1f1f1f;margin:0 0 15px}
:where(#page-betheme .column_attr) h6{font:400 16px/17.6px proxima-nova,Mulish,Helvetica,Arial,sans-serif;color:#1f1f1f;margin:0 0 15px}
:where(#page-betheme .column_attr) p{margin:0 0 15px;line-height:24px;color:#484848}
:where(#page-betheme .column_attr) strong,:where(#page-betheme .column_attr) b{font-weight:700}
:where(#page-betheme .column_attr) ul,:where(#page-betheme .column_attr) ol{margin:0 0 15px 30px;padding:0;color:#707070}
:where(#page-betheme .column_attr) li{margin:0 0 10px;line-height:17.6px;color:#707070}
:where(#page-betheme .column_attr) blockquote{font:400 17px/31px Verdana,Geneva,sans-serif;color:#444;margin:0 0 35px 25px;padding:0}
:where(#page-betheme .column_attr) a{color:#eaa300;line-height:inherit}
/* Betheme gives every heading a 15px bottom margin */
:where(#page-casestudy .column_attr) h1,:where(#page-casestudy .column_attr) h2,:where(#page-casestudy .column_attr) h3,:where(#page-casestudy .column_attr) h4,:where(#page-casestudy .column_attr) h5,:where(#page-casestudy .column_attr) h6{margin:0 0 15px}
#page-betheme h1,#page-betheme h3{margin:0 0 15px}
#page-betheme h1.nomb{margin-bottom:0}
/* the contact form, laid out and chromed the way the live form is */
.cspage .locform{max-width:662px;grid-template-columns:1fr 1fr;gap:35px 30px;margin-top:0}
.cspage .locform .form-msg{min-height:0;margin:0}
.cspage .locform .form-msg:empty{display:none}
.cspage .locform .full{grid-column:1 / -1}
.cspage .locform input,.cspage .locform select{height:56px;padding:12px;border:1px solid #e6e6e6;
  border-radius:10px;background:#f7f7f7;font-size:16px}
.cspage .locform button{height:56px}
@media screen and (max-width:767px){ .cspage .locform{grid-template-columns:1fr} }
.cspage .five-sixth.mcb-wrap{width:83.333%}
.cspage .five-sixth.column{width:81.333%}
/* the wrap-level setting first, then the column setting - a column that names its
   own margin has to beat the wrap it sits in, as it does on the live site */
.cspage .column-margin-0px .column{margin-bottom:0 !important}
.cspage .column-margin-10px .column{margin-bottom:10px !important}
.cspage .column-margin-20px .column{margin-bottom:20px !important}
.cspage .column-margin-40px .column{margin-bottom:40px !important}
.cspage .column-margin-0px.column{margin-bottom:0 !important}
.cspage .column-margin-10px.column{margin-bottom:10px !important}
.cspage .column-margin-20px.column{margin-bottom:20px !important}
.cspage .column-margin-40px.column{margin-bottom:40px !important}
/* a button column is exactly as tall as its button */
.cspage .column_button{line-height:0;font-size:0}
.cspage .column_button .button{margin:0}
/* The Betheme icon button: the arrow floats right and the label reserves 20px for it */
.cspage .button.has-icon{height:auto}
.cspage .button.has-icon .button_label{margin-right:20px}
.cspage .button_right .button_icon{float:right;width:22.4px;height:17px;line-height:17px;text-align:right}
.cspage .button_icon i{display:inline-block;width:14px;height:17px;vertical-align:top;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M8 1l5 5-5 5M13 6H1' fill='none' stroke='%23292929' stroke-width='1.2'/%3E%3C/svg%3E") center/14px 12px no-repeat}
.cspage .max-width-550px{max-width:550px}
.cspage .max-width-560px{max-width:560px}
.cspage .wrap.mcb-wrap.max-width-560px{max-width:560px}
.cspage .wrap.mcb-wrap.max-width-550px{max-width:550px}
.cspage .mcb-wrap.divider{width:100%;height:0 !important}
.cspage .fourButtonsEqualWidth a.button.button_size_2{min-width:250px;text-align:center;padding:12px}
.cspage .section.full-width>.section_wrapper{max-width:100% !important;padding-left:0 !important;padding-right:0 !important}
.cspage .section.full-width .one.wrap .one.column{width:100%;margin:0}
.cspage .section.full-width iframe{border:0}
@media screen and (max-width:1239px){
  .cspage .fourButtonsEqualWidth a.button.button_size_2{min-width:160px;padding:12px}
}
@media screen and (max-width:992px){
  .cspage .move-up-about-on-mobile{margin-top:-120px}
  .cspage .leftAlignMobile *{text-align:left}
  .cspage .centeredBackgroundOnMobile{background-position:center center !important}
  .cspage .whantToKnowMoreOnMobile{padding-top:20px !important;padding-bottom:45px !important}
  .cspage .messageIconOnMobile img{width:100% !important}
}
@media (max-width:767px){
  /* nothing may push the page sideways on a phone */
  .cspage .column_attr,.cspage .column_attr *{overflow-wrap:break-word}
  .tslide img,.svc-cs-art img,.hub-q-art img,.ab-hero img,.res-art img{max-width:100%;height:auto}
  .tslide,.svc-cs-art,.hub-q-art{max-width:100%;overflow:hidden}
  .hub-q-in>*,.hub-contact-in>*,.hub-about-in>*,.svc-cs>*,.hero-in>*,.tslide>*{min-width:0}
  .hub-q-art img{width:auto}
}
@media screen and (max-width:767px){
  .cspage .contactPageIntroSlide{background:url("/img/posts/2020_11_call-us-header-bgr.svg") center bottom/contain no-repeat,#b8d36a !important;padding-top:35px !important;padding-bottom:calc(34.86vw + 24px) !important}
}
.cspage .image_frame,.cspage .image_wrapper{line-height:0;margin:0}
.cspage .image_frame{vertical-align:top}
.cspage .image_frame img{max-width:100%;height:auto;display:inline}
.cspage .button_center{text-align:center}
.cspage .tel,.cspage .phone-link{color:#e20027}
.cspage a{color:#0f7fc4}
.cspage a:hover{color:var(--amber-dk)}
/* the Betheme button, same spec as everywhere else on the site */
.cspage .button,.cspage a.button{display:inline-block;box-sizing:border-box;height:40px;white-space:normal;position:relative;overflow:hidden;
  background:var(--amber);color:#292929;border-radius:60px;padding:12px 50px;margin:0 10px 15px 0;text-align:center;
  font-family:var(--cond);font-size:16px;line-height:16px;font-weight:400;letter-spacing:.96px;text-transform:none}
.cspage .button:hover{background:var(--amber-dk)}
.cspage .button_label{font-family:var(--cond);font-size:16px;line-height:16px;font-weight:400;letter-spacing:.96px;color:#292929}
@media(max-width:959px){
  .cspage .wrap.mcb-wrap,.cspage .wrap.mcb-wrap.one-second,.cspage .wrap.mcb-wrap.one-third,
  .cspage .wrap.mcb-wrap.two-third,.cspage .wrap.mcb-wrap.three-fourth,.cspage .wrap.mcb-wrap.one-fourth{width:100%}
  .cspage .mcb-column,.cspage .mcb-column.one-second,.cspage .mcb-column.one-third,
  .cspage .mcb-column.two-third,.cspage .mcb-column.three-fourth,.cspage .mcb-column.one-fourth{width:98%}
  .cspage .equalHeightCols{height:auto !important}
  .cspage .section{padding-left:13px;padding-right:13px}
}
@media(max-width:767px){
  .cspage .button,.cspage a.button{height:auto;padding:12px 24px;line-height:20px;overflow:visible}
  .cspage .section[style*="padding-top:200px"]{padding-top:60px !important;padding-bottom:60px !important}
  /* an intro slide carries its graphic along its bottom edge, so it keeps the
     room for it even though the rule above trims the big desktop padding */
  .cspage .section[class*="PageIntroSlide"][style*="background-position"]{padding-bottom:calc(34.86vw + 24px) !important}
}

/* ============ PRINT ============ */
@media print{
  .hdr,.ftr,.nav,.burger,.tslider,.blog-pager,.share,.post-foot-share,.filters,.w-form,.hub-form{display:none !important}
  .blogwrap,.hub-about-in,.svc-wrap{display:block}
  .blogside{display:none}
  body{background:#fff;color:#000;font-size:12pt}
  a{color:#000;text-decoration:underline}
  .postbody a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  .hero,.blog-hero,.post-hero,.folio-hero,.hub-hero,.ab-hero,.svc-hero,.cspage .section.has-video{
    background-image:none !important;background-color:#fff !important;color:#000;padding:20px 0 !important}
  .hero h1,.blog-hero h1,.post-hero h1,.folio-hero h1,.post-hero .standfirst{color:#000 !important}
  .contactband,.blog-cta,.attract,.ab-attract{background:none !important;color:#000}
  .attract h2,.blog-cta .tg48,.blog-cta p{color:#000 !important}
  img{max-width:100% !important}
  .post-item,.hub-card,.pf-art,.cspage .mcb-column{break-inside:avoid}
}

/* ============ THE SLIDER ============ */
.tslider{position:relative;background:#fff;overflow:hidden}
.trail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.trail::-webkit-scrollbar{display:none}
.tslide{min-width:100%;scroll-snap-align:center;position:relative;height:clamp(400px,42vw,540px);overflow:hidden}
.tslide > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tslide .scrim{position:absolute;inset:0;background:linear-gradient(95deg,rgba(8,12,15,.18) 0%,rgba(8,12,15,.30) 34%,rgba(8,12,15,.80) 62%,rgba(8,12,15,.90) 100%)}
.tcopy{position:relative;height:100%;max-width:var(--max);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:flex-end}
.tinner{width:47%;color:#fff}
.tinner h3{color:#fff;font-size:clamp(26px,2.9vw,40px);line-height:1.04;margin-bottom:18px}
.tinner h3.long{font-size:clamp(22px,2.25vw,31px);line-height:1.1}
.tinner p{color:#e4e9ec;font-size:17.5px;line-height:1.6;margin-bottom:18px}
.tinner .who{font-size:17px;color:#cfd7dc}
.tinner .who b{color:#fff;font-weight:800}
.tarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:0;background:rgba(10,14,18,.5);backdrop-filter:blur(4px);cursor:pointer;color:#fff;font-size:0}
.tarrow:hover{background:var(--blue)}
.tarrow.prev{left:18px}
.tarrow.next{right:18px}
.tarrow::before{content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.tarrow.prev::before{transform:rotate(-135deg);margin-left:19px}
.tarrow.next::before{transform:rotate(45deg);margin-right:19px}
.tdots{position:absolute;left:0;right:0;bottom:20px;z-index:5;display:flex;gap:9px;justify-content:center}
.tdot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.45);padding:0;cursor:pointer;transition:.18s}
.tdot[aria-current="true"]{background:#fff;width:26px;border-radius:5px}
@media(max-width:820px){
  /* on a phone the quote sits under the photo in its own panel, and the panel
     grows to fit the words - a fixed height was cutting the last lines off */
  .tslider{height:auto}
  .trail{align-items:stretch}
  .tslide{height:auto;min-height:0;overflow:visible;display:flex;flex-direction:column}
  .tslide > img{position:static;width:100%;height:210px;object-fit:cover;flex:none}
  .tslide .scrim{display:none}
  .tcopy{background:#12181d;padding:26px 24px 46px;justify-content:flex-start;height:auto;flex:1 1 auto;
    align-items:flex-start;max-width:none}
  .tinner{width:100%}
  .tarrow{top:105px}
  .tdots{bottom:14px}
}
/* ============ PORTFOLIO ============ */
/* Essential Grid filter pills: amber, pale amber when selected - never blue */
.filters{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.filters button{font-family:var(--cond);font-size:16px;line-height:38px;letter-spacing:.96px;text-transform:uppercase;
  height:40px;padding:0 16px;margin:0 5px 5px 0;border-radius:50px;border:0;cursor:pointer;
  background:var(--amber);color:#292929}
.filters button:hover{background:var(--amber-dk)}
.filters button[aria-pressed="true"]{background:#fde06a;color:#484848}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pf{position:relative;border-radius:5px;overflow:hidden;background:#0d1114;display:block}
.pf img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:.4s;opacity:.92}
.pf:hover img{transform:scale(1.045);opacity:.62}
.pf figcaption{position:absolute;inset:auto 0 0 0;padding:18px 20px;background:linear-gradient(transparent,rgba(9,14,18,.92) 62%);color:#fff}
.pf h3{color:#fff;font-size:19px;line-height:1.14}
.pf .tags{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:700;margin-top:6px}
.pf.hide{display:none}

/* ============ PAGE HEAD (case studies) ============ */
.pagehead{background:linear-gradient(103deg,#0e9bf0,#1179c4);color:#fff;padding:64px 0 70px;position:relative;overflow:hidden}
.pagehead h1{color:#fff;font-size:clamp(34px,4vw,54px)}
.pagehead p{color:#dceffc;font-size:19px;margin:16px 0 0;max-width:640px}

/* case studies header - measured off /portfolio/ (597px band at 1440) */
.folio-hero{background-image:url("/img/folio/portfolio-header-bgr.svg");background-repeat:no-repeat;
  background-position:50% 100%;background-size:cover;padding:200px 0}
.folio-hero-in{max-width:1380px;margin:0 auto;padding:0 13px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.folio-hero-copy{max-width:480px;margin-bottom:40px}
.folio-hero h1{font-family:var(--cond);font-size:48px;line-height:52px;font-weight:400;letter-spacing:.96px;
  text-transform:uppercase;color:#1f1f1f;margin:0 0 34px}
.folio-hero h1 strong{font-weight:800}
.folio-hero p{font-family:var(--cond);font-size:16px;line-height:19.2px;font-weight:400;letter-spacing:.96px;
  text-transform:uppercase;color:#484848;margin:0 0 15px}
.crumbs{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#a9dcfb;margin-bottom:16px;font-weight:700}

/* pages */
.page{display:none}
.page.live{display:block}

@media(max-width:940px){
  .nav.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(20,32,40,.13);padding:8px 0 14px;gap:0;
    /* the panel is taller than a phone screen once Services is listed, so it
       scrolls inside itself instead of running off the bottom of the window */
    max-height:calc(100vh - 122px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  @supports (height:100dvh){ .nav.open{max-height:calc(100dvh - 122px)} }
  .nav.open > a,.nav.open .has-sub > a{padding:13px 24px;border-radius:0}
  .nav.open .has-sub{position:relative;display:block}
  /* the Services list is folded away until it is asked for, so the menu is
     seven rows on a phone instead of sixteen */
  .nav.open .navsub{position:static;display:none;padding-top:0;min-width:0}
  .nav.open .has-sub.subopen .navsub{display:block}
  .nav.open .navsub > a{border:0;padding:10px 40px;background:var(--wash)}
  .nav.open .navsub > a:last-child{box-shadow:none}
  .nav.open .has-sub > a::after{display:none}
  .subtog{display:none}
  .nav.open .subtog{display:flex;position:absolute;right:8px;top:0;height:46px;width:56px;
    align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:#484848}
  .nav.open .subtog::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .18s}
  .nav.open .has-sub.subopen .subtog::after{transform:translateY(1px) rotate(225deg)}
  .hdr-in{position:relative}
  .hero-in,.tslide{grid-template-columns:1fr}
  .cards,.grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .burger{display:block}
}
@media(max-width:620px){
  .cards,.grid{grid-template-columns:1fr}
  .slog{text-align:left}
}

/* -- category archives: Betheme "grid col-3" archive layout -- */
.catpage{background:#fcfcfc;padding:0 0 40px}
.catwrap{width:1380px;max-width:100%;margin:0 auto;padding:0 27.3px;box-sizing:border-box}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:2.0394%;row-gap:20px;align-items:start}
.catcard{background:#fff}
.catthumb{display:block;overflow:hidden;line-height:0}
.catthumb img{width:100%;height:auto;margin-bottom:-15px}
.catthumb-none{display:none}
.catbody{padding:20px 0 0}
.catcard h2{font-family:var(--sans);font-size:30px;line-height:33px;font-weight:300;letter-spacing:normal;
  text-transform:none;color:#1f1f1f;margin:0 0 15px}
.catcard h2 a,.catcard h2 strong{line-height:36px}
.catcard h2 a{color:inherit}
.catcard h2 a:hover{color:#717171}
.catcard h2 strong{font-weight:700}
.catcard .catsub{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;color:#484848;
  margin:0 0 15px;text-transform:none;letter-spacing:normal}
.catcard .catex{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#484848;letter-spacing:normal;text-transform:none}
.catcard .catex p{font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;margin:0 0 15px}
.catcard .catex a{color:#292929}
.catmore{padding:7px 0;line-height:33px}
.catmore .post-more:after{line-height:0}
.catpager{text-align:center;padding:20px 0 24.6px}
.catpager .pill{padding:12px 50px;border:0;cursor:pointer;line-height:16px}
.catpager svg{width:14px;height:14px;fill:#292929;vertical-align:-2px;margin-right:6px}
@media (max-width:1239px){.catwrap{width:940px;padding:0 18.6px}}
@media (max-width:959px){.catwrap{width:708px;padding:0 14px}}
@media (max-width:767px){.catwrap{width:480px;padding:0 9.5px}}
@media (max-width:599px){
  .catwrap{width:100%;padding:0 30px}
  .catgrid{grid-template-columns:1fr;row-gap:30px}
  .catcard h2{font-size:26px;line-height:29px}
}

/* -- free resources: six guide cards, three across (measured off the live page) -- */
.res-list{background:#fff;padding:50px 0 10px}
.res-in{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.res-card{max-width:100%;margin:0 0 40px}
.res-img{margin:0 1% 40px;display:block}
.res-img img{width:100%;height:auto;display:block}
.res-copy{margin:-75px 1% 0;text-align:center}
.res-copy h3{font-family:var(--cond);font-size:36px;line-height:48px;font-weight:600;letter-spacing:.72px;
  text-transform:uppercase;color:#1f1f1f;margin:0}
.res-copy h3 strong{font-weight:800}
.res-copy p{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#484848;
  margin:17.6px 0 15px;text-align:center}
.res-btn{text-align:center;margin:0 1%;padding:10px 0 0}
.res-btn .pill{margin:0;padding:12px 50px;border:0;line-height:16px;text-transform:none}
.res-spacer{height:100px;background:#fff}
.res-hero .hub-hero-copy{margin-bottom:40px}
.res-hero .hub-hero-copy p{font-family:var(--sans);font-size:20px;line-height:24px;font-weight:700;
  color:#fff;margin:17.6px 0 15px;max-width:450px}
@media (max-width:959px){.res-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.res-in{grid-template-columns:minmax(0,1fr)}.res-copy h3{font-size:30px;line-height:38px}}

/* the live grid keeps each case study's summary under the title, shown on hover */
.pf-desc{font-family:var(--sans);font-size:14px;line-height:19px;color:#fff;margin:8px 0 0;opacity:0;
  max-height:0;overflow:hidden;transition:opacity .25s ease,max-height .25s ease}
.pf:hover .pf-desc,.pf:focus-within .pf-desc{opacity:1;max-height:120px}
@media (hover:none){.pf-desc{opacity:1;max-height:none}}

.cs-summary{background:#fff;padding:0 0 30px}
.cs-summary .section_wrapper{max-width:1380px;margin:0 auto;padding:0 30px}
.cs-summary p{font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;color:#707070;margin:0 0 15px}

@media (max-width:767px){

  /* --- brought into line with the live site, measured at 390px --- */

  /* the live theme gives every section a 33px gutter on a phone; ours was 17px,
     which made buttons and headlines wrap differently on every page */
  .cspage .section_wrapper{padding-left:33px;padding-right:33px;box-sizing:border-box}
  .cspage .section.full-width > .section_wrapper{padding-left:0;padding-right:0}
  .cspage .wrap.mcb-wrap{padding-left:0;padding-right:0}

  /* an image in its own column fills that column, as it does on live; as an
     inline-block it collapsed and the artwork came out small and off-centre */
  .cspage .column_image .image_frame{display:block;width:100%}
  .cspage .column_image .image_frame .image_wrapper{width:100%}
  .cspage .column_image .image_frame img{width:100%;height:auto}

  /* the section that slides up 120px was covering the buttons above it */
  .cspage .move-up-about-on-mobile{margin-top:0}

  /* icon above the words, full width - not squeezed into a side column */
  .ab-what-in{grid-template-columns:1fr;gap:0}
  .ab-what-art{justify-content:flex-start;margin-bottom:22px}
  .ab-icon{width:168px;max-width:60%;height:auto}

  /* the case-studies hero: text first, artwork underneath, like every other hero */
  .folio-hero{background-size:contain;background-position:50% 100%;background-color:#e3a8f8;
    padding:44px 0 calc(34.86vw + 24px)}
  .folio-hero-in{grid-template-columns:1fr;padding:0 33px}
  .folio-hero-copy{max-width:none;margin-bottom:0}

  /* the filter buttons run from the left on live, not centred */
  .filters{justify-content:flex-start}

  /* live keeps a 33px gutter down both sides on a phone; ours was 13-24px,
     which left every headline, button and logo sitting closer to the edge */
  .ab-attract-in,.ab-cards-in,.ab-cs-in,.ab-red-in,.ab-what-in,.attract-in,.blog-cta-in,.blog-hero-in,.cb-in,.folio-hero-in,.ftr-in,.hdr-in,.hero-in,.hub-about-in,.hub-art-in,.hub-contact-in,.hub-q-in,.pf-top-in,.post-hero-in,.res-in,.svc-band-in,.svc-home-in,.ty-in,.wrap,.svc-wrap{padding-left:33px;padding-right:33px;box-sizing:border-box}
  .folio-hero-in{padding-left:33px;padding-right:33px}

  /* live runs this block from the left on a phone, icon included */
  .sec-centred{text-align:left}
  .sec-centred .icon-lead{margin-left:0;margin-right:0}
  .sec-centred .btn,.sec-centred .pill,.sec-centred .button{margin-left:0}

  /* a text input's default min-width was holding the form grid wider than the
     screen, which pushed the page sideways */
  .hub-form,.locform,.w-form{grid-template-columns:minmax(0,1fr)}
  .hub-form input,.hub-form select,.hub-form textarea,.hub-form button,
  .locform input,.locform select,.locform textarea,.locform button{min-width:0;width:100%;box-sizing:border-box}

  /* live centres the footer on a phone, with the same 33px gutter */
  .ftr-in{padding:0 33px;box-sizing:border-box}
  .ftr-col{margin:0;text-align:center}
  .ftr-contact,.ftr-brand,.ftr-tag{text-align:center}

  /* The artwork's own top edge is a left-to-right gradient, so a flat colour
     behind it always showed as a hard line. These gradients are sampled from
     the top row of each image, so the join is invisible. */
  .hero{background-image:url("/img/flycast-home-page-bgr.svg"),
        linear-gradient(to right,#54b4ff 0%,#5fbcff 25%,#67c4ff 50%,#71c8fe 75%,#73caff 100%);
    background-size:contain,auto;background-position:50% 100%,0 0;background-repeat:no-repeat,no-repeat}
  .ab-hero{background-image:url("/img/about/about-header-bgr.svg"),
        linear-gradient(to right,#fe547b 0%,#ff5b85 25%,#ff6895 50%,#ff71a1 75%,#ff71a1 100%);
    background-size:contain,auto;background-position:50% 100%,0 0;background-repeat:no-repeat,no-repeat}
}
/* the Services fold toggle belongs to the phone menu only; without a base rule
   the browser's default button display leaked it into the desktop nav bar */
.subtog{display:none}