/* ==========================================================================
   Indian Solar Force — public website

   The look: a deep navy hero with a bright sky-cyan running through it, then
   white sections with a lot of air, thin large headings, and one warm amber
   reserved for the things a visitor is meant to click.

   Cyan carries the atmosphere — the gradient band, the capacity badges, the
   icon marks. Amber is only ever action. Navy is depth and text. Three colours,
   each with one job, which is what stops a long page turning into noise.
   ========================================================================== */

:root{
  --navy:#0b1f38;
  --navy-2:#12304f;
  --navy-3:#1d4470;

  /* Sky cyan — the atmosphere colour, pulled from the blue in the ISF mark. */
  --cy:#21b8d4;
  --cy-2:#3ecfe0;
  --cy-3:#5fdce6;
  --cy-deep:#0e8ba6;
  --cy-tint:#e8fafd;

  /* Amber — action only. The sun in the logo. */
  --am:#f7a51a;
  --am-2:#ffbe45;
  --am-deep:#c97f06;
  --am-tint:#fff6e6;

  --ink:#0f1b2d;
  --ink-2:#46586f;
  --ink-3:#7d8ea3;
  --line:#e6ecf2;
  --line-2:#f1f5f9;
  --bg:#ffffff;
  --bg-soft:#f6f9fb;

  --ok:#17a34a;
  --bad:#dc2626;

  --sh-sm:0 2px 8px rgba(11,31,56,.06);
  --sh:0 10px 30px rgba(11,31,56,.08);
  --sh-lg:0 24px 60px rgba(11,31,56,.14);
  --sh-cy:0 14px 34px rgba(33,184,212,.32);
  --sh-am:0 14px 34px rgba(247,165,26,.34);

  --r-sm:8px; --r:14px; --r-lg:22px; --r-full:999px;
  --font:'Plus Jakarta Sans',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-head:'Plus Jakarta Sans',-apple-system,'Segoe UI',system-ui,sans-serif;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box}
/* The closed mobile menu is parked off the right edge, and the reveal
   animations start a little to one side of where they finish. Neither should be
   able to make the page scroll sideways on a phone. clip rather than hidden, so
   the sticky header keeps working. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@supports not (overflow-x:clip){html{overflow-x:hidden}}
body{margin:0;background:var(--bg);color:var(--ink-2);
  font:400 16px/1.75 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--font-head);margin:0;color:var(--ink);line-height:1.18;
  letter-spacing:-.025em}
/* Large without shouting. Plus Jakarta Sans is a touch lighter on the page than
   the face this was first set in, so the display sizes take 600 rather than 500
   to keep the same weight on screen. */
h1{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:600}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem);font-weight:600}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.015em}
p{margin:0 0 1rem}
a{color:var(--cy-deep);text-decoration:none;transition:color .18s}
a:hover{color:var(--navy)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}
.center{text-align:center}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
/* The star that marks a field as required. Same class name as the panel uses,
   so the mark means one thing across the whole system. */
.req{color:#d33;font-weight:700}

.muted,.hint{color:var(--ink-3);font-size:.9rem}
.hl{color:var(--cy);font-weight:600}
:focus-visible{outline:3px solid var(--cy);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 32px;border:0;border-radius:var(--r-full);cursor:pointer;
  font:700 .92rem/1 var(--font);letter-spacing:.01em;white-space:nowrap;
  background:#fff;color:var(--navy);box-shadow:var(--sh-sm);
  transition:transform .22s var(--ease),box-shadow .22s,background .22s,color .22s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.btn svg{width:17px;height:17px}
.btn-primary{background:linear-gradient(120deg,var(--am),var(--am-2));color:#2a1a02;box-shadow:var(--sh-am)}
.btn-primary:hover{color:#2a1a02;box-shadow:0 18px 40px rgba(247,165,26,.45)}
.btn-cy{background:linear-gradient(120deg,var(--cy),var(--cy-2));color:#04323c;box-shadow:var(--sh-cy)}
.btn-cy:hover{color:#04323c}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-3);color:#fff}
.btn-outline{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--line)}
.btn-outline:hover{box-shadow:inset 0 0 0 2px var(--cy);color:var(--cy-deep)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34);
  backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff}
.btn-lg{padding:18px 38px;font-size:1rem}
.btn-sm{padding:11px 22px;font-size:.82rem}
.btn-block{width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   Loader
   ========================================================================== */
/* The loader is dismissed by script, so it only ever appears when there is
   script to dismiss it. Without that guard a visitor with JavaScript off sits
   looking at a navy screen with the whole page behind it. */
#isf-loader{display:none}
.js #isf-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--navy);transition:opacity .5s,visibility .5s}
#isf-loader.gone{opacity:0;visibility:hidden}
.ldr{text-align:center}
.ldr-sun img{width:64px;margin:0 auto 20px;animation:ldrspin 2.4s var(--ease) infinite}
@keyframes ldrspin{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.08)}}
.ldr-bar{width:150px;height:3px;background:rgba(255,255,255,.16);border-radius:var(--r-full);
  overflow:hidden;margin:0 auto}
.ldr-bar i{display:block;height:100%;width:40%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--cy),var(--am));animation:ldrbar 1.1s var(--ease) infinite}
@keyframes ldrbar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.ldr-txt{color:rgba(255,255,255,.6);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;margin-top:16px}

/* ==========================================================================
   Top strip and header
   ========================================================================== */
.topbar{background:var(--navy);color:rgba(255,255,255,.72);font-size:.8rem;
  padding:9px 0;position:relative;z-index:60}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a{color:rgba(255,255,255,.86);font-weight:600}
.topbar a:hover{color:var(--cy-2)}
.topbar svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px;color:var(--cy-2)}
.topbar strong{color:#fff}
.topbar .sep{display:inline-block;width:1px;height:11px;background:rgba(255,255,255,.22);margin:0 10px;vertical-align:-1px}

.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);transition:box-shadow .25s,padding .25s}
.site-head.stuck{box-shadow:0 4px 24px rgba(11,31,56,.09)}
.site-head .wrap{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px;
  transition:padding .25s}
.site-head.stuck .wrap{padding-top:9px;padding-bottom:9px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);flex:none}
.brand img{width:52px;height:auto}
.brand span{font-family:var(--font-head);font-weight:800;font-size:1rem;line-height:1.15;letter-spacing:-.02em}
.brand small{display:block;font-family:var(--font);font-size:.66rem;font-weight:500;
  color:var(--ink-3);letter-spacing:.04em;margin-top:2px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{position:relative;padding:10px 15px;border-radius:var(--r-sm);font-size:.87rem;
  font-weight:600;color:var(--ink-2);white-space:nowrap}
.nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;
  background:var(--cy);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease)}
.nav a:hover{color:var(--navy)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--navy);font-weight:700}
.head-cta{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--navy)}
.burger svg{width:24px;height:24px}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding:76px 0 96px;isolation:isolate}
.hero-slides{position:absolute;inset:0;z-index:-3}
.hero-slides .sl{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);transition:opacity 1.5s var(--ease),transform 8s linear}
.hero-slides .sl.on{opacity:.55;transform:scale(1)}
/* A navy wash so the photograph never fights the words on top of it. */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(105deg,var(--navy) 6%,rgba(11,31,56,.9) 40%,rgba(11,31,56,.44) 100%)}
/* The faint grid: the reference's signature texture, drawn rather than loaded. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(62,207,224,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(62,207,224,.10) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(120% 92% at 22% 40%,#000 0%,transparent 72%);
          mask-image:radial-gradient(120% 92% at 22% 40%,#000 0%,transparent 72%)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
  position:relative;z-index:2}

.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;
  background:rgba(62,207,224,.14);border:1px solid rgba(62,207,224,.3);
  color:var(--cy-3);padding:7px 16px;border-radius:var(--r-full);
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px}
.hero .eyebrow svg{width:14px;height:14px}
.hero h1{color:#fff;margin:0 0 20px}
.hero h1 .hl{color:var(--cy-2);font-weight:600;position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;
  border-radius:3px;background:var(--am);transform:scaleX(0);transform-origin:left;
  animation:hlin 1s var(--ease) .7s forwards}
@keyframes hlin{to{transform:scaleX(1)}}
.hero-lead{font-size:1.08rem;color:rgba(255,255,255,.8);max-width:34em;margin:0 0 30px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:34px}
.hero-points{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px 24px}
.hero-points li{display:flex;align-items:center;gap:9px;font-size:.88rem;color:rgba(255,255,255,.82)}
.hero-points svg{width:17px;height:17px;color:var(--cy-2);flex:none}

/* The enquiry card that floats over the hero. */
.calc-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  overflow:hidden;color:var(--ink-2)}
.hf-tabs{display:flex}
.hf-tab{flex:1;padding:15px 10px;border:0;background:var(--line-2);cursor:pointer;
  font:700 .8rem/1 var(--font);color:var(--ink-3);display:flex;align-items:center;
  justify-content:center;gap:7px;transition:background .2s,color .2s}
.hf-tab svg{width:15px;height:15px}
.hf-tab.on{background:#fff;color:var(--navy)}
.hf-tab:not(.on):hover{color:var(--navy-3)}
.lead-form{padding:24px}
.lead-form h3{margin:0 0 4px}
.form-note{font-size:.84rem;color:var(--ink-3);margin:0 0 18px}
.field{margin:0 0 14px}
.field label{display:block;font-size:.76rem;font-weight:700;color:var(--ink);margin:0 0 6px}
.input{width:100%;height:48px;padding:0 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:400 .95rem var(--font);color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.input::placeholder{color:#a9b6c4}
.input:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 4px rgba(33,184,212,.14)}
.input.is-bad,.input[aria-invalid="true"]{border-color:var(--bad);background:#fffafa}
.fld-err{margin-top:6px;font-size:.8rem;font-weight:600;color:var(--bad);line-height:1.5}
.input-money{position:relative}
.input-money::before{content:"₹";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);font-weight:600;pointer-events:none}
.input-money .input{padding-left:30px}
.radio-row{display:flex;gap:9px}
.radio-pill{flex:1;position:relative;cursor:pointer}
.radio-pill input{position:absolute;opacity:0}
.radio-pill span{display:block;text-align:center;padding:11px 8px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);font-size:.86rem;font-weight:600;color:var(--ink-2);transition:all .2s}
.radio-pill input:checked + span{border-color:var(--cy);background:var(--cy-tint);color:var(--navy)}
.estimate-note{font-size:.78rem;color:var(--ink-3);margin:12px 0 0;text-align:center;line-height:1.6}

.hero-foot{position:relative;z-index:2;margin-top:44px}
.hero-foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-slide-dots{display:flex;gap:8px}
.hero-slide-dots button{width:28px;height:4px;border:0;border-radius:var(--r-full);
  background:rgba(255,255,255,.28);cursor:pointer;padding:0;transition:background .3s,width .3s}
.hero-slide-dots button.on{background:var(--cy-2);width:44px}
.scroll-cue{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.6);
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.scroll-cue span{width:20px;height:32px;border:1.5px solid rgba(255,255,255,.34);border-radius:var(--r-full);
  position:relative}
.scroll-cue span::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;
  border-radius:2px;background:var(--cy-2);transform:translateX(-50%);
  animation:cue 1.7s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translate(-50%,-4px)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{padding:96px 0;position:relative}
.sec-sm{padding:46px 0}
.sec{overflow-x:clip}
.bg-soft{background:var(--bg-soft)}
.bg-deep{background:var(--navy);color:rgba(255,255,255,.78)}
.bg-deep h2,.bg-deep h3{color:#fff}

.sec-head{max-width:720px;margin:0 0 52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin:0 0 14px}
.sec-head p{font-size:1.05rem;color:var(--ink-3);margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cy-deep);margin-bottom:15px}
.eyebrow i{font-style:normal;font-family:var(--font-head);font-size:.9rem;font-weight:800;
  color:var(--cy);opacity:.5}
.bg-deep .eyebrow{color:var(--cy-2)}
.bg-deep .sec-head p{color:rgba(255,255,255,.66)}
/* A white card sitting on the navy band has to take its text colour back. Without
   this the card inherits the band's near-white body colour and its paragraphs
   disappear into the card — visible only as blank space. */
.bg-deep .card,.bg-deep .guar-i,.bg-deep .pcard,.bg-deep .trust-i,.bg-deep .seg,
.bg-deep .quote,.bg-deep .guide,.bg-deep .cred{color:var(--ink)}
.bg-deep .card p,.bg-deep .guar-i p,.bg-deep .pcard p,.bg-deep .seg p,
.bg-deep .quote p,.bg-deep .guide p{color:var(--ink-2)}
.bg-deep .card h3,.bg-deep .card h4,.bg-deep .guar-i h3,.bg-deep .guar-i h4,
.bg-deep .seg h3,.bg-deep .guide h3{color:var(--ink)}

/* ==========================================================================
   Cards
   ========================================================================== */
.cards{display:grid;gap:26px}
.cards.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cards.g3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.cards.g4{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.card{position:relative;background:#fff;border-radius:var(--r-lg);padding:34px 28px 30px;
  box-shadow:var(--sh-sm);color:var(--ink-2);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--cy),var(--cy-2));transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.card:hover::before{transform:scaleX(1)}
.card h3{margin:0 0 9px}
.card p{margin:0;font-size:.93rem}
.card-n{position:absolute;top:22px;right:24px;font-family:var(--font-head);font-size:2.2rem;
  font-weight:800;color:var(--line);line-height:1;transition:color .3s}
.card:hover .card-n{color:var(--cy-tint)}
.ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin:0 0 18px;
  background:linear-gradient(140deg,var(--cy-tint),#fff);color:var(--cy-deep);
  box-shadow:inset 0 0 0 1px rgba(33,184,212,.18);transition:transform .3s var(--ease)}
.ico svg{width:25px;height:25px}
.card:hover .ico{transform:scale(1.08) rotate(-4deg)}
.card-go{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:.85rem;
  font-weight:700;color:var(--cy-deep)}
.card-go svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.card:hover .card-go svg{transform:translateX(4px)}

/* ==========================================================================
   Split: words beside a picture
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.flip .txt{order:2}
.split .txt h2{margin:0 0 16px}
.split .shot{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.split .shot img{width:100%;height:100%;object-fit:cover}
/* Each row carries its own icon from the admin — a tick by default, but a rupee
   or a shield where that says more. So the marker is that icon, not a second
   one drawn in CSS beside it. */
.ticks{list-style:none;padding:0;margin:22px 0 0}
.ticks li{display:flex;align-items:flex-start;gap:12px;padding:9px 0;font-size:.96rem}
.ticks li > svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--cy)}
.ticks li b{color:var(--ink)}
.ticks.two-up li{align-items:flex-start}

/* The photo mosaic — the reference's four-tile block, with a branded tile so a
   short photo library still fills it honestly. */
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mosaic-tile{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);
  background:var(--line-2);position:relative;aspect-ratio:1/1}
.mosaic-tile.wide{aspect-ratio:2.1/1}
.mosaic-tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mosaic-tile:hover img{transform:scale(1.07)}
.mosaic-tile.wide{grid-column:span 2}
.mosaic-tile img{display:block}
.mosaic-brand{display:grid;place-content:center;text-align:center;gap:8px;padding:22px;
  background:linear-gradient(140deg,var(--cy),var(--cy-deep));color:#fff}
.mosaic-brand img{width:64px;margin:0 auto 6px;filter:brightness(0) invert(1)}
.mosaic-brand b{font-family:var(--font-head);font-size:1.05rem;letter-spacing:.02em}
.mosaic-brand span{font-size:.78rem;opacity:.86}

/* A figure tile. Product cut-outs on white look wrong beside photographs of
   real roofs, so a tile with no usable scene carries a number instead. */
.mosaic-fig{display:grid;place-content:center;text-align:center;gap:2px;
  padding:20px 18px 34px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm)}
.mosaic-fig b{font-family:var(--font-head);font-size:2.6rem;line-height:1;color:var(--navy);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mosaic-fig span{display:block;margin-top:6px;font-size:.82rem;font-weight:600;color:var(--ink)}
.mosaic-fig em{display:block;margin-top:2px;font-size:.72rem;font-style:normal;color:var(--ink-3)}
.mosaic-fig::after{content:"";position:absolute;left:22%;right:22%;bottom:16px;height:3px;
  border-radius:3px;background:linear-gradient(90deg,var(--cy),var(--am))}

/* ==========================================================================
   Capacity and price cards
   ========================================================================== */
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:26px;align-items:start}
.pcard{background:#fff;border-radius:var(--r-lg);padding:38px 28px 32px;text-align:center;
  box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s}
.pcard:hover{transform:translateY(-7px);box-shadow:var(--sh)}
.pcard.feat{box-shadow:var(--sh);transform:translateY(-6px)}
.pcard.feat::after{content:"Most chosen";position:absolute;top:17px;right:-33px;
  background:var(--am);color:#2a1a02;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 40px;transform:rotate(45deg)}
.pcard h3{font-size:1rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.1em;margin:0 0 20px}
/* The circular capacity badge, straight from the reference. */
.pcard-badge{width:104px;height:104px;border-radius:50%;margin:0 auto 22px;display:grid;
  place-content:center;background:linear-gradient(140deg,var(--cy-2),var(--cy-deep));
  color:#fff;box-shadow:var(--sh-cy);transition:transform .35s var(--ease)}
.pcard:hover .pcard-badge{transform:scale(1.06) rotate(-5deg)}
.pcard-badge b{font-family:var(--font-head);font-size:1.75rem;font-weight:700;line-height:1}
.pcard-badge span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.pcard-price{font-family:var(--font-head);font-size:2.1rem;font-weight:700;color:var(--ink);
  line-height:1.1;margin:0 0 4px}
.pcard-price small{font-size:.9rem;font-weight:500;color:var(--ink-3)}
.pcard-price-soft{font-size:1.15rem;color:var(--ink-2);font-weight:600;line-height:1.35;
  min-height:2.3em;display:grid;align-content:center}
.pcard-price{min-height:2.3em;display:grid;align-content:center}
.pcard-sub{font-size:.84rem;color:var(--ink-3);margin:0 0 22px}
.pcard-list{list-style:none;padding:0;margin:0 0 26px;text-align:left}
.pcard-list li{padding:10px 0 10px 26px;border-bottom:1px solid var(--line-2);
  font-size:.9rem;position:relative}
.pcard-list li:last-child{border-bottom:0}
.pcard-list li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:7px;
  border-left:2px solid var(--cy);border-bottom:2px solid var(--cy);transform:rotate(-45deg)}

/* ==========================================================================
   Reasons — the cyan gradient band
   ========================================================================== */
.sec-reasons{background:linear-gradient(150deg,var(--cy-2) 0%,var(--cy) 45%,var(--cy-deep) 100%);
  color:#fff;position:relative;overflow:hidden}
.sec-reasons::before{content:"";position:absolute;inset:0;opacity:.14;
  background-image:radial-gradient(circle at 18% 22%,#fff 0,transparent 42%),
                   radial-gradient(circle at 82% 78%,#fff 0,transparent 38%)}
.sec-reasons .wrap{position:relative}
.sec-reasons .sec-head h2,.sec-reasons .sec-head p{color:#fff}
.sec-reasons .sec-head p{opacity:.86}
.sec-reasons .eyebrow{color:rgba(255,255,255,.82)}
.sec-reasons .eyebrow i{color:rgba(255,255,255,.7)}
.reason-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:38px;align-items:center}
.reason-col{display:flex;flex-direction:column;gap:34px}
.reason{display:flex;gap:16px;align-items:flex-start}
.reason-ic{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);color:#fff;
  transition:transform .3s var(--ease),background .3s}
.reason:hover .reason-ic{transform:scale(1.1) rotate(-6deg);background:rgba(255,255,255,.26)}
.reason-ic svg{width:21px;height:21px}
.reason h3{color:#fff;font-size:.98rem;margin:0 0 5px;text-transform:uppercase;letter-spacing:.06em}
.reason p{font-size:.88rem;color:rgba(255,255,255,.8);margin:0;line-height:1.65}
.reason-col.right .reason{flex-direction:row-reverse;text-align:right}

/* The device in the middle, drawn rather than photographed. */
.phone{width:250px;flex:none;border-radius:34px;background:#0b1f38;padding:11px;
  box-shadow:0 34px 70px rgba(4,50,60,.42);position:relative}
.phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:56px;height:5px;border-radius:3px;background:rgba(255,255,255,.2)}
.phone-scr{border-radius:25px;overflow:hidden;background:linear-gradient(165deg,#0e8ba6,#0b1f38);
  padding:38px 20px 26px;text-align:center;color:#fff;min-height:430px;
  display:flex;flex-direction:column;justify-content:center;gap:5px}
.phone-scr img{width:56px;margin:0 auto 14px;filter:brightness(0) invert(1)}
.phone-scr .p-lbl{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.68}
.phone-scr .p-big{font-family:var(--font-head);font-size:2.5rem;font-weight:700;line-height:1.05}
.phone-scr .p-sub{font-size:.82rem;opacity:.78;margin-bottom:16px}
.phone-bars{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:74px;margin-top:6px}
.phone-bars i{width:13px;border-radius:4px 4px 0 0;background:rgba(255,255,255,.32);
  animation:phbar 2.6s var(--ease) infinite}
.phone-bars i:nth-child(odd){background:var(--am)}
@keyframes phbar{0%,100%{height:22%}50%{height:92%}}

/* ==========================================================================
   Quote band
   ========================================================================== */
.quotes{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.quotes::before{content:"";position:absolute;inset:0;opacity:.35;
  background:radial-gradient(90% 120% at 78% 18%,rgba(33,184,212,.55) 0,transparent 62%)}
.quotes::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:54px 54px}
.quotes .wrap{position:relative;z-index:2;max-width:900px}
.quote{position:relative;padding-left:74px}
.quote::before{content:"\201C";position:absolute;left:0;top:-24px;font-family:var(--font-head);
  font-size:7rem;line-height:1;color:var(--cy-2);opacity:.5}
.quote p{font-size:clamp(1.12rem,2.1vw,1.5rem);line-height:1.65;color:#fff;font-weight:400;margin:0 0 22px}
.quote .who{display:flex;align-items:center;gap:13px}
.avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--cy),var(--cy-deep));color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:1.05rem}
.quote .who b{display:block;color:#fff;font-size:.95rem}
.quote .who span{font-size:.83rem;color:rgba(255,255,255,.6)}
.stars{color:var(--am);letter-spacing:2px;margin-bottom:14px;font-size:.95rem}

/* ==========================================================================
   Work / projects
   ========================================================================== */
.work-filter{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 38px}
.work-filter button,.pill{padding:9px 20px;border:0;border-radius:var(--r-full);background:transparent;
  font:700 .8rem var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  cursor:pointer;transition:all .22s}
.work-filter button:hover,.pill:hover{color:var(--navy);background:var(--line-2)}
.work-filter button.on,.pill.on{background:linear-gradient(120deg,var(--cy),var(--cy-2));color:#04323c;
  box-shadow:var(--sh-cy)}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:22px}
/* A project card is a photograph with a caption under it. When there is no
   photograph yet the panel says so rather than collapsing, so a half-filled
   showcase still looks deliberate. */
.proj{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);position:relative;
  transition:transform .3s var(--ease),box-shadow .3s}
.proj:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.proj .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--line-2)}
.proj .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.proj:hover .ph img{transform:scale(1.06)}
.proj .ph-empty{display:grid;place-items:center;
  background:linear-gradient(150deg,var(--navy-3),var(--navy))}
.proj .ph-empty span{color:rgba(255,255,255,.6);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase}
.proj .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px}
.proj .body h3{margin:0;font-size:1.02rem}
.proj .body p{margin:0;font-size:.89rem}
.proj .tag{position:absolute;top:14px;left:14px;z-index:1;background:rgba(11,31,56,.72);
  color:#fff;padding:4px 12px;border-radius:var(--r-full);
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;text-align:center}
.stat{padding:24px 14px;position:relative}
.stat svg{width:34px;height:34px;color:var(--cy);margin:0 auto 12px;display:block;
  transition:transform .35s var(--ease)}
/* Four identical cyan glyphs read as one thing repeated. A colour each and the
   strip reads as four separate facts. */
.stat:nth-child(1) svg{color:#4318ff}
.stat:nth-child(2) svg{color:var(--cy)}
.stat:nth-child(3) svg{color:#16a34a}
.stat:nth-child(4) svg{color:var(--am)}
.stat:hover svg{transform:translateY(-4px) scale(1.1)}
.stat b{display:block;font-family:var(--font-head);font-size:clamp(2rem,3.6vw,2.8rem);
  font-weight:700;color:var(--ink);line-height:1.05;letter-spacing:-.03em}
.stat span{display:block;font-size:.82rem;color:var(--ink-3);margin-top:6px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.bg-deep .stat b{color:#fff}
.bg-deep .stat span{color:rgba(255,255,255,.6)}

/* ==========================================================================
   Steps
   ========================================================================== */
.steps{position:relative;display:grid;gap:0;counter-reset:isfstep}
.steps::before{content:"";position:absolute;left:27px;top:20px;bottom:20px;width:2px;
  background:linear-gradient(var(--cy),var(--line));opacity:.4}
.step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:22px;padding:16px 0}
.step .num{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#fff;box-shadow:inset 0 0 0 2px var(--line);font-family:var(--font-head);
  font-weight:800;color:var(--ink-3);position:relative;z-index:1;transition:all .35s var(--ease)}
/* The numeral is drawn by CSS so the steps renumber themselves when ISF adds,
   removes or reorders one from the admin. */
.step{counter-increment:isfstep}
.step .num::before{content:counter(isfstep,decimal-leading-zero);font-size:1.05rem}
.step.in .num{background:linear-gradient(140deg,var(--cy),var(--cy-deep));color:#fff;
  box-shadow:var(--sh-cy)}
.step-b{padding-top:12px}
.step h3,.step h4{margin:0 0 5px;font-size:1.02rem}
.step p{margin:0;font-size:.94rem;max-width:70ch}

/* ==========================================================================
   Segments, trust, guarantee, tables, FAQ, gallery, notice, CTA
   ========================================================================== */
.segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.seg{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),box-shadow .3s;display:flex;flex-direction:column}
.seg:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.seg-ph{height:172px;background:linear-gradient(140deg,var(--cy),var(--cy-deep));position:relative;
  display:grid;place-items:center}
.seg-ph img{width:100%;height:100%;object-fit:cover}
.seg-ico{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff}
.seg-ico svg{width:27px;height:27px}
.seg-body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.seg-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cy-deep);margin-bottom:9px}
.seg-body h3{margin:0 0 9px}
.seg-note{font-size:.84rem;color:var(--ink-3);margin-top:auto;padding-top:14px}

.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.trust-i{display:flex;gap:13px;align-items:flex-start;padding:20px;border-radius:var(--r);
  background:#fff;box-shadow:var(--sh-sm);transition:transform .28s var(--ease)}
.trust-i:hover{transform:translateY(-4px)}
.trust-i svg{width:24px;height:24px;color:var(--cy);flex:none}
.trust-i b{display:block;font-size:.94rem;color:var(--ink);margin-bottom:3px}
.trust-i span{font-size:.85rem;color:var(--ink-3)}

.guar{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.guar-i{text-align:center;padding:30px 20px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-sm)}
.guar-ic{width:62px;height:62px;border-radius:20px;margin:0 auto 16px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--am-tint),#fff);color:var(--am-deep);
  box-shadow:inset 0 0 0 1px rgba(247,165,26,.24)}
.guar-ic svg{width:27px;height:27px}
.guar-v{font-family:var(--font-head);font-size:1.9rem;font-weight:700;color:var(--ink);line-height:1}
.guar-note{font-size:.86rem;color:var(--ink-3);margin-top:7px}

.table-simple{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-sm)}
.table-simple th,.table-simple td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line-2)}
.table-simple thead th{background:var(--navy);color:#fff;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700}
.table-simple tbody tr:last-child td{border-bottom:0}
.table-simple tbody tr:hover{background:var(--bg-soft)}

.faq{max-width:840px;margin:0 auto}
.faq-cat{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cy-deep);margin:34px 0 14px}
.faq details{background:#fff;border-radius:var(--r);margin:0 0 11px;box-shadow:var(--sh-sm);overflow:hidden}
.faq summary{padding:19px 54px 19px 22px;cursor:pointer;font-weight:700;color:var(--ink);
  font-size:.98rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:26px;width:9px;height:9px;
  border-right:2.5px solid var(--cy);border-bottom:2.5px solid var(--cy);
  transform:rotate(45deg);transition:transform .28s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 22px 20px;color:var(--ink-2);font-size:.94rem}

.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.gal img{border-radius:var(--r);box-shadow:var(--sh-sm);width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .4s var(--ease)}
.gal img:hover{transform:scale(1.03)}

.notice{background:var(--am-tint);border-left:4px solid var(--am);border-radius:var(--r);
  padding:24px 28px;font-size:.98rem}
.notice h3{margin:0 0 8px}

.cta-band{background:linear-gradient(120deg,var(--navy),var(--navy-3));border-radius:var(--r-lg);
  padding:52px 46px;color:#fff;display:flex;align-items:center;gap:34px;flex-wrap:wrap;
  position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;opacity:.3;
  background:radial-gradient(80% 140% at 88% 20%,rgba(33,184,212,.6),transparent 60%)}
.cta-band>*{position:relative}
.cta-band h2{color:#fff;margin:0 0 8px;flex:1;min-width:280px}
.cta-band p{color:rgba(255,255,255,.74);margin:0}

/* The 24/7 help band, where the numerals are the picture. */
.help-band{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:56px 46px;
  background:linear-gradient(120deg,var(--cy-deep),var(--cy));color:#fff;
  display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.help-big{position:absolute;right:-10px;top:50%;transform:translateY(-50%);
  font-family:var(--font-head);font-size:clamp(6rem,17vw,13rem);font-weight:800;line-height:1;
  color:rgba(255,255,255,.16);letter-spacing:-.04em;pointer-events:none;user-select:none;white-space:nowrap}
.help-band>div{position:relative;z-index:1;flex:1;min-width:260px}
.help-band h2{color:#fff;margin:0 0 6px}
.help-band p{color:rgba(255,255,255,.86);margin:0}

/* ==========================================================================
   Credentials strip
   ========================================================================== */
.logos{text-align:center}
.logos-lbl{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 26px}
.logos-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.cred{display:inline-flex;align-items:center;gap:11px;padding:14px 22px;border-radius:var(--r);
  background:#fff;box-shadow:var(--sh-sm);transition:transform .28s var(--ease),box-shadow .28s}
.cred:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.cred svg{width:22px;height:22px;color:var(--cy);flex:none}
.cred b{display:block;font-size:.88rem;color:var(--ink);line-height:1.25}
.cred span{font-size:.76rem;color:var(--ink-3)}
@media (max-width:640px){
  /* Content-width pills wrap into a ragged staircase on a narrow screen. One
     per row, all the same width, reads as a list of credentials instead. */
  .logos-row{display:grid;grid-template-columns:1fr;gap:10px}
  .cred{display:flex;text-align:left}
}
.logo-i{filter:grayscale(1);opacity:.5;transition:all .3s}
.logo-i:hover{filter:none;opacity:1}

/* ==========================================================================
   Guides / two-up
   ========================================================================== */
.two-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px}
.guide{display:grid;grid-template-columns:150px 1fr;background:#fff;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s}
.guide:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.guide-ph{background:linear-gradient(150deg,var(--cy),var(--cy-deep));display:grid;place-items:center;color:#fff}
.guide-ph svg{width:34px;height:34px}
.guide-ph img{width:100%;height:100%;object-fit:cover}
.guide-body{padding:24px 24px 22px}
.guide-body .meta{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cy-deep);margin-bottom:8px}
.guide-body h3{margin:0 0 8px;font-size:1.05rem}
.guide-body p{font-size:.9rem;margin:0 0 14px}

/* ==========================================================================
   Calculator strip, contact, misc page furniture
   ========================================================================== */
.calcstrip{background:linear-gradient(120deg,var(--navy),var(--navy-3));border-radius:var(--r-lg);
  padding:44px;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;
  position:relative;overflow:hidden}
.calcstrip::before{content:"";position:absolute;inset:0;opacity:.28;
  background:radial-gradient(70% 130% at 85% 30%,rgba(33,184,212,.7),transparent 62%)}
.cs-copy,.cs-form{position:relative}
.cs-copy h2{color:#fff;margin:0 0 10px}
.cs-copy p{color:rgba(255,255,255,.75)}
.cs-rs{display:flex;gap:26px;margin-top:22px}
.cs-rs b{display:block;font-family:var(--font-head);font-size:1.7rem;color:var(--cy-2);line-height:1}
.cs-rs span{font-size:.8rem;color:rgba(255,255,255,.6)}
/* The strip's own form. Two fields and a button, sized so the row does not
   collapse into a line of unstyled boxes on the navy panel. */
.cs-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-items:end}
.cs-f{display:block}
.cs-f > span{display:block;font-size:.78rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:7px}
.cs-f small{font-weight:600;letter-spacing:0;text-transform:none;opacity:.66}
.cs-in{display:flex;align-items:center;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);
  transition:border-color .25s,background .25s}
.cs-in:focus-within{background:rgba(255,255,255,.16);border-color:var(--cy-2)}
.cs-in i{font-style:normal;padding-left:14px;color:rgba(255,255,255,.66);font-size:1rem}
.cs-in input{flex:1;width:100%;min-width:0;background:transparent;border:0;outline:0;
  padding:13px 14px;color:#fff;font:inherit;font-size:1rem}
.cs-in-rs input{padding-left:8px}
.cs-in input::placeholder{color:rgba(255,255,255,.42)}
.cs-form button{grid-column:1/-1;justify-content:center;margin-top:4px}
@media (min-width:900px){
  .cs-form{grid-template-columns:1.15fr .85fr auto}
  .cs-form button{grid-column:auto;margin-top:0}
}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.result{background:#fff;border-radius:var(--r);padding:26px;box-shadow:var(--sh)}
.prog{height:8px;border-radius:var(--r-full);background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--cy),var(--cy-2));transition:width .9s var(--ease)}

.page-head{background:var(--navy);color:#fff;padding:62px 0 56px;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;opacity:.32;
  background:radial-gradient(70% 140% at 82% 20%,rgba(33,184,212,.6),transparent 62%)}
.page-head .wrap{position:relative}
.page-head h1{color:#fff;font-size:clamp(2rem,4vw,3rem);margin:8px 0 10px}
.page-head p{color:rgba(255,255,255,.75);max-width:58ch;margin:0}
.crumb{display:flex;align-items:center;gap:9px;font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:14px}
.crumb a{color:rgba(255,255,255,.82)}
.crumb svg{width:13px;height:13px;opacity:.6}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
/* A description list, so the label and the value stay tied together for a
   screen reader; laid out in two columns with a rule between the pairs. */
.deets{display:grid;grid-template-columns:auto 1fr;gap:0 22px;margin:26px 0 0}
.deets dt{grid-column:1;display:flex;align-items:center;gap:9px;padding:15px 0;
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;border-top:1px solid var(--line-2)}
.deets dd{grid-column:2;margin:0;padding:15px 0;font-size:.96rem;color:var(--ink);
  border-top:1px solid var(--line-2);align-self:center}
.deets dt:first-of-type,.deets dt:first-of-type + dd{border-top:0}
.deets svg{width:19px;height:19px;color:var(--cy);flex:none}
@media (max-width:520px){
  /* Two columns leave nothing for the value on a narrow screen. */
  .deets{grid-template-columns:1fr}
  .deets dt{grid-column:1;padding-bottom:2px}
  .deets dd{grid-column:1;padding-top:0;border-top:0}
  .deets dt:first-of-type + dd{border-top:0}
}
.prose{max-width:76ch}
.prose h3{margin:28px 0 10px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:7px}
.pill-row{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 34px}
.muted{color:var(--ink-3)}
.tag{display:inline-block;padding:5px 13px;border-radius:var(--r-full);background:var(--cy-tint);
  color:var(--cy-deep);font-size:.76rem;font-weight:700}
.thanks{text-align:center;padding:80px 0}
.tick-big{width:88px;height:88px;border-radius:50%;margin:0 auto 24px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--cy),var(--cy-deep));color:#fff;box-shadow:var(--sh-cy)}
.tick-big svg{width:40px;height:40px}
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.res-item{background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--sh-sm)}
.res-item small{display:block;font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.res-item b{font-family:var(--font-head);font-size:1.45rem;color:var(--ink);line-height:1.1}
/* The recommended size leads the result, so it gets the whole row and the colour. */
.res-hero{grid-column:1/-1;background:linear-gradient(130deg,var(--navy),var(--navy-3));
  color:#fff;padding:28px}
.res-hero small{color:rgba(255,255,255,.66)}
.res-hero b{color:#fff;font-size:2.4rem}

/* ==========================================================================
   Small shared utilities the page templates rely on
   ========================================================================== */
.grid{display:grid;gap:26px}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.center-row{justify-content:center}
/* Questions read better in one narrow column than across the full width. */
.faq-page{max-width:880px}
.lead{font-size:1.06rem;color:var(--ink-2);line-height:1.75}
.sub{font-size:.92rem;color:var(--ink-3);margin:0 0 20px}
.fine{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ink-3);margin:8px 0 0}
.fine svg{width:14px;height:14px;color:var(--cy);flex:none}
.visit-card{background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--sh-sm)}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:#fff;box-shadow:0 -6px 24px rgba(11,31,56,.14);padding:10px 14px;gap:10px}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:65;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 10px 26px rgba(37,211,102,.42);
  transition:transform .28s var(--ease)}
.wa-float:hover{transform:scale(1.08);color:#fff}
.wa-float svg{width:27px;height:27px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{background:var(--navy);color:rgba(255,255,255,.62);padding:70px 0 0;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:48px}
.foot-brand img{width:150px;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.94}
.foot-tag{color:rgba(255,255,255,.56);max-width:32ch;line-height:1.75}
.site-foot h4{color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 18px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:11px}
.site-foot a{color:rgba(255,255,255,.62)}
.site-foot a:hover{color:var(--cy-2)}
/* The footer columns are a list of plain links, not a ul — the menu they are
   built from is editable, so each one is laid out on its own line here rather
   than relying on markup the admin could change. */
.foot-grid > div > a{display:flex;align-items:center;gap:10px;margin-bottom:11px;line-height:1.5}
.foot-grid > div > a svg{width:16px;height:16px;color:var(--cy-2);flex:none;
  transition:transform .25s var(--ease)}
.foot-grid > div > a:hover svg{transform:translateX(3px)}
.addr{margin:0 0 18px;line-height:1.75;color:rgba(255,255,255,.56)}
.addr li{display:flex;gap:11px;margin-bottom:14px;line-height:1.6}
.addr svg{width:16px;height:16px;color:var(--cy-2);flex:none;margin-top:4px}
.foot-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:11px 15px;
  font-size:.8rem;margin-top:8px}
.foot-badge svg{width:17px;height:17px;color:var(--cy-2)}
.foot-bot{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.83rem;
  color:rgba(255,255,255,.44)}
.credit a{color:rgba(255,255,255,.6)}
.tw{display:flex;gap:9px}
.tw a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);transition:all .25s var(--ease)}
.tw a:hover{background:var(--cy);color:#04323c;transform:translateY(-3px)}
.tw svg{width:16px;height:16px}

/* ==========================================================================
   Motion
   ========================================================================== */
.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv-l{transform:translateX(-32px)}
.js .rv-r{transform:translateX(32px)}
.js .rv-z{transform:scale(.95)}
.rv.in{opacity:1 !important;transform:none !important}
/* Children arrive one after another, which reads as the page assembling itself. */
.js .cards.in > *,.js .stats.in > *,.js .segs.in > *,.js .pcards.in > *,
.js .trust.in > *,.js .guar.in > *,.js .two-up.in > *,.js .proj-grid.in > *,
.js .logos-row.in > *,.js .reason-col.in > *{
  animation:rise .62s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .cards.in > :nth-child(1),.js .stats.in > :nth-child(1){animation-delay:.02s}
.js .cards.in > :nth-child(2),.js .stats.in > :nth-child(2){animation-delay:.1s}
.js .cards.in > :nth-child(3),.js .stats.in > :nth-child(3){animation-delay:.18s}
.js .cards.in > :nth-child(4),.js .stats.in > :nth-child(4){animation-delay:.26s}
.js .cards.in > :nth-child(5){animation-delay:.34s}
.js .cards.in > :nth-child(6){animation-delay:.42s}
.js .segs.in > :nth-child(2),.js .pcards.in > :nth-child(2),
.js .two-up.in > :nth-child(2),.js .proj-grid.in > :nth-child(2){animation-delay:.1s}
.js .segs.in > :nth-child(3),.js .pcards.in > :nth-child(3),
.js .proj-grid.in > :nth-child(3){animation-delay:.2s}
.js .proj-grid.in > :nth-child(4){animation-delay:.28s}
.js .proj-grid.in > :nth-child(5){animation-delay:.36s}
.js .proj-grid.in > :nth-child(6){animation-delay:.44s}
.js .writein li{opacity:0;transform:translateX(-14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .writein.in li{opacity:1;transform:none}
.js .writein.in li:nth-child(2){transition-delay:.1s}
.js .writein.in li:nth-child(3){transition-delay:.2s}
.js .writein.in li:nth-child(4){transition-delay:.3s}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1050px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero{padding:56px 0 72px}
  .split,.contact-grid,.calcstrip{grid-template-columns:1fr;gap:34px}
  .split.flip .txt{order:0}
  .reason-grid{grid-template-columns:1fr;gap:32px}
  .phone{margin:0 auto;order:-1}
  .reason-col.right .reason{flex-direction:row;text-align:left}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}

/* Eight menu items plus a quote button need about 1150px of header. Below that
   the row runs off the right edge and takes the button with it, so the drawer
   starts here rather than at the usual tablet width. */
@media (max-width:1150px){
  .nav{position:fixed;inset:0 0 0 auto;width:min(84vw,330px);background:#fff;
    flex-direction:column;gap:4px;padding:88px 20px 24px;margin:0;
    box-shadow:-14px 0 40px rgba(11,31,56,.18);transform:translateX(100%);
    transition:transform .32s var(--ease);z-index:80;overflow-y:auto}
  .nav.open{transform:none}
  .nav a{padding:14px 16px;font-size:1rem;border-bottom:1px solid var(--line-2);border-radius:0}
  .nav a::after{display:none}
  .nav a.on{color:var(--cy-deep)}
  .burger{display:grid;place-items:center;position:relative;z-index:90}
  /* The quote button stays on the header down to phone width — it is the one
     thing on this page a visitor is most likely to be reaching for — but from
     here it shows only its icon, so it never crowds the burger. */
  .head-cta .btn span{display:none}
  .head-cta .btn{padding-left:13px;padding-right:13px}
  /* The menu has left the flex row for a fixed drawer, so it is no longer the
     thing pushing the buttons to the right edge. */
  .head-cta{margin-left:auto}
}

@media (max-width:900px){
  .head-cta .btn{display:none}
  .sec{padding:66px 0}
  .guide{grid-template-columns:1fr}
  .guide-ph{height:150px}
  .quote{padding-left:0;padding-top:44px}
  .quote::before{top:-14px;font-size:5rem}
}

@media (max-width:640px){
  body{font-size:15px}
  .sec{padding:52px 0}
  .sec-head{margin-bottom:34px}
  .wrap{padding:0 18px}
  .topbar{font-size:.72rem}
  .topbar .wrap{justify-content:center;gap:6px}
  .hero{padding:40px 0 56px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-points{grid-template-columns:1fr}
  .hero-foot{margin-top:30px}
  .scroll-cue{display:none}
  .cards,.segs,.pcards,.two-up{gap:18px}
  .card,.pcard{padding:26px 22px}
  .cta-band,.help-band,.calcstrip{padding:34px 24px;border-radius:var(--r)}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-bot{flex-direction:column;text-align:center;align-items:center}
  .mosaic{grid-template-columns:1fr 1fr;gap:10px}
  .mosaic-tile{min-height:126px}
  .stats{grid-template-columns:1fr 1fr;gap:8px}
  .stat{padding:16px 8px}
  /* A bar with the two things a visitor on a phone actually wants. */
  .sticky-cta{display:flex}
  body{padding-bottom:66px}
  .wa-float{bottom:76px}
  .btn{padding:14px 24px}
  .help-big{opacity:.5}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition-duration:.001ms !important}
  .js .rv,.js .writein li{opacity:1;transform:none}
}

/* ==========================================================================
   The blog

   A reading page, so the measure is narrow on purpose and the type is larger
   than the rest of the site. Everything else on this website is scanned; this
   is the one place somebody actually reads.
   ========================================================================== */
.wrap.narrow{max-width:760px}

.blog-back{margin:0 0 18px;font-size:.88rem}
.blog-back a{color:var(--ink-3);text-decoration:none}
.blog-back a:hover{color:var(--navy)}
.blog-h1{font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.18;margin:0 0 14px;letter-spacing:-.02em}
.blog-meta{color:var(--ink-3);font-size:.86rem;margin:0 0 28px}
.blog-cover{width:100%;height:auto;border-radius:16px;margin:0 0 32px;display:block}

.blog-body{font-size:1.06rem;line-height:1.8;color:var(--ink-2)}
.blog-body>*:first-child{margin-top:0}
.blog-body p{margin:0 0 1.25em}
.blog-body h2{font-size:1.5rem;line-height:1.3;margin:1.8em 0 .6em;color:var(--ink);letter-spacing:-.01em}
.blog-body h3{font-size:1.18rem;line-height:1.35;margin:1.6em 0 .5em;color:var(--ink)}
.blog-body ul,.blog-body ol{margin:0 0 1.25em;padding-left:1.5em}
.blog-body li{margin:.45em 0}
.blog-body a{color:var(--navy);text-underline-offset:3px}
.blog-body img{max-width:100%;height:auto;border-radius:12px;margin:1.4em 0}
.blog-body blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--navy);
                      font-style:italic;color:var(--ink)}
.blog-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.94rem}
.blog-body th,.blog-body td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.blog-body th{background:var(--bg-soft);font-weight:700}
.blog-body pre{overflow:auto;padding:14px;background:var(--bg-soft);border-radius:10px;font-size:.86rem}
.blog-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

.blog-tags{margin:32px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.blog-tags span{font-size:.76rem;padding:5px 12px;border-radius:999px;background:var(--bg-soft);
                color:var(--ink-3)}

.blog-cta{margin:48px 0 0;padding:32px;border-radius:16px;background:var(--bg-soft);text-align:center}
.blog-cta h3{margin:0 0 8px}
.blog-cta p{margin:0 0 18px;color:var(--ink-3)}

.blog-more-h{margin:56px 0 20px;font-size:1.15rem}

.blog-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}
.blog-topics a{font-size:.84rem;padding:8px 16px;border-radius:999px;text-decoration:none;
               border:1px solid var(--line);color:var(--ink-2);background:#fff}
.blog-topics a:hover{border-color:var(--navy);color:var(--navy)}
.blog-topics a.on{background:var(--navy);border-color:var(--navy);color:#fff}

.blog-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;
           border:1px solid var(--line);border-radius:16px;overflow:hidden;
           transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,31,56,.09);
                 border-color:transparent}
.bc-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft)}
.bc-img img{width:100%;height:100%;object-fit:cover;display:block}
.bc-body{display:flex;flex-direction:column;gap:8px;padding:20px}
.bc-meta{font-size:.74rem;color:var(--ink-3);letter-spacing:.02em}
.bc-body b{font-size:1.03rem;line-height:1.35;letter-spacing:-.01em}
.bc-ex{font-size:.88rem;line-height:1.6;color:var(--ink-3)}
.bc-read{font-size:.74rem;color:var(--ink-3);margin-top:auto;padding-top:4px}

.blog-pages{display:flex;gap:8px;justify-content:center;margin:44px 0 0}
.blog-pages a{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
              border-radius:10px;border:1px solid var(--line);text-decoration:none;color:var(--ink-2);
              font-size:.88rem}
.blog-pages a.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ==========================================================================
   Offers
   ========================================================================== */
.offer-strip{background:linear-gradient(100deg,#0b1f38,#123a6b);color:#fff;padding:0}
.offer-strip .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:14px;
                   padding-bottom:14px}
.offer-strip .ob{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
                 background:var(--am);color:#20160a;padding:4px 10px;border-radius:999px}
.offer-strip p{margin:0;font-size:.92rem}
.offer-strip .os-sub{opacity:.75;font-size:.84rem}
.offer-strip a{margin-left:auto;color:#fff;font-weight:600;font-size:.86rem;white-space:nowrap}

.offer-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.offer-card{border:1px solid var(--line);border-radius:16px;padding:26px;background:#fff;
            display:flex;flex-direction:column;gap:10px}
.offer-card .ob{align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.08em;
                text-transform:uppercase;background:var(--am);color:#20160a;
                padding:4px 11px;border-radius:999px}
.offer-card h3{margin:0;font-size:1.15rem;line-height:1.3}
.offer-card .osub{margin:0;color:var(--ink-3);font-size:.92rem}
.offer-card .obody{margin:0;font-size:.92rem;line-height:1.7;color:var(--ink-2)}
.offer-card .oterms{margin:0;font-size:.76rem;color:var(--ink-3);line-height:1.6}
.offer-card .ountil{font-size:.78rem;color:var(--navy);font-weight:600}
.offer-card .btn{margin-top:auto;align-self:flex-start}

/* ==========================================================================
   Campaign landing pages

   Deliberately stripped: one headline, one form, no menu to wander off into.
   Somebody arrived here from an advertisement and has one question.
   ========================================================================== */
.lp-top{background:#fff;border-bottom:1px solid var(--line);padding:14px 0}
.lp-top .wrap{display:flex;align-items:center;gap:14px}
.lp-top img{height:38px;width:auto}
.lp-top .lp-ph{margin-left:auto;font-weight:700;color:var(--navy);text-decoration:none;font-size:.94rem}
.lp-hero{padding:56px 0 64px;background:linear-gradient(160deg,#0b1f38,#143f74);color:#fff}
.lp-hero .wrap{display:grid;gap:44px;grid-template-columns:1.1fr .9fr;align-items:center}
.lp-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}
.lp-hero .lp-sub{font-size:1.05rem;line-height:1.65;opacity:.85;margin:0 0 24px}
.lp-bul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lp-bul li{display:flex;gap:11px;align-items:flex-start;font-size:.97rem;line-height:1.5}
.lp-bul svg{flex:0 0 20px;width:20px;height:20px;color:var(--am);margin-top:2px}
.lp-card{background:#fff;color:var(--ink);border-radius:18px;padding:28px;
         box-shadow:0 24px 60px rgba(0,0,0,.25)}
.lp-card h2{margin:0 0 6px;font-size:1.2rem}
.lp-card .lp-note{margin:0 0 18px;font-size:.86rem;color:var(--ink-3)}
.lp-offer{margin:0 0 18px;padding:12px 14px;border-radius:10px;background:var(--bg-soft);
          font-size:.88rem;line-height:1.55}
.lp-offer b{color:var(--navy)}
.lp-foot{padding:28px 0;text-align:center;font-size:.82rem;color:var(--ink-3)}
@media(max-width:860px){
  .lp-hero .wrap{grid-template-columns:1fr;gap:30px}
  .lp-hero{padding:40px 0 48px}
}

/* The tracking notice. Small, honest, and it does not cover the page. */
.tk-note{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:520px;margin:0 auto;
         background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;
         box-shadow:0 18px 44px rgba(11,31,56,.16);display:flex;gap:14px;align-items:center;
         flex-wrap:wrap;font-size:.86rem;line-height:1.5}
.tk-note p{margin:0;flex:1 1 240px;color:var(--ink-2)}
.tk-note .btn{flex:0 0 auto}

/* ==========================================================================
   English / Hindi switch

   A segmented control, the shape everybody already knows from a phone's
   settings: one track, the chosen side raised out of it. Small enough to sit
   in a header that already carries eight menu items and a button, and it says
   which language you are in rather than only offering the other one.
   ========================================================================== */
.lang{display:inline-flex;align-items:center;gap:3px;padding:3px;border-radius:999px;
      background:var(--bg-soft);border:1px solid var(--line);flex:0 0 auto;
      box-shadow:inset 0 1px 2px rgba(11,31,56,.04)}
.lang .globe{width:15px;height:15px;margin-left:7px;margin-right:1px;color:var(--ink-3);
             flex:0 0 auto}
.lang button{border:0;background:transparent;border-radius:999px;padding:6px 12px;cursor:pointer;
             font:700 .73rem/1 var(--font);letter-spacing:.02em;color:var(--ink-3);
             transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.lang button:hover{color:var(--navy)}
.lang button.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(11,31,56,.16)}
.lang button:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.lang.busy{opacity:.55;pointer-events:none}

.lang-warn{position:fixed;right:18px;top:74px;z-index:80;max-width:300px;background:#fff;
           border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:.82rem;
           line-height:1.55;color:var(--ink-2);box-shadow:var(--sh-lg)}

/* --------------------------------------------------------------------------
   Google's own furniture

   The widget inserts a grey bar across the top of the page and pushes the
   whole document down 40px to make room for it. That bar is a second, uglier
   language control sitting above ISF's header, and the shove is what makes the
   page jump when somebody switches. The switch in the header is the control -
   this removes the rest of it.

   Both the old class and the current generated one are listed, because Google
   renames these without notice and a site that only knows the old name breaks
   quietly one morning.
   -------------------------------------------------------------------------- */
iframe.skiptranslate,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none!important;visibility:hidden!important;height:0!important}
body{top:0!important;position:static!important}
/* The tooltip that follows the cursor over every translated phrase. */
#goog-gt-tt,.goog-te-balloon-frame,.VIpgJd-yAWNEb-L7lbkb{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important;border:0!important}
/* The widget's own hidden host. */
#gt,.goog-te-gadget{display:none!important}

@media(max-width:900px){
  .lang{order:3;padding:2px}
  .lang .globe{display:none}
  .lang button{padding:6px 9px;font-size:.7rem}
}

/* --------------------------------------------------------------------------
   The header in Hindi

   Hindi runs longer than English - "About" becomes "के बारे में" - and eight
   menu items that fit comfortably in English start wrapping onto three lines
   and tearing the header apart. Google marks the page with .translated-ltr, so
   the menu tightens up only when it is actually translated, and English is
   left exactly as it was.
   -------------------------------------------------------------------------- */
.translated-ltr .nav a{padding:10px 10px;font-size:.83rem}
.translated-ltr .brand span{font-size:.95rem}
.translated-ltr .brand small{font-size:.66rem}
@media(max-width:1280px){
  .translated-ltr .nav a{padding:10px 8px;font-size:.8rem}
  .translated-ltr .head-cta .btn{padding-left:14px;padding-right:14px;font-size:.78rem}
}